CSS使用笔记总结(常用属性和值)

2023年6月21日发(作者：)

CSS使⽤笔记总结（常⽤属性和值）概述：CSS 规则由两个主要的部分构成：选择器，以及⼀条或多条声明:⼀、注释： CSS注释以 "/*" 开始, 以 "*/" 结束

eg: /*p{color:red;text-align:center;}*/⼆、插⼊css样式表的⽅式？link 和@import 的区别是?1.外部样式：使⽤ 标签链接到样式表。 标签在（⽂档的）头部 eg : 2.内部样式表:

3. 内联样式表：

这是⼀个段落。4.导⼊(@import)link和@import的区别：link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS。link引⽤CSS时，在页⾯载⼊时同时加载；@import需要页⾯⽹页完全载⼊以后加载。link是XHTML标签，⽆兼容问题；@import是在CSS2.1提出的，低版本的浏览器不⽀持。link⽀持使⽤Javascript控制DOM去改变样式；⽽@import不⽀持。

⼀般情况下，三种的优先级如下：（内联样式） > （内部样式） >（外部样式） > 浏览器默认样式三、CSS 背景ound-color： 背景颜⾊

CSS中，颜⾊值通常以以下⽅式定义: ⼗六进制 - 如："#ff0000" RGB - 如："rgb(255,0,0)" 颜⾊名称 - 如："red"； 其它属性值：

inherit指定背景颜⾊，应该从⽗元素继承

