CSS盒模型

一，盒模型概念

盒模型是css中一个非常基础性的东西，任何一个元素它都能生成盒模型，那么盒模型具体长什么样子就取决于他的属性啦

在盒模型中，根据不同属性可以划分效果，具体有五个内容

宽度width、高度height、内边距padding、边框border、外边距margin。

书写元素区域为：width+height；

盒子它实际化的区域：width+height+padding+border；

盒子实际占位的位置：width+height+padding+border+margin；

二，盒模型内容

1，width

作用：设置可以添加元素内容的区域的宽度

value	说明
auto	默认值；浏览器可计算实际宽度
px	常用；用像素定义宽度
%	根据父级宽度width的百分比宽度

当给父盒子设置一个widht，子盒子设置百分比的宽度会根据父盒子的width去定义

特殊应用：如果一个元素不添加width属性，默认属性值为aoto，不同的浏览器会根据其特点自动计算出实际宽度；例如块级元素div独占一行其属性值会自动撑满父元素的width区域，如果是行内级元素span不需要独占一行其width属性值是内部元素自动撑开的宽度

其中body元素比较特殊，不需要设置width属性，其宽度会自适应浏览器窗口的宽度；

2, height

作用：设置可以添加元素内容的区域高度

value	说明
auto	默认值；浏览器可计算实际高度
px	常用；用像素定义高度
%	根据父级高度height的百分比高度

3，padding

作用：内边距padding设置元素边框内部到宽高区域之间的距离；

特点：可以添加背景不能书写内容，是复合属性；

padding是一个复合属性它可以单独给四个方向设置padding内边距也可以是单独上下方向或者左右方向

padding：10px；
padding：10px  20px； （前面是上下后面是左右）
padding：10px 20px 30px；  (上 左右 下)
padding：10px 10px 20px 20px；（上下左右）
padding-left：10px；
padding-right：10px；
padding-top：10px；
padding-bottom：10px；

padding为什么说是实体化区域是因为padding区域可以看出背景色等实际内容

4，border

作用：设置内边距外边的区域，作为盒子实体化最外层；它是复合属性可以单一设置边框定义不同内容

value：宽度颜色形状；

线宽border-width：10px 20px 30px 40px；可以上右下左设置不同线宽
线型border-style：solid（实线） dashed（虚线）none （无边框）
颜色border-color

5，margin

作用：设置盒子与盒子之间的距离；

特点：不能渲染背景；

value：常用px

外边距margin的设置方式与padding是一模一样的它也是复合属性；

三，盒模型拓展

1，清除默认样式/初始化

元素的属性都有这样或那样的一些默认样式，我们可以对其清除默认样式来达到我们想要的效果

* {
    margin: 0%;
    padding: 0%;

}
通配符选择所有，效率低小案例可以使用

body，div,h1,h2,h3,h4,h5,p,ul,ol,li {
    margin: 0%;
    padding: 0%;

}
针对性进行选择，效率高，推荐使用

ul ol有默认前缀 
清除方式：list-style：none；
list（列表） style（样式）

a标签有颜色和下划线默认样式
清除方式：text-decoration:none;

如果想对h1-h6，b，strong清除加粗；
清除方式：font-weight：normal；

同时我们可以对一些需要用的公共样式进行初始化，子元素就可以对其继承

body {
 color：#333；
 font-size：14px；
 font-famliy；Arial，"宋体"；
}

2，height应用

根据不同的需求height属性可以设置也可以不设置，如果设置了高度盒子就确定死了，后面的同级元素会紧挨着；如果不设置高度会根据标签内部内容高度自动撑开

固定高度

当我们给高度一个定值，其content溢出时，我们就可以用overflow这样的一个属性去定义选择什么样的方式去解决它

value	说明
visible	默认值；可见的
hidden	溢出部分隐藏；
scroll	可以拖动滚动条看溢出部分；无论有没有溢出一旦设置了水平垂直方向都会出现滚动条
auto	自动的；没溢出就正常显示溢出了就显示滚动条

不设置高度

在实际应用场景中，我们会遇到要求盒子高度必须自适应内容的高度；那么我们就可以不设置高度或者设置height：auto；去解决

3，居中

文本居中

设置文本水平居中；

单行和多行都可行text-align：centent；

设置文本垂直居中；

单行文本：设置line-height=盒子高度height；

多行文本：不要设置高度，让高度auto；再给文本上下设置一个相同的padding来达到视觉上文本垂直居中的效果；

元素居中

元素垂直居中

让父盒子的height自适应，再给父盒子设置一个上下一样的padding来达到视觉上的垂直居中效果；

元素水平居中

给子盒子设置一个margin：0px auto； 值得注意的是这个只对display：block；的元素起作用也就是块级元素

4，父子盒模型

