HTML第七次课堂笔记

一.盒子模型

一.标准盒模型：

内容区域：width宽度，height高度

内容溢出区域处理：overflow、overflow-x、overflow-y（visible 默认 溢出部分 可见、hidden 溢出部分 隐藏、scorll 显示滚动条、auto 浏览器自动处理）

二.内边距：padding

分为：padding-top 上内边距、padding-bottom 下内边距、padding-left 左内边距、padding-fight 右内边距

简写：1. padding：值；四个边的内边距一样、2.padding：值1 值2；值1是上、下内边距 值2是左、右内边距、3.padding：值1 值2 值3；值1是上内边距 值2是左、右内边距 值3是下内边4.padding：值1 值2 值3 值4；值1是上内边距 值2是右内边距 值3是下内边距 值4是左内边距
（上、右、下、左 顺时针方向）

 

 

三.边框：border

border-width（边框宽度）、border-color（边框颜色）、border-style（边框样式）

边框样式又分为（none 无边框、solid 实线、dashed 虚线、dotted 点状线、double 双实线）

边框还可以简写为:border：border-width值、border-style值、border-color值；（不分先后顺序）

 四.外边距 ：margin

外边距又分为：margin-top 上外边距、margin-bottom 下外边距、margin-left 左外边距、margin-right 右外边距，同上也可以简写为：（简写顺序也是上、右、下、左）

 

 四.其他

BFC:块级格式化上下文，可以理解为一种独立的渲染区域，当一个属性拥有了BFC之后其中的元素布局是不受外界的影响，并且在一个BFC中，块盒与行盒（行盒由一行中所有的内联元素所组成）都会垂直的沿着其父元素的边框排列。

如何创建他呢，我目前只知道一种：overflow的值只要不是visible就行

当没有BFC时，哪个属性值大就使用哪个

 

 ​​​​​​​

 

 

当其中一个有BFC时，会变成两个独立的盒子互不干涉：

 

 display：通过css可以修改属性的元素为：display:block、display:inline-block、display:inline

 ​​​​​​​