html元素可以分为三种：行内元素（inline）、行内块元素（inline-block）和块元素（block）。
所谓标准文档流，指的是行内元素正常情况会在同一行显示（超出容器宽度自然换行），而每一个块元素独占一行，会自上而下排列。
而浮动和定位的共同表现是脱离标准文档流。
css浮动
css的浮动可以通过 float 属性进行设置，float 的常用属性值有：
1）left ：元素向左浮动
2）right ：元素向右浮动
3）none ：元素不浮动（默认值）
css元素的浮动需要注意的点：
1、无论元素先前是什么状态，浮动后都成为块级元素，浮动元素的宽度缺省为auto
2、浮动元素的外边缘不会超过其父元素的内边缘
3、如果一个浮动元素在另一个浮动元素之后显示，而且会超出容纳块（没有足够的空间），则会下降到低于先前任何浮动元素的位置，即换行显示
清除浮动的方法：
1、使用空标签：在最后的浮动元素添加一个空标签，使用 clear：both 样式清除
2、使用 overflow 属性：父元素添加 overflow:hidden 样式
3、使用 :after 伪元素
css定位
css的定位可以通过 position 属性进行设置，定位方式有：
1）static ：静态定位（默认定位方式）
2）relative ：相对定位，相对于其原文档流的位置进行定位
3）absolute ：绝对定位，相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块，即 body
4）fixed ：固定定位，相对于浏览器窗口进行定位
z-index 层叠等级属性：z-index 可以在定位属性为 relative 、absolute 、 fixed 的元素上设置屏幕的深度（层叠顺序），可以理解为 z-index 值越大的元素越靠近用户
网友评论