selector {
property: value;
property: value;
property: value
...
}
<p style="background-color: rebeccapurple">hello world</p>
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p{
background-color: #2b99ff;
}
</style>
</head>
<link href="mystyle.css" rel="stylesheet" type="text/css"/>
<style type="text/css">
@import"mystyle.css"
</style>
p {color:green;}
div {color:red;}
#info {olor:blue;}
.info {background:#ff0;}
.info.con {background:blue;}表示同时满足两个类
* {margin:0; padding:0;}
同时匹配所有E或F元素，E,F元素之间逗号分隔
div,p {color:#f00;}
匹配所有属于E元素后代的F元素，E和F之间空格分隔
li a {font=weight:bold;}
匹配所有E元素的子元素F
div p {color:#ff0;}
匹配所有紧随E元素之后的同级元素F
div+p {color:#f00;}
匹配E元素之后的同级元素F
.div1~p {font-size:300px;}
匹配所有具有att属性的E元素，不考虑值，E可省略
p[attr]{cocor:#f00;}
匹配所有att属性等于val的E元素
div[attr="value"]{color:red;}
匹配所有att属性具有多个空格分隔的值，其中一个值等于val的E元素
td[attr~="value"]{color:red;}
匹配属性值以指定值开头的每个元素
div[attr^="value"]{color:red;}
匹配属性值以指定值结尾的每个元素
div[attr$="value"]{color:red;}
匹配属性值中包含指定值的每个元素（模糊匹配）
div[attr*="value"]{color:red;}
background:#ffffff url('1.png') no-repeat right top;border: 30px rebeccapurple solid;针对列表标签的属性声明
<img src=”https://github.com/fangmingc/ChuannBlog/blob/master/Web/box-model.png” width=400>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
}
.r1 {
width: 300px;
height: 100px;
background-color: #7A77C8;
float: left;
}
.r2 {
width: 200px;
height: 200px;
background-color: wheat;
/*float: left;*/
}
.r3 {
width: 100px;
height: 200px;
background-color: darkgreen;
float: left;
}
</style>
</head>
<body>
<div class="r1"></div>
<div class="r2"></div>
<div class="r3"></div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
}
.r1{
width: 100px;
height: 100px;
background-color: #7A77C8;
float: left;
}
.r2{
width: 200px;
height: 200px;
background-color: wheat;
}
</style>
</head>
<body>
<div class="r1"></div>
<div class="r2">region2</div>
</body>
</html>
父级坍塌现象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.container {
border: 1px solid red;
width: 300px;
}
#box1 {
background-color: green;
float: left;
width: 100px;
height: 100px;
}
#box2 {
background-color: deeppink;
float: right;
width: 100px;
height: 100px;
}
#box3 {
background-color: pink;
height: 40px;
}
</style>
</head>
<body>
<div class="container">
<div id="box1">box1 向左浮动</div>
<div id="box2">box2 向右浮动</div>
</div>
<div id="box3">box3</div>
</body>
</body>
</html>
能确定内容多高，这种情况下“.container是可以设置一个高度即可解决覆盖问题。
<div class="container" style="height: 100px">
<div id="box1">box1 向左浮动</div>
<div id="box2">box2 向右浮动</div>
<!--<div id="empty" style="height: 100px"></div>-->
</div>
<div id="box3">box3</div>
clear属性只会对自身起作用，而不会影响其他元素。
.clearfix:after { /*在类名为“clearfix”的元素内最后面加入内容；
content: "."; /*内容为“.”就是一个英文的句号而已。也可以不写。
display: block; /*加入的这个元素转换为块级元素。
clear: both; /*清除左右两边浮动。
visibility: hidden; /*可见度设为隐藏。注意它和display:none;是有区别的。这里仍然占据空间，只是看不到而已；
line-height: 0; /*行高为0；
height: 0; /*高度为0；
font-size:0; /*字体大小为0；
}
<div class="container">
<div id="box1">box1 向左浮动</div>
<div id="box2">box2 向右浮动</div>
<div class="clearfix"></div>
</div>
<div id="box3">box3</div>
overflow：hidden的含义是超出的部分要裁切隐藏，float的元素虽然不在普通流中，但是他是浮动在普通流之上的，可以把普通流元素+浮动元素想象成一个立方体。如果没有明确设定包含容器高度的情况下，它要计算内容的全部高度才能确定在什么位置hidden，这样浮动元素的高度就要被计算进去。这样包含容器就会被撑开，清除浮动。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
}
.outet{
/*position: relative;*/
}
.item{
width: 200px;
height:200px ;
}
.r1{
background-color: #7A77C8;
}
.r2{
background-color: wheat;
/*position: relative;*/
position: absolute;
top: 200px;
left: 200px;
}
.r3{
background-color: darkgreen;
}
</style>
</head>
<body>
<div class="item r1"></div>
<div class="outet">
<div class="item r2"></div>
<div class="item r3"></div>
</div>
</body>
</html>
| 注意： 一个元素若设置了 position:absolute | fixed; 则该元素就不能设置float。 |