一、选择器权重
- 类型选择器（元素选择器）----- 0001
- class选择器 ------ 0010
- id选择器 ----- 0100
- 伪类选择器 ---- 0001
- 层级（包含）选择器 ---- 多个选择器的权重之和
- 群组选择器 ---- 分开看每个选择器的权重
权重高，优先级就高
二、浮动
标准流
- 块标签：一行占一个，从上往下，从左往右。默认宽度是100%
- 行内标签：一行可以显示多个，从左往右布局，直到遇到边界就自动换行。
脱流
- 浮动
- 定位
1. 定义：
就是让竖着显示的标签横着来显示，块的默认宽度是内容的宽度
2. 形式：
float：left 和 right
3. 注意事项
- 如果要使用浮动，同一级的所有标签都要浮动
- 如果父标签浮动，子标签的位置会跟着浮动
- 布局基本顺序：从上往下，从左往右
4. 文字环绕
文字标签不浮动，被环绕的标签浮动
<!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>
三、定位
1. 距离
- top：标签顶部距离其他标签的位置
- bottom：标签底部距离其他标签的位置
- left：标签左边距离其他标签的位置
- right：标签右边距离其他标签的位置
2. position
- 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>
四、清除浮动
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;}
五、display属性
1.HTML中标签分为块和行内
2.CSS中中标签分为3类：块、行内块、行内（display）（在标准流中）
- block:块（一个占一行，默认宽度是100%，高度默认根据内容来确定；直接设置宽高有效）
- inline-block:行内块(一行可以有多个，默认宽高是内容的宽高；直接设置宽高有效)
- inline:行内(一行可以有多个，默认宽高是内容的宽高；设置宽高无效)
通过改变标签的display的值，可以让一个标签在块、行内块个行内之间任意切换
注意：inline-block标签的右边默认都有一个间隙，不能和其他标签无缝连接(这个间隙目前没有办法清除)
六、盒子模型
每一个标签都是由4个部分组成：
1.内容：显示标签内容的部分，可见的（设置宽和高的值，就是设置内容部分的大小）
2.内边距(padding):可见的，不能显示内容（通过设置padding来改变其值，默认是0）
3.边框(border):可见的，如果有内边距边框就显示在内边距上，否则显示在内容上
4.外边距(margin):不可见的，但是会占据浏览器的空间
网友评论