总结
1、选择器的权重
选择器的权重
类型选择器（元素选择器）：0001
class选择器：0010
id选择器：0100
层级（包含）选择器：多个选择器的权重之和
群组选择器：分开看每个选择器的权重
谁的权重值大，谁的优先级就高
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
</html>
2、浮动
标准流：块标签一个占一行，从上往下布局。
行内标签哟行可以显示多个，从左往右布局，直到遇到边界就自动换行。
脱流：浮动、定位
浮动：就是让竖着的标签横着来,块的宽度默认为内容的宽度
float：left和right
如果要使用浮动，name同一级的所有标签都要浮动
若果父标移动了，子标也会移动
从上往下从左往右
<!--<!DOCTYPE html>-->
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#top{
float: left;
background-color: red;
height: 150px;
width: 100%;
}
#m1{
float: left;
background-color: darkmagenta;
height: 500px;
width: 20%;
}
#m2{
float: left;
background-color:azure;
height: 500px;
width: 65%;
}
#m3{
float: right;
background-color: cadetblue;
height: 500px;
width: 15%;
}
#m4{
width: 100%;
height: 180px;
float: left;
background-color: gold;
}
</style>
</head>
<body>
<div id="top"></div>
<div id="m1"></div>
<div id="m2"><img style="max-height: 100%;max-width: 100%;" src="img/u=3390069931,496658555&fm=27&gp=0.jpg"/></div>
<div id="m3"></div>
<div id="m4"></div>
</body>
</html>
3、文字环绕
一句话总结
文字环绕：被文字环绕的标签浮动，文字标签不浮动
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#d1{
float: left;
background-color: blue;
width: 80px;
height: 80px;
}
#d2{
width: 200px;
background-color: #F0FFFF;
height: 200px;
}
</style>
</head>
<body>
<div id="d1">
</div>
<div id="d2">
<p>
aajkjalkjflkaf;akjfjalkjflkajlkjlkjlkjlj;ljajsdkajlkjdlkasjdlajlkdjajjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj
</p>
</div>
</body>
</html>
4、清除浮动
1.清除浮动：是指清除因为浮动而产生的问题(高度塌陷) --- 问题不是什么时候都会产生的
2.怎么清除浮动？
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属性
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: 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、定位
定位
1.距离
top：标签顶部距离其他标签的位置
bottom：标签的底部到距离其他标签的位置
left：标签的左边到其他坐标的位置
right：标签的右边到其他坐标的位置
2.position
想要设置标签的top等的值有效，必须设置标签的参开方式
initial：（默认值）
absoulute:相对第一个position的值是非static的父标签进行定位
relative：整除位置定位（按标准流定位）
fixed：相对于浏览器定位
sticky：鼠标不滚动的首按标准流定位，滚动时按浏览器定位
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#ddd{
width: 400px;
height: 400px;
background-color: #FF0000;
/*top: 100px;
position: absolute;*/
}
#dd1{
width: 100px;
height: 100px;
background-color: chartreuse;
top: 100px;
left: 50px;
position: absolute;
}
</style>
</head>
<body>
<div id="ddd">
<div id="dd1">
</div>
</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: #0000FF;
position: relative;
margin-top:20px ;
margin-left: 20px;
}
</style>
</head>
<body>
<div style="width: 500px;height: 380px;background-color: #FF0000;">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>
效果图
image.png
8、盒子模型
每一个标签都是由四个部分组成的，分别对应的是内容：
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: darkgreen;
width: 100px;
height: 100px;
/*padding值有4个,可以单独设，也可以一起设*/
/*padding-left:20px ;
padding-top: 20px;
padding-right: 20px;
padding-bottom: 20px;*/
/*padding: 10px;*/
padding: 20px 20px;
/*border也可以单独设置，也可以一起设*/
border: 3px solid black; /*大小 样式 颜色*/
border-right:4px solid chartreuse;
/*设置边框圆角的度数*/
/*border-radius:70px ;*/
border-bottom-left-radius: 80px;
border-top-right-radius:80px ;
/*外边距也可以单独设置也可以一起设置*/
margin:20px ;
margin-top: 40px;
/*margin: 上 右 下 左;
margin: 上/下 右/左;*/
}
</style>
</head>
<body>
<div>
aaa
</div>
</body>
</html>
效果图
image.png
9、居中
垂直居中
a。固定标签高度
b。设置属性line-height的值和高度一样
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#qqq{
height: 100px;
width: 100%;
background-color: #FFD700;
line-height: 100px;
}
#qq1{
text-align: center;
}
</style>
</head>
<body>
<div id="qqq">
<form id="qq1" style="line-height: 100px;text-align: center;">
<p style="width: 300px;height: 50px;background-color: #F0FFFF;line-height: 50px;text-align: center;">
李白喝米汤
</p>
</form>
</div>
</body>
</html>
网友评论