1.标准流和浮动
1.标准流布局:在标准流中，块级标签是一个占一行，默认宽度是父标签的宽度，默认高度是内容的高度并且可以设置宽度和高度
行内标签，一行可以显示多个，默认的宽度和高度都是内容的宽度和高度；设置宽和高无效
行内块标签，一行可以显示多个，默认的宽度和高度也都是内容的宽和高，可以设置宽度和高度。
块级标签:h1-h6，p 列表标签 table tr
行内标签:a，img td input select option textarea span
2.display
1.display(设置标签的性质)
block --将其他的标签转换成块级标签
inline-block --将标签设置为行内块标签(注意坑:一般不会将标签转换成行内块解决问题)
因为inline-block在显示的时候每个标签内容之间会有空隙，衔接不完美。
inline --将标签设置为行内标签
3.float浮动
1.浮动会让标签脱离标准流进行布局(脱流)
2.float属性
left--左浮动
rigjt--右浮动
3.脱流后的布局规则，不管什么标签，脱流后都可以一行显示多个
而且可以设置高度和宽度
<!--设置float属性后的标签会脱流-->
<!--<p style="background-color: cadetblue;">我是段落</p>
<p>段落2</p>
<!--<a href="" style="background-color: aquamarine;">123</a>-->
<!--<a href="">abc</a>-->-->
<div style="background-color: #0000FF;width: 200px;height: 300px;float: left;">1</div>
<div style="background-color: aqua;width: 200px;height: 500px;float: left;">2</div>
<div style="background-color: #A52A2A;width: 200px;height: 300px;float: left;">3</div>
<div style="background-color: bisque;width: 200px;height: 600px;">4</div>
4.清除浮动
1.清除浮动
清除浮动指的是因为浮动而产生的高度塌陷问题
2.高度塌陷
当父标签不浮动，并且不设置高度，但是子标签浮动的时候就会产生高度塌陷问题
3.清除方法
a.添加空的div。在父标签的最后添加一个空的div设置样式clear属性为both
b.将会塌陷的标签中添加样式style，将overflow属性的值设置为hidden
5.文字环绕效果
文字环绕效果:被环绕的标签，例如图片对应的标签浮动，文字对应的标签不浮动，就可以产生
文字环绕图片的效果。文字不会被覆盖
6.定位
CSS可以通过left、right、top、bottom来对标签进行定位。前提是设置好参考对象
1.定位属性:
left - 标签左边距
right -标签右边距
bottom - 标签下边距
top -标签上边距
注意:a.定位需要通过position设置参考对象
b.当标签的宽度固定的时候，同时设置left和right只有left有效
c.可以同时设置left和right不设置width的时候，width会自动拉伸，top和bottom同理
2.position属性
initial--(所有标签的默认值)
（没什么用处）static-- 不希望被相对定位的时候就设置属性为static，也可以不设置，因为一般标签的默认值都为initial
absolute --相对第一个非static和非initial的父标签进行定位（如果没有就相对body定位，即浏览器边界）
relative--相对于自己在标准流位置进行定位，
如果一个标签希望子标签相对自己定位就设置position为relative
fixed --相对于浏览器定位。会一直存在浏览器屏幕不会被划走。会一直存在于浏览器的底部
sticky --粘性定位，只针对网页底部标签定位，会跟着当前页面内容的最底部，相当于内容的一部分一样
将left、right等四个的属性值设为负值可以反方向移动
在相对移动的父类里面设置overflow: hidden 可以裁剪掉子类反向移动超出的部分
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#div1{
background-color: #0000FF;
width: 600px;
height: 600px;
position: relative;
overflow: hidden;
}
#div2{
background-color: aqua;
width: 400px;
height: 400px;
}
#div3{
background-color: brown;
width: 200px;
height: 200px;
position: absolute;
right: -50px;
}
#div4{
background-color: aquamarine;
width: 100px;
height: 100px;
position: absolute;
left: -50px;
top: -50px;
}
</style>
</head>
<body>
<div id="div1">
<div id="div2">
<div id="div4">
</div>
<div id="div3">
</div>
</div>
</div>
</body>
7.盒子模型
html中多有课件的标签都是盒子模型。有固定的结构，结构中包括内容部分、padding、border、margin四个部分。
内容--可见的，设置width和height实质就是设置内容的大小;添加子标签或者设置文字内容都是添加或者显示在内容部分的
设置的background-color会作用于内容部分
padding--可见的，分上下左右四个部分。一般默认值都是零。设置背景颜色也会作用于padding
可以给style添加padding-left/right\top/bottom来设置padding的宽度增加标签的大小。相当于给四周加了一圈
border --可见的，分上下左右四个部分;一般默认都是0;
border的背景颜色需要单独设置
格式 border:线的样式 颜色 宽度
线的样式 solid实线、double双实线、dashed点划线、dotted虚线
border-radius 可以设置切圆角，可以同时切 也可以通过left等切单独的角
margin --不可见，但是占位置；分上下左右四个部分，一般默认值是0
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#div1{
/*设置内容部分*/
background-color: #0000FF;
width:300px;
height: 400px;
padding:40px ;
}
#div6 div{
background-color: #0000FF;
width: 200px;
height: 200px;
margin: 10px;
float: left;
}
#div5 div{
background-color: #0000FF;
width: 200px;
height: 200px;
margin: 10px;
float: left;
</style>
</head>
<body>
<!--<div id="div1"><div style="background-color: #A52A2A;width: 50px;height: 50px;"></div></div>-->
<div id="div6" style="height: 220px;">
<div ></div>
<div></div>
<div></div>
</div>
<div id="div5">
<div></div>
<div></div>
<div></div>
</div>
</body>
网友评论