续......
=============================================================================================
浮动的样式和特性
浮动:就是使元素脱离文档流,按照一定的方式排列,遇到相邻的浮动元素或者父级的边界就停下来 浮动的特性
1.浮动的元素排在同一排
2.浮动的元素内容撑开宽度
3.浮动的元素支持所有css样式
4.浮动的元素脱离文档流
5.浮动的元素提升层级半级(属性盖住内容溢出,可做文字环绕div的效果) 注意:
1.overflow溢出 会重新计算元素的空间
:hidden 溢出隐藏
:auto 溢出出现滚动条
:scroll 出现滚动条 2.元素的居中
margin:0 auto; 3.元素的伪类
伪类:就是css一些元素身上的特殊属性
:hover 鼠标停留
:after 在元素内容之后插入一些内容 =============================================================================================
BFC的常见方法及优缺点
BFC 就是清浮动 就是用来处理浮动元素脱离文档流的问题 1.父级也浮动
弊端:左右的margin:0 auto会失效 2.给父级加display:inline-block;
弊端:左右的margin:0 auto;会失效(如果需要元素居中可以给父级加text-align:center) 3.给父级加行高
弊端:扩展性不好 4.br标签
换行 5.clear
clear元素的摸一方向不允许出现其他的浮动元素
clear:both (推荐) 6.伪类清浮动
:after{
content:"";
display:block;
clear:both;
}
=============================================================================================
定位的特性
定位:把一个元素按照一定的方式定到页面的磨一位置
position
相对定位 relative
针对自己本身的位置进行定位 绝对定位 absolute
针对有定位的父级的原点进行定位,如果父级没有定位,会找父级的父级身上。
以此类推,如果都没有,就会针对document进行定位。 注意:
绝对定位即使没有初始值,也要设置值(如: left: 0px; top:0px;) 固定定位 fixed
针对页面窗口进行定位 偏移量: left top right bottom (有优先级left,top>right,bottom) 相对定位 relative
1.不影响元素本身的特性
2.没有脱离文档流
3.提升层级
4.无法触发BFC
5.针对自己本身定位 绝对定位 absolute
1.脱离文档流
2.内容完全撑开高度和宽度
3.支持所有css样式
4.提升层级
z-index:数值; 定位层级设置
设置数值越大,层级越高
5.绝对定位要和相对定位配合使用
6.自己有浮动,可以省略清浮动操作 固定定位 fixed
1.不兼容ie6
2.针对窗口进行定位
3.如固定定位的子级也有浮动,可以省略清浮动的操作
总结
  到此为止,html/css的基础知识大概的过了一遍。还有一些细枝末节,就需要在实践中慢慢学习。

HTML/CSS学习(二)的更多相关文章

  1. CSS学习(二)

    display :   block    inline-block    inline block此元素将显示为块级元素,此元素前后会带有换行符. inline默认.此元素会被显示为内联元素,元素前后 ...

  2. html&css学习二

    表格&b标签 表格 表格标签主要包含三个标签 <table> <tr> <td>单元格内的文字</td> ... </tr> ... ...

  3. css学习归纳总结(二) 转

    原文地址:css学习归纳总结(二) 标签与元素 <p>标签和p元素有什么区别呢?大多数时候他们表示的是同一样东西,但仍有细微的区别.<p>.<div>等指的是HTM ...

  4. css学习归纳总结(三) 转

    原文地址:css学习归纳总结(三) 为文档添加样式的三种方法 行内样式 行内样式是写在HTML标签的style属性里的,比如: <p style="font-size: 12px;fo ...

  5. css学习归纳总结

    来源于:trigkit4 css学习归纳总结(一) 选择器的分组 CSS选择器分为 1.群组选择器 如:p, body, img, div{} 2.兄弟选择器 如:p + p { color:#f00 ...

  6. ReactJS入门学习二

    ReactJS入门学习二 阅读目录 React的背景和基本原理 理解React.render() 什么是JSX? 为什么要使用JSX? JSX的语法 如何在JSX中如何使用事件 如何在JSX中如何使用 ...

  7. TweenMax动画库学习(二)

    目录            TweenMax动画库学习(一)            TweenMax动画库学习(二)            TweenMax动画库学习(三)            Tw ...

  8. 说说CSS学习中的瓶颈

    虽已数年,但未就学习专门写过文章,这回破处了.苍蝇不叮没有缝隙的鸡蛋,领导不做没有跟拍的表演,同样,想到写CSS学习的文章也是有原因的(虽然我的不少行为没有原因). 情景再现(尊重隐私,下面故事中人名 ...

  9. css学习笔记四

    广州天气变冷了,css学习笔记还是要总结. 总结: 1:几米页面静态页面主要是一列结构头部banner图,mainbody部分放文字内容和图书图片,底部是页面的版权信息 2:腾讯软件中心静态页面制作( ...

随机推荐

  1. javascript之快速排序

    快速排序思想其实还是挺简单的,分三步走: 1.在数组中找到基准点,其他数与之比较. 2.建立两个数组,小于基准点的数存储在左边数组,大于基准点的数存储在右边数组. 3.拼接数组,然后左边数组与右边数组 ...

  2. Note of The Linux Command Line

    心得 在用鼠标点击的图形化桌面之前,单纯用键盘操作软件的时代已经很成熟了.并且还在这样延续下去.鼠标不是电脑操作的唯一模式,至少不是程序员的. 在黑色屏幕下,因为没有鼠标所以只能用按键来操作软件.包括 ...

  3. python socket 编程简单入门

    想讲讲套接字的概念 套接字,即英文socket的中文意译,起源于20世纪70年代,是加利福利亚大学的伯克利版本UNIX(称为BSD UNIX)的一部分.目的是实现主机上运行的一个程序与另一个运行的程序 ...

  4. (转)Python3.5 queue模块详解

    原文:https://www.cnblogs.com/CongZhang/p/5274486.html queue介绍 queue是python中的标准库,俗称队列,可以直接import 引用,在py ...

  5. 面试基础知识集合(python、计算机网络、操作系统、数据结构、数据库等杂记)

    python python _.__.__xx__之间的差别 python中range.xrange和randrange的区别 python中 =.copy.deepcopy的差别 python 继承 ...

  6. ring3下的IAT HOOK

    标 题: [原创]ring3下的IAT HOOK作 者: hostzhen时 间: 2013-03-28,11:30:53链 接: http://bbs.pediy.com/showthread.ph ...

  7. JavaScript -- Math

    ----- 016-Math.html ----- <!DOCTYPE html> <html> <head> <meta http-equiv=" ...

  8. 第三方登录:QQ登录实现(OAuth2.0)

    一.创建应用 1.在 QQ互联 创建应用 地址:https://connect.qq.com/manage.html#/ 然后进行实名认证,创建应用,审核通过 然后点击查看,可以获得 APP ID 和 ...

  9. MySQL 5.7 新备份工具mysqlpump 使用说明 - 运维小结

    之前详细介绍了Mysqldump备份工具使用,下面说下MySQL5.7之后新添加的备份工具mysqlpump.mysqlpump是mysqldump的一个衍生,mysqldump备份功能这里就不多说了 ...

  10. nodejs项目总结

    前几天花了3天时间,搭建.开发了一个包含客户端.cms.server端的项目,也因着以前有php的开发经验,以及sql的设计和应用能力,倒也没遇到什么阻碍.至于项目结构搭建(架构),也是共通的,以模块 ...