css3入门(3)盒模型

盒模型

width

• 宽（内容的宽）
• 单位是px
• 当块级元素（div，h1，li等）等没有设置width属性时，将自动撑满

height

• 高（内容的高）
• 单位是px
• 如果height如果不设置，默认是0，但有内容的话会被自动撑开

padding

• 内边距
• padding是四个方向的，我们可以分别的设置
• 四个数值，上右下左
  padding：10px 20px 30px 40px
• 三个数值，上，左右，下
  padding：10px 20px 10px
• 两个数值，上下，左右
• 一个数值，全部
• 如果3个方向一样，一个不一样
  padding：20px；
  padding-top：10px；

border

边框

margin

• 外边距
• 竖直方向的margin会塌陷，以大的为主
• 设置上下左右时，和内边距一样

盒子的水平居中

• margin：0 auto；
• 和文本居中是两个概念
• 盒子的垂直居中在css（4）

盒模型计算

• 一个盒子的总面积等于
• 宽+padding+margin
• 高+padding+margin

box-sizing属性

将盒子加上box-sizing:border-box;

• padding和border会变成内缩，而不是外扩
• 一个盒子的宽高等于width和height
• 会大量用于移动端

行内元素和块级元素

• 块级元素可以设置宽高，上下排列，行内元素不能设置宽高，只能并排显示

行内块

• img
• 表单元素
• 他们可以并排名，也可以设置宽高

行内元素和块级元素的相互转换

• 使用display：block，转为块级元素
• 使用display：inline，转为行内元素（很少）
• 使用display：inline-block，转为行内块
  例如span这种行内元素，如果不转成行内块，直接padding，可能会压盖到上面的内容

元素的隐藏

display：none

元素将彻底放弃位置，和没有一样

visibility：hidden

元素不放弃自己位置，但是不显示

通配符选择器

在开始制作网页时，可以用
*{padding：0；
margin：0；
}