1.1 盒子模型的定义
“盒子模型”（box model）是CSS中一个很重要的概念，因为它决定了元素在浏览器窗口中如何定位。CSS模型在本质上是一个盒子，用于封装周围的HTML元素，包括外边距（margin）、边框（border）、内边距（padding）、和内容（content）。
border：边框用来将一个盒子的边界和周围其他盒子彼此分开，即便不可见，每个盒子也有边框
margin：从盒子打下一个盒子的距离（即外边距）
padding：元素内容与盒子边框的距离（即外边距）
1.2 border属性
border属性用来指代某一元素的盒子的边框应如何呈现。边框有三个可修改的属性。
border-color：指定边框应具有的颜色
border-style：指定边框应为实线、虚线、还是双股线，也可以是其他可能的取值
border-width：指定边框应具有的宽度
1.2.1 border-style属性
| 值 | 描述 |
| none | 不存在边框(等价于border-width:0;) |
| solid | 边框是一条实线 |
| dotted | 边框是一系列的点 |
| dashed | 边框是一系列的断线 |
| double | 边框是两条实线 |
| groove | 边框具有切入效果 |
| ridge | 边框效果与groove相反 |
| inset | 边框使盒子看起来内嵌于页面中 |
| outset | 边框使盒子看起来突出于画布之外 |
| hidden | 与none相同，但用于作为表格元素的边框冲突解决方案(用于隐藏元素) |
1.2.2 border-color属性
border-color属性能够改变盒子周围边框的颜色，与color属性一样，可以用下面的方法来表示
第一种：英文单词 red black yellow blue
第二种：#rrggbb 或者十六进制 #000000 #ffffff 其中r--red g--green b--blue
还可以为四个边框指定不同的颜色，使用以下属性分别指定盒子边框的底部、左侧、顶部、以及右侧的颜色：border-bottom-color、border-left-color、border-top-color、border-right-color。
1.3 padding属性
padding属性用来指定元素内容与边框之间的距离，也叫作内边距。该属性的值通常使用像素指定，也可以长度单位、百分比或关键字inherit。
如果使用百分比，这一包含盒子的百分比计算。如果指定为10%，则每一边取盒子的5%作为内边距。
与边框一样，也可以使用如下属性指定盒子每一边的不同内边距的大小：padding-bottom、padding-top、padding-left、padding-right。
1.4 margin属性
margin属性用来控制盒子之间的空间，取值可以是长度、百分比或关键字inherit，取值的含义与padding属性完全相同
1.5 border-radius属性
border属性分别设置了四个角的圆角效果的半径，也可以为每个角单独设置，对应的四个属性分别是：border-top-left-radius（左上角）、border-top-rightradius（右上角）、border-bottom-left-radius（左下角）、border-bottom-rightradius（右下角）。border-radius属性的值可以是em、像素和百分比作为单位。
#test{
border:3px solid red;
height:100px;
width:200px;
border-radius:50px 0px;
}1.6 border-image属性
border-image属性的基本语法：
border-image:source slice width outset repeat|initial|inherit; source是准备用作边框图像文件的URL地址。
slice由四个值决定，决定了切片的尺寸，值可以是百分比或数字。
repeat是指边框进行平铺的方式，可以使用round、stretch、space和repeat中的两个值。
#test1{
border-width:15px;
border-image:url(images/border.png)15 15 15 15 repeat;
}2. 使用CSS定位和布局
2.1 浮动布局
float元素能够将某个元素从正常流中抽取出来，并将其可能远地放置在包含盒子的左侧或右侧
float属性的取值：
| 值 | 描述 |
| none | 默认值，盒子不浮动，并保持在原位 |
| left | 盒子左浮动到包含元素的左侧，而包含元素的其他内容浮动至右侧 |
| right | 盒子右浮动到包含元素的左侧，而包含元素的其他内容浮动至左侧 |
| inherit | 从父元素继承float属性的值 |
<head>
<meta charset="UTF-8">
<title>浮动布局</title>
<style type="text/css">
.one{
width:100px;
height:100px;
background-color: blue;
float: left;
}
.two{
width:100px;
height:100px;
background-color: red;
float:left;
}
.three{
width:100px;
height:100px;
background-color: purple;
float: left;
}
</style>
</head>
<body>
<div class="one">1</div>
<div class="two">2</div>
<div class="three">3</div>
</body>
2.1.1 clear属性
clear属性定义元素的那边不允许出现浮动的元素
clear属性的取值;
left：不允许左边有任何浮动 （清除左侧的浮动）
right：不允许右边有任何浮动（清除右侧的浮动）
both：不允许左右两侧有任何浮动（清除左、右俩侧的浮动）
none：默认值，允许两边出现浮动
2.2 定位布局
2.2.1 position属性
position属性是一个使用较多的重要属性，很多特殊容器的定位必须使用position属性来完成。该属性有四个取值。
static（默认值）：静态定位，根据每个元素的默认值。
absolute：绝对定位，将对象从文档流分离出来，通过设置top、left、right、bottom这四个 方向的值进行定位（相较于父级的定位），如果没有这样的父级，默认的父级是body。
<head>
<meta charset="UTF-8">
<title>定位布局</title>
<style type="text/css">
.main{
width:600px;
height:600px;
border:1px solid red;
margin: 200px;
position: relative;
}
.box{
width: 200px;
height:200px;
border:1px solid red;
background-color: red;
position: absolute;
top:100px;
left:100px;
}
.box1{
width: 200px;
height:200px;
border:1px solid red;
background-color: blue;
/*top:100px;
left:100px;*/
}
.box2{
width: 200px;
height:200px;
border:1px solid red;
background-color: purple;
/*top:100px;
left:100px;*/
}
</style>
</head>
<body>
<div class="main">
<div class="box">
这是一个div
</div>
<div class="box1">
这是一个div
</div>
<div class="box2">
这是一个div
</div>
</div>
</body>
2.3 其他属性
2.3.1 overflow属性
2.3.2 zoom属性
<head>
<meta charset="UTF-8">
<title>溢出</title>
<style type="text/css">
#box{
width:400px;
height:400px;
border:1px solid black;
/*overflow: scroll;*/
/*background: url("../images/哆啦A梦.jpg");*/
}
img{
zoom:0.5;
}
</style>
</head>
<body>
<div id="box">
<img src="../images/哆啦A梦.jpg">
</div>
</body>
2.4 弹性盒子（Flexbox）布局
2.4.1 flex-direction属性
<head>
<meta charset="UTF-8">
<title>FlexBox</title>
<style type="text/css">
#main{
width:400px;
height:400px;
display:flex;
flex-direction:column;/*从上到下*/
flex-direction:column-reverse;/*从下到上*/
flex-direction:row;/*从左到右*/
flex-direction:row-reverse;/*从右到左*/
border:1px solid black;
}
.box1{
width:100px;
height:100px;
background-color: red;
}
.box2{
width:100px;
height:100px;
background-color: blue;
}
.box3{
width:100px;
height:100px;
background-color: green;
}
</style>
</head>
<body>
<div id="main">
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
</div>
</body>
2.4.2 flex-wrap属性
flex-wrap属性规定弹性盒子容器是单行还是多行，同时横轴的方向决定了新行堆叠的方向。
该属性的取值如下：
2.4.3 flex-flow属性
2.4.4 justify-content属性
2.4.5 align-items属性
432
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
