前端复习之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影响的

 

转载于:https://www.cnblogs.com/Dummer/p/11496048.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值