“在网页中一切皆是盒子”
盒子模型，也叫框模型
盒子的构成分成四部分
内容区content
内边距padding
边框border
外边距margin
“盒子的大小=内边距+内容区+边框”
边框
属性
border-width 边框的宽
border-color 边框的颜色
border-style 边框的样式
边框线的样式
none 默认定义无边框
solid 实线
dotted 虚线
dashed 点状虚线
double双线
内边距
元素的内边距在边框和内容区之间。控制该区域最简单的属性是 padding 属性。
padding-top 上内边距
padding-right 右内边距
padding-bottom 下内边距
padding-left 左内边距
外边距
margin-top 上外边距
margin-right 右外边距
margin-bottom 下外边距
margin-left 左外边距
auto自动 如果设置，它会显示最大 只能给水平进行设置
父子元素边距相连，则互相影响
浏览器默认样式
边距默认值：8px
如果不想有间隔，清除浏览器的默认样式margin和padding设为0.
内联元素的盒模型
内联元素不能设置宽和高的值
但可以设置水平的内边距
水平方向的外边距和宽高设置的值求和
display 和 visibility
display
可以转换
规定元素应该生成的框的类型。
none让元素不会被显示 但无站位
visibility
属性规定元素是否可见。
hidden让元素不可见 但有站位
子元素超过父元素的限制 就是溢出 overflow
规定当内容溢出元素框时发生的事情
scroll和auto两种设置滚动条的方法
但唯一的标准是智能的情况，没有内容scroll仍存在滚动条，而auto则没有。
文档流
网页是多层的
块元素只有在文档流中是可以设置宽和高
文档流指的是文档中可现实的对象在排列时所占用的位置。
将窗体自上而下分成一行行，并在每行中按从左至右的顺序排 放元素，即为文档流。
也就是说在文档流中元素默认会紧贴到上一个元素的右边，如 果右边不足以放下元素，元素则会另起一行，在新的一行中继 续从左至右摆放。
这样一来每一个块元素都会另起一行，那么我们如果想在文档 流中进行布局就会变得比较麻烦。
浮动
块在文档流里是浮动的
浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
由于浮所谓浮动指的是使元素脱离原来的文本流，在父元素中浮动起来。
浮动使用float属性。
可选值：
none：不浮动
left：向左浮动
right：向右浮动
块级元素和行内元素都可以浮动，当一个行内元素浮动以后将会自动变为一 个块级元素。
当一个块级元素浮动以后，宽度会默认被内容撑开，所以当漂浮一个块级元 素时我们都会为其指定一个宽度。
动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。
网友评论