1.选择器的权重
1）类型选择器:
- 元素选择器：0001
- class选择器：0010
- id选择器：0100
- 层级(包含)选择器：多个选择器的权重之和
- 群组选择器：分开看每个选择器的权重
- 权重越值大，优先级越高
2.浮动
1）标准流：
块标签一个占一行，从上往下布局。行内标签一行可以显示多个，从左往右布局，直到遇到边界就自动换行
2）脱流：
浮动、定位
3）浮动：
就是让竖着显示的标签横着显示
float:left和right
注意：如果要使用浮动，那么同级的的所有标签也要浮动，如果父标签浮动，那么子标签也会跟着浮动
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*div{
float: left;
}*/
/*#red{
float: left;
}*/
#top{
width: 100%;
height:100px;
background-color: red;
float: left;
}
#left{
width: 25%;
height: 480px;
background-color: green;
float: left;
}
#center{
width: 60%;
height: 480px;
background-color: darkmagenta;
float: left;
}
#right{
width: 15%;
height: 480px;
background-color: forestgreen;
float: left;
}
#bottom{
width: 100%;
height: 80px;
background-color: darkgoldenrod;
float: left;
}
</style>
</head>
<body >
<!--<div id="" style="width: 500px;" align="center">
<div id="top"style="width: 500px;height: 80px;background-color: red;">
div1
</div>
<div id="left" style="width: 150px;height: 300px;background-color: green;">
div2
</div>
<div id="center" style="width: 250px;height: 300px;background-color: darkmagenta;">
div3
</div>
<div id="right" style="width: 100px;height: 300px;background-color: forestgreen;">
div4
</div>
<div id="bottom" style="width: 500px;height: 60px;background-color: darkgoldenrod;">
div5
</div>
</div>-->
<!--============-->
<!--<div id="top"style="width: 100%;height:100px;background-color: red;">
div1
</div>
<div id="left" style="width: 25%;height:480px;background-color: green;">
div2
</div>
<div id="center" style="width: 60%;height: 480px;background-color: darkmagenta;">
div3
</div>
<div id="right" style="width: 15%;height: 480px;background-color: forestgreen;">
div4
</div>
<div id="bottom" style="width: 100%;height: 80px;background-color: darkgoldenrod;">
div5
</div>-->
<div id="top">
div1
</div>
<div id="left">
div2
</div>
<div id="center">
div3
</div>
<div id="right">
div4
</div>
<div id="bottom">
div5
</div>
</body>
</html>
结果：
div模型.JPG
练习：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#main{
width: 500px;
height: 600px;
left: 400px;
top: 50px;
position: absolute;
text-align: center;
}
#top{
width: 100%;
height: 100px;
background-color: green;
float: left;
}
#left{
width: 20%;
height: 400px;
background-color: brown;
float: left;
}
#right_top{
width: 80%;
height: 100px;
background-color: yellow;
float: left;
}
#center{
width: 60%;
height:300px;
background-color: blue;
float: left;
}
#right_center{
width: 20%;
height: 100px;
background-color: aquamarine;
float: left;
}
#right_botoom{
width: 20%;
height: 250px;
background-color: red;
float: left;
}
</style>
</head>
<body>
<div id="main">
<div id="top">
div1
</div>
<div id="left">
div2
</div>
<div id="right_top">
div3
</div>
<div id="center">
div4
</div>
<div id="right_center">
div5
</div>
<div id="right_botoom">
div6
</div>
</div>
</body>
</html>
结果：
练习.JPG
3.文字环绕：被文字环绕的标签浮动，文字标签不浮动
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#d1{
float: left;
width: 60px;
height: 60px;
background-color: red;
}
</style>
</head>
<body>
<div id="d1">
</div>
<div id="d2">
地方将时代峻峰跨世纪的福克斯的金刚狼十几个离开世界观看了，<br />地方将时代峻峰跨世纪的福克斯的金刚狼十几个离开世界观看,<br />了
地方将时代峻峰跨世纪的福克斯的金刚狼十几个离开世界观看了，<br />地方将时代峻峰跨世纪的福克斯的金刚狼十几个离开世界观看了
</div>
</div>
</div>
</div>
</body>
</html>
结果：
文字环绕.JPG
4.清除浮动
1清除浮动：
是指清除因为浮动而产生的问题(高度塌陷)--问题不是任何时候都会产生的
1）添加空的div
在父标签里(高度塌陷的标签)的最后添加一个空的div，并且设置这个div的样式表：clear：both
缺点：可能会产生大量的额外的代码
2）设置overflow:
在父标签的样式中overflow的值设为hidden
3）万能清除法
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*方案二*/
/*.clear{
overflow: hidden;
}*/
/*清除浮动放啊*/
.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: green; " class="clear">
<div style="width: 30%;height: 200px; background-color: blueviolet; float: left;"></div>
<div style="width: 30%;height: 200px;background-color: black;float: left;"></div>
<!--清除浮动方案1-->
<!--<div id=""style="clear: both;"></div>-->
</div>
<div style="height: 100px; background-color: red;"></div>
</body>
</html>
结果：
为清除：
塌陷.JPG
已清除：
清除塌陷.JPG
5.Display
- HTML中标签分为块和行内
- CSS中标签分为3类：块、行内块、行内(display)
- block:块(一个占一行，默认宽度100%，高度根据内容来定；直接设置宽高有效)
- inline-block：行内块(一行可以有多个，默认宽高由内容来定，直接设置宽高有效)
input - inline:行内(一行可以有多个，默认宽高有内容来定，直接设置宽高无效)
span
注意： - 通过改变标签的display的值，可以让一个标签在块，行内块和行内之间任意切换--前提是在标准流中
- inline-block标签的右边默认都有一个空隙，不能和其他标签无缝连接(无法解决)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<span id=""style="width: 50px;height: 50px;background-color: greenyellow;">
dfsdf
</span>
<span id="" style="display: inline-block;width: 50px;height: 60px;background-color: red;">
sdfsfsf
</span>
<span id="" style="display: block;width: 50px;height: 60px;background-color: red;">
sdfsfd<br/>sfdfsf
</span>
</body>
</html>
结果：
Display.JPG
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">
<title></title>
<style type="text/css">
#d1{
width: 400px;
height: 1000px;
background-color: red;
/*top: 120px;*/
/*margin-top: 320px;*/
/*top: 200px;*/
position: relative;
}
#d2{
width: 50px;
height: 50px;
background-color: black;
bottom: 70px;
right: 40px;
position: fixed;
}
#d3{
height: 50px;
background-color: green;
bottom: 20px;
position: sticky;
}
</style>
</head>
<body>
<div id="d1">
<div id="d2">
</div>
</div>
<div id="d3" >
</div>
</body>
</html>
结果：
简书.JPG
7.盒子模型
每个标签都是由四个部分组成：
1）内容：
显示标签内容的部分，可见(给标签设置宽和高的值，就是设置内容部分的大小)
2)padding(内边距):
可见，不能显示内容(通过设置padding来改变其值，默认值0)
3)border(边框)：
可见，如果有内边距边框就显示在内边距上，否则显示在内容上
4)margin(外边距)：
不可见，但会占据浏览器的控件
5)radius(设置圆角)
例
border-bottom-right-radius:；;
border-radius:;
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*注意：以后在写网页的时候，在样式表的最前面关闭自带的所有的margin和padding*/
/**{
margin: 0;
padding: 0;
}*/
body,a,p{
margin: 0;
padding: 0;
}
div{
background-color: rosybrown;
/*设置内容大小*/
width: 100px;
height: 100px;
/*设置padding的值，有四个*/
/*可单独设置*/
padding-left: 10px;
padding-top: 10px;
/*可以一起设置*/
padding: 10px;/*四边边距都是10*/
padding: 20px,40px;/*上下20,左右40*/
/*设置边框*/
/*可以单独设置*/
/*格式:宽度 样式 颜色*/
/*样式：solid-实线 dotted-点状线 double-双线 dashed-虚线*/
/*border-left:5px solid red ;*/
/*同时设置四条边的宽度样式颜色*/
border: 3px solid black;
border-left: 10px solid red;
/*外边距*/
/*单独设置边*/
margin-top:50px ;
margin-left:50px ;
/*同时设置多个*/
/*设置顺序为顺时针*/
margin: 100px;
/*设置圆角*/
border-top-left-radius: 20px;
border-bottom-right-radius: 20px;
/*border-radius:30px ;*/
}
</style>
</head>
<body>
<div id="">
abs
</div>
</body>
</html>
结果：
简书1.JPG
8.居中
1)垂直居中
固定标签的高度
设置属性line-height的值和高度一样
2）水平居中
text-align:center
<!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;
text-align: center;
background-color: hotpink;
}
p{
display: inline-block;
/*margin-top:25px ;*/
height: 50px;
line-height: 50px;
width: 200px;
background-color: green;
/*position: absolute;*/
}
</style>
</head>
<body>
<div id="">
<p>窗前明月光，疑是地上霜</p>
</div>
</body>
</html>
结果：
简书2.JPG
