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