目录
一、水平布局：
过度约束：浏览器的一种渲染机制，一种规则
元素水平方向七个值：margin-left border-left padding-left width padding-rigt border-right margin-right相加，必须等于其父元素内容区的宽度，如果不相等，浏览器就会强制调整7个值中某些值（margin、width），实现全等。
浏览器如何调整呢？
满足以下条件：
七个值中，有margin-left width margin-right可以被设置为auto
1、如果这七个值里面没有设置为auto的，那么浏览器默认margin-right为auto，增加margin-right值使这七个值相加等于父元素内容区宽度。
2、如果给width（默认就是子元素内容区宽度）设置auto，由于它的优先级最高，不管其它值有没有设置auto，都是给它调整大小。
3、如果单独给margin-left或margin-right设置auto，那么设谁auto就改谁，都设auto就平分，使盒子居中。
二、垂直布局：
一般情况下，我们是不给外层框架，设置固定高度，让其被内容撑开，随着子元素的变化而变化
如果设置了高度，内容就可能会溢出，可以用overflow样式设置
可选值：
visible 文本正常显示，不生成滚动条
hidden 裁剪多余
scroll 生成两侧滚动条
auto 根据实际内容大小自动生成滚动条
有滚动效果，但不希望有滚动槽： scrollbar-width: none;
现在我在div里面加了个p，给div设置了宽高和背景色，文字就溢出了，会影响下面的盒子，这时候可以使用overflow：hidden；来裁剪多余
css
.box1 {
width: 200px;
height: 200px;
background-color: #bfa;
margin: 50px auto 0px;/*这里是上边距50px,左右自动使box1居中，底部为0 */
overflow: hidden;/*hidden属性值就是裁剪多余*/
/* 去除滚动槽 */
/* scrollbar-width: none; */
}
p {
/* width: 400px; */
height: 400px;
}
三、垂直外边距的重叠：
兄弟元素:
兄的下外边距和弟的上外边距重叠在一起了
1、如果都是正值，以较大的为准
2、如果都是负值，以绝对值较大的为准
3、如果一正一负，两者相加
兄弟元素的外边距，一般不需要做额外处理
父子元素
如果父子元素的垂直外边距相邻了，则子元素的外边距会传递给父元素,导致父元素位置发生改变
解决父子外边距重叠的问题
1、overflow：非visble默认值即可，
因为它开启了BFC（块级格式化），是标签的隐藏属性，会使这个标签
成为一个独立的区块，不受其他标签样式影响
2、设置透明的边框线，隔开父子元素
3、定义一个单独的类名，哪里需要，在哪里添加这个类名
css
.clearfix::before {
/* 增加空内容 */
content: "";
/* 将空内容转换类型为空表格 */
display: table;
}
四、内联元素（行内元素）的盒子：
内容区:不可以被设置大小，是被内容撑开
内边距/边框 ：可以设置，而且垂直方向不会挤其他元素，让其他元素位置发生变化，只会覆盖其他元素
外边距：水平方向可以设置，水平方向的外边距会叠加（设右外边距会动，不同于块元素没反应）
垂直方向设置不生效
五、默认样式：
浏览器为了在页面中没有样式时，也可以有一个比较好的显示效果，所以为很多的元素都设置了一些默认的margin和padding，而它的这些默认样式，正常情况下我们是不需要使用的。
所以我们往往在编写样式之前需要将浏览器中的默认的margin和padding统统的去掉
html
<head>
<!-- 重置样式表 -->
<link rel="stylesheet" href="./reset.css" />
<!-- 自己的样式 -->
<link rel="stylesheet" href="./index.css" />
</head>
注意：自己的样式要写在重置样式表下面，不然会被覆盖
面试题：目前常用的重置样式表有哪些？他们的区别是什么
reset.css/Normalize.css
都可以解决浏览器对默认样式的兼容性问题
reset.css解决方案是，将默认样式都去除掉，需要什么样式，程序员自己写
Normalize.css解决方案是：不去除默认样式，而是解决你不同浏览器对默认样式解析不一样的问题
六、盒子的大小：
默认情况下：盒子可见宽的大小由内容区，内边距，边框共同决定
box-sizing 用来设置盒子尺寸的计算方式 即width/height 指的是谁
可选值：
content-box 内容区 默认值
border-box 宽度和高度用来设置整个盒子可见框的大小，包括边框，padding，内容区
css
.box {
width: 100px;
height: 100px;
background-color: red;
border: 10px solid yellowgreen;
box-sizing: border-box;
/* 设置border-box后,上面的width和height就是我整个盒子的大小，即内容区加边框等于100 10+80+10 */
}