CSS 布局基础

盒子模型

---

基础知识

• 页面布局的三大核心：盒子模型、浮动、定位
• 看透网页布局的本质：每个网页都是由许许多多的盒子组成的，网页元素都可以看作box，然后我们把内容装进盒子里面，再对盒子进行包装，设置它的摆放位置就可以了
• 盒子具有的基本属性：内外边距、content内容、边框boder

---

注意点

• 给盒子添加边框时，会额外的根据边框的大小增加实际盒子的大小
• padding 可以理解为为盒子添加内边距
• margin 可以理解为元素间的-间距-
• 和边框一样，padding也会影响盒子的实际大小，它并不会对内容造成挤压效果
• 假如盒子并未指定高或宽，则padding不会撑大高或宽
• 外边距可以让元素水平居中，但必须要有一个先决条件：盒子拥有指定宽度

塌陷

• 对于两个具有父子级/嵌套关系的块元素，如果父元素和子元素同时具有上外边距，此时父元素会塌陷较大的外边距值，谁的外边距值大，则塌陷谁的，这种情况无法避免,塌陷的实质是上边距的合并

塌陷的解决方案

• 为父元素定义一个上边框
• 为父元素定义一个上内边距
• 为父元素设置overflow:hidden

居中

• 行内、行内块元素内的内容可以靠给父元素设置text-align:center实现水平居中

清除内外边距

• 大部分的网页元素都有自己的内外边距，比如直接在body内放一串文字，直接浏览器打开后发现文字并非紧贴左边界和上边界，这就是元素自带的内外边距，这个边距的大小不同浏览器呈现出来的也不一样
• 清除所有元素的默认内外边距：

* {
   
    padding: 0;
    margin: 0;
}