2.14学习
文档流,浮动1,内联元素的盒子
文档流:
文档流处在网页的最底层,它表示的是一个页面中的位置
我们所创建的元素默认都处在文档流中
元素在文档流中的特点
块元素:块元素在文档流中独占一行,块元素会自上而下排列
块元素在文档流中是父元素100%
默认高度被子元素撑开
内联元素:内联元素在文档中只占自身的大小,会默认从左向右排列
如果一行中不足以容纳所有的元素,则换到一下行
内联元素的宽度和高度都被内容撑开
浮动:
如果希望块元素在页面中水平排列,可以使块元素脱离文档流
使用float使元素浮动,脱离文档流
可选值:none,默认值,在文档流中排列
left:元素脱离文档流向左浮动
right:元素脱离文档流向右浮动
设置一个非none的float值之后,元素会迅速脱离文档流,他下边的元素会立即向上移动,知道遇到父元素的边框或者其他的浮动元素
如果浮动元素上边是一个没有浮动的块元素,他不会超过块元素
浮动元素不会超过他上边的兄弟元素
内联元素的盒子模型
不能设置width和height
可以设置水平方向的内边距,也可以设置垂直方向的内边距,但是不会影响页面的布局
可以设置边框,但是也不影响布局
支持水平方向的外边距,水平方向的外边距不会重叠,会相加求和
不支持垂直方向的外边距
display:
通过display可以修改元素的类型
可选值:inline(可以将一个元素作为内联元素)
block(可以将一个元素设置为块元素)
inline-block(可以是一个元素既有行内元素的特点又有块元素的特点,既可以设置宽高,又不独占一行)
none:不显示元素,并且元素不会再页面中继续占有位置
visibility:
使用visibility:hidden隐藏的元素虽然不会在页面中显示但是位置一定会在
子元素默认是存在父元素的内容区中,理论上子元素的最大可以等于内容区大小
如果子元素超过了父元素的内容区,则超过的父元素以外的位置显示
则超出父元素的部分,成为溢出
父元素默认是将溢出内容,在外边显示
通过overflow可以设置父元素何如处理溢出内容
可选值 visible:默认值,不会对溢出内容做出任何处理
hidden:溢出的内容会被修剪,不会显示
scroll:会为父元素添加滚动条,通过滚动添加完整内容(该属性不论内容是否溢出,都会添加滚动条)
auto:会根据需求自动添加滚动条