盒子模型（上）

2021-09-11

盒子模型的概念在网页中"一切皆盒子"。css处理网页时，它认为每个元素都包含在一个不可见的盒子里!
一个盒子有：内容区（content），内边距（paading），边框（border），外边距（margin）
1，内容区（content）

通过width和height两个属性可以设置内容区的大小

2,内边距（padding）

padding：上右下左；
在css中还有paading-top，padding-right，padding-left，padding-bottom分别用来指定四个方向的内边距

3，边框（border）

boeder：大小颜色边框样式；
也可使用border-top/left/right/bottom来分别指定四个方向的边框

4，外边距（margin）

用法和badding类似！
当将左右外边距设置为auto时，浏览器会将左右外边距设置为相等，margin:0 auto; 可以是元素居中。

display：修改元素的性质 【盒子模型（上）】可选值：

block：设置元素为块元素
inline：设为行内元素
inline-block: 设置为行内块元素
none：隐藏元素（元素将在页面中完全消失）

visibility:是否隐藏元素可选值：

visible:可见的
hidden：隐藏的

overflow：控制内容溢出的情况可选值：

visible: 默认值
scroll：添加滚动条
auto：根据需要添加滚动条
hidden：隐藏超出盒子的内容

文档流的概念：文档流指的是文档中可现实的对象在排列时所占用的位置。
浮动：float 指的是元素脱离文本流，在父元素中浮动起来可选值：

none：不浮动
left：向左浮动
right 向右浮动
当一个元素浮动以后将会自动变为一个块级元素，并且不能在改变！
浮动元素不会改变父元素的高度！

推荐阅读

上一篇：一个每天记录自己时间开销的“怪人”，他的奇特人生值得一读

下一篇：美食推荐——第四期