前端大牛养成之路

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 根据内容选择显示上下或者左右滚动条

上一篇下一篇

猜你喜欢

热点阅读