发表于： 2018-08-24 17:15:04
2 573
一、今天完成的事：学习CSS盒模型
1. 盒模型基本概念
盒模型属性：
* width height: 内容区的宽高* padding: 内边距
* border: 边框
* margin: 外边距
标注盒模型与IE盒模型的区别：
* IE盒模型的width包括内容区宽度、内边距、边框
2. padding
padding区域是有颜色的：
* background-color将填充所有border以内的区域
padding的4个方向：
padding: 30px 20px 40px 100px; /* top right bottom left */ padding: 30px 20px 40px; /* top right bottom */ /* left = right */ padding: 30px 40px; /* top right. bottom=top, left=right */一些元素默认带有padding，开发时会习惯清楚默认padding。可用`*`来选择所有元素进行清楚，但这样效率不高。常用：
```css
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;
}
```
3. border
边框主要属性：
* 边框宽度、线型、颜色。前两者为必需。
```css
div{
border: 10px solid red;
}
/* 拆分 */
div{
border-width: 1px;
border-style: solid;
border-color: red;
}
/* 每个属性也可以按方向拆分 */
```
example:
```html
<html>
<style type="text/css">
div{
width: 0px;
height: 0px;
border: 50px solid green;
border-top-color: red;
}
</style>
<body>
<div></div>
</body>
</html>
```
4. margin
margin叠压现象
```html
<html>
<style type="text/css">
body, div{
margin: 0px;
padding: 0px;
}
.div1 {
width: 100px;
height: 100px;
background-color: red;
margin-bottom: 50px;
}
.div2{
width: 100px;
height: 100px;
background-color: green;
margin-top: 30px;
}
</style>
<body>
<div class="div1"></div>
<div class="div2"></div>
</body>
</html>
```
此时div1与div2实际间隔50px
父子元素的margin叠加
```html
<html>
<style type="text/css">
body, div{
margin: 0px;
padding: 0px;
}
.father {
width: 300px;
height: 300px;
background-color: red;
}
.son{
width: 100px;
height: 100px;
background-color: green;
margin-top: 10px;
}
</style>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
</html>
```
此时son与father之间并没有间距，而father距body有了10px的上边距。
**margin是用来隔开元素与元素的间距；padding是用来隔开元素与内容的间隔。**
二、计划
* 学习浮动特性
* 完成九宫格任务
返回列表
评论