1、文档流
2.盒模型
boarder-style :solid(实线),dotted(点状虚线)、dashed(虚线)、double(双线)
boarder-style简写属性:
水平方向布局
案例1:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>图片布局</title>
<style>
*{
margin: 0;
padding: 0;
}
ul{
width: 190px;
height: 470px;
overflow: hidden;
}
ul li{
margin-bottom: 7px;
}
ul li img{
/* 将父类占满 */
width: 100%;
}
</style>
</head>
<body>
<ul>
<li>
<a href="#"><img src="01_image/1.png"/></a>
</li>
<li>
<a href="#"><img src="01_image/2.jpg"/></a>
</li>
<li>
<a href="#"><img src="01_image/3.jpg"/></a>
</li>
</ul>
</body>
</html>
阴影和轮廓
浮动:
浮动的主要作用:水平布局
浮动元素不会覆盖文字,文字会自动环绕在浮动元素的周围
浮动元素脱离文档流----
脱离文档流的特点:
块元素:
1、块元素不再独占一行
2、脱离文档流之后,块元素的宽度和高度都被内容撑开
行内元素:
行内元素脱离文档流之后就变成了块元素,特点和块元素一样
脱离文档流之后,不再区分快和行内了