属性选择器 image.png 伪类选择器 CSS1-2伪类选择器 image.png CSS3常用伪类选择器 image.png 伪元素 image.png 伪类与伪元素的区别与作用 CSS3对伪类的定义...并且，为了满足用户在操作DOM时产生的DOM结构改变，伪类也可以是动态的。 其实第一段话就囊括CSS3伪类的全部定义了，这段话中指出CSS3伪类的功能有两种： 获取不存在与DOM树中的信息。...CSS3对于伪元素的定义 伪元素在DOM中创建了一些抽象元素，这些对象不存在与常文档流中。 伪元素由两个冒号::开头，然后是伪元素的名称。 使用两个冒号::是为了和伪类（CSS2中并没有区别）做区分。...此样式表被下载和解析后，将重新渲染页面，也就出现了短暂的花屏现象。 解决方法: 使用link标签将样式表放在文档head中 什么是外边距重叠？ 重叠的结果是什么？...这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。 目前，除了IE8及更早版本外，所有浏览器均已支持rem。
，则浏览器使用默认大小 font-family 用于设置文字采用的字体样式，例如：宋体、微软雅黑等等 font-weight 用来设置字体粗细，body{font-weight: bold;} font-style...font-size、font-family 一般设置在body标签中。 font: 12/1.5 字体大小为12px，行高为1.5倍 文本样式 color 用于设置文本蓝色 <!...*/ 注意事项： 链接伪类：必须按顺序来写 实际项目中，只设置 a 标签基本样式 和 hover 伪类样式 选择器权重 块元素和行内元素 HTML标签主要分为块标签和行内标签两种类型，也称为块元素和行内元素...子元素使用绝对定位退表，可以在父元素中随意定位。...固定定位 固定定位就是将盒子定位到页面的固定位置 固定定位也是投标，只认浏览器的可视窗口 { position: fixed; } 堆叠 定位会让盒子重叠，后面的盒子会压住前面的盒子 z-index
后代元素：直接或间接被祖先元素包含的元素叫做后代元素，子元素也是后 代元素。...超链接的伪类： :link 超链接独有 作用：用来表示没有被点击过的链接 :visited 超链接独有 作用：表示访问过的链接，由于隐私的原因，所以visited这个伪类 只能修改链接的颜色...垂直外边距的重叠(折叠)： 相邻的垂直方向外边距会发生重叠现象。...在没有auto的情况下回调整外右边距，但有auto的话会优先调改设置为auto的元素。...则浏览器会自动调整margin-right值以使等式满足，这七个值中有三个值和设置为auto：width、margin-left、maring-right ->如果某个值为auto,则会自动调整为auto
回答： 在css3中使用单冒号来表示伪类，用双冒号来表示伪元素。但是为了兼容已有的伪元素的写法，在一些浏览器中也可以使用单冒号 来表示伪元素。...但是，由于在旧版本的W3C规范并未对此进行 特别区分，因此目前绝大多数的浏览器都支持使用这两种方式表示伪元素。 详细资料可以参考：《总结伪类与伪元素》[54] 5.CSS 中哪些属性可以继承？...的解释a标签有四种状态：链接访问前、链接访问后、鼠标滑过、激活，分别对应四种伪类:link、:visited、:hover、:active； 当链接未访问过时： （1）当鼠标滑过a链接时，满足:link...但是，在chrome 更新到27版本之后就不可以用了。...回答： margin重叠指的是在垂直方向上，两个相邻元素的margin发生重叠的情况。
解决自适应两栏布局问题：利用BFC的区域不会与float box重叠的规则。解决浮动后塌陷问题：利用计算BFC的高度时，浮动元素也参与计算规则。...在不同浏览器下以后什么区别？当一个元素的visibility属性被设置成collapse值后，对于一般的元素，它的表现跟hidden是一样的。...这2个伪元素的作用？·在 CSS3 中 : 表示伪类， :: 表示伪元素·想让插入的内容出现在其他内容前，使用::befroe。...写在body标签后由于浏览器以逐行方式对HTML文档进行解析，当解析到写在尾部的样式表(外联或写在style标签)会导致浏览器停止之前的渲染，等待加载且解析样式表完成之后重新渲染，在windows的IE...em的值不是固定的，并且em会继承父级元素的字体大小。 浏览器的默认字体高度都是16px。所以未经调整的浏览器都符合：1em=16px。
这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。目前，除了IE8及更早版本外，所有浏览器已支持rem。...单冒号(:)用于CSS3伪类，双冒号(::)用于CSS3伪元素。 ::before就是以一个子元素的存在，定义在元素主体内容之前的一个伪元素。并不存在于dom之中，只存在在页面之中。...、根元素都需要调整display 26、css中link与@import的区别？...content属性与::before及::after伪元素配合使用，用来插入生成的内容，可以在元素之前或之后放置生成的内容。可以插入文本、图像、引号，并可以结合计数器，为页面元素插入编号。...1.浏览器预先加载css后，可以不必等待HTML加载完毕就可以渲染页面了 2.其实HTML渲染并不会等到完全加载完在渲染页面，而是一边解析DOM一边渲染。
以下实例选取了所有 元素之后的所有相邻兄弟元素 : div~p{background-color:yellow;}字体大小用em来设置字体大小为了避免 Internet Explorer...1em 和当前字体大小相等。在浏览器中默认的文字大小是16px。因此，1em的默认大小是16px。...DOCTYPE 才能支持.Fixed 定位使元素的位置与文档流无关，因此不占据空间。Fixed 定位的元素和其他元素重叠。Relative 定位相对定位元素的定位是相对其正常位置。...注意： 如果两个定位元素重叠，没有指定 z - index，最后定位在 HTML 代码中的元素将被显示在最前面。...这个 div 元素由用户调整大小。
若衍生字体不存在，浏览器就会调整常规字体，让它显示为bold、italic、或者oblique等样式。真实字体和自动调整形成的字体在视觉上有 明显的区别，有经验的设计师能很快区分它们。...合理设置字体大小 使用em:在对body元素应用了百分比单位后，我们可以为其余元素使用em值。...弹性设计 基于固定布局与变宽布局的优缺点，延伸出“弹性设计”。在宽度、内边距、外边距以及其他的度量单位都使用了em而非px,那么这些元素能够随字体大小的变化而相应改变。...例如：图像，因为图像的尺寸是固定的，它们不会随着字符大小的改变而改变。所以，要彻底应用弹性设计还需要更多的考虑。 可变裁减技术 在页面空白的大小变化时自动调整图像显示出来部分的尺寸。...为链接元素指定伪类时，牢记以下顺序：link\visited\hover\active （8）测试时使用嵌入样式，发布时再改为外部输入 此举可避免许多因浏览器缓存导致的不正常现象。
• link: 链接外部资源的标签，此标签决定了文档与外部资源的关系，常用于链接样式表(css)，网页站点图标(favicon)。...加载差异：link 引用的 css,在页面加载时同时加载。而 @import 在页面加载完后才加载 3. 兼容性：link 是 html 标签，没有兼容问题。...• 区别： • 伪类操作的对象是文档树种已有的元素或样式 • 伪元素则是创建一个文档树以外的元素或样式 • : 表示伪类 • :: 表示伪元素 • 作用： • 伪类：通过在元素选择器上加入伪类改变元素的状态...样式与内容分离 16. ::before 和 :after 的双冒号和单冒号有什么区别？ 1. 单冒号(:) 表示伪类，双冒号(::)表示伪元素 2....在 CSS2.1 中，伪元素都是使用 单冒号 来表示伪元素的，但在 CSS3 规范中，伪元素的语法被修改为使用 双冒号 17. CSS 预处理器/后处理器是什么？为什么要使用他们？
固定定位 fixed： 元素的位置相对于浏览器窗口是固定位置，即使窗口是滚动的它也不会移动。Fixed 定 位使元素的位置与文档流无关，因此不占据空间。 Fixed 定位的元素和其他元素重叠。...而后，元素定位表现为在跨越特定阈值前为相对定 位，之后为固定定位。 默认定位 Static： 默认值。...> 浏览器默认选择器 内联样式（style=""） > 内（）、外部样式（） ID 选择器 > 类选择器、属性选择器、伪类选择器 > 类型选择器、伪元素选择器 相同优先级...属于同一个BFC的两个相邻Box的margin会发生重叠 每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反 BFC的区域不会与float...Others 6.1 GET 与 POST 的区别 1.针对数据操作的类型不同.GET对数据进行查询，POST主要对数据进行增删改！简单说，GET是只读，POST是写。 2.参数大小不同.
在不同浏览器下以后什么区别？ 当一个元素的visibility属性被设置成collapse值后，对于一般的元素，它的表现跟hidden是一样的。...Box垂直方向的距离由margin决定，属于同一个BFC的两个相邻Box的margin会发生重叠。 每个元素的margin box 的左边，与包含块border box的左边相接触。...解释一下这2个伪元素的作用 单冒号(:)用于CSS3伪类，双冒号(::)用于CSS3伪元素。 ::before就是以一个子元素的存在，定义在元素主体内容之前的一个伪元素。...:before 和 :after 这两个伪元素，是在CSS2.1里新出现的。...写在body标签后由于浏览器以逐行方式对HTML文档进行解析，当解析到写在尾部的样式表（外联或写在style标签）会导致浏览器停止之前的渲染，等待加载且解析样式表完成之后重新渲染，在windows的IE
二.伪类与伪元素 伪类像类一样，用来选择DOM树上本就存在的某个元素。...在指定元素内容结尾的位置生成一个元素（同上） 伪类与伪元素最大的区别是要选择的目标内容是否存在于DOM上，存在就是伪类，不存在就属于伪元素。...CSS3选择器的更多信息，请查看CSS选择器分类总结 三.a标签的6种状态 lvfha伪类给超链接提供了5种状态，第6种是指锚点，而不是超链接 link伪类存在的意义之一就是把超链接与锚点区分开，link...伪类只匹配具有href的a标签（即超链接），而非锚点 一般桌面浏览器环境下，a标签的6种状态及对应的触发行为分别是： a {/* 处于任意状态的a标签，不论是超链接还是锚点 */} a:link {/*...hover:active :visited:hover:active 展开之后就没有重叠状态了，让每条规则都变成严格互斥的，自然就没冲突了 P.S.注意：因为IE6-不能正确处理组合伪类，只认最后一个，
sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。...图片懒加载，在页面上的未可视区域可以添加一个滚动条事件，判断图片位置与浏览器顶端的距离与页面的距离，如果前者小于后者，优先加载。...如果图片展示区域小于图片的真实大小，则因在服务器端根据业务需要先行进行图片压缩，图片压缩后大小与展示一致。 4、请用Css写一个简单的幻灯片效果页面 思路：知道是要用css3。...重叠的结果是什么？ 外边距重叠就是margin-collapse。 在CSS当中，相邻的两个盒子（可能是兄弟关系也可能是祖先关系）的外边距可以结合成一个单独的外边距。...em得值不是固定的，并且em会继承父级元素的字体大小。 浏览器的默认字体高都是16px。所以未经调整的浏览器都符合: 1em=16px。那么12px=0.75em, 10px=0.625em。
回答： 在css3中使用单冒号来表示伪类，用双冒号来表示伪元素。但是为了兼容已有的伪元素的写法，在一些浏览器中也可以使用单冒号 来表示伪元素。...4.伪类与伪元素的区别 css引入伪类和伪元素概念是为了格式化文档树以外的信息。也就是说，伪类和伪元素是用来修饰不在文档树中的部分，比如，一句 话中的第一个字母，或者是列表中的第一个元素。...但是，由于在旧版本的W3C规范并未对此进行 特别区分，因此目前绝大多数的浏览器都支持使用这两种方式表示伪元素。 详细资料可以参考： 《总结伪类与伪元素》 5.CSS 中哪些属性可以继承？...a标签有四种状态：链接访问前、链接访问后、鼠标滑过、激活，分别对应四种伪类:link、:visited、:hover、:active； 当链接未访问过时： （1）当鼠标滑过a链接时，满足:link和...回答： margin重叠指的是在垂直方向上，两个相邻元素的margin发生重叠的情况。
回答： 在css3中使用单冒号来表示伪类，用双冒号来表示伪元素。但是为了兼容已有的伪元素的写法，在一些浏览器中也可以使用单冒号来表示伪元素。...4.伪类与伪元素的区别 css引入伪类和伪元素概念是为了格式化文档树以外的信息。也就是说，伪类和伪元素是用来修饰不在文档树中的部分，比如，一句话中的第一个字母，或者是列表中的第一个元素。...但是，由于在旧版本的W3C规范并未对此进行特别区分，因此目前绝大多数的浏览器都支持使用这两种方式表示伪元素。 详细资料可以参考： 《总结伪类与伪元素》 5.CSS 中哪些属性可以继承？...a标签有四种状态：链接访问前、链接访问后、鼠标滑过、激活，分别对应四种伪类:link、:visited、:hover、:active； 当链接未访问过时： （1）当鼠标滑过a链接时，满足:link和:...hover两种状态，要改变a标签的颜色，就必须将:hover伪类在:link伪类后面声明； （2）当鼠标点击激活a链接时，同时满足:link、:hover、:active三种状态，要显示a标签激活时的样式
（3）超链接 hover伪类样式，单击后失效。 解决方法是使用以下正确的书写顺序：L→V→H→A（link, visited, hover.， active）。 （4）z- index问题。...content属性与：before及：after伪元素配合使用，用来插入生成的内容，可以在元素之前或之后放置生成的内容。可以插入文本、图像、引号，并可以结合计数器，为页面元素插入编号。...浏览器的默认字体高都是16px，所以未经调整的浏览器都符合lem=16px，那么12px=0.75em，10px=0.625em。...与cm对应的另一个长度单位是rem，是指相对于根元素（通常是HTML元素）字体的大小。 33、什么叫优雅降级和渐进增强？两者有什么区别？...伸缩单元内和伸缩容器外的一切元素都不受影响。简单地说， Flexbox定义了伸缩容器内伸缩单元的布局。 43、访问超链接后 hover样式就不出现的原因是什么？应该如何解决？
在不同浏览器下以后什么区别？ 当一个元素的visibility属性被设置成collapse值后，对于一般的元素，它的表现跟hidden是一样的。...Box垂直方向的距离由margin决定，属于同一个BFC的两个相邻Box的margin会发生重叠。 每个元素的margin box 的左边，与包含块border box的左边相接触。...解释一下这2个伪元素的作用 单冒号(:)用于CSS3伪类，双冒号(::)用于CSS3伪元素。 ::before就是以一个子元素的存在，定义在元素主体内容之前的一个伪元素。...43 style标签写在body后与body前有什么区别？ 页面加载自上而下 当然是先加载样式。...写在body标签后由于浏览器以逐行方式对HTML文档进行解析，当解析到写在尾部的样式表（外联或写在style标签）会导致浏览器停止之前的渲染，等待加载且解析样式表完成之后重新渲染，在windows的IE
相邻同级选择器：E+F{sRules}，选择紧贴在E元素之后F元素，元素E与F必须同属一个父级，“+” 左右空格无影响。 5....4. inline-block 使用 inline-block 布局之后元素之间去除边距等因素后，无法完全紧靠的原因：为了方便理解，可以将 inline-block 容器内的元素看成是两个文字，文字与文字之间不可能是连在一起的...不常见的属性 transform CSS3 3D 转换、resize元素大小调整、outline 元素外轮廓。...视觉视口的宽度 = 理想视口宽度 / 缩放比例 参考链接：https://blog.csdn.net/leman314/article/details/111936863 13. px px的大小在不同屏幕上是一样的...46.fixed定位后，背景变透明 背景色和opacity都不是透明的，但是从表面来看元素变透明了，实际上并不是被fixed的元素变透明了，只是因为这个元素没有z-index属性，跟底层元素进行了重叠，
使用像素和em与使用百分比进行背景定位时，计算方式是不一样的。使用像素和em时，会一直以图片的左上角相对于父元素（左侧和顶部）来计算。使用百分比时，则是以图片中对应比例的点定位到父元素对应比例的点。...伪实现：嵌套元素实现类似效果 通过元素嵌套的方式，我们可以很容易实现这样的布局，外层元素加padding，flex布局、绝对定位、float这些方式都能实现，实现方式较为简单，这里我就不放代码了。...这类实现方式，由于嵌套了元素，并不是我们想要的实现效果。所以这是一种伪实现。 2....这种方式也有个不便利的地方时，calc()中减去的10px与padding相同，如果padding调整，这里也要调整。 4....不过我们可以通过上面的方式，在background缩写语法中，加入right center来作为后备，实现优雅降级。 该方法与使用calc()一样，如果padding调整，这里也要调整。 5.
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储