transparent（透明） 如： body {background-color:#b0c4de;}ound-image：背景图像 默认情况下，背景图像进⾏平铺重复显⽰，以覆盖整个元素实体. 如:body {background-image:url('');}ound-repeat:设置背景图像是否及如何重复。 属性值： repeat 背景图像将向垂直和⽔平⽅向重复。这是默认 repeat-x 只有⽔平位置会重复背景图像 repeat-y 只有垂直位置会重复背景图像 no-repeat 背景图⽚不会重复 inherit 指定背景图⽚属性设置应该从⽗元素继承ound-attachment：背景图像是否固定或者随着页⾯的其余部分滚动。

属性值： scroll 背景图⽚随页⾯的其余部分滚动。这是默认 fixed 背景图像是固定的 inherit 指定background-attachment的设置应该从⽗元素继承ound-position：设置背景图像的起始位置。 属性值⼀般设置：left top bottom right

x%

0px

四、CSS ⽂本格式1. color：⽂本颜⾊： ⼗六进制值 - 如: ＃FF0000 ⼀个RGB值 - 如: RGB(255,0,0) 颜⾊的名称 - 如: -align：⽂本的对齐⽅式 left 把⽂本排列到左边。默认值：由浏览器决定。 right 把⽂本排列到右边。 center 把⽂本排列到中间。 justify 实现两端对齐⽂本效果。-decoration:⽂本修饰，主要是⽤来删除链接的下划线 none 默认。定义标准的⽂本。 underline 定义⽂本下的⼀条线。 overline 定义⽂本上的⼀条线。 line-through 定义穿过⽂本下的⼀条线。-transform: ⽂本转⼤⼩写（控制元素中的字母） none 默认。定义带有⼩写字母和⼤写字母的标准的⽂本。 capitalize ⽂本中的每个单词以⼤写字母开头。 uppercase 定义仅有⼤写字母。 lowercase 定义仅有⼩写字母。-indent： ⽂本缩进属性是⽤来指定⽂本的第⼀⾏的缩进。

如：p {text-indent:50px;}ion: 设置⽂本⽅向。 ltr默认。⽂本⽅向从左到右。 rtl⽂本⽅向从右到左。-spacing: 设置字符间距8. line-height 设置⾏⾼9. vertical-align: 设置元素的垂直对齐 middle把此元素放置在⽗元素的中部。

sub垂直对齐⽂本的下标。 super垂直对齐⽂本的上标 top把元素的顶端与⾏中最⾼元素的顶端对齐 bottom把元素的底端与⾏中最低的元素的顶端对齐。 text-bottom把元素的底端与⽗元素字体的底端对齐。10. word-spacing: 设置字间距11. text-shadow ： 如： text-shadow: 2px 2px #ff0000;五、CSS ⽂字-style： 斜体⽂字的字体样式属性 font-style:normal; 正常 - 正常显⽰⽂本 font-style:italic; 斜体 - 以斜体字显⽰的⽂字-family : 属性设置⽂本的字体系列。 p{font-family:"Times New Roman", Times, serif;}-size : 属性设置⽂本的⼤⼩。-weight : 指定字体的粗细。六、链接样式 a:link {color:#000000;} /* 未访问链接*/ a:visited {color:#00FF00;} /* 已访问链接 */ a:hover {color:#FF00FF;} /* ⿏标移动到链接上 */ a:active {color:#0000FF;} /* ⿏标点击时 */七、CSS 列表(ul) list-style 简写属性。⽤于把所有⽤于列表的属性设置于⼀个声明中 list-style-image 将图象设置为列表项标志。 list-style-position 设置列表中列表项标志的位置。 list-style-type 设置列表项标志的类型。 none⽆标记。 disc默认。标记是实⼼圆 circle标记是空⼼圆。 square标记是实⼼⽅块。⼋、CSS 表格 border-collapse : 表格边框(常⽤的) table{border-collapse:collapse;} table,th, td{border: 1px solid black;}九.CSS 边框属性1. border 简写属性，⽤于把针对四个边的属性设置在⼀个声明。-width ⽤于为元素的所有边框设置宽度，或者单独地为各边边框设置宽3. border-style ⽤于设置元素所有边框的样式，或者单独地为各边设置边框样式 border-style:dotted solid double dashed dotted 上边框是点状 solid 右边框是实线 double 下边框是双线 dashed 左边框是虚线-color 设置元素的所有边框中可见部分的颜⾊，或为 4 个边分别设置颜⾊。⼗、CSS 尺⼨ 设置元素的⾼度。 -height 设置⾏⾼。 -height 设置元素的最⼤⾼度。 -width 设置元素的最⼤宽度。 -height 设置元素的最⼩⾼度。 -width 设置元素的最⼩宽度。 设置元素的宽度。⼗⼀、px，em，rem 的区别 px像素(Pixel)。绝对单位。像素 px 是相对于显⽰器屏幕分辨率⽽⾔的，是⼀个虚拟长度单位，是计算 机系统的数字化图像长度单位，如果 px 要换算成物理长度，需要指定精度 DPI。 em是相对长度单位，相对于当前对象内⽂本的字体尺⼨。如当前对⾏内⽂本的字体尺⼨未被⼈为设置， 则相对于浏览器的默认字体尺⼨。它会继承⽗级元素的字体⼤⼩，因此并不是⼀个固定的值。 rem是 CSS3 新增的⼀个相对单位(root em，根 em)，使⽤ rem 为元素设定字体⼤⼩时，仍然是相对⼤⼩， 但相对的只是HTML根元素。⼗⼆、position ⼏个属性的作⽤position 的常见四个属性值: relative，absolute，fixed，static。⼀般都要配合"left"、“top”、“right” 以及 “bottom” 属性使⽤。static:默认位置。在⼀般情况下，我们不需要特别的去声明它，但有时候遇到继承的情况，我们不愿意见到元素所继承的属性影响本⾝，从⽽可以⽤Position:static取消继承，即还原元素定位的默认值。设置为 static 的元素，它始终会处于页⾯流给予的位置(static 元素会忽略任何 top、 bottom、left 或 right 声明)。⼀般不常⽤。relative:相对定位。相对定位是相对于元素默认的位置的定位，它偏移的 top，right，bottom，left 的值都以它原来的位置为基准偏移，⽽不管其他元素会怎么 样。注意 relative 移动后的元素在原来的位置仍占据空间。absolute:绝对定位。设置为 absolute 的元素，如果它的 ⽗容器设置了 position 属性，并且 position 的属性值为 absolute 或者relative，那么就会依据⽗容器进⾏偏移。如果其⽗容器没有设置 position 属性，那么偏移是以 body 为依据。注意设置 absolute 属性的元素在标准流中不占位置。fixed:固定定位。位置被设置为 fixed 的元素，可定位于相对于浏览器窗⼝的指定坐标。不论窗⼝滚动与否，元素都会留在那个位置。它始终是以 body 为依据的。 注意设置 fixed 属性的元素在标准流中不占位置。⼗三、盒⼦模型（box-sizing）设置CSS盒模型为标准模型或IE模型。标准模型的宽度只包括content，⼆IE模型包括border和paddingbox-sizing属性可以为三个值之⼀： content-box，默认值，只计算内容的宽度，border和padding不计算⼊width之内 padding-box，padding计算⼊宽度内 border-box，border和padding计算⼊宽度之内⼗四、 display有哪些值？说明他们的作⽤? inline（默认）–内联 none–隐藏 block–块显⽰ table–表格显⽰ list-item–项⽬列表 inline-block⼗五、 margin属性和padding属性？margin：外边距； padding：内边距；属性值可以 有四个，如下： margin:25px 50px 75px 100px; 上边距为25px 右边距为50px 下边距为75px 左边距为100px margin:25px 50px 75px; 上边距为25px 左右边距为50px 下边距为75px margin:25px 50px; 上下边距为25px 左右边距为50px margin:25px; 所有的4个边距都是25px⼗六.CSS隐藏元素的常见的⼏种⽅式及区别1. display:none元素在页⾯上将彻底消失，元素本来占有的空间就会被其他元素占有，也就是说它会导致浏览器的重排和重绘。不会触发其点击事件lity:hidden和display:none的区别在于，元素在页⾯消失后，其占据的空间依旧会保留着，所以它只会导致浏览器重绘⽽不会重排。⽆法触发其点击事件适⽤于那些元素隐藏后不希望页⾯布局会发⽣变化的场景3. opacity:0将元素的透明度设置为0后，在我们⽤户眼中，元素也是隐藏的，这算是⼀种隐藏元素的⽅法。和visibility:hidden的⼀个共同点是元素隐藏后依旧占据着空间，但我们都知道，设置透明度为0后，元素只是隐⾝了，它依旧存在页⾯中。可以触发点击事件⼗七、渐进增强和优雅降级关键的区别是他们所侧重的内容，以及这种不同造成的⼯作流程的差异 优雅降级观点认为应该针对那些最⾼级、最完善的浏览器来设计⽹站。 渐进增强观点则认为应关注于内容本⾝，优先考虑低版本。⼗⼋、重绘和重排 重绘：当盒⼦的位置、⼤⼩以及其他属性，例如颜⾊、字体⼤⼩等都确定下来之后，浏览器便把这些原⾊都按照各⾃的特性绘制⼀遍，将内容呈现在页⾯上。重绘是指⼀个元素外观的改变所触发的浏览器⾏为，浏览器会根据元素的新属性重新绘制，使元素呈现新的外观。触发重绘的条件：改变元素外观属性。如：color，background-color等。注意：table及其内部元素可能需要多次计算才能确定好其在渲染树中节点的属性值，⽐同等元素要多花两倍时间，这就是我们尽量避免使⽤table布局页⾯的原因之⼀。 重排：当渲染树中的⼀部分(或全部)因为元素的规模尺⼨，布局，隐藏等改变⽽需要重新构建, 这就称为回流。每个页⾯⾄少需要⼀次回流，就是在页⾯第⼀次加载的时候。 重绘和重排的关系：在回流的时候，浏览器会使渲染树中受到影响的部分失效，并重新构造这部分渲染树，完成回流后，浏览器会重新绘制受影响的部分到屏幕中，该过程称为重绘。 所以，重排必定会引发重绘，但重绘不⼀定会引发重排。⼗九、怎么让⼀个不定宽⾼的 DIV，垂直⽔平居中?1.使⽤Flex：只需要在⽗盒⼦设置：display: flex; justify-content: center;align-items: center;2.使⽤ CSS3 transform：⽗盒⼦设置:position:relativeDiv 设置:transform:translate(-50%，-50%);position:absolute;top:50%;left:50%;3.使⽤ display:table-cell ⽅法：⽗盒⼦设置:display:table-cell;text-align:center;vertical-align:middle;Div 设置:display:inline-block;vertical-align:middle;⼆⼗、BFC相关知识（块级格式化上下⽂）定义：BFC(Block formatting context)直译为"块级格式化上下⽂"。它是⼀个独⽴的渲染区域，只有 Block-level box 参 与， 它规定了内部的 Block-level Box 如何布局，并且与这个区域外部毫不相⼲。BFC布局规则BFC 就是页⾯上的⼀个隔离的独⽴容器，容器⾥⾯的⼦元素不会影响到外⾯的元素。反之也如此。BFC这个元素的垂直⽅向的边距会发⽣重叠，垂直⽅向的距离由margin决定，取最⼤值BFC 的区域不会与浮动盒⼦重叠（清除浮动原理）。计算 BFC 的⾼度时，浮动元素也参与计算。哪些元素会⽣成 BFC 根元素 float 属性不为 none position 为 absolute 或 fixed display 为 inline-block， table-cell， table-caption， flex， inline-flex overflow 不为 visible⼆⼗⼀、浮动与清除浮动 1.浮动相关知识 float属性的取值： left：元素向左浮动。 right：元素向右浮动。 none：默认值。元素不浮动，并会显⽰在其在⽂本中出现的位置。 浮动的特性： 浮动元素会从普通⽂档流中脱离，但浮动元素影响的不仅是⾃⼰，它会影响周围的元素对齐进⾏环绕。 不管⼀个元素是⾏内元素还是块级元素，如果被设置了浮动，那浮动元素会⽣成⼀个块级框，可以设置它的width和height，因此float常常⽤于制作横向配列的菜单，可以设置⼤⼩并且横向排列。 浮动元素的展⽰在不同情况下会有不同的规则： 浮动元素在浮动的时候，其margin不会超过包含块的padding。PS：如果想要元素超出，可以设置margin属性 如果两个元素⼀个向左浮动，⼀个向右浮动，左浮动元素的marginRight不会和右浮动元素的marginLeft相邻。 如果有多个浮动元素，浮动元素会按顺序排下来⽽不会发⽣重叠的现象。 如果有多个浮动元素，后⾯的元素⾼度不会超过前⾯的元素，并且不会超过包含块。 如果有⾮浮动元素和浮动元素同时存在，并且⾮浮动元素在前，则浮动元素不会⾼于⾮浮动元素 浮动元素会尽可能地向顶端对齐、向左或向右对齐 重叠问题 ⾏内元素与浮动元素发⽣重叠，其边框，背景和内容都会显⽰在浮动元素之上 块级元素与浮动元素发⽣重叠时，边框和背景会显⽰在浮动元素之下，内容会显⽰在浮动元素之上 clear属性clear属性：确保当前元素的左右两侧不会有浮动元素。clear只对元素本⾝的布局起作⽤。取值：left、right、both 2. ⽗元素⾼度塌陷问题 为什么要清除浮动，⽗元素⾼度塌陷解决⽗元素⾼度塌陷问题：⼀个块级元素如果没有设置height，其height是由⼦元素撑开的。对⼦元素使⽤了浮动之后，⼦元素会脱离标准⽂档流，也就是说，⽗级元素中没有内容可以撑开其⾼度，这样⽗级元素的height就会被忽略，这就是所谓的⾼度塌陷。 3. 清除浮动的⽅法 ⽅法1：给⽗级div定义 ⾼度原理：给⽗级DIV定义固定⾼度（height），能解决⽗级DIV ⽆法获取⾼度得问题。优点：代码简洁缺点：⾼度被固定死了，是适合内容固定不变的模块。（不推荐使⽤） ⽅法⼆：使⽤空元素，如(.clear{clear:both})原理：添加⼀对空的DIV标签，利⽤css的clear:both属性清除浮动，让⽗级DIV能够获取⾼度。优点：浏览器⽀持好缺点：多出了很多空的DIV标签，如果页⾯中浮动模块多的话，就会出现很多的空置DIV了，这样感觉视乎不是太令⼈满意。（不推荐使⽤） ⽅法三：让⽗级div 也⼀并浮起来这样做可以初步解决当前的浮动问题。但是也让⽗级浮动起来了，⼜会产⽣新的浮动问题。 不推荐使⽤ ⽅法四：⽗级div定义 display:table原理：将div属性强制变成表格优点：不解缺点：会产⽣新的未知问题。（不推荐使⽤） ⽅法五：⽗元素设置 overflow：hidden、auto；原理：这个⽅法的关键在于触发了BFC。在IE6中还需要触发hasLayout（zoom：1）优点：代码简介，不存在结构和语义化问题缺点：⽆法显⽰需要溢出的元素（亦不太推荐使⽤） ⽅法六：⽗级div定义 伪类:after 和 zoom .clearfix:after{ content:'.'; display:block; height:0; clear:both; visibility: hidden; } .clearfix {zoom:1;} 原理：IE8以上和⾮IE浏览器才⽀持:after，原理和⽅法2有点类似，zoom(IE转有属性)可解决ie6,ie7浮动问题优点：结构和语义化完全正确,代码量也适中，可重复利⽤率（建议定义公共类）缺点：代码不是⾮常简洁（极⼒推荐使⽤） 经益求精写法 .clearfix:after { content:”200B”; display:block; height:0; clear:both; } .clearfix { *zoom:1; } 照顾IE6，IE7就可以了⼆⼗⼆、 ⽤纯CSS创建⼀个三⾓形的原理是什么 ⾸先，需要把元素的宽度、⾼度设为0。然后设置边框样式。 width: 0; height: 0; border-top: 40px solid transparent; border-left: 40px solid transparent; border-right: 40px solid transparent; border-bottom: 40px solid #ff0000;⼆⼗三、 常见的兼容性问题1.不同浏览器的标签默认的margin和padding不⼀样。*{margin:0;padding:0;}6双边距bug：块属性标签float后，⼜有横⾏的margin情况下，在IE6显⽰margin⽐设置的⼤。hack：display:inline;将其转化为⾏内属性。3.渐进识别的⽅式，从总体中逐渐排除局部。⾸先，巧妙的使⽤“9”这⼀标记，将IE浏览器从所有情况中分离出来。接着，再次使⽤“+”将IE8和IE7、IE6分离开来，这样IE8已经独⽴识别。 { background-color:#f1ee18;/*所有识别*/ .background-color:#00deff9; /*IE6、7、8识别*/ +background-color:#a200ff;/*IE6、7识别*/ _background-color:#1e0bd1;/*IE6识别*/ }4.设置较⼩⾼度标签（⼀般⼩于10px），在IE6，IE7中⾼度超出⾃⼰设置⾼度。hack：给超出⾼度的标签设置overflow:hidden;或者设置⾏⾼line-height ⼩于你设置的⾼度。下，可以使⽤获取常规属性的⽅法来获取⾃定义属性,也可以使⽤getAttribute()获取⾃定义属性；Firefox下，只能使⽤getAttribute()获取⾃定义属性。解决⽅法:统⼀通过getAttribute()获取⾃定义属性。 中⽂界⾯下默认会将⼩于 12px 的⽂本强制按照 12px 显⽰,可通过加⼊ CSS 属性 -webkit-text-size-adjust: none; 解决。7.超链接访问过后hover样式就不出现了，被点击访问过的超链接样式不再具有hover和active了。解决⽅法是改变CSS属性的排列顺序:L-V-H-A ( love hate ): a:link {} a:visited {} a:hover {} a:active {}⼆⼗四、 浏览器是怎样解析CSS选择器的 CSS选择器的解析是从右向左解析的。若从左向右的匹配，发现不符合规则，需要进⾏回溯，会损失很多性能。若从右向左匹配，先找到所有的最右节点，对于每⼀个节点，向上寻找其⽗节点直到找到根元素或满⾜条件的匹配规则，则结束这个分⽀的遍历。两种匹配规则的性能差别很⼤，是因为从右向左的匹配在第⼀步就筛选掉了⼤量的不符合条件的最右节点（叶⼦节点），⽽从左向右的匹配规则的性能都浪费在了失败的查找上⾯。 ⽽在 CSS 解析完毕后，需要将解析的结果与 DOM Tree 的内容⼀起进⾏分析建⽴⼀棵 Render Tree，最终⽤来进⾏绘图。在建⽴Render Tree 时（WebKit 中的「Attachment」过程），浏览器就要为每个 DOM Tree 中的元素根据 CSS 的解析结果（Style Rules）来确定⽣成怎样的 Render Tree。移动端页⾯头部必须声明有meta声明的viewport:26 、移动端页⾯头部必须有meta声明的viewport⼆⼗七、 position:fixed;在android下⽆效怎么处理

⼆⼗⼋、如果需要⼿动写动画，你认为最⼩时间间隔是多久，为什么 多数显⽰器默认频率是60Hz，即1秒刷新60次，所以理论上最⼩间隔为1/60＊1000ms ＝ 16.7ms。⼆⼗九、 li与li之间有看不见的空⽩间隔是什么原因引起的？有什么解决办法？ ⾏框的排列会受到中间空⽩（回车空格）等的影响，因为空格也属于字符,这些空⽩也会被应⽤样式，占据空间，所以会有间隔，把字符⼤⼩设为0，就没有空格了。解决⽅法： 可以将 ： 代码全部写在⼀排 浮动li中float：left 在ul中⽤font-size：0（⾕歌不⽀持）；可以使⽤letter-space：-3px三⼗、 png、jpg、gif 这些图⽚格式解释⼀下，分别什么时候⽤。有没有了解过webp？ png是便携式⽹络图⽚（Portable Network Graphics）是⼀种⽆损数据压缩位图⽂件格式.优点是：压缩⽐⾼，⾊彩好。 ⼤多数地⽅都可以⽤。 jpg是⼀种针对相⽚使⽤的⼀种失真压缩⽅法，是⼀种破坏性的压缩，在⾊调及颜⾊平滑变化做的不错。在www上，被⽤来储存和传输照⽚的格式。 gif是⼀种位图⽂件格式，以8位⾊重现真⾊彩的图像。可以实现动画效果. webp格式是⾕歌在2010年推出的图⽚格式，压缩率只有jpg的2/3，⼤⼩⽐png⼩了45%。缺点是压缩的时间更久了，兼容性不好，⽬前⾕歌和opera⽀持。三⼗⼀、CSS属性overflow属性定义溢出元素内容区的内容会如何处理? 参数是scroll时候，必会出现滚动条。 参数是auto时候，⼦元素内容⼤于⽗元素时出现滚动条。 参数是visible时候，溢出的内容出现在⽗元素之外。 参数是hidden时候，溢出隐藏。

2023年6月21日发(作者：)

CSS使⽤笔记总结（常⽤属性和值）概述：CSS 规则由两个主要的部分构成：选择器，以及⼀条或多条声明:⼀、注释： CSS注释以 "/*" 开始, 以 "*/" 结束

eg: /*p{color:red;text-align:center;}*/⼆、插⼊css样式表的⽅式？link 和@import 的区别是?1.外部样式：使⽤ 标签链接到样式表。 标签在（⽂档的）头部 eg : 2.内部样式表:

3. 内联样式表：

这是⼀个段落。4.导⼊(@import)link和@import的区别：link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS。link引⽤CSS时，在页⾯载⼊时同时加载；@import需要页⾯⽹页完全载⼊以后加载。link是XHTML标签，⽆兼容问题；@import是在CSS2.1提出的，低版本的浏览器不⽀持。link⽀持使⽤Javascript控制DOM去改变样式；⽽@import不⽀持。

⼀般情况下，三种的优先级如下：（内联样式） > （内部样式） >（外部样式） > 浏览器默认样式三、CSS 背景ound-color： 背景颜⾊

CSS中，颜⾊值通常以以下⽅式定义: ⼗六进制 - 如："#ff0000" RGB - 如："rgb(255,0,0)" 颜⾊名称 - 如："red"； 其它属性值：

inherit指定背景颜⾊，应该从⽗元素继承

transparent（透明） 如： body {background-color:#b0c4de;}ound-image：背景图像 默认情况下，背景图像进⾏平铺重复显⽰，以覆盖整个元素实体. 如:body {background-image:url('');}ound-repeat:设置背景图像是否及如何重复。 属性值： repeat 背景图像将向垂直和⽔平⽅向重复。这是默认 repeat-x 只有⽔平位置会重复背景图像 repeat-y 只有垂直位置会重复背景图像 no-repeat 背景图⽚不会重复 inherit 指定背景图⽚属性设置应该从⽗元素继承ound-attachment：背景图像是否固定或者随着页⾯的其余部分滚动。

属性值： scroll 背景图⽚随页⾯的其余部分滚动。这是默认 fixed 背景图像是固定的 inherit 指定background-attachment的设置应该从⽗元素继承ound-position：设置背景图像的起始位置。 属性值⼀般设置：left top bottom right

x%

0px

四、CSS ⽂本格式1. color：⽂本颜⾊： ⼗六进制值 - 如: ＃FF0000 ⼀个RGB值 - 如: RGB(255,0,0) 颜⾊的名称 - 如: -align：⽂本的对齐⽅式 left 把⽂本排列到左边。默认值：由浏览器决定。 right 把⽂本排列到右边。 center 把⽂本排列到中间。 justify 实现两端对齐⽂本效果。-decoration:⽂本修饰，主要是⽤来删除链接的下划线 none 默认。定义标准的⽂本。 underline 定义⽂本下的⼀条线。 overline 定义⽂本上的⼀条线。 line-through 定义穿过⽂本下的⼀条线。-transform: ⽂本转⼤⼩写（控制元素中的字母） none 默认。定义带有⼩写字母和⼤写字母的标准的⽂本。 capitalize ⽂本中的每个单词以⼤写字母开头。 uppercase 定义仅有⼤写字母。 lowercase 定义仅有⼩写字母。-indent： ⽂本缩进属性是⽤来指定⽂本的第⼀⾏的缩进。

如：p {text-indent:50px;}ion: 设置⽂本⽅向。 ltr默认。⽂本⽅向从左到右。 rtl⽂本⽅向从右到左。-spacing: 设置字符间距8. line-height 设置⾏⾼9. vertical-align: 设置元素的垂直对齐 middle把此元素放置在⽗元素的中部。

sub垂直对齐⽂本的下标。 super垂直对齐⽂本的上标 top把元素的顶端与⾏中最⾼元素的顶端对齐 bottom把元素的底端与⾏中最低的元素的顶端对齐。 text-bottom把元素的底端与⽗元素字体的底端对齐。10. word-spacing: 设置字间距11. text-shadow ： 如： text-shadow: 2px 2px #ff0000;五、CSS ⽂字-style： 斜体⽂字的字体样式属性 font-style:normal; 正常 - 正常显⽰⽂本 font-style:italic; 斜体 - 以斜体字显⽰的⽂字-family : 属性设置⽂本的字体系列。 p{font-family:"Times New Roman", Times, serif;}-size : 属性设置⽂本的⼤⼩。-weight : 指定字体的粗细。六、链接样式 a:link {color:#000000;} /* 未访问链接*/ a:visited {color:#00FF00;} /* 已访问链接 */ a:hover {color:#FF00FF;} /* ⿏标移动到链接上 */ a:active {color:#0000FF;} /* ⿏标点击时 */七、CSS 列表(ul) list-style 简写属性。⽤于把所有⽤于列表的属性设置于⼀个声明中 list-style-image 将图象设置为列表项标志。 list-style-position 设置列表中列表项标志的位置。 list-style-type 设置列表项标志的类型。 none⽆标记。 disc默认。标记是实⼼圆 circle标记是空⼼圆。 square标记是实⼼⽅块。⼋、CSS 表格 border-collapse : 表格边框(常⽤的) table{border-collapse:collapse;} table,th, td{border: 1px solid black;}九.CSS 边框属性1. border 简写属性，⽤于把针对四个边的属性设置在⼀个声明。-width ⽤于为元素的所有边框设置宽度，或者单独地为各边边框设置宽3. border-style ⽤于设置元素所有边框的样式，或者单独地为各边设置边框样式 border-style:dotted solid double dashed dotted 上边框是点状 solid 右边框是实线 double 下边框是双线 dashed 左边框是虚线-color 设置元素的所有边框中可见部分的颜⾊，或为 4 个边分别设置颜⾊。⼗、CSS 尺⼨ 设置元素的⾼度。 -height 设置⾏⾼。 -height 设置元素的最⼤⾼度。 -width 设置元素的最⼤宽度。 -height 设置元素的最⼩⾼度。 -width 设置元素的最⼩宽度。 设置元素的宽度。⼗⼀、px，em，rem 的区别 px像素(Pixel)。绝对单位。像素 px 是相对于显⽰器屏幕分辨率⽽⾔的，是⼀个虚拟长度单位，是计算 机系统的数字化图像长度单位，如果 px 要换算成物理长度，需要指定精度 DPI。 em是相对长度单位，相对于当前对象内⽂本的字体尺⼨。如当前对⾏内⽂本的字体尺⼨未被⼈为设置， 则相对于浏览器的默认字体尺⼨。它会继承⽗级元素的字体⼤⼩，因此并不是⼀个固定的值。 rem是 CSS3 新增的⼀个相对单位(root em，根 em)，使⽤ rem 为元素设定字体⼤⼩时，仍然是相对⼤⼩， 但相对的只是HTML根元素。⼗⼆、position ⼏个属性的作⽤position 的常见四个属性值: relative，absolute，fixed，static。⼀般都要配合"left"、“top”、“right” 以及 “bottom” 属性使⽤。static:默认位置。在⼀般情况下，我们不需要特别的去声明它，但有时候遇到继承的情况，我们不愿意见到元素所继承的属性影响本⾝，从⽽可以⽤Position:static取消继承，即还原元素定位的默认值。设置为 static 的元素，它始终会处于页⾯流给予的位置(static 元素会忽略任何 top、 bottom、left 或 right 声明)。⼀般不常⽤。relative:相对定位。相对定位是相对于元素默认的位置的定位，它偏移的 top，right，bottom，left 的值都以它原来的位置为基准偏移，⽽不管其他元素会怎么 样。注意 relative 移动后的元素在原来的位置仍占据空间。absolute:绝对定位。设置为 absolute 的元素，如果它的 ⽗容器设置了 position 属性，并且 position 的属性值为 absolute 或者relative，那么就会依据⽗容器进⾏偏移。如果其⽗容器没有设置 position 属性，那么偏移是以 body 为依据。注意设置 absolute 属性的元素在标准流中不占位置。fixed:固定定位。位置被设置为 fixed 的元素，可定位于相对于浏览器窗⼝的指定坐标。不论窗⼝滚动与否，元素都会留在那个位置。它始终是以 body 为依据的。 注意设置 fixed 属性的元素在标准流中不占位置。⼗三、盒⼦模型（box-sizing）设置CSS盒模型为标准模型或IE模型。标准模型的宽度只包括content，⼆IE模型包括border和paddingbox-sizing属性可以为三个值之⼀： content-box，默认值，只计算内容的宽度，border和padding不计算⼊width之内 padding-box，padding计算⼊宽度内 border-box，border和padding计算⼊宽度之内⼗四、 display有哪些值？说明他们的作⽤? inline（默认）–内联 none–隐藏 block–块显⽰ table–表格显⽰ list-item–项⽬列表 inline-block⼗五、 margin属性和padding属性？margin：外边距； padding：内边距；属性值可以 有四个，如下： margin:25px 50px 75px 100px; 上边距为25px 右边距为50px 下边距为75px 左边距为100px margin:25px 50px 75px; 上边距为25px 左右边距为50px 下边距为75px margin:25px 50px; 上下边距为25px 左右边距为50px margin:25px; 所有的4个边距都是25px⼗六.CSS隐藏元素的常见的⼏种⽅式及区别1. display:none元素在页⾯上将彻底消失，元素本来占有的空间就会被其他元素占有，也就是说它会导致浏览器的重排和重绘。不会触发其点击事件lity:hidden和display:none的区别在于，元素在页⾯消失后，其占据的空间依旧会保留着，所以它只会导致浏览器重绘⽽不会重排。⽆法触发其点击事件适⽤于那些元素隐藏后不希望页⾯布局会发⽣变化的场景3. opacity:0将元素的透明度设置为0后，在我们⽤户眼中，元素也是隐藏的，这算是⼀种隐藏元素的⽅法。和visibility:hidden的⼀个共同点是元素隐藏后依旧占据着空间，但我们都知道，设置透明度为0后，元素只是隐⾝了，它依旧存在页⾯中。可以触发点击事件⼗七、渐进增强和优雅降级关键的区别是他们所侧重的内容，以及这种不同造成的⼯作流程的差异 优雅降级观点认为应该针对那些最⾼级、最完善的浏览器来设计⽹站。 渐进增强观点则认为应关注于内容本⾝，优先考虑低版本。⼗⼋、重绘和重排 重绘：当盒⼦的位置、⼤⼩以及其他属性，例如颜⾊、字体⼤⼩等都确定下来之后，浏览器便把这些原⾊都按照各⾃的特性绘制⼀遍，将内容呈现在页⾯上。重绘是指⼀个元素外观的改变所触发的浏览器⾏为，浏览器会根据元素的新属性重新绘制，使元素呈现新的外观。触发重绘的条件：改变元素外观属性。如：color，background-color等。注意：table及其内部元素可能需要多次计算才能确定好其在渲染树中节点的属性值，⽐同等元素要多花两倍时间，这就是我们尽量避免使⽤table布局页⾯的原因之⼀。 重排：当渲染树中的⼀部分(或全部)因为元素的规模尺⼨，布局，隐藏等改变⽽需要重新构建, 这就称为回流。每个页⾯⾄少需要⼀次回流，就是在页⾯第⼀次加载的时候。 重绘和重排的关系：在回流的时候，浏览器会使渲染树中受到影响的部分失效，并重新构造这部分渲染树，完成回流后，浏览器会重新绘制受影响的部分到屏幕中，该过程称为重绘。 所以，重排必定会引发重绘，但重绘不⼀定会引发重排。⼗九、怎么让⼀个不定宽⾼的 DIV，垂直⽔平居中?1.使⽤Flex：只需要在⽗盒⼦设置：display: flex; justify-content: center;align-items: center;2.使⽤ CSS3 transform：⽗盒⼦设置:position:relativeDiv 设置:transform:translate(-50%，-50%);position:absolute;top:50%;left:50%;3.使⽤ display:table-cell ⽅法：⽗盒⼦设置:display:table-cell;text-align:center;vertical-align:middle;Div 设置:display:inline-block;vertical-align:middle;⼆⼗、BFC相关知识（块级格式化上下⽂）定义：BFC(Block formatting context)直译为"块级格式化上下⽂"。它是⼀个独⽴的渲染区域，只有 Block-level box 参 与， 它规定了内部的 Block-level Box 如何布局，并且与这个区域外部毫不相⼲。BFC布局规则BFC 就是页⾯上的⼀个隔离的独⽴容器，容器⾥⾯的⼦元素不会影响到外⾯的元素。反之也如此。BFC这个元素的垂直⽅向的边距会发⽣重叠，垂直⽅向的距离由margin决定，取最⼤值BFC 的区域不会与浮动盒⼦重叠（清除浮动原理）。计算 BFC 的⾼度时，浮动元素也参与计算。哪些元素会⽣成 BFC 根元素 float 属性不为 none position 为 absolute 或 fixed display 为 inline-block， table-cell， table-caption， flex， inline-flex overflow 不为 visible⼆⼗⼀、浮动与清除浮动 1.浮动相关知识 float属性的取值： left：元素向左浮动。 right：元素向右浮动。 none：默认值。元素不浮动，并会显⽰在其在⽂本中出现的位置。 浮动的特性： 浮动元素会从普通⽂档流中脱离，但浮动元素影响的不仅是⾃⼰，它会影响周围的元素对齐进⾏环绕。 不管⼀个元素是⾏内元素还是块级元素，如果被设置了浮动，那浮动元素会⽣成⼀个块级框，可以设置它的width和height，因此float常常⽤于制作横向配列的菜单，可以设置⼤⼩并且横向排列。 浮动元素的展⽰在不同情况下会有不同的规则： 浮动元素在浮动的时候，其margin不会超过包含块的padding。PS：如果想要元素超出，可以设置margin属性 如果两个元素⼀个向左浮动，⼀个向右浮动，左浮动元素的marginRight不会和右浮动元素的marginLeft相邻。 如果有多个浮动元素，浮动元素会按顺序排下来⽽不会发⽣重叠的现象。 如果有多个浮动元素，后⾯的元素⾼度不会超过前⾯的元素，并且不会超过包含块。 如果有⾮浮动元素和浮动元素同时存在，并且⾮浮动元素在前，则浮动元素不会⾼于⾮浮动元素 浮动元素会尽可能地向顶端对齐、向左或向右对齐 重叠问题 ⾏内元素与浮动元素发⽣重叠，其边框，背景和内容都会显⽰在浮动元素之上 块级元素与浮动元素发⽣重叠时，边框和背景会显⽰在浮动元素之下，内容会显⽰在浮动元素之上 clear属性clear属性：确保当前元素的左右两侧不会有浮动元素。clear只对元素本⾝的布局起作⽤。取值：left、right、both 2. ⽗元素⾼度塌陷问题 为什么要清除浮动，⽗元素⾼度塌陷解决⽗元素⾼度塌陷问题：⼀个块级元素如果没有设置height，其height是由⼦元素撑开的。对⼦元素使⽤了浮动之后，⼦元素会脱离标准⽂档流，也就是说，⽗级元素中没有内容可以撑开其⾼度，这样⽗级元素的height就会被忽略，这就是所谓的⾼度塌陷。 3. 清除浮动的⽅法 ⽅法1：给⽗级div定义 ⾼度原理：给⽗级DIV定义固定⾼度（height），能解决⽗级DIV ⽆法获取⾼度得问题。优点：代码简洁缺点：⾼度被固定死了，是适合内容固定不变的模块。（不推荐使⽤） ⽅法⼆：使⽤空元素，如(.clear{clear:both})原理：添加⼀对空的DIV标签，利⽤css的clear:both属性清除浮动，让⽗级DIV能够获取⾼度。优点：浏览器⽀持好缺点：多出了很多空的DIV标签，如果页⾯中浮动模块多的话，就会出现很多的空置DIV了，这样感觉视乎不是太令⼈满意。（不推荐使⽤） ⽅法三：让⽗级div 也⼀并浮起来这样做可以初步解决当前的浮动问题。但是也让⽗级浮动起来了，⼜会产⽣新的浮动问题。 不推荐使⽤ ⽅法四：⽗级div定义 display:table原理：将div属性强制变成表格优点：不解缺点：会产⽣新的未知问题。（不推荐使⽤） ⽅法五：⽗元素设置 overflow：hidden、auto；原理：这个⽅法的关键在于触发了BFC。在IE6中还需要触发hasLayout（zoom：1）优点：代码简介，不存在结构和语义化问题缺点：⽆法显⽰需要溢出的元素（亦不太推荐使⽤） ⽅法六：⽗级div定义 伪类:after 和 zoom .clearfix:after{ content:'.'; display:block; height:0; clear:both; visibility: hidden; } .clearfix {zoom:1;} 原理：IE8以上和⾮IE浏览器才⽀持:after，原理和⽅法2有点类似，zoom(IE转有属性)可解决ie6,ie7浮动问题优点：结构和语义化完全正确,代码量也适中，可重复利⽤率（建议定义公共类）缺点：代码不是⾮常简洁（极⼒推荐使⽤） 经益求精写法 .clearfix:after { content:”200B”; display:block; height:0; clear:both; } .clearfix { *zoom:1; } 照顾IE6，IE7就可以了⼆⼗⼆、 ⽤纯CSS创建⼀个三⾓形的原理是什么 ⾸先，需要把元素的宽度、⾼度设为0。然后设置边框样式。 width: 0; height: 0; border-top: 40px solid transparent; border-left: 40px solid transparent; border-right: 40px solid transparent; border-bottom: 40px solid #ff0000;⼆⼗三、 常见的兼容性问题1.不同浏览器的标签默认的margin和padding不⼀样。*{margin:0;padding:0;}6双边距bug：块属性标签float后，⼜有横⾏的margin情况下，在IE6显⽰margin⽐设置的⼤。hack：display:inline;将其转化为⾏内属性。3.渐进识别的⽅式，从总体中逐渐排除局部。⾸先，巧妙的使⽤“9”这⼀标记，将IE浏览器从所有情况中分离出来。接着，再次使⽤“+”将IE8和IE7、IE6分离开来，这样IE8已经独⽴识别。 { background-color:#f1ee18;/*所有识别*/ .background-color:#00deff9; /*IE6、7、8识别*/ +background-color:#a200ff;/*IE6、7识别*/ _background-color:#1e0bd1;/*IE6识别*/ }4.设置较⼩⾼度标签（⼀般⼩于10px），在IE6，IE7中⾼度超出⾃⼰设置⾼度。hack：给超出⾼度的标签设置overflow:hidden;或者设置⾏⾼line-height ⼩于你设置的⾼度。下，可以使⽤获取常规属性的⽅法来获取⾃定义属性,也可以使⽤getAttribute()获取⾃定义属性；Firefox下，只能使⽤getAttribute()获取⾃定义属性。解决⽅法:统⼀通过getAttribute()获取⾃定义属性。 中⽂界⾯下默认会将⼩于 12px 的⽂本强制按照 12px 显⽰,可通过加⼊ CSS 属性 -webkit-text-size-adjust: none; 解决。7.超链接访问过后hover样式就不出现了，被点击访问过的超链接样式不再具有hover和active了。解决⽅法是改变CSS属性的排列顺序:L-V-H-A ( love hate ): a:link {} a:visited {} a:hover {} a:active {}⼆⼗四、 浏览器是怎样解析CSS选择器的 CSS选择器的解析是从右向左解析的。若从左向右的匹配，发现不符合规则，需要进⾏回溯，会损失很多性能。若从右向左匹配，先找到所有的最右节点，对于每⼀个节点，向上寻找其⽗节点直到找到根元素或满⾜条件的匹配规则，则结束这个分⽀的遍历。两种匹配规则的性能差别很⼤，是因为从右向左的匹配在第⼀步就筛选掉了⼤量的不符合条件的最右节点（叶⼦节点），⽽从左向右的匹配规则的性能都浪费在了失败的查找上⾯。 ⽽在 CSS 解析完毕后，需要将解析的结果与 DOM Tree 的内容⼀起进⾏分析建⽴⼀棵 Render Tree，最终⽤来进⾏绘图。在建⽴Render Tree 时（WebKit 中的「Attachment」过程），浏览器就要为每个 DOM Tree 中的元素根据 CSS 的解析结果（Style Rules）来确定⽣成怎样的 Render Tree。移动端页⾯头部必须声明有meta声明的viewport:26 、移动端页⾯头部必须有meta声明的viewport⼆⼗七、 position:fixed;在android下⽆效怎么处理

⼆⼗⼋、如果需要⼿动写动画，你认为最⼩时间间隔是多久，为什么 多数显⽰器默认频率是60Hz，即1秒刷新60次，所以理论上最⼩间隔为1/60＊1000ms ＝ 16.7ms。⼆⼗九、 li与li之间有看不见的空⽩间隔是什么原因引起的？有什么解决办法？ ⾏框的排列会受到中间空⽩（回车空格）等的影响，因为空格也属于字符,这些空⽩也会被应⽤样式，占据空间，所以会有间隔，把字符⼤⼩设为0，就没有空格了。解决⽅法： 可以将 ： 代码全部写在⼀排 浮动li中float：left 在ul中⽤font-size：0（⾕歌不⽀持）；可以使⽤letter-space：-3px三⼗、 png、jpg、gif 这些图⽚格式解释⼀下，分别什么时候⽤。有没有了解过webp？ png是便携式⽹络图⽚（Portable Network Graphics）是⼀种⽆损数据压缩位图⽂件格式.优点是：压缩⽐⾼，⾊彩好。 ⼤多数地⽅都可以⽤。 jpg是⼀种针对相⽚使⽤的⼀种失真压缩⽅法，是⼀种破坏性的压缩，在⾊调及颜⾊平滑变化做的不错。在www上，被⽤来储存和传输照⽚的格式。 gif是⼀种位图⽂件格式，以8位⾊重现真⾊彩的图像。可以实现动画效果. webp格式是⾕歌在2010年推出的图⽚格式，压缩率只有jpg的2/3，⼤⼩⽐png⼩了45%。缺点是压缩的时间更久了，兼容性不好，⽬前⾕歌和opera⽀持。三⼗⼀、CSS属性overflow属性定义溢出元素内容区的内容会如何处理? 参数是scroll时候，必会出现滚动条。 参数是auto时候，⼦元素内容⼤于⽗元素时出现滚动条。 参数是visible时候，溢出的内容出现在⽗元素之外。 参数是hidden时候，溢出隐藏。