页面布局三大核心(一)—盒子模型

页面布局三大核心(一)—盒子模型

HTML中的每一个元素都可以看作是一个盒子，如下图所示，可以具备这4个属性

1. content相关属性

• width：设置宽度
• min-width：设置最小宽度，无论内容有多少，宽度都>=min-width
• max-width：设置最大宽度,无论内容有多少，宽度都<=max-width
• height：设置高度
• min-height：设置最小高度,无论内容有多少，高度都>=min-width
• max-height：设置最大高度，无论内容有多少，高度都<=max-width

2. 内边距相关属性

• padding-top：上内边距

• padding-right：右内边距

• padding-bottom：下内边距

• padding-left：左内边距

• padding：缩写属性

注：如果盒子本身没有指定width/heigh属性，此时padding不会撑开盒子大小

3. 边框常用的属性

1. 边框宽度

   div {
   	border-width:5px;
   }
   

2. 边框颜色

   div {
   	border-color: pink;
   }
   

3. 边框样式

   div {
   	/*solid: 实线边框  dashed：虚线边框 dotted:点线边框*/
   	border-style:solid;
   }
   

4. 缩写属性border

   • 取三个值，对应宽度、颜色、样式(不区分顺序)，对四个方向统一设置

     div {
     	border:1px solid red;
     }
     

注：如果只想设置边框的边，可以用：border-top,border-bottom,border-right, border-left

5. 表格的细线边框

   border-collapse属性控制浏览器绘制表格边框的方式。它控制相邻单元单元格的边框

   语法：

   border-collapse: collapse;
   

   表示把相邻边框合并到一起。

4. 外边距相关属性

4.1 常用属性

• margin-top：上外边距
• margin-right：右外边距
• margin-bottom：下外边距
• margin-left：左外边距
• margin：缩写属性（用法与padding一样）

4.2 margin水平居中的应用

外边距可以让块级盒子水平居中，但是必须满足两个条件：

• 盒子必须指定了宽度（width）

• 盒子左右的外边距都设置为auto

  .header {
  	width:960px;
  	margin: 0 auto;
  }
  

• 行内元素和行内块级元素水平居中：给其父元素添加text-align: center即可

4.3 父元素塌陷问题

• margin-top传递：

问题描述：如果块级元素的顶部线和父元素的顶部线重叠，那么这个块级元素的margin-top的值会传递给父元素

问题解决：

1. 可以为父元素定义边框

2. 可以为父元素定义内边距

3. 可以为父元素添加overflow: hidden

   .father {
   	border: 1px solid transparent;
   或
   	padding: 1px;
   或
   	overflow: hidden;(常用)
   }
   

• margin-bottom传递：

​ 如果块级元素的底部线和父元素的底部线重叠，并且父元素的高度是auto,那么这个块级元素的margin-bottom值会传递给父元素

4. 上下margin折叠：

​ 垂直方向上相邻的2个margin(margin-top、margin-bottom)有可能合并为1个margin,这种现象叫做collapse(折叠)

5. 清除内外边距

网页元素很多都带有默认的内外边距，而且不同浏览器默认的也不一致。因此在布局前，首先要清除网页元素的内外边距。

* {
	padding: 0;
	margin: 0;
}

注：行内元素为了照顾兼容性，尽量只设置左右内外边距，不设置上下内外边距。但是转化为块级和行内块级就可以了。

5. box-shadow:设置盒子阴影

box-shadow属性可以设置一个或者多个阴影

• 每个阴影用<shadow>表示

• 多个阴影之间用逗号隔开，从前到后叠加

• 格 式：<shadow> = inset? && <length>{2,4} && <color>?

  解释：？表示可写0/1个值，{2,4}表示可写2-4个值

  1. 第1个<length>:水平方向的偏移，正数往右偏移

  2. 第2个<length>:垂直方向的偏移，正数往下偏移

  3. 第3个<length>:模糊半径(blur radius)

  4. 第4个<length>:延伸距离

  5. <color>:阴影的颜色，如果没有设置，就跟随color属性的颜色

  6. inset:外框阴影变成内框阴影