forked from theluyuan/Web
448 lines
8.5 KiB
Markdown
448 lines
8.5 KiB
Markdown
|
|
|||
|
|
|||
|
|
|||
|
## 盒子模型
|
|||
|
|
|||
|
|
|||
|
### 盒子中的区域
|
|||
|
|
|||
|
一个盒子中主要的属性就5个:width、height、padding、border、margin。如下:
|
|||
|
|
|||
|
- width:内容的宽度。CSS中 width 指的是内容的宽度,而不是盒子的宽度。
|
|||
|
- height:内容的高度。CSS中 height 指的是内容的高度,而不是盒子的高度。
|
|||
|
- padding:内边距。
|
|||
|
- border:边框。
|
|||
|
- margin:外边距。
|
|||
|
|
|||
|
盒子模型的示意图:
|
|||
|
|
|||
|
![](http://img.smyhvae.com/20170727_2128.png)
|
|||
|
|
|||
|
|
|||
|
|
|||
|
|
|||
|
代码演示:
|
|||
|
|
|||
|
![](http://img.smyhvae.com/20170727_2326.png)
|
|||
|
|
|||
|
|
|||
|
|
|||
|
上面这个盒子,width:200px; height:200px; 但是真实占有的宽高是302*302。 这是因为还要加上padding、border。注意:**宽度和真实占有宽度,不是一个概念!**
|
|||
|
|
|||
|
|
|||
|
### 认识width、height
|
|||
|
|
|||
|
|
|||
|
一定要知道,在前端开发工程师眼中,世界中的一切都是不同的。
|
|||
|
|
|||
|
比如说,丈量稿纸,前端开发工程师只会丈量内容宽度:
|
|||
|
|
|||
|
![](http://img.smyhvae.com/20170727_2329.png)
|
|||
|
|
|||
|
|
|||
|
|
|||
|
下面这两个盒子,真实占有宽高,都是302*302:
|
|||
|
|
|||
|
盒子1:
|
|||
|
|
|||
|
```css
|
|||
|
.box1{
|
|||
|
width: 100px;
|
|||
|
height: 100px;
|
|||
|
padding: 100px;
|
|||
|
border: 1px solid red;
|
|||
|
}
|
|||
|
```
|
|||
|
|
|||
|
盒子2:
|
|||
|
|
|||
|
```css
|
|||
|
.box2{
|
|||
|
width: 250px;
|
|||
|
height: 250px;
|
|||
|
padding: 25px;
|
|||
|
border: 1px solid red;
|
|||
|
}
|
|||
|
```
|
|||
|
|
|||
|
|
|||
|
|
|||
|
真实占有宽度 = 左border + 左padding + width + 右padding + 右border
|
|||
|
|
|||
|
上面这两个盒子的盒模型图如下:
|
|||
|
|
|||
|
![](http://img.smyhvae.com/20170728_0925.png)
|
|||
|
|
|||
|
|
|||
|
**如果想保持一个盒子的真实占有宽度不变,那么加width的时候就要减padding。加padding的时候就要减width**。因为盒子变胖了是灾难性的,这会把别的盒子挤下去。
|
|||
|
|
|||
|
PS:小技巧:在sublime text中,为了快速输入`border:1px solid red;`这个属性,可以直接输入`bd`,然后选第二个后回车。
|
|||
|
|
|||
|
|
|||
|
### 认识padding
|
|||
|
|
|||
|
|
|||
|
#### padding区域也有颜色
|
|||
|
|
|||
|
|
|||
|
padding就是内边距。padding的区域有背景颜色,css2.1前提下,并且背景颜色一定和内容区域的相同。也就是说,background-color将填充**所有boder以内的区域。**
|
|||
|
|
|||
|
效果如下:
|
|||
|
|
|||
|
![](http://img.smyhvae.com/20170728_1005.png)
|
|||
|
|
|||
|
|
|||
|
|
|||
|
#### padding有四个方向
|
|||
|
|
|||
|
padding是4个方向的,所以我们能够分别描述4个方向的padding。
|
|||
|
|
|||
|
方法有两种,第一种写小属性;第二种写综合属性,用空格隔开。
|
|||
|
|
|||
|
小属性的写法:
|
|||
|
|
|||
|
```
|
|||
|
padding-top: 30px;
|
|||
|
padding-right: 20px;
|
|||
|
padding-bottom: 40px;
|
|||
|
padding-left: 100px;
|
|||
|
```
|
|||
|
|
|||
|
|
|||
|
|
|||
|
综合属性的写法:(上、右、下、左)(用空格隔开)
|
|||
|
|
|||
|
|
|||
|
```
|
|||
|
padding:30px 20px 40px 100px;
|
|||
|
```
|
|||
|
|
|||
|
如果写了四个值,则顺序为:上、右、下、左。
|
|||
|
|
|||
|
如果只写了三个值,则顺序为:上、右、下。??和右一样。
|
|||
|
|
|||
|
如果只写了两个值,比如说:
|
|||
|
|
|||
|
```
|
|||
|
padding: 30px 40px;
|
|||
|
```
|
|||
|
|
|||
|
则顺序等价于:30px 40px 30px 40px;
|
|||
|
|
|||
|
|
|||
|
要懂得,**用小属性层叠大属性**。比如:
|
|||
|
|
|||
|
```
|
|||
|
padding: 20px;
|
|||
|
padding-left: 30px;
|
|||
|
```
|
|||
|
|
|||
|
上面的padding对应盒子模型为:
|
|||
|
|
|||
|
![](http://img.smyhvae.com/20170728_1039.png)
|
|||
|
|
|||
|
|
|||
|
下面的写法:
|
|||
|
|
|||
|
```
|
|||
|
padding-left: 30px;
|
|||
|
padding: 20px;
|
|||
|
```
|
|||
|
|
|||
|
第一行的小属性无效,因为被第二行的大属性层叠掉了。
|
|||
|
|
|||
|
|
|||
|
下面的题,会做了,说明你明白了。
|
|||
|
|
|||
|
#### 一些题目
|
|||
|
|
|||
|
**题目1:**说出下面盒子真实占有宽高,并画出盒模型图。
|
|||
|
|
|||
|
```css
|
|||
|
div{
|
|||
|
width: 200px;
|
|||
|
height: 200px;
|
|||
|
padding: 10px 20px 30px;
|
|||
|
padding-right: 40px;
|
|||
|
border: 1px solid #000;
|
|||
|
}
|
|||
|
```
|
|||
|
|
|||
|
|
|||
|
答案:
|
|||
|
|
|||
|
![](http://img.smyhvae.com/20170728_1048.png)
|
|||
|
|
|||
|
|
|||
|
|
|||
|
|
|||
|
**题目2:**说出下面盒子真实占有宽高,并画出盒模型图。
|
|||
|
|
|||
|
```css
|
|||
|
div{
|
|||
|
width: 200px;
|
|||
|
height: 200px;
|
|||
|
padding-left: 10px;
|
|||
|
padding-right: 20px;
|
|||
|
padding:40px 50px 60px;
|
|||
|
padding-bottom: 30px;
|
|||
|
border: 1px solid #000;
|
|||
|
}
|
|||
|
```
|
|||
|
|
|||
|
答案:
|
|||
|
|
|||
|
`padding-left:10px;` 和`padding-right:20px;` 没用,因为后面的padding大属性,层叠掉了他们。
|
|||
|
|
|||
|
盒子模型如下:
|
|||
|
|
|||
|
|
|||
|
![](http://img.smyhvae.com/20170728_1100.png)
|
|||
|
|
|||
|
|
|||
|
|
|||
|
**题目3:**现在给你一个盒子模型图,请写出代码,试着用最最简单的方法写。
|
|||
|
|
|||
|
![](http://img.smyhvae.com/20170728_1401.png)
|
|||
|
|
|||
|
|
|||
|
答案:
|
|||
|
|
|||
|
```
|
|||
|
width:123px;
|
|||
|
height:123px;
|
|||
|
padding:20px 40px;
|
|||
|
border:1px solid red;
|
|||
|
```
|
|||
|
|
|||
|
**题目4:**现在给你一个盒子模型图,请写出代码,试着用最最简单的方法写。
|
|||
|
|
|||
|
![](http://img.smyhvae.com/20170728_1402.png)
|
|||
|
|
|||
|
|
|||
|
答案:
|
|||
|
|
|||
|
```
|
|||
|
width:123px;
|
|||
|
height:123px;
|
|||
|
padding:20px;
|
|||
|
padding-right:40px;
|
|||
|
border:1px solid red;
|
|||
|
|
|||
|
```
|
|||
|
|
|||
|
|
|||
|
|
|||
|
#### 一些元素,默认带有padding
|
|||
|
|
|||
|
一些元素,默认带有`padding`,比如ul标签。如下:
|
|||
|
|
|||
|
![](http://img.smyhvae.com/20170728_1413.png)
|
|||
|
|
|||
|
|
|||
|
上图显示,不加任何样式的ul,也是有40px的padding-left。
|
|||
|
|
|||
|
所以,我们做站的时候,为了便于控制,总是喜欢清除这个默认的padding。
|
|||
|
|
|||
|
可以使用`*`进行清除:
|
|||
|
|
|||
|
```
|
|||
|
*{
|
|||
|
margin: 0;
|
|||
|
padding: 0;
|
|||
|
}
|
|||
|
```
|
|||
|
|
|||
|
|
|||
|
但是,`*`的效率不高,所以我们使用并集选择器,罗列所有的标签(不用背,有专业的清除默认样式的样式表,今后学习):
|
|||
|
|
|||
|
```
|
|||
|
body,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;
|
|||
|
}
|
|||
|
```
|
|||
|
|
|||
|
|
|||
|
|
|||
|
### 认识border
|
|||
|
|
|||
|
border就是边框。边框有三个要素:像素(粗细)、线型、颜色。
|
|||
|
|
|||
|
颜色如果不写,默认是黑色。另外两个属性不写,要命了,显示不出来边框。
|
|||
|
|
|||
|
#### border-style
|
|||
|
|
|||
|
border的所有的线型如下:(我们可以通过查看`CSS参考手册`得到)
|
|||
|
|
|||
|
![](http://img.smyhvae.com/20170728_1435.png)
|
|||
|
|
|||
|
|
|||
|
比如`border:10px ridge red;`这个属性,在chrome和firefox、IE中有细微差别:(因为可以显示出效果,因此并不是兼容性问题,只是有细微差别而已)
|
|||
|
|
|||
|
![](http://img.smyhvae.com/20170728_1619.png)
|
|||
|
|
|||
|
|
|||
|
|
|||
|
如果公司里面的设计师是处女座的,追求极高的**页面还原度**,那么不能使用css来制作边框。就要用到图片,就要切图了。
|
|||
|
|
|||
|
所以,比较稳定的border-style就几个:solid、dashed、dotted。
|
|||
|
|
|||
|
|
|||
|
|
|||
|
|
|||
|
|
|||
|
|
|||
|
#### border拆分
|
|||
|
|
|||
|
border是一个大综合属性。比如说:
|
|||
|
|
|||
|
```
|
|||
|
border:1px solid red;
|
|||
|
```
|
|||
|
|
|||
|
就是把4个边框,都设置为1px宽度、线型实线、red颜色。
|
|||
|
|
|||
|
border属性是能够被拆开的,有两大种拆开的方式:
|
|||
|
|
|||
|
- (1)按三要素拆开:border-width、border-style、border-color。(一个border属性是由三个小属性综合而成的)
|
|||
|
|
|||
|
- (2)按方向拆开:border-top、border-right、border-bottom、border-left。
|
|||
|
|
|||
|
现在我们明白了:**一个border属性,是由三个小属性综合而成的**。如果某一个小属性后面是空格隔开的多个值,那么就是上右下左的顺序。举例如下:
|
|||
|
|
|||
|
```
|
|||
|
border-width:10px 20px;
|
|||
|
border-style:solid dashed dotted;
|
|||
|
border-color:red green blue yellow;
|
|||
|
```
|
|||
|
|
|||
|
效果如下:
|
|||
|
|
|||
|
![](http://img.smyhvae.com/20170728_1516.png)
|
|||
|
|
|||
|
|
|||
|
|
|||
|
(1)按三要素拆:
|
|||
|
|
|||
|
```
|
|||
|
border-width:10px; //边框宽度
|
|||
|
border-style:solid; //线型
|
|||
|
border-color:red; //颜色。
|
|||
|
```
|
|||
|
|
|||
|
等价于:
|
|||
|
|
|||
|
```
|
|||
|
border:10px solid red;
|
|||
|
```
|
|||
|
|
|||
|
(2)按方向来拆:
|
|||
|
|
|||
|
```
|
|||
|
border-top:10px solid red;
|
|||
|
border-right:10px solid red;
|
|||
|
border-bottom:10px solid red;
|
|||
|
border-left:10px solid red;
|
|||
|
```
|
|||
|
|
|||
|
等价于:
|
|||
|
|
|||
|
```
|
|||
|
border:10px solid red;
|
|||
|
```
|
|||
|
|
|||
|
(3)按三要素和方向来拆:
|
|||
|
|
|||
|
> 就是把每个方向的,每个要素拆开。3*4 = 12
|
|||
|
|
|||
|
```
|
|||
|
border-top-width:10px;
|
|||
|
border-top-style:solid;
|
|||
|
border-top-color:red;
|
|||
|
border-right-width:10px;
|
|||
|
border-right-style:solid;
|
|||
|
border-right-color:red;
|
|||
|
border-bottom-width:10px;
|
|||
|
border-bottom-style:solid;
|
|||
|
border-bottom-color:red;
|
|||
|
border-left-width:10px;
|
|||
|
border-left-style:solid;
|
|||
|
border-left-color:red;
|
|||
|
```
|
|||
|
|
|||
|
|
|||
|
等价于:
|
|||
|
|
|||
|
```
|
|||
|
border:10px solid red;
|
|||
|
|
|||
|
```
|
|||
|
|
|||
|
|
|||
|
工作中到底用什么?很简答:什么简单用什么。举例如下:
|
|||
|
|
|||
|
![](http://img.smyhvae.com/20170728_1606.png)
|
|||
|
|
|||
|
|
|||
|
为了实现上方效果,写法如下:
|
|||
|
|
|||
|
```
|
|||
|
border:10px solid red;
|
|||
|
border-right-color:blue;
|
|||
|
```
|
|||
|
|
|||
|
![](http://img.smyhvae.com/20170728_1608.png)
|
|||
|
|
|||
|
|
|||
|
为了实现上方效果,写法如下:
|
|||
|
|
|||
|
```
|
|||
|
border:10px solid red;
|
|||
|
border-style:solid dashed;
|
|||
|
```
|
|||
|
|
|||
|
border可以没有:
|
|||
|
|
|||
|
```
|
|||
|
border:none;
|
|||
|
```
|
|||
|
|
|||
|
可以某一条边没有:
|
|||
|
|
|||
|
```
|
|||
|
border-left: none;
|
|||
|
```
|
|||
|
|
|||
|
也可以调整左边边框的宽度为0:
|
|||
|
|
|||
|
```
|
|||
|
border-left-width: 0;
|
|||
|
```
|
|||
|
|
|||
|
|
|||
|
#### 举例:利用border属性画一个三角形(小技巧)
|
|||
|
|
|||
|
步骤如下:
|
|||
|
|
|||
|
(1)当我们设置盒子的width和height为0时,此时效果如下:
|
|||
|
|
|||
|
![](http://img.smyhvae.com/20170728_1640.png)
|
|||
|
|
|||
|
|
|||
|
(2)然后将border的底部取消:
|
|||
|
|
|||
|
![](http://img.smyhvae.com/20170728_1645.png)
|
|||
|
|
|||
|
|
|||
|
(3)最后设置border的左边和右边为白色:
|
|||
|
|
|||
|
![](http://img.smyhvae.com/20170728_1649.png)
|
|||
|
|
|||
|
|
|||
|
这样,一个三角形就画好了。
|
|||
|
|
|||
|
|
|||
|
|
|||
|
|