一、浮动
标准流：块标签是一个占一行，从上往下布局。
行内标签一行可以显示多个，从左往右布局，直到遇到边界自动换行
脱流：浮动、定位
1.浮动：就是让竖着显示的标签横着来,块的默认宽度是内容的宽度
float：left和right
注意：1.如果要使用浮动，那么同一级的所有标签都要浮动
2.如果父标签浮动，那么子标签的位置会跟着一起动
3.布局的基本顺序：从上往下，从左往右
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.top{
float: right;
width: 100%;
height: 120px;
background-color: red;
}
.left{
float: left;
background-color: palevioletred;
width: 25%;
height: 400px;
}
.mid{
float: left;
background-color: green;
width: 50%;
height: 400px;
}
.right{
float: left;
background-color: yellow;
width: 25%;
height: 400px;
}
.down{
float: left;
background-color: black;
width: 100%;
height: 150px;
}
</style>
</head>
<body>
<div class="top"></div>
<div class="left"></div>
<div class="mid">
<p >窗前明月光</p>
</div>
<div class="right"></div>
<div class="down"></div>
</body>
</html>
二、文字环绕
文字环绕：被文字环绕的标签不浮动，文字标签不浮动
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#d1{
float: left;
width: 60px;
height: 60px;
background-color: yellow;
}
#d2{
width: 400px;
}
</style>
</head>
<body>
<div id="d1">
</div>
<div id="d2">
发哈发货客服alhfqufjkvbakbkaf发开发倍经验啊发发卡号积分看到房间卡加快那份发发看房间啊大家爱护的预付差红包和保护巴驴驴了会不会发放
</div>
</body>
</html>
三、清除浮动
清除浮动：是指清除因为浮动而产生的问题(高度塌陷)--问题不是什么时候都会产生的
a.添加空的div
在父标签(高度塌陷的标签)的最后添加一个空的div，并且设置这个div的样式表 clear:both
(可能会产生大量的额外的代码)
b.设置overflow: hidden;
在父标签中设置样式表的overflow的值为hidden
c.万能清除法
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*2.清除浮动方案2*/
/*.clear{
overflow: hidden;
}*/
/*3.清除浮动方案3*/
.clear:after{
display: block;
clear: both;
content: "";
visibility: hidden;
height: 0;
}
.clear{
zoom: 1;
}
</style>
</head>
<body>
<div style="height: 100px;background-color: yellow;"></div>
<div style="background-color: blue;" class="clear">
<div style="width: 30%;background-color: fuchsia;height: 200px;float: left;"></div>
<div style="width: 30%;background-color: indigo;height: 200px;float: left;"></div>
<!--1.清除方案1-->
<!--<div id="" style="clear: both;">
-->
<!--</div>-->
</div>
</body>
</html>
四、diaplay
1.HTML标签分为块和行内
3.CSS中标签分为三类：块标签，行内块、行内(display)
(在标准流中)
block：块(一个占一行，默认宽度是100%，高度默认根据内容来确定；直接设置宽高有效)
inline-block：行内块(一行可以有多个，默认宽高是内容的宽高；直接设置宽高有效)
inline：行内(一行可以有多个，默认宽高是内容的宽高；设置宽高无效)
通过改变标签的display的值，可以让一个标签在块、行内块和行内之间任意切换
注意：inline-block标签的右边默认都有一个间隙，不能与其他标签无缝连接(目前没有办法清除)
五、定位
定位
1.距离
top：标签顶部距离其他标签的位置
bottom：标签的底部距离其他标签的位置
left：标签的左边距离其他标签的位置
right：标签的右边距离其他标签的位置
2.position
想要设置标签的top，bottom，left，right的值有效，必须设置标签的参考方式
initial：(默认值) 没有参考对象
absolute:相对第一个position的值是非static,非initial的父标签进行定位
relative：正常位置定位(按照标准流定位)
fixed：相对于浏览器定位
sciyky：不滚动的时候按标准流布局，滚动的时候相对浏览器定位
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#d1{
/*position: static;*/
width: 500px;
height: 10000px;
background-color: aqua;
/*top: 100px;*/
}
#d2{
position: absolute;
width: 100px;
height: 100px;
background-color: #DB7093;
top: 50px;
}
#d3{
position: sticky;
width: 50px;
height: 30px;
background-color: yellow;
bottom: 20px;
}
</style>
</head>
<body>
<div id="d1">
<div id="d2">
</div>
<div id="d3">
</div>
</div>
</body>
</html>
六、relative
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#d0{
width: 500px;
background-color: black;
}
#d1{
float: left;
width: 100px;
height: 100px;
background-color: green;
position: relative;
margin-left: 20px;
margin-top: 20px;
}
#d0{
overflow: hidden;
}
</style>
</head>
<body>
<div id="d0">
<div id="d1"></div>
<div id="d1"></div>
<div id="d1"></div>
<div id="d1"></div>
<div id="d1"></div>
<div id="d1"></div>
<div id="d1"></div>
<div id="d1"></div>
</div>
</body>
</html>
七、盒子模型
每一个标签都是有四个部分组成
1.内容：显示标签内容的部分，可见的(设置宽和高的值，就是内容部分的值)
2.内边距(padding)：可见的，不能显示内容(通过设置padding来改变其值，默认是零)
3.边框(border)：可见的，如果有内边距边框就显示在内边距上，否则显示在内容上
4.外边距(margin)：不可见的，但是会占据浏览器的空间
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*注意：以后再写网页的时候，在样式表的最前面关闭自带的所有的margin和padding*/
*{
margin: 0;
padding: 0;
}
div{
background-color:fuchsia;
/*1.设置内容大小*/
width:100px;
height:100px;
/*2.padding的值有四个
可以单独设，也可以一起设置*/
padding: 10px;
padding: 20px 40px;
/*3.边框
可以单独设，也可以一起设置
*格式：宽度 样式 颜色
* a.样式： solid-实线 dotted-点状线 double-双线 dashed-虚线*/
/*同时设置四条边的宽度、样式、颜色*/
border: 10px inset green;
/*设置边框圆角的弧度*/
border-radius: 10px;
/*4.外边距*/
/*可以单独设置
也可以一起设置*/
margin: 100px;
}
</style>
</head>
<body>
<div id="">
床前明月光
</div>
</body>
</html>
八、居中
<!--
1.垂直居中
a.固定标签高度
b.设置line-height的值和高度一样
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{
height: 100px;
background-color: gold;
}
p{
height: 50px;
width: 200px;
background-color: green;
/*垂直居中*/
line-height: 50px;
/*文字水平居中*/
text-align: center;
}
</style>
</head>
<body>
<div id="">
<p>床前明月光</p>
</div>
</body>
</html>
网友评论