一 标准流
1.什么是标准流
标签在没有添加布局相关的样式的时候，在浏览器中默认的布局方式
a.块级标签在标准流中是一个占一行(不管宽度大小，相对于父标签来说的)；
默认宽度是父标签的宽度，默认高度是内容高度；设置宽高有效
b.行内标签在标准流中一行可以显示多个；默认大小是内容的大小；设置宽高无效(span,a)
c.行内块标签在标准流中一行可以显示多个；默认大小是内容的大小；设置宽高有效(img，input)
2.实际布局的选择
a.左右结构使用行内块
display属性 - 可以让任何标签变成块级,行内,行内块；还能隐藏标签
b.脱流/脱标(脱离标准流)
float(浮动)
定位(left, right, top, bottom, position)
二 display属性
display属性(CSS属性): # 尽量别用下面就是示列，有系统BUG,若用子标签就会有错误
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: 0px;">
<div style="height: 120px; background-color: royalblue; font-size: 0px; display: none;">
<a href="" style="display: inline-block; background-color: salmon; width: 100px; font-size: 20px;">百度1</a>
<a href="" style="display: inline-block; width: 100px; background-color: seagreen; font-size: 20px;">新浪1</a>
</div>
<div class="d1" style="height: 250px; width: 30%; background-color: yellow;"></div>
<div class="d1" style="height: 250px; width: 70%; background-color: coral;"></div>
<div></div>
</body>
</html>
image.png
三 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: saddlebrown; float: left; width: 100px;">
div1
</div>
<div id="" style="background-color: salmon; float: left;">
div2
</div>-->
<!--行内标签脱标-->
<!--<a href="" style="background-color: cornflowerblue; float: left;">百度</a>-->
<!--<a href="" style="background-color: darkmagenta; float: left;">新浪</a>-->
<!---->
<div align="center" id="" style="background-color: green; height: 40px;">div</div>
<div align="center" id="" style="background-color: blue; height: 80px; width: 35%; float: left;">div1</div>
<div align="center" id="" style="background-color: lawngreen; height: 80px; width: 35%; float: left;">div2</div>
<div align="center" id="" style="background-color: yellow; height: 80px; width: 30%; float: left;">div3</div>
<div align="center" id="" style="background-color: red; height: 50px; float: left; width: 100%;">div5</div>
</body>
</html>
image.png
四 文字环绕
文字环绕：
被环绕的标签浮动，文字标签不浮动
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div style="background-color: blueviolet; width: 50px; height: 50px; float: left;margin-right: 10px;">
</div>
<p style="width: 400px;">wsdljdwqqdqjdwjwqd带我去多军多群多
多多群无多我看见的奇迹看完了q各位亲客气尔康
认为看起来可全额客气额武切维奇无群完全忘了忘了武切维奇无荔湾区；；为了我；去起来晚了晴空万里巧克力为了看情况完了；
wkwlkdwlkddwdlqkd;dkd;wqkddkqdkq斯琴ws
卡起码恰恰是简简单单打开我全家都忘记江东区j群文件群文件文件位权wiq
</p>
</body>
</html>
image.png
五 清除浮动
清除浮动
1.高度塌陷
当父标签不浮动，子标签浮动的时候，父标签就会产生高度塌陷的问题
2.清除浮动
清除浮动指的是因为浮动而产生的高度塌陷
a.方法一：添加空盒子
在高度会塌陷的父标签的最后添加一个空的div;然后给空的div添加样式设置clear属性的值为both
b.发法二:overflow(记，最简单的建议用)
给高度会塌陷的那个父标签，添加样式设置overflow属性值为hidden
c.方法三：万能清除法
选中高度会塌陷的那个父标签，给age
六 定位
1.定位
定位会让标签脱流
2.定位属性：
top属性: 顶部的距离
bottom属性：底部的距离
left属性：左边的距离
right属性：右边的距离
以上4个属性想要有效，必须通过position属性来说明参考对象
position属性:
initial和static - 默认值,不能定位(定位无效) # 注意:body标签的position不是initial和static
absolute - 绝对定位；以第一个position的值不是默认值的父标签进行定位。
relative - 相对定位；相对于标准流定位(相对自己在标准流中的位置进行定位)；
一般使用relative是在标签本身不需要定位，但是希望自己的子标签相对自己定位的时候使用
fixed - 相对浏览器定位，怎么滑动在浏览器都不懂
sticky - 当浏览器内容没有超过一屏的时候，显示在内容的最下面；当浏览器内容超过一屏bottom有效，并且显示在浏览器的底部
(只对top和bottom有效)
七 盒子模型
1.盒子模型
网页上所有的可视标签都是一个盒子模型：
一个标签是由4个部分组成，分别是:内容(content),padding,border,margin;
其中content,padding,border是可见的，margin不可见，但是占位
2.盒子模型的每个部分
content - 标签内容；设置标签的宽高其实是作用于content;标签中的文字和子标签都是添加在content上的
padding - 在内容的外部，默认是0；可见的，并且设置背景颜色也作用于padding（与content是同一个颜色）；有四个方向
border - 边框；默认是0，可见的，有4个方向；颜色和大小都可以单独设置
margin(外边距)
网友评论