文字相关的样式可以被继承【作用在父元素上面，子元素可以继承】 布局相关的样式不可以被继承【可以通过inherit值进行继承】 书写了相同样式时，后写的样式优先级较高 当内部样式和外部样式有相同的样式时，后写的样式优先级较高 style行间 > id > class > 标签 > * > 继承 通过权重来表示优先级：
style行间 权重 1000 id 权重 100 class 权重 10 标签 权重 1 content：物品 【width和height组成】 padding：填充物 【写两个值代表上下、左右，写四个值为上、右、下、左】 不能为负值 border：包装盒 margin：盒子与盒子之间的间距 【外边距，写两个值代表上下、左右，写四个值代表上、右、下、左】 可以为负值 注意：
背景色填充到除了margin以外所有的盒子区域 文字在content区域 box-sizing：
盒尺寸，可以改变盒子模型的展示形态 content-box：width、height是作用于content部分 border-box：width、height是作用于content、padding、border三部分 盒子模型的一些问题：
1、margin叠加问题，当上下盒子同时存在margin的时候，会取上下两个margin中较大的作为叠加的值。（解决方案：1.给一个margin取值，另一个不取。2.BFC规范） 2、margin传递问题，当两个盒子嵌套在一起的时候，内部盒子如果有margin-top，就会牵连外部盒子一起存在margin-top（解决方案：1.BFC规范，2.给父容器加边框，3.给父容器添加padding取代子容器的margin-top） 3、盒子模型添加到不同标签会有不同的问题，以上问题是盒子模型添加到div标签之后出现的问题。 盒模型拓展：
1.将margin-left设置为auto，则左边占据剩余部分全部，同理margin-right设置为auto，则右边占据剩余部分全部。如果两个都设置为auto，则盒子会居中。【注意，margin左右自适应可以，上下自适应不行】 2.在嵌套的两个盒子中，外部盒子设置宽高，内部盒子不设置width，内部盒子会自动根据所给的值填充整个外部盒子宽度范围，不需要计算，节省代码。 3.在行内定义一个区域，也就是一行内可以被划分成好几个区域，从而实现某种特定效果。本身没有任何属性。 <! DOCTYPE html > < htmllang = " en" > < head> < metacharset = " UTF-8" > < metahttp-equiv = " X-UA-Compatible" content = " IE=edge" > < metaname = " viewport" content = " width=device-width, initial-scale=1.0" > < title> </ title> < style>
#box1 { width : 350px; height : 350px; border : 1px black dashed;
padding : 27px; }
#box2 { border : 5px #d7effe solid; padding : 20px; }
#box3 { background-color : #ffa0df; padding : 41px; }
#box4 { border : 1px white dashed; padding : 3px; }
#box5 { border : 1px white dashed; padding : 49px; }
#box6 { width : 100px; height : 100px; background-color : #96ff38; border : #fcff00 5px solid; }
</ style> </ head> < body> < divid = " box1" > < divid = " box2" > < divid = " box3" > < divid = " box4" > < divid = " box5" > < divid = " box6" > </ div> </ div> </ div> </ div> </ div> </ div> </ body> </ html> 结果 问题：
通过padding的方式可以很简单做出以上盒子模型 通过margin的方式去做的话做到第三个盒子就会出现问题
