一、标准流布局
在标准流中块级标签是一个占一行，默认宽度是父标签的宽度，默认高度是内容高度，设置宽度和高度是有效的，并且可以设置宽度和高度。
行内标签：可以一行显示多个，默认高度和宽度都是内容的宽高，设置宽和高无效。
行内块标签：一行可以显示多个，默认宽高就是内容宽高，设置宽高有效。
注意：在标准流布局中需要将行内标签换行时，可以将行内标签放在一个块级标签中（div）
- a. 块级标签：p、h1-h6、hr、列表相关标签、table、tr、option、div
- b. 行内标签：a、img、td、input、select、textarea、span
- c. 行内块标签:
二、非标准流布局
1、display属性：设置标签的性质
值： block：将标签设置为快级标签
inline-block：将标签设置为行内块标签
注意：一般不会通过将标签转换成行内块标签来解决问题，因为行内块标签在显示的时候左右中间会有不能消除的缝隙。
inline：将标签设置为行内标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<!-- display将标签设置为块级 -->
<a href="#" style="display: block; width: 200px; height: 30px; background-color: brown;">我是a标签</a>
<!-- 行内块标签 -->
<a href="#" style="display: inline-block; width: 200px; height: 200px; background-color: aqua;">我是a标签</a>
<a href="#" style="display: inline-block; width: 200px; height: 200px; background-color: aqua;">我是a标签</a>
<!-- 行内标签 -->
<a href="#" style="display: inline; width: 200px; height: 200px; background-color: aqua;">我是a标签，但是宽高无效</a>
</body>
</html>
2、float浮动属性
- 概念：浮动会让标签脱离标准流进行布局（脱流）
- 设置样式的float属性
值：left：左浮动
right：右浮动
-
浮动原理：水池原理（池底水面原理）
-
注意：没有浮动的标签会占池底和水面的位置，但浮动后只占水面位置
-
注意：脱流后的布局不管什么标签，脱流后都是一行可以显示多个，可以设置宽和高。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>布局</title>
</head>
<body>
<!-- float的其他布局 -->
<div style="background-color: aqua;height: 100px; width: 200px; float: left;">一</div>
<div style="background-color: fuchsia;height: 200px; width: 300px; float: left;">二</div>
</body>
</html>
二、清除浮动
1、概念:清除浮动指的是清除因浮动而产生的高度塌陷问题
2、当父标签未设置高度；但是子标签浮动的时候就会产生高度塌陷问题
清除方法：
a、添加新一个空盒子（div）：在父标签的最后添加一个空的div，并且设置样式clear属性的值为both（一般不采用这种方法）；
b、设置overflow属性：值为hidden（推荐使用），在会塌陷的标签中设置overflow属性的值为hidden；
三、文字环绕
1、被环绕的标签（图片标签）浮动，文字对应的标签不浮动
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>文字环绕</title>
</head>
<body>
<div id="" style="background-color: antiquewhite; ">
<img src="img/new.jpg" style="background-color: antiquewhite; float: left;>
</div>
<div id="" style="background-color: aqua;">
</div>
</body>
</html>
四、标签定位
- 概念：css可以通过left、right、top、bottom来对标签进行定位，但必须设置参考对象
相对定位属性：
left：标签左边距
right：标签右边距
top：标签上边距
bottom：标签下边距
- 注意：定位需要通过position属性来设置参考对象
2、position属性：
initial：默认值（了解）
static：不希望自己的子标签相对自己定位时，才使用static（但也可以不写因为默认值就是initial）
absolute：相对第一个非static和非initial的父标签进行定位
注意：body的position属性值不是initial
定位时当标签的宽度确定时，同时设置left和right只有left有效
可以同时设置left和right，不设置宽度或者设置宽度值为auto，标签会自动拉伸
top和bottom同理
3、relative值：相对自己在标准流中的位置定位，如果一个标签希望自己的子标签能相对自己定位，就设置这个标签的position为relative
4、fixed值：相对于浏览器定位
5、stick值：粘性定位,只针对网页底部标签定位，如果网页超过一屏（需要滚动）时相对浏览器定位，否则就相对标准流定位。
6、overflow属性：还可以用于裁掉超出的部分
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>标签定位</title>
<style type="text/css">
#div1{
width: 600px;
height: 500px;
background-color: burlywood;
}
#div2{
width: 400px;
height: 400px;
background-color: aquamarine;
position: relative;
/* overflow属性裁剪掉超出范围的部分 */
overflow: hidden;
}
#div3{
/* 定位1 */
/* width: 100px;
width: auto;
height: 100px;
background-color: green;
定位
position: absolute;
right: 30px;
left: 30px;
top: 20px; */
/* 定位2 */
/* width: 100px;
height: 100px;
background-color: green;
position: relative;
left: 30px; */
/* 相对浏览器定位 */
/* width: 100px;
height: 100px;
background-color: green;
position: fixed;
bottom: 30px;
right: 0; */
/* 粘性定位 */
/* width: 100%;
height: 100px;
background-color: green;
position: stick;
bottom: 0; */
/* width: 100px;
height: 100px;
background-color: green; */
/* 定位 */
/* position: absolute;
left: -50px;
top: -50px; */
/* overflow属性裁剪掉超出范围的部分 */
width: 100px;
height: 100px;
background-color: green;
position: absolute;
right: -25px;
}
</style>
</head>
<body>
<div id="div1">
<div id="div2">
<div id="div3"></div>
</div>
</div>
<div id="" style="height: 1000px;">
</div>
</body>
</html>
五、盒子模型
1、概念：HTML中所有可见的标签都是盒子模型。有固定的结构，包括：内容、padding、border、margin
2、内容：可见的，设置宽高实质就是设置内容的大小，添加子标签或者直接设置文字都是添加或者显示在内容部分的，默认大小是内容的大小，默认与大小有关
注意：可以设置背景颜色，但会作用于内容部分
3、padding：可见的，分上下左右四部分，一般没有默认值是0。
注意：设置背景颜色也会作用于padding部分
4、border：可见的，分上下左右四部分，一般默认为0，
格式：border：solid(边框样式) color 宽度;
样式：solid(实线)、double（双实线）、dashed(点划线)、dotted(虚线)
注意：border的颜色需要单独设置
切圆角：border-radius: 180px;
5、margin：不可见
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>盒子模型</title>
<style type="text/css">
#div1{
/* 设置内容和padding部分的背景颜色 */
background-color: #DEB887;
/* 设置内容大小 */
width: 100px;
height: 100px;
/* 设置padding */
/* padding-left: 20px;
padding-top: 20px; */
/* 同时设置四个方向值 */
padding: 20px;
/* 设置border */
/* border: dotted black 5px; */
/* 整体切圆角 */
border-radius: 10px;
/* 切部分圆角 */
/* border-top-left-radius: 50px; */
/* 设置margin */
margin-left: 20px;
}
</style>
</head>
<body>
<div id="div1">
<div id="" style="width: 60px;height: 60px; background-color: blueviolet;">
</div>
</div>
</body>
</html>
网友评论