CSS布局-盒子模型

盒子结构：

外边距 + 边框 + 内边距 + 内容
maigin + border + padding + width

区分三个概念：

• 内容宽高：width/height

• 元素宽高：边框 + 内边距 + 内容

• 元素空间宽高：外边距 + 元素宽高

属性：box-sizing 有两个取值：

• 1.content-box 默认元素的宽高 == 边框 + 内边距 + 内容

• 2.border-box 元素的宽高 == 内容的宽高

嵌套关系的视图，内部视图要居中处理：

• 1.如果两个盒子是嵌套关系, 那么设置了里面一个盒子顶部的外边距, 外面一个盒子也会被顶下来

• 2.如果外面的盒子不想被一起定下来,那么可以给外面的盒子添加一个边框属性

• 3.在企业开发中, 一般情况下如果需要控制嵌套关系盒子之间的距离, 应该首先考虑padding, 其次再考虑margin。 margin本质上是用于控制兄弟关系之间的间隙的

auto 注意点:

• 1.在嵌套关系的盒子中, 我们可以利用margin: 0 auto;的方式来让里面的盒子在外面的盒子中水平居中

• 2.margin: 0 auto; 只对水平方向有效, 对垂直方向无效。要控制垂直方向，只能通过像素。【EX：margin:150px auto;】

区分作用：text-align 和 margin: 0 auto;

text-align: center;作用: 设置盒子中存储的文字/图片水平居中
margin:0 auto;作用: 让盒子自己水平居中

清空默认边距

• 1.为什么要清空默认边距(外边距和内边距)
  在企业开发中为了更好的控制盒子的宽高和计算盒子的宽高等等, 所以在企业开发中, 编写代码之前第一件事情就是清空默认的边距

• 2.如何清空默认的边距
  格式

*{            margin: 0;            padding: 0;
}

• 3.注意点
  通配符选择器会找导(遍历)当前界面中所有的标签, 所以性能不好
  企业开发中可以从这个网址中拷贝
  http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css

div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{    margin:0;    padding:0}

设置行高

• 1.什么是行高?
  在CSS中所有的行都有自己的行高

• 注意点:
  行高和盒子高不是同一个概念
  行高指的是每行内容的高度
  盒子高指的是元素的高度

规律:

• 1.文字在行高中默认是垂直居中的

• 2.在企业开发中我们经常将盒子的高度和行高设置为一样, 那么这样就可以保证一行文字在盒子的高度中是垂直居中的
  简而言之就是: 要想一行文字在盒子中垂直居中, 那么只需要设置这行文字的"行高等于盒子的高"即可

• 3.在企业开发中如果一个盒子中有多行文字, 那么我们就不能使用设置行高等于盒子高来实现让文字垂直居中, 只能通过设置padding来让文字居中

还原字体和字号

注意点:

• 1.在企业开发中, 如果一个盒子中存储的是文字, 那么一般情况下我们会以盒子左边的内边距为基准, 不会以右边的内边距为基准, 因为这个右边的内边距有误差

• 2.右边内边距的误差从何而来? 因为右边如果放不下一个文字, 那么文字就会换行显示, 所以文字和内边距之间的距离就有了误差

• 3.顶部的内边距并不是边框到文字顶部的距离, 而是边框到行高顶部的距离

作者：叶子扬
链接：https://www.jianshu.com/p/cdcb664d77c8