1.选择器的权重
类型选择(元素选择器)：0001
class选择器：0010
id选择器：0100
伪类选择器:0001
层级(包含)选择器：多个选择器的权重之和
群组选择器: 分开看每个选择器的权重
谁的权重的值大，谁的优先级就高
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body #d1{
color: peru;
}
.c1{
color: deepskyblue;
}
#d1{
color: green;
}
a{
color: red;
}
</style>
</head>
<body>
<a href="" id="d1" class="c1">百度一下</a>
</body>
</html>
image.png
2.浮动
标准流：
1.块标签一个占一行，从上往下布局,默认宽度是100%
2.行内标签一行可以显示多个，从左往右布局，直到遇到边界就自动换行
脱流： 浮动、定位
1.浮动：就是让竖着现实的标签横着来，块的默认宽度是内容的宽度
float： left和right
注意：
1.如果要使用浮动，同一级的全部标签都要一起全部浮动
2.如果父标签浮动，子标签的位置也会跟着一起动
3.布局的基本顺序：从上往下，从左往右
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style type="text/css">
#top{
float: left;
background-color: red;
width: 100%;
height: 100px;
}
#m1{
float: left;
background-color: deeppink;
height: 400px;
width: 20%;
}
#m2{
float: left;
background-color: aqua;
height: 400px;
width: 70%;
}
#m3{
float: right;
background-color: black;
height: 400px;
width: 10%;
}
#button{
float: right;
background-color: green;
height: 100px;
width: 100%;
}
</style>
</head>
<body>
<div id="top"></div>
<div id="m1"></div>
<div id="m2"></div>
<div id="m3"></div>
<div id="button"></div>
</body>
</html>
image.png
3.文字环绕
文字浮动：被文字环绕的标签浮动，文字标签不浮动
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style type="text/css">
#d1{
float: left;
width: 60px;
height: 100px;
background-color: #FFFF00;
}
#d2{
width: 400px;
}
</style>
</head>
<body>
<div id="d1">
</div>
<div id="d2">
wqheioqwueiou <br>wqaoiasbrdfaslfdjasjdopawujndj<br>xzfhasnfasjdoasioiawio<br>ujaoisuejaweeodaioepiaopsejaj<br>dajldajpdoiaq<br>wewewqioasdajkdlahweqowiuaoeqweqweqweqweqwr<br>wqrqwrqwrqwrdfhgjsrtyfdasfaservraeghasdfcrw
</div>
</body>
</html>
image.png
4.清除浮动
1.清除浮动：是指清楚应为浮动而产生的问题（高度塌陷） ---问题不是什么时候都产生的
2.怎么去除
a.添加空白div
在父标签（高度塌陷的标签）的最后添加一个空的div，并且设置这个div的样式表：clear:both
问题：可能会产生大量的额外代码
b.设置overflow
在父标签中设置样式表的overflow的值为hidden
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style type="text/css">
/*2.清除浮动的方案二 */
/* .clear{
overflow: hidden; */
/*3.清楚浮动方案三 万能清除法 */
/* .clear:after{
display: block;
clear: both;
content: "";
visibility: hidden;
height: 0;
}
.clear{
zoom: 1;
} */
</style>
</head>
<body>
<div style="height: 100px;background-color: #FF0000;"></div>
<div style="background-color: #FF1493;" class="clear">
<div style="width: 30%;background-color: peru;height: 20opx;float: left;"></div>
<div style="width: 30%; background: #008000;height: 200px;float: left"></div>
<!--1.清除浮动方案一 -->
<div style="clear: both;"></div>
</div>
<div style="height: 100px;background-color: #FFFF00;"></div>
</body>
</html>
image.png
5.disply
1.HTML中标签分为块和行内
2.CSS中中标签分为3类：块，行内快，行内（display）
（在标准流中）
inline-block标签（行内块）：在右边会有一个空隙，目前没有办法清除），不能和其他标签无缝连接
block：块（一个占一行，默认宽度是100%，高度根据内容来确定；直接设置宽高有效）
inline-block：行内块(一行可以有多个，默认高度是内容的宽高；直接设置宽高有效)
inline：行内（一行可以有多个，默认高度是内容的宽高；直接设置宽高无效）
转换就直接在标签的样式表中直接设置disply的值为相应的值（改变标签的性质）块、行内块、行内之间切换
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style type="text/css">
div{
display: block;
background-color: #DB7093;
width: 100px;
height: 200px;
}
</style>
</head>
<body>
<span id="a" style="background-color: #00FFFF;">
wyeiqohj
</span>
<span id="a" style="background-color: darkgoldenrod; ">
wqewr
</span>
<div id="">
aaa <br>bbb
</div>
</body>
</html>
image.png
6.定位
1.距离
top: 标签顶部距离其它标签的位置
bottom：标签的底部距离其它标签的距离
left：标签的左边距离其它标签的距离
right：标签的右边距离其它标签的距离
2.position
想要设置标签的值top\bottom\left\right的值有效，必须设置标签的参考对象
initial(默认值)没有参考对象
absolute:相对第一个position的值是非static非initial的父标签进行定位
relative：正常位置定位（按照标准流定位）
fixed:相对于浏览器定位
sticky:不滚动的时候按照标准流定位，滚动的时候相对于浏览器定位
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style type="text/css">
#d1{
position: relative;
width: 500px;
height: 500px;
background-color: #DB7093;
/* top: =120px; */
top: 200px;
}
#d2{
position: fixed;
width: 100px;
height: 100px;
background-color: #FF0000;
top: 100px;
}
</style>
</head>
<body>
<div id="d1">
<div id="d2">
</div>
</div>
<div id="" style="height: 300px;width: 300px;background-color: #FFFF00;">
</div>
</body>
</html>
image.png
7.relative练习
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style type="text/css">
div div{
float: left;
background-color: green;
width: 100px;
height: 100px;
position: relative;
margin-left: 20px;
margin-top: 20px;
}
#d1{
overflow: hidden;
}
</style>
</head>
<body>
<div id="d1" style="width: 500px;background-color: black;">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<!-- <div id="d2" style="height: 200px;background-color: #000000;"> -->
</div>
</body>
</html>
image.png
8.盒子模型
每一个标签都是有四个部分组成的：
1.内容：显示标签内容的部分，可见的（设置宽和高的值，就是设置内部内容的大小）
2.内边距（padding）：可见的，不能显示内容（通过passing来改变其值，默认是0）
3.变宽（border）：可见的，如果有内边距变宽就显示在内边距上，否则显示在内容上
4.外边距（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">
/*写网页的时候首先在样式表的最前面关闭自带的所有的margin值和padding值 */
*{
margin: 0;
padding: 0;
}
div{
background-color: green;
/*1.设置内容的大小 */
width: 100px;
height: 100px;
/*2.padding的值有四个
可以单独设,也可以一起设
*/
padding: 20px; /* 上下左右的内边距都是20 */
padding: 20px 40px; /* 上下内边距都是20,左右的内边距都是40 */
/* 3.边框
可以单独设，也可以一起设
格式：宽度 样式 颜色
a.样式：solid -实线 dotted -点状线 double -双线 dashed -虚线
*/
/*同时设置4条边的颜色和样式，宽度等 */
border: 3px solid black;
/*单独设置某条边的颜色和样式，宽度等 */
/* border-left: 10px solid red;
border-bottom: 5px solid greenyellow; */
/*4.外边距 */
/* 同时设置外边距一样的值*/
/* margin：上 左 下 右
margin：上/下 左/右*/
margin: 100px;
/* 单独设置外边距*/
margin-top: 100px;
margin-left: 100px;
/* 5.设置圆角幅度
在可见的地方添加*/
/* 设置所有的角*/
border-radius: 10px;
/* 设置左上角*/
/* border-top-left-radius: 10; */
}
</style>
</head>
<body>
<div>
abc
</div>
<div>
123
</div>
</body>
</html>
image.png
9.居中
1.垂直居中
a.固定标签高度
b.设置属性line-height的值和高度一样
2.水平居中
text-align: center;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style type="text/css">
div{
height: 100px;
background: hotpink;
line-height: 100px;
text-align: center;
}
p{
/*垂直居中 */
display: inline-block;
height: 50px;
line-height: 50px;
width: 200px;
background-color: green;
/*水平居中 */
text-align: center;
}
</style>
</head>
<body>
<div id="d1">
<p id="p1">坚持比努力更可拍</p>
</div>
</body>
</html>
image.png
网友评论