♣ css盒模型、居中

盒模型

盒模型整体感知

盒模型就是width、height、padding、border、margin外边距这么几个属性。

width：内容的宽度

height：内容的高度

padding：内边距

border: 边框

第一个案例：

1  <style type="text/css">

2  div{

3  width: 200px;

4  height: 200px;

5  background-color: yellow;

6  padding: 50px;

7  }

8  </style>

加上border：

1  div{

2  width: 200px;

3  height: 200px;

4  background-color: yellow;

5  padding: 50px;

6  border:50px solid pink;

7  }

一定一定要养成一个习惯，就是一个盒子的width属性，不是真实占有的宽度！！

真实占有的宽度 = width + 左边padding + 右边padding + 左边border宽度 + 右边的border宽度

padding

内容和边框之间的距离

1 padding:50px;

四个方向的padding就都设置为50了,如果想单独设置padding：

1 padding-top:10px;

2 padding-right:20px;

3 padding-bottom:30px;

4 padding-left:40px;

等价于：

1 padding:10px 20px 30px 40px;

顺序是上、右、下、左。如果写三个数值：

1 padding:10px 20px 30px;

此时相当于：

1 padding-top:10px;

2 padding-right:20px;

3 padding-bottom:30px;

4 padding-left:20px;  (和右一样)

如果写两个属性

1 padding:10px 20px;

等价于

5 padding-top:10px;

6 padding-right:20px;

7 padding-bottom:10px;(和上一样)

2 padding-left:20px;  (和右一样)

注意，一些元素默认带有padding：比如ul等等，为了防止这些默认的padding、margin影响我们制作页面，我们要在页面开头书写：

1  <style type="text/css">

2  *{

3  padding:0;

4  margin:0;

5  }

6  </style>

就能把所有标签的默认的padding、margin都去掉。

border边框

边框有三要素：粗细、线型、颜色。

1 border:1px solid red;

1px 就是边框的宽度， solid就是边框的线型 ， red就是边框的颜色。

线型：

使用solid（实线）和dashed（虚线），其他的所有的线型都有兼容性问题，如果想制作其他类型的边框，必须切图！

兼容性问题，IE浏览器中和Chrome浏览器中的边框，明显长得不一样。

注意，三要素分别对应了三个小属性：

1 border:10px solid red;

等价于

1 border-width:10px;

2 border-style:solid;

3 border-color:red;

我们称呼border为“复合属性”。特别的，如果我们想为某一个边，单独设置三要素，那么可以拆分为12个小属性：

1 border:10px solid red;

等价于：

1 border-top-width:10px;

2 border-top-style:solid;

3 border-top-color:red;

4 border-right-width:10px;

5 border-right-style:solid;

6 border-right-color:red;

7 border-bottom-width:10px;

8 border-bottom-style:solid;

9 border-bottom-color:red;

10 border-left-width:10px;

11 border-left-style:solid;

12 border-left-color:red;

更特别的，boder-color是可以按照上右下左的顺序书写：

1 border-color:red yellow green;

上边是红色， 左边、右边是黄色， 下边是绿色。

居中策略

文字水平居中

如果想让盒子中的文字水平居中，那么要给盒子设置

1 text-align:center;

这个属性继承。

它还有两个可能的值：

1 text-align:left;

2 text-align:right;

这个方法，只能居中文本流的东西（文字、图片、表单元素）。一定要记住，这个属性要设置给盒子，不能设置给这些文字、图片、表单元素。

盒子水平居中

让盒子设置：

1 margin:0 auto;

margin: 0 auto; 是给盒子用的，要加给盒子自己。它将在自己的父元素内部居中。

单行文本的垂直居中

1 line-height:盒子的高度;

行高=盒子高，  此时单行文本就将在盒子中居中。注意，这个方法只能适用于单行文本，多行不适用。