CSS第四节(1)
2017-02-27 本文已影响12人
下页luck
1、css标准流排版特点及流式布局
标准流式布局:从左到右 从上到下
2、css浮动的原理
浮动不影响标准流布局,影响文字排版
float:left;
3、css浮动的特性及高度塌陷原理
(1)浮动脱离标准流,不占位置,但会影响标准流,浮动只有左右浮动
(2)浮动元素A的位置和上一个元素(块级)有关系,如果上一个元素有浮动,则浮动的A元素的顶部会和上一个元素顶部对齐;如果上一个元素是标准流,则浮动的A元素的顶部就会和上一个元素的 底部对齐。
(3)父盒子里面的子盒子,如果有一个子盒子是浮动的,则其他字盒子都要浮动,这样才能一行对齐显示
(4)浮动元素如果没有设置宽高,元素会根据内容设置高度
子元素都浮动,父元素没有设置高度,父元素高度会出现塌陷,就是浮动的破坏性
4、css溢出处理和解决高度塌陷的方式
解决父元素塌陷:
overflow:hidden;/*超出的部分进行隐藏*/
选择器{overflow:属性值;}
visible 默认超出显示在下方
hidden 超出部分隐藏
scroll 左右 上下滚动条
auto 根据内容选择显示上下或者左右滚动条