01-选择器的优先级
每种选择器都有权重值，权重值越大优先级越高
权重值一样的时候谁后写谁高
标签选择器：0001（1）
class选择器：0010（2）
id选择器：0100（4）
群组选择：单独的看每个选择器的权重
后代选择器：每个但单独选择器的权重和
不管什么情况，内联样式表优先级永远最高
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="div1">
<div id="div2">
<a href=""id="a2"class="ca1">百度</a>
</div>
</div>
</body>
</html>
02-标准流
css用来对内容进行布局和设置样式
1.标准流：在没有写样式的时候，默认的布局方式，就是标准流
在标准流中不同类型的标签布局方式不一样
a.如果是块级标签，一个标签占一行，默认宽度是父级标签的宽度，默认高度是内容的高度，
并且设置宽度和高度有效
b.如果是行内标签，一行可以显示多个，默认高度和宽度都是内容的宽度和高度，设置宽高无效
c.如果是行内块标签，一行可以显示多个，默认高度和宽度都是内容的宽度和高度，设置宽度和高度有效
2.标签的默认分组
块级标签：h1-h6，p，table，ul，ol，dl，li，div...
行内标签：font，input，img，a，select，textarea，span...
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--不使用br的情况下，分两行显示6个a标签-->
<table border="0" cellspacing="" cellpadding="">
<tr><td><a href="01-选择器的优先级.html"></a>
1</td>
<td><a href="02-标准流.html">1</a></td>
<td>1</td></tr>
<tr><td>1</td><td>1</td><td>1</td></tr>
</table>
</body>
</html>
03-display属性
display属性的值代表的是标签的类型：
1.block：快标签
2.inline：行内
3.inline-block：行内块
默认情况下，标签只有行内和块标签，没有行内块的，但可以通过修改display属性来修改
注意：使用行内块的时候，有一个坑，行内块到其他标签的时候有一个间隙，这个间隙无法消除
所以不要用
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--1.块标签变行内-->
<p style="display:inline";>段落1</p>
<p style="display:inline;background-color: yellowgreen";>段落2</p>
<p style="background-color: yellowgreen; display:inline-block;width: 56px;height: 45px;";>段落2</p>
<a href=""style="display: block;background-color: yellow;">12</a>
<div style=" height: 55px;background-color: red;">1</div >
<div style="float:left ;width:50%;height: 90px;background-color: yellow;">1</div >
<div style="float:left ;width:25%;height: 180px;background-color: yellowgreen;">1</div >
<div style="float:left ;width: 25%;height: 180px;background-color: royalblue;">1</div>
<div style="display: block; height: 180px;background-color: red;">1</div>
</body>
</html>
04-浮动
浮动（float）
left：左浮动 - 先上再左
right：右浮动 - 先上再右
1.浮动会脱标 - 标准流的布局方式无效;所有标签都会一行显示多个，
默认大小是内容大小，设置宽高有效
2.浮动
布局原则，努力的向左上角靠
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<p style="background-color: red;float: left;">1</p>
<div style="background-color: red;float: right;width:65px;height: 65px;" >1</div>
</body>
</html>
文字环绕
被环绕的标签浮动，文字标签不浮动
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div style="width: 100px;height: 100px;background-color: chartreuse;float: left;">
</div>
<p style="width: 200px; background-color: red;">
hello hellohello hellohello hello5和史蒂夫但事实上才二手房hi维护费
</p>
</body>
</html>
06-清除浮动
1.高度塌陷
父标签不浮动，子标签浮动，就会出现高度塌陷问题
2.清除浮动
a.添加空盒子 - 在高度塌陷的父标签的后面添加一个空的div，并且设置style的clear属性为both
b.overflow - 选中高度塌陷的标签，设置样式的overflow的值为hidden
c.万能清除法 - id:after{display:block;content:"";visibility:hidden;....}
·
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div style="height: 120px;background-color: red;"></div>
<div style="height: 180px;background-color: yellow;"></div>
<div style="height: 120px;background-color: yellowgreen;">
</div>
<!---->
</body>
</html>
07-定位
1.定位属性
left - 左间距
right - 右间距
top - 上间距
bottom - 下间距
2.position属性 - 设置标签定位时候的参考对象
initial/static（默认值） - 不相对任何对象定位
absolute - 相对于第一个非initial/static的父标签进行定位
relative - 相对当前标签在标准流中的位置定位
（一般把一个标签的position设为relative是为了让标签相对自己定位）
fixed - 相对浏览器定位
sticky - 当网页中内容超过一屏，相对浏览器定位，没有超过就相对标准流的位置定位
一般只针对最后一个标签
注意：定位也会让标签脱流 - 不管怎么脱，标签都是按脱流的方式进行布局
（一行显示多个，设置宽高有效）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#div1{
position: fixed;
left 20px
}
</style>
</head>
<body>
<div id="div1"style="width: 100px;height: 100px;background-color: red;">
</div>
</body>
</html>
08-盒子模型
html中在网页所有可见的标签都是盒子模型，有固定的结构；
所有的标签都是由：内容、padding、border、margin组成，其中margin不可见
其他都是可见。
1.内容(content) - a.设置宽高的值就是在设置内容的大小；
b.标签中添加的内容也是添加到content里面的
， c.设置背景颜色，会作用于content
2.padding - a.通过padding相关属性设置padding大小（4个方向）
b.设置背景颜色，也会作用于padding
3.border（边框） - a.通过border相关属性设置border的大小
b.边框的大小需要单独设置
4.margin - a.通过margin相关属性来设置大小，
b.不可见但是占位
网友评论