盒模型随笔

只要添加了一个元素
这个元素就会在页面中生成一个盒子

不同的元素产生的盒子类型可能不同
一个元素，产生什么样的盒子，取决于它CSS的display属性

属性：diaplay
是否能继承：否
默认值：inline

display:none     不生成盒子(有盒子位置但页面不显示盒子)
display:inline    行盒
display:block     块盒（划分区域的都是块盒）
display:其他取值   其他盒子

对元素设置的宽度和高度
是对content设置的尺寸 
width:200px;
height:200px;

盒子的组成：
margin  外边距  与其他盒子之间的距离
border  边框
padding  内边距   边框与内容之间的距离
content  内容（到页面的内容）    内容的宽度和高度

padding：内边距

取一个值：上下左右

去两个：上下，，左右

取三个值：上，，左右，，下 

取四个值: 上 ，，右，，下，，左（顺时针方向）

margin：内边距（负值）

取一个值：上下左右

取两个值：上下，，左右

取三个值：上，，左右，，下 

取四个值: 上 ，，右，，下，，左（顺时针方向）

注：每个值之间的分隔符是空格*/

注：每个值之间的分隔符是空格*/

border/outline:

border可以省略的值border:3px solid green;可以设置某一条边的样式

    1：厚度：默认3px （为了能够展示双实线）

    2: 颜色：默认当前标签文本的颜色

outline在页面中不占用像素
并且无法进行单独某一条边的样式

其他适用场景：input,a去除焦点框

圆角边框：

border-radius:A/B;

A是X轴半径

    B是Y轴的半径

 

盒子阴影 

    取值：

    第1个值：X轴的偏移量(宽){正：向右；负：向左}

    第2个值：Y轴的偏移量(高){正：向下；负：向上}

    第3个值：模糊值

    第4个值：阴影扩散的范围（可选，一般不写）

    第5个值：颜色

    box-shadow:2px 4px 8px 12px red; 

 

 

 

 

子盒子
边框盒：（border-box）:border,padding,content组成
填充盒：（padding-box）:padding,content组成
内容盒：（content-box）:由content组成

border-box
检查器中，鼠标移到某个标签，
页面显示的是该标签边框盒的尺寸。

背景色的默认渲染区，就是边框盒。

 

border-sizing:
取值：border-box;设置的宽高是边框盒的尺寸
           content-box;设置的宽高是内容盒的尺寸

background-clip: 

取值：
border-box;默认值
padding-box;只显示一半
content-box;只显示content区域
背景色和背景图位置不发生变化（当前标签左上角）
会剪切掉border和padding区域的内容
即在页面上只显示content区域的内容

background-origin背景图的起始位置
取值：
border-box；默认值是边框盒的左上角
padding-box;填充盒的左上角
content-box;内容盒的左上角

 

盒模型中的尺寸：
margin:px、em、rem、%、auto

border:px、em、rem

padding:px、em、rem、%

width:px、em、rem、%、auto

margin:px、em、rem、%、auto

height:px、em、rem、%、auto

px、em:取设置的值
%：根据包含块的尺寸计算
    尺寸是包含块尺寸的百分比
    margin、padding、width的百分比：是包含块宽度的额百分比
auto:按照不同定位体系的规则计算
em:当前标签字体大小的倍数

盒模型中的尺寸：auto
尺寸受到定位体系的影响

px     固定尺寸，相对尺寸
em     当前标签字体大小的倍数
rem    基于html的相对尺寸
%      当前包含块宽度尺寸的百分比

 

盒模型中的auto值
1：水平方向
   常规流盒子水平方向上的尺寸，必须等于包含块的宽度
   如果不行，则强行将margin-right设置为auto

2:垂直方向
    margin为auto:0px
    height为auto:适应内容的高度

大部分情况下,盒子中的auto值计算规则和浮动盒子相同
      属性                     绝对定位
margin-left:auto             0px
margin-right:auto           0px
margin-top:auto             0px
margin-bottom:auto       0px
width:auto              适应内容宽度
height:auto             适应内容高度

 

外边距合并触发场景：
1，两个挨着的兄弟元素
2，父子级元素

垂直方向外边距合并的规则：
1：如果两个都是正值，取最大值
1：如果两个都是负值，取最小值
1：如果是一正、一负，则进行相加

 

margin和padding什么时候用：

单个盒子
内容与边框之间的距离：padding
边框以外的距离：margin

多个盒子
内容（子）与边框（父）之间的距离：margin

 

 

overflow:hidden截取区域从填充盒（padding）开始

背景色的渲染区域从border开始