CSS盒模型

CSS盒模型

1.内边距
内边距的长度要计算在元素的长度里面

2.外边距
外边距的长度不计算在元素的长度里面

3.关于内容的溢出
对于溢出
可以使用overflow属性来控制显示的效果
可选的参数有4个:auto hidden scroll visible 
visible默认值 溢出依然显示
auto 由浏览器自行判断 有溢出则出现滚动条 没有则不出现滚动条
hidden 如果有溢出的部分 则隐藏溢出的部分
scroll 不管有没有溢出则都显示滚动条

4.元素的可见性
visibility 
可选的参数有3个 visible(默认) hidden collapse
visible 元素的默认状态 可见
hidden 元素不可见 但仍然占据位置(注意与display:none;的区别,display:none;将不会保留元素占据的位置)
collapse 元素不可见 只能用于表格的行与列 如果用在其他元素上则和hidden的效果一样

5.盒模型的类型
主要用到的有4种类型:行内元素,块元素,行内-块元素,隐藏元素.
使用display属性来控制盒子的类型
①block
特点:能够设置盒子的尺寸大小,隔离其他元素功能(其他元素会另起一行)
②inline
特点:不能设置盒子的尺寸大小(大小只能自适应),不能隔离其他元素(其他元素会紧跟在它的后面)
③inline-block
特点:能够设置盒子的尺寸大小,不能隔离其他元素(其他元素会紧跟在它的后面,典型的如img元素)

6.浮动
需要注意的几点
貌似块级元素与行内元素经过浮动之后都变成了行内-块元素,虽然在f12中看不出来.
但是明显能感觉到(比如span浮动之后可以设置宽高了)