1、标准流
1.什么是标准流
标签在没有添加布局相关的样式的时候，在浏览器中默认的布局方式
块级标签在标准流中是一个占一行(不管宽度大小)，默认宽度是父标签的宽度宽，默认高度是内容高度；设置宽高是有效的
行内标签在标准流中一行可以显示多个；默认大小是内容的大小；设置宽高无效
行内块标签在标准流中一行可以显示多个；默认大小是内容大小；设置宽高有效(img，input)
2.实际布局的选择
a.左右结构使用行内块
display属性 - 可以让任何标签变成块级、行内、行内块；隐藏标签
b.脱流/脱标(脱离标准流)
float(浮动)
定位(left,right,top,bottom position)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="">
我是div,块级的
</div>
</body>
</html>
2、display属性
<!--
display属性(CSS属性):
block(块)
inline（行内）
inline-block（行内块）- 默认左右间隙，这个间隙可以通过将父标签的字体大小设置为0 来去掉
none(隐藏)
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.d1{
display: inline-block;
}
</style>
</head>
<body style="font-size: 0;">
<div style="height: 120px; background-color: royalblue;"></div>
<div class="d1" style="height: 250px; width: 30%; background-color: yellow;"></div>
<div class="d1" style="height: 250px; width: 70%; background-color: hotpink;"></div>
<div></div>
</body>
</html>
3、float属性
<!--浮动
浮动会让标签脱流
脱流 - 让标签脱离标准流布局，不管什么标签脱流了，
都是按'一行可以显示多个，默认大小是内容大小，并且设置宽高有效'的方式布局
float属性
left
right
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
</style>
</head>
<body>
<div id="" style="background-color: green; height: 120px;">
div1
</div>
<div id="" style="background-color: pink; float: left; width: 35%; height: 200px;">
div2
</div>
<div style="background-color: red; width: 35%; height: 200px; float: left;"></div>
<div style="background-color: sandybrown; width: 30%; height: 200px; float: left;"></div>
<div style="background-color: blue; height: 100px; width: 100%; float: left;">ad</div>
</body>
</html>
4、文字环绕
<!--
文字环绕
被环绕的标签浮动，文字标签不浮动
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="" style="background-color: aquamarine; float: left; width: 100px; height: 100px;">
</div>
<p>
按时发货即可爱上房间卡健身房 沙发里看后感 的设计费健身房的阿道夫哈索拉卡跌开幕式看得见
安徽覅激发非salfjoqw爱上附件发送阿基扫ID就哦啊设计费
按时覅竞赛按键佛啊扫进房间爱上飞机啊飞按时发货即可爱上房间卡健身房 沙发里看后感 的设计费健身房的阿道夫哈索拉卡跌开幕式看得见
安徽覅激发非salfjoqw爱上附件发送阿基扫ID就哦啊设计费
按时覅竞赛按键佛啊扫进房间爱上飞机啊飞按时发货即可爱上房间卡健身房 沙发里看后感 的设计费健身房的阿道夫哈索拉卡跌开幕式看得见
安徽覅激发非salfjoqw爱上附件发送阿基扫ID就哦啊设计费
按时覅竞赛按键佛啊扫进房间爱上飞机啊飞按时发货即可爱上房间卡健身房 沙发里看后感 的设计费健身房的阿道夫哈索拉卡跌开幕式看得见
安徽覅激发非salfjoqw爱上附件发送阿基扫ID就哦啊设计费
按时覅竞赛按键佛啊扫进房间爱上飞机啊飞按时发货即可爱上房间卡健身房 沙发里看后感 的设计费健身房的阿道夫哈索拉卡跌开幕式看得见
安徽覅激发非salfjoqw爱上附件发送阿基扫ID就哦啊设计费
按时覅竞赛按键佛啊扫进房间爱上飞机啊飞
</p>
</body>
</html>
5、清除浮动
<!--清除浮动
1.高度塌陷
当父标签不浮动，子标签浮动的时候，父标签就会产生高度塌陷的问题
2.清除浮动
清除浮动指的是因为浮动而产生的高度塌陷
a.方法一：添加空盒子
在高度会塌陷的父标签的最后添加一个空的div；然后给空的div添加样式设置clear属性，属性的值为both
b.方法二：overflow
给高度会塌陷的那个父标签，添加样式设置overflow属性值为hidden
(记)c.方法三：万能清除法
选中高度会塌陷的那个父标签，给after状态添加样式display: block;clear: both;content: "";visibility: hidden;height: 0;
然后再给这个父标签添加样式：zoom:1
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--<style type="text/css">
.clear{
clear: both;
}
</style>-->
<style type="text/css">
.clear:after{
display: block;
clear: both;
content: "";
visibility: hidden;
height: 0;
}
.clear{
zoom: 1;
}
</style>
</head>
<body>
<div style="background-color: salmon; height: 100px;"></div>
<div class="clear" style="background-color: seagreen; ">
<div style="background-color: hotpink; height: 500px; width:20%; float: left;"></div>
<div style="background-color: gray; height: 100px; width: 60%; float: left;"></div>
<div style="background-color: aqua; height: 400px; width: 20%; float: right;"></div>
<!--1.添加空盒子-->
<!--<div id="" class="clear" style="clear: both;">-->
</div>
</div>
<div style="background-color: blueviolet; height: 100px;"></div>
</body>
</html>
6、定位
<!--
1.定位
定位会让标签脱流
2.定位属性：
top属性:顶部的距离
bottom属性:底部的距离
left属性:左边的距离
right属性:右边的距离
以上4个属性想要有效，必须通过position属性来说明参考对象
position属性:
initial和static - 默认值，不能定位（定位无效）
absolute - 绝对定位；以第一个position的值不是默认值的父标签进行定位（注意：body标签的position不是initial和static）
relative - 相对定位；相对于标准流定位：（相对自己在标准流中的位置进行定位）；
一般使用relative是在标签本身不要定位，但是希望自己的子标签相对自己定位的时候使用
fixed - 相对浏览器定位
sticky - 当浏览器内容没有超过一屏的时候，显示在内容的最下面；当浏览器内容超过一屏bottom有效，并且显示在浏览器的底部
(top和bottom有效，left和right无效)
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
</html>
7、盒子模型
<!--
1.盒子模型
网页上所有的可视标签都是一个盒子模型：
一个标签是由4个部分组成，分别是：内容（content）、padding、border、margin；
其中content、padding、border是可见的，margin不可见，但是占位
2.盒子模型的每个部分
content - 标签内容；设置标签的宽高其实是作用于content;标签中的文字和子标签都是添加在content上的
padding - 在内容外部，默认是0；可见的，并且背景颜色也作用于padding(padding和content的颜色一样)；有4个方向
border - 边框； 默认是0，可见的，有四个方向；颜色和大小都可以单独设置
margin - 外边距
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
</html>
网友评论