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>
2. 浮动
标准流：块标签一个占一行，从上往下布局。默认宽度是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: red;
/*background-color: rgba(0,0,0,0);*/
height: 150px;
width: 100%;
}
#m1{
float: left;
height: 500px;
width: 20%;
background-color: deeppink;
/*background-color: rgba(0,0,0,0);*/
}
#m2{
float: left;
height: 500px;
width: 70%;
background-color: goldenrod;
/*background-color: rgba(0,0,0,0);*/
}
#m3{
/*float: right;*/
height: 500px;
/*width: 10%;*/
background-color: green;
}
#bottom{
float: left;
width: 100%;
height: 100px;
background: yellowgreen;
}
</style>
</head>
<body>
<div id="top"></div>
<div id="m1"></div>
<div id="m2">
<p>依据《网络安全法》，为保障您的账户安全和正常使用，请尽快完成手机号验证！ 新版《京东隐私政策》已上线，将更有利于保护您的个人隐私</p>
</div>
<div id="m3">
阿是否可江安河上的发
</div>
<div id="bottom"></div>
</body>
</html>
3. 文字环绕
文字环绕: 被文字环绕的标签浮动，文字标签不浮动
<!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>
<img id="d1" src="img/luffy3.png"/>
<p id="d2">
方递费加哈萨克货到付款撒都<br />分开哈萨克东方航<br />空撒货到付款阿士大夫<br />看撒谎快递费开始浇返回
</p>
</body>
</html>
4. 清除浮动
- 清除浮动：是指清除因为浮动而产生的问题(高度塌陷) --- 问题不是什么时候都会产生的
- 怎么清除浮动？
a.添加空的div：
在父标签(高度塌陷的标签)的最后添加一个空的div,并且设置这div的样式表: clear:both
（可能会产生大量的额外的代码）
b.设置overflow：
在父标签中设置样式表的overflow的值为hidden
c.after{display:block;clear:both;content:".";visibility:hidden;height:0;} clear{zoom:1;}
<!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: royalblue;" class="clear">
<div style="width: 30%; background-color: peru; float: left;">
<img src="img/luffy3.png" alt="" />
</div>
<div style="width: 30%; background-color: plum; height: 200px; float: left;"></div>
<!--1.清除浮动方案1-->
<!--<div id="" style="clear: both;"></div>-->
</div>
<div style="height: 100px; background-color: green;"></div>
</body>
</html>
5. display属性
- HTML中标签分为块和行内
- 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: block;*/
background-color: hotpink;
width: 200px;
height: 100px;
}
</style>
</head>
<body>
<input type="text" name="" id="" value="" style="width: 100px;height: 100px; display: block;"/>
<span id="" style="background-color: wheat; width: 300px; height: 100px;">
ABC拿到的
</span>
<span id="" style="background-color: brown; display: inline-block;">
ABC拿到的
</span>
<p id="" style="display: inline-block;">
aaa <br />
bbb
</p>
<span id="">
ajssjjdh
</span>
</body>
</html>
6. 定位
定位
- 距离
top: 标签顶部距离其他标签的位置
bottom: 标签的底部距离其他标签的位置
left: 标签的左边距离其他标签的位置
right: 标签的右边到其他标签的位置 - 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: cadetblue;
/*margin-top: 320px;*/
/*top: 320px;*/
top: 20px;
}
#d2{
position: fixed;
width: 100px;
height: 100px;
background-color: salmon;
/*top: 100px;*/
right: 20px;
bottom: 50px;
}
#d3{
/*float: right;*/
position: sticky;
/*top: 120px;*/
width: 100px;
bottom: 20px;
/*right: 20px;*/
}
</style>
</head>
<body>
<div id="d1">
<div id="d2">
</div>
</div>
<div id="" style="height: 20px; background-color: yellow; width: 200%;">
</div>
<div id="d3" style="height: 60px; background-color: purple;">
</div>
</body>
</html>
7. relative练习
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div div{
float: left;
width: 100px;
height: 100px;
background-color: green;
/*position: relative;*/
/*left: 20px;*/
/*top: 20px;*/
margin-left: 20px;
margin-top: 20px;
}
#d1{
overflow: hidden;
}
</style>
</head>
<body>
<div id="d1" style="width: 500px; background-color: yellow;">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<!--js代码-->
<!--<script type="text/javascript">
for (var i = 0; i < 100; i++) {
document.write("<div></div>")
}
</script>-->
</div>
<div id="" style="height: 200px; background-color: salmon;">
</div>
</body>
</html>
8. 盒子模型
每一个标签都是由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;
}*/
body,p,a{
margin: 0;
padding: 0;
}
#d1{
float: left;
background-color: sandybrown;
/*1. 设置内容大小*/
width: 100px;
height: 100px;
/*2. padding的值有四个
* 可以单独设，也可以一起设
*/
/*padding-left:20px ;
padding-top: 10px;*/
padding: 10px; /*上下左右的内边距都是10*/
padding: 20px 40px; /*上下是20，左右是40*/
/*3.边框
* 可以单独设，也可以一起设
* 格式: 宽度 样式 颜色
* a.样式 solid-实线 dotted-点状线 double-双线 dashed-虚线
*/
/*单独设置一条边框的宽度、样式和颜色*/
/*border-left:5px solid red;
border-bottom:8px solid green;*/
/*同时设置4条边框的宽度、样式和颜色*/
border: 3px solid black;
/*单独设置某一条边的颜色*/
border-left-color: royalblue;
/*设置边框圆角的弧度*/
/*border-radius: 5px;*/
border-top-left-radius: 30px;
border-bottom-right-radius: 30px;
/*4.外边距*/
/*单独设置每个外边距*/
/*margin-top: 100px;
margin-left: 50px;
margin-right: 100px;*/
/*给所有的外边距设置成一样的值*/
/*margin:上 右 下 左
*margin: 上/下 右/左
*/
margin: 20px;
}
</style>
</head>
<body>
<div id="d1">
abc
</div>
<div id="" style="height: 100px; width: 100px; background-color: blueviolet; float: left;">
</div>
</body>
</html>
9. 居中
- 垂直居中
a.固定标签高度
b.设置line-height的值和高度一样
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#d1{
height: 100px;
width: 100%;
line-height: 100px;
background-color: hotpink;
text-align: center;
}
#p1{
display: inline-block;
/*垂直居中*/
height: 50px;
line-height: 50px;
width: 300px;
background-color: green;
/*水平居中*/
text-align: center;
}
</style>
</head>
<body>
<div id="d1">
<div id="p2">
<p id="p1">床前明月光,疑是地上霜</p>
</div>
</div>
</body>
</html>
作业：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
body{
background-color: papayawhip;
}
/*内容部分*/
.father{
width: 1300px;
overflow: hidden;
margin: 0 auto;
}
/*1*/
h2{
text-align: center;
}
.d1,.d2,.d3{
width: 380px;
height: 450px;
float: left;
margin-right: 20px;
margin-bottom: 20px;
}
.d2,.d3{
width: 380px;
height: 450px;
float: left;
margin-right: 20px;
background-color: white;
}
.line{
width: 350px;
height: 420px;
margin-top:20px ;
border: 5px solid black;
}
.img1{
position: relative;
left: 35px;
bottom: 25px;
}
/*2*/
.p1,.p3{
float: left;
font-size: 25px;
margin-left: 15px;
margin-top: 10px;
font-weight: normal;
}
.s1 img,.s2 img{
float: left;
margin-left: 10px;
margin-top: 13px;
}
.p2,.p4{
float: left;
margin-left: 10px;
margin-top: 18px;
}
.img2,.img3{
margin-left: 15px;
}
.img2{
margin-top: 5px;
}
.img4{
margin-left: 5px;
}
.img3,.img4{
margin-top: 5px;
}
/*右边部分*/
.icon{
width: 37px;
height: 270px;
border: 1px solid red;
position: fixed;
right: 0;
top: 50%;
margin-top: -135px;
background-color: cadetblue;
}
.icon img:hover{
background-color: black;
}
</style>
</head>
<body>
<!--内容部分-->
<br />
<h2>———— 居 家 优 品 ————</h2>
<br /><br />
<div class="father">
<!--1-->
<div class="d1">
<div class="line">
<a href=""><img src="img/1.jpg" class="img1"/></a>
</div>
</div>
<!--2-->
<div class="d2">
<a href="">
<div class="s1">
<h3 class="p1">家电馆</h3>
<img src="img/8.png"/>
<span class="p2">家电好物节</span>
</div>
</a>
<a href=""><img src="img/2.jpg" class="img2"/></a>
<a href=""><img src="img/3.jpg" class="img3"/></a>
<a href=""><img src="img/4.jpg" class="img4"/></a>
</div>
<!--3-->
<div class="d3">
<a href="">
<div class="s2">
<h3 class="p3">我爱我家</h3>
<img src="img/8.png"/>
<span class="p4">品质生活家</span>
</div>
</a>
<a href=""><img src="img/5.jpg" class="img2"/></a>
<a href=""><img src="img/6.jpg" class="img3"/></a>
<a href=""><img src="img/7.jpg" class="img4"/></a>
</div>
</div>
<!--重复-->
<div class="father">
<!--1-->
<div class="d1">
<div class="line">
<a href=""><img src="img/1.jpg" class="img1"/></a>
</div>
</div>
<!--2-->
<div class="d2">
<a href="">
<div class="s1">
<h3 class="p1">家电馆</h3>
<img src="img/8.png"/>
<span class="p2">家电好物节</span>
</div>
</a>
<a href=""><img src="img/2.jpg" class="img2"/></a>
<a href=""><img src="img/3.jpg" class="img3"/></a>
<a href=""><img src="img/4.jpg" class="img4"/></a>
</div>
<!--3-->
<div class="d3">
<a href="">
<div class="s2">
<h3 class="p3">我爱我家</h3>
<img src="img/8.png"/>
<span class="p4">品质生活家</span>
</div>
</a>
<a href=""><img src="img/5.jpg" class="img2"/></a>
<a href=""><img src="img/6.jpg" class="img3"/></a>
<a href=""><img src="img/7.jpg" class="img4"/></a>
</div>
</div><div class="father">
<!--1-->
<div class="d1">
<div class="line">
<a href=""><img src="img/1.jpg" class="img1"/></a>
</div>
</div>
<!--2-->
<div class="d2">
<a href="">
<div class="s1">
<h3 class="p1">家电馆</h3>
<img src="img/8.png"/>
<span class="p2">家电好物节</span>
</div>
</a>
<a href=""><img src="img/2.jpg" class="img2"/></a>
<a href=""><img src="img/3.jpg" class="img3"/></a>
<a href=""><img src="img/4.jpg" class="img4"/></a>
</div>
<!--3-->
<div class="d3">
<a href="">
<div class="s2">
<h3 class="p3">我爱我家</h3>
<img src="img/8.png"/>
<span class="p4">品质生活家</span>
</div>
</a>
<a href=""><img src="img/5.jpg" class="img2"/></a>
<a href=""><img src="img/6.jpg" class="img3"/></a>
<a href=""><img src="img/7.jpg" class="img4"/></a>
</div>
</div><div class="father">
<!--1-->
<div class="d1">
<div class="line">
<a href=""><img src="img/1.jpg" class="img1"/></a>
</div>
</div>
<!--2-->
<div class="d2">
<a href="">
<div class="s1">
<h3 class="p1">家电馆</h3>
<img src="img/8.png"/>
<span class="p2">家电好物节</span>
</div>
</a>
<a href=""><img src="img/2.jpg" class="img2"/></a>
<a href=""><img src="img/3.jpg" class="img3"/></a>
<a href=""><img src="img/4.jpg" class="img4"/></a>
</div>
<!--3-->
<div class="d3">
<a href="">
<div class="s2">
<h3 class="p3">我爱我家</h3>
<img src="img/8.png"/>
<span class="p4">品质生活家</span>
</div>
</a>
<a href=""><img src="img/5.jpg" class="img2"/></a>
<a href=""><img src="img/6.jpg" class="img3"/></a>
<a href=""><img src="img/7.jpg" class="img4"/></a>
</div>
</div>
<!--右边部分-->
<div class="icon">
<a href=""><img src="img/1_02.png"/></a>
<a href=""><img src="img/1_04.png"/></a>
<a href=""><img src="img/1_05.png"/></a>
<a href=""><img src="img/1_07.png"/></a>
<a href=""><img src="img/1_09.png"/></a>
<a href=""><img src="img/1_11.png"/></a>
<a href=""><img src="img/1_13.png"/></a>
</div>
</body>
</html>
网页效果：
1.jpg
