css学习3：浮动、定位、书写顺序

css学习3：浮动、定位、书写顺序

盒子模型、浮动、定位是css布局的三大难点

浮动

注：浮动元素默认之间是没有空隙的
一行装不下所有盒子，浮动元素会自动换行
实际重要的导航栏中，我们不会直接用链接a 而是用 li 包含链接(li+a)的做法。（1）li+a 语义更清晰，一看这就是有条理的列表型内容。（2）如果直接用a，搜索引擎容易辨别为有堆砌关键字嫌疑（故意堆砌关键字容易被搜索引擎有降权的风险），从而影响网站排名

1、定义：元素的浮动是指设置了浮动属性的元素会
（1） 脱离标准普通流的控制
（2）移动到指定位置。
2、作用
（1）让多个盒子(div)水平排列成一行，使得浮动成为布局的重要手段。
（2）可以实现盒子的左右对齐等等…
（3）浮动最早是用来控制图片，实现文字环绕图片的效果。
3、浮动口诀
（1）浮：漂浮在普通流后面，脱离标准流
（2）漏：浮动的盒子，把自己原来的位置漏给下面标准流的盒子，就是不占有原来位置
（3）特性 float属性会改变元素display属性：任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。 生成的块级框和我们前面的行内块极其相似，但浮动元素之间没有空隙。
4、浮动的扩展：
浮动只会影响当前的或者是后面的标准流盒子，不会影响前面的标准流。
（1） 浮动元素与父盒子的关系
1). 子盒子的浮动参照父盒子对齐
2). 不会与父盒子的边框重叠，也不会超过父盒子的内边距
（2）浮动元素与兄弟盒子的关系
在一个父级盒子中，如果前一个兄弟盒子是：
1). 浮动的，那么当前盒子会与前一个盒子的顶部对齐；
2). 普通流的，那么当前盒子会显示在前一个兄弟盒子的下方。
5、清除浮动
（1）本质：清除浮动主要为了解决父级元素因为子级浮动引起内部高度为0 的问题。清除浮动之后， 父级就会根据浮动的子盒子自动检测高度。父级有了高度，就不会影响下面的标准流了
（2）方法：
1）额外标签法：通过在最后一个浮动元素末尾添加一个空的标签例如

，或则其他标签br等亦可。css中代码为： .clear{clear:both;}
2)父级添加overflow属性方法：可以给父级添加： overflow为 hidden| auto| scroll 都可以实现。（缺点：不会自动换行，溢出会被隐藏）
3）使用after伪元素清除浮动：在父元素标签处添加一个二级class。:after 方式为空元素额外标签法的升级版，好处是不用单独加标签了。 . clearfix:after { content: ""; display: block; height: 0; clear: both; visibility: hidden; }
4）使用双伪元素浮动：

.clearfix:before,.clearfix:after {content:"";display:table; }
                                              .clearfix:after {clear:both;}

css书写顺序：

布局定位属性：display / position / float / clear / visibility / overflow（建议 display 第一个写，毕竟关系到模式）
自身属性：width / height / margin / padding / border / background
文本属性：color / font / text-decoration / text-align / vertical-align / white- space / break-word
其他属性（CSS3）：content / cursor / border-radius / box-shadow / text-shadow / background:linear-gradient …

定位：

1、什么是定位：将盒子定在某一个位置 自由的漂浮在其他盒子(包括标准流和浮动)的上面
2、三种布局机制的上下顺序：标准流在最底层 (海底) ------- 浮动 的盒子 在 中间层 (海面) ------- 定位的盒子 在 最上层 （天空）
3、定位模式
（1）静态定位static
（2）相对定位relative：占有位置
（3）绝对定位absolute：：不占位置
（4）固定定位fixed：只相对于浏览器定位，一直在页面显示
4、子绝父相：
父盒子采用相对定位，占用位置；
子盒子采用绝对定位，不占用位置，在父盒子中自由定位。
5、注：绝对定位的盒子，水平居中margin:auto无效
6、堆叠顺序z-index：【只应用于相对定位、绝对定位、固定定位的元素】
（1）没有确定z-index的多个定位的盒子堆叠顺序，后来者居上
（2）z-index:2; ｛取值为正整数、负整数和0，越大越在上｝
7、定位改变display属性
（1）行内块特点：不给width，默认宽度就是内容的宽度
（2）改变display属性方法：浮动、绝对定位、固定定位，可以转换为行内块
8、浮动、绝对定位、固定定位的元素都不会触发外边距合并的问题
9. 网页布局总结
一个完整的网页，有标准流 、 浮动 、 定位 一起完成布局的。每个都有自己的专门用法。
1). 标准流：可以让盒子上下排列 或者 左右排列的
2). 浮动：可以让多个块级元素一行显示 或者 左右对齐盒子 浮动的盒子就是按照顺序左右排列
3). 定位：定位最大的特点是有层叠的概念，就是可以让多个盒子 前后 叠压来显示。 但是每个盒子需要测量数值。