前端复习之css
1.css概述
1 1、CSS3概述
2 1、问题
3 1、设置页面中所有的文本颜色为红色
4 2、设置页面中所有div的文本的颜色为蓝色
5 3、将所有的div的文本的颜色改为黄色
6
7 HTML对样式修改的缺点：
8 1、相同的效果，在不同标签中用的时不同的属性
9 <body text="red">
10 <font color="blue">
11 2、相同效果只能通过复制代码来完成
12 可维护性比较低可重用性比较低
13 2、CSS
14 1、作用：
15 以统一的方式完成相同的页面效果，并且能够提升可重用性和可维护性
16 2、什么是CSS
17 CSS:Cascading Style Sheets , 层叠样式表，或级联样式表，或 样式表
18 特点：
19 1、实现页面内容(html)与样式(css)相分离
20 2、提高代码的可重用性和可维护性
21 3、CSS 与 HTML 之间的关系
22 1、HTML
23 用于构建网页结构，实现页面内容
24 2、CSS
25 只负责修饰网页的样式
26
27 HTML属性 与 CSS之间相冲突时怎么办？
28 W3C推荐尽量使用CSS来取代HTML属性
29 HTML所特有的属性只能用HTML，无法被CSS所取代
2.css语法
1 2、CSS语法
2 1、CSS样式表的使用方式(重要)
3 1、内联方式
4 又称为 ：行内样式
5 特点：将样式定义在某html元素中(style属性中)
6 只需将分号隔开的一个或多个属性/值对作为元素style属性的值，
7 属性和属性值之间用冒号链接，多对属性之间用分号隔开
8 语法：
9 <标记 style="样式声明1;样式声明2;"></标记>
10 样式声明：
11 样式属性 以及 属性值 来组成
12 样式属性 和 值 之间用 : 连接
13 ex:
14 1、文本颜色
15 属性：color
16 值：颜色的英文表示方式
17 color:red;
18 color:green;
19 2、背景颜色
20 属性：background-color
21 值：颜色的英文表示方式
22 background-color:yellow;
23
24 color:green;background-color:blue;
25 3、文字大小
26 属性：font-size
27 值：以px 或 pt 为单位的数字
28 font-size:12px;
29
30 4、练习
31 <div style="color:red;background-color:yellow;font-size:24px;">锄禾日当午</div>
32 <div>汗滴禾下土</div>
33 修饰以上文本
34 文本颜色为(color) 红色(red)
35 背景颜色为(background-color) 黄色(yellow)
36 文字大小为(font-size) 24px
37 2、内部样式表
38 特点：
39 以独立的方式，定义页面元素的样式(元素 与 样式相分离)，并且能够让样式应用在多个元素中(提升可重用性 和 可维护性)
40
41 语法：
42 1、在 <style> 元素中进行编写
43 <head>
44 <style>
45 ... ...
46 </style>
47 </head>
48 2、由若干样式规则来组成
49 样式规则：能够应用在某些元素上的一组样式声明
50
51 样式规则语法：
52 由 选择器 和 若干样式声明 组成
53
54 选择器：规范了页面中哪些元素能够使用定义好的样式,如 元素选择器
55
56 选择器{
57 样式声明1; (属性:值)
58 样式声明2; (属性:值)
59 ...
60 样式声明n; (属性:值)
61 }
62 ex:
63 p{
64 color:red;
65 background-color:yellow;
66 font-size:24px;
67 }
68 div{
69 font-size:48px;
70 }
71 3、外部样式表
72 特点：
73 将样式定义在外部独立的css文件中(*.css)
74 哪个页面想使用，可以引入css文件
75 步骤：
76 1、创建css文件，并编写样式规则
77 样式规则：
78 选择器 和 若干样式声明组成
79 2、在页面中引入样式表文件
80 <head>
81 <link rel="stylesheet" type="text/css" href="css文件URL">
82 </head>
83 2、CSS语法规范
84 1、样式表的特征
85 1、继承性
86 大部分的样式属性是可以被继承的
87 2、层叠性
88 可以为一个元素定义多个样式规则 或 样式声明,只要 样式声明 不冲突时，那么所有的样式声明都可以应用到元素上
89 3、优先级
90 层叠性基础上，如果样式声明冲突的话，则按照样式规则的优先级来进行样式的使用
91
92 优先级：
93 低 浏览器缺省设置(User Agent)
94 中 内部样式表 或 外部样式表
95 -就近原则,即后定义者优先
96 高 内联方式
97 4、!important规则
98 显示调整样式属性的优先级
99 语法：
100 属性:值 !important;
101 3、选择器(重点)
102 1、作用
103 规范页面中哪些元素能够使用声明好的样式
104 起始选择器也是为了匹配页面中的元素
105 2、选择器的详解
106 1、通用选择器
107 目的：为了匹配页面中所有的元素
108 语法：*{样式声明;}
109 特点：
110 匹配页面所有的元素
111 效率低
112 2、元素选择器
113 目的：为了匹配指定标记的元素
114 语法：标记名{样式声明;}
115 ex:
116 div{color:red;}
117 p{font-size:14px;}
118 3、类选择器(重点)
119 作用：允许被任何一个元素的class属性进行引用的选择器
120 语法：.类名{样式声明;}
121 注意：
122 类名 允许包含字母，数字，_，-
123 不允许以数字开头
124 引用：通过任意元素的class属性进行引用
125 <标记 class="类名"></标记>
126 特殊用法：
127 1、多类选择器的引用方式
128 允许一个元素同时引用多个选择器
129 <标记 class="class1 class2 classn">
130
131 2、分类选择器的定义方式
132 允许将 元素选择器 和 类选择器放在一起进行声明定义。以便达到对某种元素中不同样式的细分控制
133 语法：
134 元素选择器.类选择器{样式声明;}
135 div.redColor{
136 /*声明定义 class为redColor的div元素的样式 */
137 }
138 4、id选择器
139 作用：与元素id相关，专门定义指定id值的元素的样式
140 语法：#idValue{样式声明;}
141 元素选择器<类选择器<ID选择器
142 5、群组选择器
143 作用：将多个选择器放在一起，统一声明样式
144 语法：选择器1,选择器2,选择器3{}
145 ex:
146 #top,.redColor,span,.heavy,div.important{
147 color:blue;
148 }
149
150 等同于：
151
152 #top{color:blue;}
153 .redColor{color:blue;}
154 span{color:blue;}
155 .heavy{color:blue;}
156 div.important{color:blue;}
157 6、后代选择器
158 不限制层级关系的元素(出现在某元素中的)，称之为后代
159 语法：
160 选择器1 选择器2{}
161 ex
162 div span{
163 /*匹配 div 中 所有的 span*/
164 }
165
166 #d1 span{
167 /*匹配 id为d1元素中所有的span */
168 }
169
170 #d1 .span1{
171 /*匹配 id为d1 中的 所有的 class为 span1的元素*/
172 }
173 7、子代选择器
174 只具备一层层级关系的元素，称之为子代
175 语法：
176 选择器1>选择器2{}
177 ex:
178 div>span{
179 /*匹配 div 中的下一级 span元素*/
180 }
181 #d1>span{
182 /*匹配 id为d1 的下一级 span元素*/
183 }
184 8、伪类选择器
185 作用：匹配元素不同状态的
186 语法：
187 :伪类{}
188 a:伪类{}
189 #d1:伪类{}
190 伪类详解：
191 1、链接伪类
192 1、:link
193 适用于 未被访问的 链接的状态
194 2、:visited
195 适用于 访问过的 链接的状态
196 2、动态伪类
197 1、:hover
198 适用于鼠标悬停在元素上的状态
199 2、:active
200 适用于元素被激活时的状态
201 5、:focus
202 适用于元素获取焦点时的状态
203 (后续课程中...)
204 3、目标伪类
205 4、元素状态伪类
206 5、结构伪类
207 6、否定伪类
208
209 注意：
210 1、自定的选择器中的样式 永远都会覆盖 继承的样式(不看权值)
3.尺寸和边框
1 3、尺寸 与 边框
2 1、CSS单位
3 1、尺寸单位
4 1、%
5 2、in
6 1in = 2.54cm
7 3、cm
8 厘米
9 4、mm
10 毫米
11 5、pt
12 磅，1pt = 1/72in
13 多用于文字大小的描述
14 6、px
15 像素
16 1024px * 768px
17 7、em
18 倍数，1em 相当于父元素默认大小
19 8、rem
20 相对于根元素(html)设置的字体大小来指定倍数
21 2、颜色单位(取值)
22 1、rgb(r,g,b)
23 r:red,0~255
24 g:green,0~255
25 b:blue,0~255
26 ex:
27 color:rgb(128,12,6);
28 2、rgb(r%,g%,b%)
29 3、rgba(r,g,b,alpha)
30 alpha : 透明度 0~1 之间的数字
31 4、#rrggbb
32 通过6位16进制数字表示一种颜色
33 每位数字的范围：0-9,A-F
34 #aabbcc
35 5、#rgb
36 #rrggbb的缩写形式
37 只有在 每两位数字都相同的情况下可以使用简写
38
39 #ff0000 -> #f00
40 #ffaacd -> 无简写
41 6、颜色的英文表示法
42 2、尺寸属性
43 1、作用
44 设置元素的宽度和高度
45 取值单位一般为 px 或 %
46 2、语法
47 1、宽度
48 width
49 max-width
50 min-width
51
52 2、高度
53 height
54 max-height
55 min-height
56 3、页面中哪些元素允许修改尺寸
57 1、所有的块级元素都能修改尺寸
58 div,p,pre,h1~h6,ul,li,ol,dl,dt,dd,
59 2、大部分行内块元素允许修改尺寸
60 input 元素为 行内块元素，允许修改尺寸
61 但是 radio和checkbox除外
62 3、小部分行内元素允许修改尺寸
63 html元素中 本身就具备 width 和 height 属性的行内元素允许修改尺寸，否则不能改
64 如：img
65 4、溢出
66 1、什么是溢出
67 当使用尺寸属性限制元素大小时，如果内容所需的空间大于元素本身空间，则会产生溢出的效果
68 2、溢出处理属性
69 属性：
70 overflow
71 overflow-x : 横向溢出处理
72 overflow-y : 纵向溢出处理
73 取值：
74 1、visible
75 默认值，溢出可见
76 2、hidden
77 溢出隐藏
78 3、scroll
79 滚动，默认显示滚动条，内容溢出时，滚动条可用
80 4、auto
81 自动，只有在溢出的方向才会显示滚动条
82 3、边框属性
83 1、边框属性
84 1、简写属性
85 通过一个属性设置 四个方向边框的 宽度，样式，颜色
86 属性：border
87 取值：width style color;
88 1、width:边框宽度，以px为单位
89 2、style:边框样式
90 solid ：实线
91 dotted ：点状虚线
92 dashed ：线状虚线
93 3、color:边框颜色
94 取值为 颜色值 或 transparent(透明)
95 ex:
96 border:1px solid red;
97 注意：
98 1、border 取值为 none
99 border:none; 取消边框
100 2、为元素设置边框后，元素的占地面积会发生更改
101 2、单方向设置
102 只设置某一条边的 宽度，样式，颜色
103 语法：
104 border-方向:width style color;
105 方向：top/right/bottom/left
106 3、单属性设置
107 语法：
108 border-属性:值;
109 属性：width/style/color
110 4、单边单属性设置
111 设置 某条边的某个属性值
112 语法：
113 border-方向-属性:值;
114 方向：top/right/bottom/left
115 属性：width/style/color
4.边框
1 1、边框
2 1、边框
3 边框实际上是由四个三角形组成的
4 border：1px solid red
5 width style color ->style:solid/dashed/dotted
6 border-left/right/top/bottom
7 border-color
8 border-width
9 border-style
10 2、边框倒角
11 属性：border-radius
12 取值：
13 具体数值(px) 或 %
14 最少一个值，最多4个值
15 单角定义
16 border-top-left-radius:左上角倒角半径
17 border-bottom-right-radius:右下角
18 ... ...
19 3、边框阴影
20 属性：box-shadow
21 取值：h-shadow v-shadow blur spread color inset;
22 h-shadow:(必须)
23 阴影的水平偏移距离
24 取值为正，右偏移
25 取值为负，左偏移
26 v-shadow:(必须)
27 阴影的垂直偏移距离
28 取值为正，下偏移
29 取值为负，上偏移
30 blur : 模糊距离,取值为数值
31 spread : 阴影的大小
32 color : 颜色
33 inset : 值，将默认的外阴影改为内阴影
34 4、图片边框
35 border-image：将图片规定为包围div元素的边框
36 -border-image：source width repeat，也可分别设置
37 border-image-source：图片的路径
38 border-image-width：图片边框宽度
39 border-image-repeat：图像边框是否应平衡（repeat）、铺满（round）或拉伸（stretch）
40
41 4、轮廓
42 1、什么是轮廓
43 位于元素外围的一条线,位于边框之外的，可以去掉Chrome默认的表单元素的蓝边，outline：0/none
44 2、属性
45 outline:width style color;
46 outline-width:宽度;
47 outline-style:样式;
48 outline-color:颜色;
49
50 常用：
51 outline:none;
52 或
53 outline:0;
5.框模型
1 框模型(重难点)
2 1、框 & 框模型
3 框：页面元素皆为框
4 框模型：Box Model ,定义了元素框处理元素内容尺寸，内边距，边框和外边距的一种方式
5
6 元素一旦增加框模型对应属性的属性，那么实际的占地区域会发生改变
7
8 元素的实际宽度=左右外边距 + 左右边框 + 左右内边距 + width;
9
10 元素的实际高度=上下外边距 + 上下边框 + 上下内边距 + height;
11 2、外边距
12 1 、外边距
13 围绕在元素边缘周围的空白区域
14 默认不能被其他元素所占据
15 作用：拉伸两个元素间的距离，只能改变元素之间上下左右的间距，不能改变布局
16 2、语法
17 属性：
18 margin:值;
19 单边设置：
20 margin-方向:值;
21 方向：top/right/bottom/left
22 取值：
23 1、具体数值 px
24 2、%
25 3、负值
26 左外边距取负值 ：左移动
27 左外边距取正值 ：右移动
28 上外边距取负值 ：上移动
29 上外边距取正值 ：下移动
30 4、auto
31 自动，由浏览器计算外边距的值应该是多少
32 注意：默认情况下，auto只对左右有效，上下无效。
33
34 为块级元素设置宽度后，再设置其左右外边距为 auto，该元素能水平居中显示
35 margin的简洁写法：
36 margin:value; 四个方向外边距的值
37 margin:5px;
38 margin:v1 v2; v1 上下外边距 v2 左右外边距
39 margin:5px 10px;
40 margin:v1 v2 v3;v1 上外边距 v2 左右外边距 v3 下外边距
41 margin:5px 15px 3px;
42 margin:v1 v2 v3 v4;上 右 下 左
43 3、页面中具备默认外边距的元素
44
45 3.padding
46 取值范围：0，正值（上、右、下、左）
47
48 行内元素：宽与高不生效，margin-top/bottom都不生效
6.背景
1 3、背景
2 *background-color：用于为元素设置背景色
3 -接受任何合法的颜色值
4 -可取值为transparent
5 为元素背景设置一种纯色
6 - 会填充元素的内容、内边距、和边框区域
7 - 如果边框有透明部分，会透过这些透明部分显示出背景色
8 *background-image：url（）
9 *background-repeat：repeat ，no-repeat，repeat-x，repeat-y
10 background-size：规定背景图像的尺寸
11 - value1 value2：宽度、高度
12 - value1% value2% ：百分比
13 - cover：覆盖背景区域，图片的某些部分也许无法展示
14 - contain：把背景图片扩展至最大尺寸，以使其宽度和高度完全适应内容区域
15 background-attachment：fixed
16 *background-position：left/right/center top/bottom/center
17 - center 水平垂直都居中
18 - center center 同上
19 - right center 水平居右，垂直居中
20 - 数值：水平 正值->向右移动 负值->向左移动
21 垂直 正值->向下移动 负值->向上移动
22 background-origin规定背景图片的定位区域
23 - border-box：背景图像相对于边框来定位
24 - padding-box：背景图像相对于内边距框来定位
25 - content-box：背景图片相对于内容框来定位
26 简写：background：color url repeat attachment position，
27 不设置其中某个值的话，使用默认值
28 不分前后顺序
7.渐变
1 渐变
2 1、什么是渐变
3 多种颜色之间平缓过度的显示效果
4 2、渐变分类
5 1、线性渐变(linear-gradient)
6 按照直线的方式填充渐变颜色和方向
7 2、径向渐变(radial-gradient)
8 以圆的方式填充渐变效果(圆心位置，半径)
9 3、重复渐变
10 1、重复线性渐变
11 repeating-linear-gradient
12 2、重复径向渐变
13 repeating-radial-gradient
14 3、渐变中的重要信息
15 1、色标
16 由 颜色 及其 出现的位置 来组成的
17 4、渐变的语法
18 1、属性
19 background-image
20 2、取值
21 1、linear-gradient()
22 linear-gradient(angle,color-point1,color-point2);
23 1、angle
24 填充的方向或角度
25 1、关键字
26 1、to top ：从下向上填充
27 2、to right ：从左向右填充
28 3、to bottom ：从上向下填充
29 4、to left ：从右向左填充
30 2、角度
31 0deg ~ 360deg
32
33 0deg : to top
34 90deg : to right
35 180deg : to bottom
36 270deg : to left
37 2、color-point
38 渐变中的色标,由 颜色 及其 出现的位置组成
39 ex:
40 1、red 0px
41 该色标颜色为 red ，位置为填充方向的 0px 处
42 2、green 50px
43 该色标颜色为 green,位置为填充方向的 50px 处
44 3、blue 50%
45 该色标颜色为 blue，位置为填充方向的 50% 处
46 4、
47 linear-gradient(to top,red,blue,green);
48 自动分配位置
49 2、radial-gradient()
50 radial-gradient([size at position,]color-point,color-point)
51
52 1、[size at position,] : 允许被省略
53 size:圆的半径
54 at : 关键字
55 position:圆心的位置
56 1、x y
57 以px为单位的具体数值
58 2、x% y%
59 3、关键字
60 x : left , center , right
61 y : top , center, bottom
62 3、repeating-linear-gradient()
63 4、repeating-radial-gradient()
64 5、浏览器兼容性问题
65 主流浏览器都支持渐变
66 对于不支持的浏览器，需要添加浏览器前缀的方式实现兼容性
67 浏览器前缀：
68 1、Firefox ：-moz-
69 2、Chrome 和 Safari ：-webkit-
70 3、Opear ：-o-
71 4、Microsoft IE ：-ms-
72 如果浏览器不支持属性的话，则将前缀添加到属性名称前
73 ex:
74 animation:值;
75 -moz-aniamtion:值;
76 -webkit-aniamtion:值;
77 -o-aniamtion:值;
78 -ms-animation:值;
79 如果浏览器支持属性，但不支持属性值的话，则将前缀添加到属性值前
80 ex:
81 background-image:linear-gradient();
82 background-image:-moz-linear-gradient();
83 background-image:-webkit-linear-gradient();
84 background-image:-o-linear-gradient();
85 background-image:-ms-linear-gradient();
8.文本格式化
1 文本格式化
2 1、字体属性
3 1、指定字体
4 属性：font-family
5 取值：字体1,字体2,字体3;
6 注意：字体中包含中文或特殊字符的话，尽量使用 "" 引起来
7 ex:
8 font-family:"微软雅黑",Arial;
9 2、字体大小
10 属性：font-size
11 取值：px 或 pt 为单位的数值
12 3、字体加粗
13 属性：font-weight
14 取值：
15 1、normal
16 非加粗显示，正常体
17 2、bold
18 加粗显示 <b></b>
19 3、400 ~ 900
20 400 ：normal
21 900 ：bold
22 4、字体样式
23 属性：font-style
24 取值：
25 1、normal
26 正常体
27 2、italic
28 斜体 <i></i>
29 5、小型大写字符
30 效果：将小写英文字符变成大写，但是大小和小写字符一样
31 属性：font-variant
32 取值：
33 1、normal
34 正常，默认值
35 2、small-caps
36 小型大写字符
37 6、字体属性
38 属性：font
39 取值：style variant weight size family;
40 注意：该简写属性中，必须包含 family 的值
41 2、文本属性
42 1、文本颜色
43 属性：color
44 取值：~
45 2、文本排列
46 作用：控制内容的的水平对齐方式
47 属性：text-align
48 取值：left/center/right/justify(两端对齐)
49 3、文本修饰
50 线条修饰
51 属性：text-decoration
52 取值：
53 1、none
54 无线条修饰
55 2、underline
56 显示下划线
57 3、line-through
58 显示删除线 <s></s>
59 4、overline
60 显示上划线
61 4、行高
62 作用：一行数据的高度
63 属性：line-height
64 取值：以px为单位 或 当前字体大小的倍数
65 line-height:50px;
66 line-height:1.5;
67 注意：文字将在指定行高的范围内垂直居中显示
68 场合：
69 1、文字垂直居中
70 2、行间距的设置
71 5、首行文本缩进：
72 · text-indent：value；
73 6、文本阴影：
74 text-shadow：h-shadow v-shadow blur color
75 7、溢出
76 处理空白：
77 white-space：normal/nowrap文字不换行
78 文本溢出：
79 text-overflow： 前提是overflow：hidden
80 clip裁剪/ellipsis在隐藏部分之前显示“...”，并且只对横向溢出有效果
81 8、换行
82 长单词换行
83 word-warp：normal默认/break-word长单词换行
84 文本换行
85 word-break：normal默认/break-all 无视单词随意换行/keep-all长单词不换行
86 9、距离
87 字距：letter-spacing
88 词距：word-spacing
9.表格
1 表格：
2 通用样式：width、height、border、background、vertical-align、text-align、文本格式化
3 表格样式：border-collapse：collapse/separate
4 border-spacing：value1 value2；
5 -border-collapse为separate的前提下
6 caption-side：定义表格标题的位置
7 table-layout：表格布局固定：fixed高效/不固定：auto灵活
8
9 边框合并：
10 border-collapse：
11 collapse：合并/让table的双线边框合并成单线---重叠
12 separate：分开
13 边框边距：设置相邻单元格的边框间的距离，仅限于分隔单元格边框，即border-collapse：separate
14 border-spacing：
15 一个值：同时适用于水平和垂直间距
16 两个值：逗号隔开
17 标题位置：
18 caption-side：top、bottom
19
20 显示规则：用来帮助浏览器如何显示或者布局一张表，即用来设置显示表格单元格、行、列的算法规则
21 table-layout：
22 auto：列宽度由单元格内容设定，为默认值，即自动表格布局
23 ---表格宽度会变化
24 fixed：列宽由表格宽度和列宽度设定，即固定表格布局
25 ---容易溢出
10.定位
1 定位：
2 定义元素框相对于其正常位置应该出现的位置或者相对于父元素、另一个元素甚至浏览器窗口本身的位置
3 * 普通流定位
4 - 页面中的块级元素框从上到下一个接一个地排列
5 每一个块级元素都会出现在一个新行中（p，div元素等）
6 元素框之间的垂直距离是框的垂直外边距计算出来的
7 - 内联元素将在一行中从左到右排列水平布置
8 不需要从新行开始
9 可以使用水平内边距、边框和外边距调整他们的间距
10 * 浮动定位
11 - 将元素排除在普通流之外，即元素将脱离标准文档流
12 - 元素将不在页面占用空间
13 - 将浮动元素放置在包含框的左边或者右边
14 - 浮动元素依旧位于包含框之内
15 浮动上午框可以向左向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止
16 - 经常使用它来实现特殊的定位效果
17 -float：left/right/none 浮动定位
18 -clear：left/right/both 定义元素的那一侧不允许出现浮动元素，解决由浮动导致的页面bug
19 浮动与溢出
20 ---float与overflow：如果子元素全部浮动，父元素将不再自适应高度。
21 加了overflow：hidden之后，因为子元素浮动而不再适应高度的父元素就可以再次自适应高度了
22 * 相对定位
23 * 绝对定位
24 - 将元素的内容从普通流中完全移除，不占据空间
25 - 并使用偏移属性来固定该元素的位置
26 相对于最近的已定位祖先元素
27 如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块，比如body元素
28 - 设置元素为绝对定位
29 首先需要设置position属性的值为absolute
30 然后使用left属性或者right属性设置元素的水平位置
31 也可以使用top属性或者bottom属性设置元素的垂直位置
32
33 ---使用position属性和偏移属性（上下左右）实现
34 普通流定位、相对定位、绝对定位、固定定位
11.浮动定位
1 浮动定位
2 1、清除浮动
3 1、什么是清除浮动
4 清除当前元素前面的元素浮动所带来的影响
5 清除浮动影响后，当前元素不会上前占位
6 2、属性
7 属性：clear
8 取值：
9 1、none
10 默认值，无清除效果
11 2、left
12 清除当前元素前面元素左浮动带来的影响
13 3、right
14 清除当前元素前面元素右浮动带来的影响
15 4、both
16 清除当前元素前面元素任何一种浮动方向所带来的影响
17 3、浮动元素为父元素高度带来的影响
18 父元素的高度是以未浮动的子元素高度为准
19 如果一个元素中所有的子元素全部都是浮动的，那么该父元素的高度为 0
20 解决父元素的高度问题方案：
21 1、直接设置父元素高度
22 弊端：必须知道父元素的高度
23 2、让父元素也浮动
24 弊端：对后续元素会产生影响
25 3、为父元素增加溢出处理属性
26 属性：overflow
27 取值：hidden 或 auto
28 弊端：要溢出显示的内容，也一同被隐藏
29 4、在父元素中，增加空子元素到最后一个位置处,并且设置其clear属性为both
30 弊端：多一个子元素在页面上
31 5、... ...
12、显示
1 显示
2 1、显示方式
3 属性：display
4 取值：
5 1、none
6 让指定的元素不显示 并且 不占据页面空间
7 (脱离文档流)
8 2、block
9 将指定的元素显示为块级
10 3、inline
11 将指定的元素显示为行内
12 4、inline-block
13 将指定的元素显示为行内块
14 行内块特点：
15 1、多个元素能够在一行内显示
16 2、允许修改尺寸
17 5、table
18 将指定的元素显示为 table
19 2、显示效果
20 1、visibility 属性
21 作用：规范元素可见性
22 取值：
23 1、visible
24 默认值，元素可见
25 2、hidden
26 元素不可见，但是占据页面空间
27 3、collapse
28 用在表格元素上，删除一行或一列时，不影响表格整体布局
29 面试：
30 display:none 和 visibility:hidden 区别
31 1、display:none; 脱离文档流，所以不占据页面空间
32 2、visibility:hidden; 只是改变可见性，并不脱离文档流，空间依然占据
33 2、opacity 属性
34 作用：改变元素的透明度
35 取值：从0.0(完全透明) ~ 1.0(完全不透明) 之间的数字
36 3、vertical-align 属性
37 1、在 td 中，设置文本的垂直对齐方式
38 2、设置行内块元素两边文本的垂直对齐方式
39 3、设置图片两端文本垂直对齐方式
40
41 语法：
42 属性：vertical-align
43 取值：
44 1、top：把元素顶端与行中最高元素的顶端对齐
45 2、middle：把此元素放置在父元素的中部
46 3、bottom：把元素的顶端与行中最低元素的顶端对齐
47 4、baseline：默认元素放置在父元素的基线上
48 基线对齐
49 3、光标
50 改变鼠标在页面(元素)中的状态
51 属性：cursor
52 取值：
53 1、default
54 2、pointer
55 小手
56 3、crosshair
57 +
58 4、text
59 文本状态 I
60 5、wait
61 等待
62 6、help
63 帮助
64 7、n-resize n-上，e - 右、s - 下、w - 左
13.列表
1 列表
2 1、列表项标识
3 属性：list-style-type
4 取值：
5 1、none
6 2、disc ：实心圆
7 ... ...
8 2、列表项图像
9 属性：list-style-image
10 取值：url()
11 3、列表项标识位置
12 列表项标识的默认位置是在内容区域之外
13 属性：list-style-position
14 取值：
15 1、outside
16 默认值
17 2、inside
18 将列表项标识的位置改为内容区域之内
19 4、列表属性
20 属性：list-style
21 取值：type url position;
22 常用方式：list-style:none;
23 5、CSS重写
24 CSS Reset，修改元素的默认样式
25 body,p,h1,h2,h3,h4,h5,h6,pre,ul,ol,dl,dd{
26 margin:0;
27 padding:0;
28 list-style:none;
14、定位
1 定位(相对，绝对，固定)
2 1、定位属性
3 1、定位属性
4 属性：position
5 作用：改变元素定位方式
6 取值：
7 1、static
8 静态的，默认值
9 2、relative
10 相对的
11 3、absolute
12 绝对的
13 4、fixed
14 固定定位
15 注意：relative，absolute，fixed被称之为 "已定位元素"
16 2、偏移属性
17 作用：改变元素在页面中的位置
18 属性：
19 1、top
20 2、bottom
21 3、left
22 4、right
23 取值：偏移距离(px)
24 3、堆叠顺序
25 作用：在已定位元素中调整堆叠顺序
26 属性：z-index
27 取值：无单位的数字
28 2、定位 - 相对定位
29 1、什么是相对定位
30 元素会相对于它原来的位置偏移某个距离
31 元素原来所占的空间会被保留
32 2、语法
33 position:relative;
34 配合 top/right/bottom/left 偏移属性实现位置的微调
35 3、使用场合
36 1、元素位置微调
37 3、定位 - 绝对定位
38 1、什么是绝对定位 & 特点
39 1、绝对定位的元素会脱离文档流即不占据页面空间
40 2、绝对定位的元素会相对于离它最近的已定位的祖先元素去实现定位
41 3、如果没有已定位的祖先元素，那么就会相对于最初的包含块去实现定位比如body或html
42 2、语法
43 position:absolute;
44 配合着 top/right/bottom/left 实现位置定位
45 3、特点
46 1、绝对定位元素会变成块级元素
47 2、绝对定位元素的margin可以使用，默认情况下，auto会失效
48
49
50
51 <div id="d1">(无定位)
52 <div id="d2">(无定位)
53 <p id="p1">(无定位)
54 <span>这是一个span</span>
55 </p>
56 </div>
57 </div>
58 4、堆叠顺序
59 属性：z-index
60 取值：无单位的数值
61 数值越大，越靠前，默认是0
62 可以取负值，当前元素在页面所有内容之下
63 注意：
64 1、只有已定位元素才能设置z-index
65 2、默认的堆叠顺序是 后来者居上
66 3、父子元素中，永远都是子压在父上,是不受z-index影响的
前端复习之css的更多相关文章
- 李洪强和你一起学习前端之(6)css行高,盒模型,外边距
李洪强和你一起学习前端之(6)css行高,盒模型,外边距 复习昨天的知识 1.1css书写位置: 内嵌式写法 外联式写法 <link href = "1.css" rel = ...
- 前端开发：css基础知识之盒模型以及浮动布局。
前端开发:css基础知识之盒模型以及浮动布局 前言 楼主的蛮多朋友最近都在学习html5,他们都会问到同一个问题 浮动是什么东西? 为什么这个浮动没有效果? 这个问题楼主已经回答了n遍.今天则是把 ...
- 前端之DIV+CSS布局
刚开始学习javaweb,首先定位学习后端,可是随着学习的深入和项目的进行,越来越发现前端知识的欠缺,之前也随着视频看过,随着时间的流逝,具体的应用也随之忘记了. 而现在开始自己练习项目,发现前端知识 ...
- 前端Html和Css面试题
前端Html和Css面试题Html篇:1.你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么? IE: trident内核 Firefox:gecko内核 Safari:webkit内核 Ope ...
- 2.前端笔记之css
title: 1.前端笔记之CSS date: 2016-04-05 23:05:51 tags: 前端 categories: w3c --- 作者:刘耀 **出处:http://www.liuya ...
- 前端零基础 --css转换--skew斜切变形 transfor 3d
前端零基础 --css转换--skew斜切变形 transfor 3d==============重要不紧急! 重要紧急 重要不紧急 不重要紧急 不重要不紧急
- 前端html、CSS快速编写代码插件-Emmet使用方法技巧详解
前端html.CSS快速编写代码插件-Emmet使用方法技巧详解 Emmet的前身是大名鼎鼎的Zen coding,如果你从事Web前端开发的话,对该插件一定不会陌生.它使用仿CSS选择器的语法来 ...
- 前端基础：CSS样式选择器
前端基础:CSS样式选择器 CSS概述 CSS是Cascading Style Sheets的简称,中文意思是:层叠样式表,对html标签的渲染和布局.CSS规则由两个主要的部分组成:1.选择器:2. ...
- web前端篇：CSS使用，样式表特征，选择器
目录 web前端篇:CSS使用,样式表特征,选择器 1.CSS介绍 2.CSS使用 3.样式表特征 4.CSS选择器 5.选择器的优先级 6.练习题: web前端篇:CSS使用,样式表特征,选择器 1 ...
- Web前端篇：CSS常用格式化排版、盒模型、浮动、定位、背景边框属性
目录 Web前端篇:CSS常用格式化排版.盒模型.浮动.定位.背景边框属性 1.常用格式化排版 2.CSS盒模型 3.浮动 4.定位 5.背景属性和边框属性 6.网页中规范和错误问题 7.显示方式 W ...
随机推荐
- 全国分乡镇第七次人口普查数据shp数据库省市区县街道
全国分乡镇第七次人口普查数据shp数据库省市区县街道 ==名称:全国第七次人口普查任意十个乡镇的乡镇界地图==数据说明:精确到乡镇级别.==数据:面数据,属性列表(乡镇名.乡镇代码,第六次人口普查分乡 ...
- Android 隐藏和显示软键盘
1 public static void hideKeyboard(View view){ 2 InputMethodManager imm = (InputMethodManager) view.g ...
- IntelliJ IDEA 工具识别不了 过大Java文件 引用识别的不了的文件报错
之前出现过proto 生成的文件过大 idea 识别不了 引用消息报错. 解决方案 1.找到IntelliJ IDEA 桌面快捷键图标 右键属性 2.打开文件位置,找到所在目录 3.找到idea.pr ...
- ubuntu 20.04 更新镜像源
首先备份系统自带的源,以防修改错误! 命令: sudo cp /etc/apt/sources.list /etc/apt/sources.list.back 1.修改系统镜像源 文件目录:/etc/ ...
- springboot+vue本地部署
springboot+vue本地部署 最近完成项目,需要部署到本地,期间遇到了一些问题,最后写下流程以作记录. springboot打包 这块的内容较为简单一般为在pom.xml中加入 <bui ...
- docker-io安装报错
一般修改两个文件即可 1.文件 :/etc/docker/daemon.json { "storage-driver": "devicemapper" } 2. ...
- DCS-WORLD 数据获取
任务: 获取DCS-World的姿态数据,发送到6自由度平台. 过程: 1.获取dcs-bios https://github.com/DCSFlightpanels/dcs-bios 2.复制DCS ...
- Docker基本命令之 容器管理
容器管理 查看正在运行的容器: docker ps 查看完整信息:docker ps --no-trunc 查看在运行或停止运行的容器:docker ps -a 查看容器系统资源的使用情况:docke ...
- Zabbix 监控服务介绍
Zabbix 监控服务介绍 目录 Zabbix 监控服务介绍 一.Zabbix 监控服务介绍 1.1.1 Zabbix 监控服务介绍 1.1.2 如何去做监控 1.13 硬件监控 1.1.4 系统监控 ...
- 证书profile 申请
ios 云打包 证书 和密码 在之前的笔记当中已申请好 证书profile 文件申请 登录苹果开放平台 申请前要添加身份,设备,设备那需要填写udid 方法链接https://www.jian ...