父子盒模型中需要遵守这样一个规则，父元素width》=所有子元素width+padding+border+margin，如不满足该条件要么多余子元素掉下来不能在一排，要么溢出父元素；

特殊情况：盒模型自动内减当设置父子盒子时，不给子盒子宽度，子盒子会自动加载父级的width。且子元素设置了水平方向的padding，border，margin则不需要手动内减，子元素的width会自动收缩尺寸；

5，margin塌陷

概念：margin塌陷是在CSS的盒子模型中出现的一种现象，出现在父子级和兄弟级垂直方向的塌陷，例如当父元素包裹着一个子元素的时候，给子元素设置margin-top属性时，此时只是想让子元素的边框距离父元素边框有一段距离，而却出现了父元素的顶端距离body这个边框出现了位移，这就是margin塌陷的现象。

同级塌陷：

在垂直方向两个同级的盒子，给两个盒子一个设置100px的margin另一个盒子设置50px的margin，那么会出现怎么样的效果呢

从控制台中可以去看出两个盒子的margin值都有存在，但并非是margin100px+margin50px，而是出现了小margin被大margin吃掉的现象这就是同级别的margin塌陷啦

还有一点哦当上下两个margin值相等他们就margin就重合啦

解决margin塌陷的方法那么如果我们想要margin100+margin50=margin150的效果，我们可以给垂直方向任意一个盒子直接来一个margin上或者下=150px

父子级塌陷

当我们设置一个父盒子包含着一个小盒子，并且要让小盒子与父盒子有一个margin-top：20；的外边距距离

可以看出实际效果与我们想象中的有所出入，子盒子并不能往下走而它的margin却充当了父盒子的margin撑开了上面的盒子

值得注意的是如果给父子盒子都设置向上的margin谁的margin值大谁就会用它的margin去撑开上面的盒子margin小的呢就会被吃掉

要想解决这样一个问题呢我们可以给父盒子设置border或者padding来达到效果，可以理解为有实质性的东西挡住margin，margin就不会往外边跑啦

margin居然有这么多问题，那么我们在父子级盒子中就尽量别用margin去写边距，border也不太合理，那么我们可以直接把这个子盒子的向上20px margin写成父盒子的向上的20px padding来达到效果那么为了保持与原盒子大小一致我们可以把父盒子的hight -20px 就可以达到我们想要的效果啦

四，标准文档流

概念：标准文档流指的是元素排版布局的过程中，元素会默认从左到右从上往下的流体排列方式，前面的内容发生了变化，后面的内容位置也会随着发生改变； html就是一种标准文档流文件； html中的标准文档流特点通过两种方式体现：微观现象和元素等级；

微观现象

1，空白折叠现象； 2，文字类的元素如果排在一行会出现一种高低不齐，底部对齐的效果； 3，自动换行，元素内一行内容写满元素width时会自动进行换行；

元素等级

概念：在标准流中，大部分元素是区分的区分等级的，习惯将元素划分为几种常见的加载级别：块级元素，行内元素，行内块元素；

块级元素可以独占一行，并且可以设置宽高；

行内元素不独占一行，不可以设置宽高;但也有特例，像img、video、等是可替换元素就他就可以设置宽高；

行内块元素不独占一行，可以设置宽高；如果不设置宽高，要么以原始尺寸加载，要么被内容自动撑开；行内块依然具有标准流的微观性质，具有空白折叠现象；

display

显示模式display属性用于元素等级之间的互相转化

value	说明
block	以块级元素模式加载，具有块级元素特点
inline-block	以行内块元素模式加载，具有块级元素特点
inline	以行内元素模式加载，具有块级元素特点

需要我们注意是，他只是给他本赋予另一个等级元素的特点，本质上他还是原先的元素等级；例如给span一个display：block；他就可以像块级元素一样设置宽高且独占一行，但是他本质上还是行内级标签，他依然不可以包含块级标签，可以理解为只是给了他一个技能去使用；

五，标准盒模型和怪异盒模型

标准盒模型

标准盒模型就是W3C的标准盒子模型
内盒尺寸（大小）=width+padding+border
外盒尺寸（空间尺寸）= width+padding+border+margin

怪异盒模型

怪异盒模型就是IE盒模型
内盒尺寸（大小）=width 外盒尺寸（空间尺寸）= width+ margin

也就是说怪异盒模型的width就包含了padding、border、content，他的width就是我们实际设置的width值有其他东西的话会自动内减；

知识拓展：标准盒模型和怪异盒模型之间的转换：box-sizing : content-box/boeder-box/inherit ; 当为content-box时，将采取标准模式进行解析计算; 当为border-box时，将采取怪异模式解析计算; 当为inherit时，将从父元素来继承box-sizing属性的值;

css盒模型