01选择器的权重
选择器的权重
类型选择器（元素选择器）：0001
class选择器：0010
id选择器：0100
层级（包含）选择器：多个选择器的权重的和
-
谁的权重的值大，谁的优先级就高
02浮动
标准流：
- 块标签一个占一行，从上往下布局。默认宽度是100%
- 行内标签一行可以显示多个，从左往右布局，直到遇到边界就自动换行
脱流：浮动，定位
1.浮动：就是让竖着显示的标签横着来
float：left和right
注意：
1.如果要使用浮动，那么同一级的所有的标签都要浮动
2.如果父标签要浮动，那么子标签的位置会跟着一起动
3.布局基本书序：从上往下，从左往右
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#top{
float:left ;
background-color: dodgerblue;
width: 100%;
height: 150px;
}
#mid1{
float: left;
background-color: deeppink;
width: 30%;
height: 500px;
}
#mid2{
float: left;
background-color: yellow;
width: 70%;
height: 120px;
}
#mid3{
float:left;
background-color: chocolate;
width: 50%;
height: 380px;
}
#bottom{
float: right;
background-color: dodgerblue;
width: 20%;
height: 150px;
}
#bottom1{
float: right;
background-color: red;
width: 20%;
height: 280px;
}
</style>
</head>
<body>
<div id="top">
<!-- <a href="">百度一下</a>
--> </div>
<div id="mid1"></div>
<div id="mid2"></div>
<div id="mid3">
<img src="img/image.jpeg"style="width: 50px;height: 50px;"/>
</div>
<div id="bottom">
<p align="center">快跑，前方有煞笔</p>
</div>
<div id="bottom1"></div>
</body>
</html>
03文字环绕
<!--
文字环绕：被文字环绕的浮动，文字标签不浮动
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#d1{
float: left;
width: 50px;
height: 50px;
background-color: #1E90FF;
}
#d2{
width: 200px;
}
</style>
</head>
<body>
<img id="d1" src="img/image.jpeg"/>
<div id="d2">
啊实打实大开的是<br />
苦恼说到激动爱神的箭奥斯岛上的骄傲的奇偶阿吉豆给按键都去我家电器的欺骗大家期盼的剧情
</div>
</body>
</html>
04清除浮动
1.清除浮动：是指清除因为浮动而产生的问题（高度塌陷）
2.怎么清除浮动？
a.添加空的div：
在父标签（高度塌陷的标签）的最后添加一个空的div，并且设置这div的样式表：clear：both
（可能会产生大量的额外代码）
b.设置overflow：
在父标签中设置样式表的overflow的值为hidden
<!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: red;"></div>
<div style="background-color: black;" class="clear">
<div style="width:30%; height:200px; background-color: #1E90FF; float: left;">
<!--<img src="img/image.jpeg"/>-->
</div>
<div style="width:30%; height:200px; background-color: pink;float: left;"></div>
<!--1.清除浮动方案1-->
<!--<div style="clear: both;"></div>-->
</div>
<div style="background-color: chocolate;height: 100px;"></div>
</body>
</html>
05display属性
1.HTML中标签分为块和行
2.CSS中标签分为3类：块，行内块，行内（display）
（在标准流中）
block:块（一个占一行，默认宽度是100%，高度默认根据内容来确定；直接设置宽高有效）
inline-block：行内块（一行可以有多个，默认宽高是内容的宽高；直接设置宽高有效）
inline：行内（一行可以有多个，默认宽高是内容的宽高；设置宽高无效）
通过改变标签的display的值，可以让一个标签在块，行内块和行之间任意切换
注意：inline-block标签的右边默认都有一个间隙，不能和其他标签无缝连接（这个间隙目前没有办法清除）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
p{
/*display: inline-block;*/
background-color: #1E90FF;
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<input type="text" name="" id="" value="" style="width: 200px;"/>
<span id="" style="background-color: #FFFF00;width: 300px;display: block;">asdasdfasdf</span>
<span id="" style="background-color: deeppink;width: 300px;">asdasdfasdf</span>
<p id="" style="display: inline-block">
aaa <br />
bbb
</p>
</body>
</html>
06定位
定位
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">
<title></title>
<style type="text/css">
#d1{
position: relative;
width: 500px;
height: 500px;
background-color: cornflowerblue;
/*margin-top: 300px;*/
top: 20px;
}
#d2{
position: fixed;
width: 100px;
height: 100px;
background-color: #D2691E;
right: 100px;
bottom: 20px;
}
#d3{
position: sticky;
width: 100px;
bottom: 20px;
}
</style>
</head>
<body>
<div id="d1">
<div id="d2">
</div>
</div>
<div id="" style="height: 10000px;background-color: blueviolet;">
</div>
<div id="d3" style="height:60px;background-color:orangered;">
</div>
</body>
</html>
07relative 练习
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div div{
float:left;
position: relative;
width: 100px;
height: 100px;
margin-left: 20px;
margin-top: 20px;
background-color: #FFFF00;
border-radius: 5px;
}
#d1{
overflow:hidden;
}
</style>
</head>
<body>
<div id="d1" style="background-color: dodgerblue;width: 500px; height:800px;">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>
08盒子模型
每一个标签都是由4个部分组成：
1.内容：显示标签内容的部分，可见的（设置宽和高的值，就是设置内容部分的大小）
2.内边距（padding）：可见的，不能显示内容（通过设置padding来改变其值，默认是0）
3.边框（border）：可见的，如果有内边距边框就显示在内边距上，否则就显示在内容上
4.外边距（margin）：不可见的，但是会占据浏览器的空间
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*注意：以后在写网页的时候，在样式表的最前面关闭自带的所有margin和padding*/
*{
margin: 0;
padding: 0;
}
#d1{
float: left;
background-color: pink;
/*1.设置内容大小*/
width: 100px;
height: 100px;
/*2.padding的值有四个
可以单独设，也可以一起设*/
/*padding-left: 50px ;*/
padding: 10px; /*上下左右的内边距都是10*/
padding: 20px 40px;/*上下是20，左右是40*/
/*3.边框（border）
*可以单独设，也可以一起设
* 格式：宽度 样式 颜色
* a.样式 solid-实线 dotted-点状线 double-双线
* */
/*单独设置一条边框*/
/*border-left: 2px dashed red;*/
/*同时设置4条边框*/
border:5px solid black;
/*单独设置某一条边的颜色*/
border-left-color: orangered;
/*设置边框的角度*/
/*border-radius: 100px;*/
border-bottom-left-radius: 40px;
border-top-left-radius: 20px;
/*4.外边距*/
/*单独设置每个外边距*/
margin-top: 100px;
margin-left: 50px;
margin-right: 100px;
/*给所有的外边距设置成一样的值*/
/*margin：上右下左*/
/*margin：上下 右左*/
}
</style>
</head>
<body>
<div id="d1">
abc
</div>
<div id=""style="height: 100px;width: 100px;background-color: #FF0000;float: left;">
</div>
</body>
</html>
09居中
1.垂直居中
a.固定标签高度
b.设置属性line-height的值和高度一样
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
div{
height:100px;
width: 100%;
line-height: 100px;
background-color: hotpink;
border-radius: 20px;
text-align: center;
}
p{
display: inline-block;
/*font-size: 10px;*/
/*垂直居中*/
height: 50px;
line-height: 50px;
width:200px;
background-color: cornflowerblue;
border-radius: 5px;
/*水平居中*/
text-align: center;
}
</style>
</head>
<body>
<div id="d1">
<p id="p1">
窗前明月光，疑是地上霜。
</p>
</div>
</body>
</html>
网友评论