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影响的