modify
This commit is contained in:
parent
9478fa87ff
commit
677e0054fc
@ -977,7 +977,7 @@ div p h1 span a img ul ol dl input
|
|||||||
知道每个标签的特殊用法、属性。比如a标签,img的属性。
|
知道每个标签的特殊用法、属性。比如a标签,img的属性。
|
||||||
|
|
||||||
|
|
||||||
##我的公众号
|
## 我的公众号
|
||||||
|
|
||||||
下图是我的微信公众号(生命团队id:`vitateam`),欢迎有心人关注。<font color=#0000ff>**博客园分享技术,公众号分享心智**</font>。
|
下图是我的微信公众号(生命团队id:`vitateam`),欢迎有心人关注。<font color=#0000ff>**博客园分享技术,公众号分享心智**</font>。
|
||||||
|
|
||||||
|
@ -1,5 +1,6 @@
|
|||||||
|
|
||||||
|
|
||||||
|
> 本文最初发表于[博客园](http://www.cnblogs.com/smyhvae/p/7256371.html),并在[GitHub](https://github.com/smyhvae/Web)上持续更新。以下是正文。
|
||||||
|
|
||||||
## 盒子模型
|
## 盒子模型
|
||||||
|
|
||||||
@ -43,16 +44,16 @@
|
|||||||
|
|
||||||
下面这两个盒子,真实占有宽高,都是302*302:
|
下面这两个盒子,真实占有宽高,都是302*302:
|
||||||
|
|
||||||
盒子1:
|
盒子1:
|
||||||
|
|
||||||
```css
|
```css
|
||||||
.box1{
|
.box1{
|
||||||
width: 100px;
|
width: 100px;
|
||||||
height: 100px;
|
height: 100px;
|
||||||
padding: 100px;
|
padding: 100px;
|
||||||
border: 1px solid red;
|
border: 1px solid red;
|
||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
盒子2:
|
盒子2:
|
||||||
|
|
||||||
@ -156,7 +157,7 @@ padding: 20px;
|
|||||||
|
|
||||||
#### 一些题目
|
#### 一些题目
|
||||||
|
|
||||||
**题目1:**说出下面盒子真实占有宽高,并画出盒模型图。
|
**题目1**:说出下面盒子真实占有宽高,并画出盒模型图。
|
||||||
|
|
||||||
```css
|
```css
|
||||||
div{
|
div{
|
||||||
@ -176,7 +177,7 @@ padding: 20px;
|
|||||||
|
|
||||||
|
|
||||||
|
|
||||||
**题目2:**说出下面盒子真实占有宽高,并画出盒模型图。
|
**题目2**:说出下面盒子真实占有宽高,并画出盒模型图。
|
||||||
|
|
||||||
```css
|
```css
|
||||||
div{
|
div{
|
||||||
@ -201,7 +202,7 @@ padding: 20px;
|
|||||||
|
|
||||||
|
|
||||||
|
|
||||||
**题目3:**现在给你一个盒子模型图,请写出代码,试着用最最简单的方法写。
|
**题目3**:现在给你一个盒子模型图,请写出代码,试着用最最简单的方法写。
|
||||||
|
|
||||||
![](http://img.smyhvae.com/20170728_1401.png)
|
![](http://img.smyhvae.com/20170728_1401.png)
|
||||||
|
|
||||||
@ -215,7 +216,7 @@ padding: 20px;
|
|||||||
border:1px solid red;
|
border:1px solid red;
|
||||||
```
|
```
|
||||||
|
|
||||||
**题目4:**现在给你一个盒子模型图,请写出代码,试着用最最简单的方法写。
|
**题目4**:现在给你一个盒子模型图,请写出代码,试着用最最简单的方法写。
|
||||||
|
|
||||||
![](http://img.smyhvae.com/20170728_1402.png)
|
![](http://img.smyhvae.com/20170728_1402.png)
|
||||||
|
|
||||||
@ -352,9 +353,9 @@ border-left:10px solid red;
|
|||||||
border:10px solid red;
|
border:10px solid red;
|
||||||
```
|
```
|
||||||
|
|
||||||
(3)按三要素和方向来拆:
|
(3)按三要素和方向来拆:(就是把每个方向的,每个要素拆开。3*4 = 12)
|
||||||
|
|
||||||
|
|
||||||
> 就是把每个方向的,每个要素拆开。3*4 = 12
|
|
||||||
|
|
||||||
```
|
```
|
||||||
border-top-width:10px;
|
border-top-width:10px;
|
||||||
@ -442,6 +443,3 @@ border-left-width: 0;
|
|||||||
|
|
||||||
这样,一个三角形就画好了。
|
这样,一个三角形就画好了。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user