出现问题的代码： .divcss5{ width:500px; border:1px solid #000; padding:10p...
# CSS 优先级 内联 > ID 选择器 > 类选择器 > 标签选择器 具体到计算层面，优先级由 A、B、C、D 的值来决定，计算规则如下： A 存在内联样式 A 值为 1，否则为 0 B 值为 ID...E 元素后代的 F 元素 E > F 子元素选择器，匹配所有 E 元素的子元素 F E + F 相邻元素选择器，匹配所有紧随着 E 元素之后的同级元素 F E ~ F CSS3，匹配任何在 E 元素之后的同级...F 元素 属性选择器 CSS 2.1 E[attr] 匹配所有具有 attr 属性的 E 元素（E 可以省略，如 [checked]） E[attr=val] 匹配所有 attr 属性值为 val...(1) E:empty 匹配一个不包含任何子元素的元素，注意，文本节点也被看作子元素 E:not(s) 匹配不符合当前选择器的任何元素 伪元素：用于创建一些不在文档树中的元素，并为其添加样式 CSS...布局的对象和基本单位，一个页面由很多个 Box (盒模型) 组成 Formatting context：块级上下文格式化，是页面中的一块渲染区域，并有一套渲染规则，决定其子元素将如何定位，以及和其他元素的关系和相互作用
， 2 2月 2021 作者 847954981@qq.com 前端学习, 我的编程之路 CSS选择器 在之前的文章中，我们知道对于繁杂的网页内容，我们可以通过引用内部样式来完成集体修改。...如： 小虫 当然，一个标签可以属于多个类，不同类之间用空格隔开，且层叠性（优先级）是依据CSS中类的前后而不是标签的类定义前后。...“#” 而不是 “.” ...后代选择器： 标签内嵌套标签时使用，如： 测试 时我们可以在CSS中以 |”父级”+空格+”子级”| 方式来选择 如： li p { font-size:20px } 交集选择器...：Id选择器 > 类选择器 > 标签选择器 而高级选择器的优先级取决于权重，即假设：标签选择器权重为1，类选择器权重为10，Id选择器权重为100，高级选择器权重为其囊括的权重相加(两个高级选择器优先级对比的前提是选择有交集
框架（如 Bootstrap等）中，并成为行业的默认规范。...也可以把浮动元素想象成被块元素忽略的元素，而内联元素会关注的元素。 17、解释一下 CSS Sprite，以及如何在页面或网站中使用它。...（6）CSS3选择器（如nth- child）能够漂亮地定位我们想要的元素，又能保证CSS整洁易读。然而，这些神奇的选择器会浪费很多的浏览器资源。...px和em都是长度单位，两者的区别是：px的值是固定的，指定为多少就是多少，计算比较容易；em的值不是国定的，是相对于容器字体的大小，并且em会继承父级元素的字体大小。...使用rgba给元素的背景设置透明度的方式，来替代使用opacity设置元素透明度的方式，解决子元素继承父元素透明度的问题。 56、CSS中，自适应的单位都有哪些？
在元素处于自身所在浏览器窗口时，与relative特性一致，当超出自身所在浏览器窗口，则于position特性一致 inherit 默认继承父级的定位属性 说一下css3的选择器有那些，以及优先级 答案解析...答案解析： 清除浮动是指的是父元素中的子元素设置float导致父元素的高度为0的情况 解决方案 父元素设置属性为：overflow:hidden (实质是触发BFC) 父元素中增加一个新的元素，添加属性...层叠上下文的产生方法有：设置定位元素position且非static值并设置z-index属性的具体数值、transform属性值不是none、父元素的display属性值为flex,子元素z-index...css不会阻塞dom树的解析 css会阻塞dom树的渲染 css加载会阻塞后面js的执行 原因如：浏览器渲染页面的过程分析 结构伪类选择器有哪些 选择器 功能描述 E:last-child 选择父元素的倒数第一个子元素...区别：伪元素的操作对象是新生的元素，而不是原来dom结构里就存在的；而伪类的操作对象是原来dom结构就存在的元素 css中那些属性可以继承 字体系列 font-family font-size font-style
众所周知，前端内容多而杂，经过查阅各种资料，总结了一些知识点，以备后续复习使用。文章分为上（html，css）中(js)下(vue)三部分。...（如div下可包含div） 行内元素（常见的行内元素a,span.img） 一行显示多个 宽度为内容的宽度 不可以设置高度和宽度 标签内一般不包含标签（如a标签内包含a标签） 行内块元素 行内块元素包含块级元素和行内元素的特征...属性设置，设为content-box即为标准盒模型，设为border-box即为IE盒模型 2. css选择器 优先级！...3. css3新增伪类 p:first-of-type 选择属于父元素的首个p元素 p:last-of-type 选择属于父元素的最后一个p元素 p:only-of-type 选择属于父元素的唯一...px和em的区别是什么 px和em都是长度单位，两者的区别是：px的值是固定的，指定为多少就是多少，计算比较容易；em的值不是固定的，是相对于容器字体的大小，并且em会继承父级元素的字体大小。
一个块级元素如果没有设置 height，那么其高度就是由里面的子元素撑开，如果子元素使用浮动，脱离了标准的文档流，那么父元素的高度会将其忽略，如果不清除浮动，父元素会出现高度不够，那样如果设置 border...而其他一些内容元素，如广告 Banner、商品图片 等对质量要求不是特别苛刻的，则可以用 JPG 去进行存储从而降低文件大小。...CSS 选择符 id 选择器（ #myid） 类选择器（.myclassname） 标签选择器（div, h1, p） 相邻选择器（h1 + p） 子选择器（ul > li） 后代选择器（li a） 通配符选择器...:checked 选择被选中的表单元素 :after 选择器在被选元素的内容后面插入内容 :before 选择器在被选元素的内容前面插入内容 :nth-child(n) 匹配父元素下指定子元素，在所有子元素中排序第...三、em 特点 em 的值并不是固定的； em 会继承父级元素的字体大小。 em 是相对长度单位。相对于当前对象内文本的字体尺寸。
px 单位不是一个好的选择，实际上这不是用于缩放。无论您选择什么屏幕尺寸，px 单位的尺寸都是固定的。这就是为什么边框总是首选 px 单位的原因，因为边框在所有屏幕尺寸上也保持固定。...％ 单位 这用于设置元素的宽度，它总是相对于其直接父元素的大小。如果没有定义的父级，则默认情况下body被视为父级。...如果未覆盖，默认字体大小为 16px，假设在父元素中字体大小为 48px，那么在子元素中为 1em == 48px。...让我们考虑以下示例，其中一个子项的宽度相对于父项的大小，而另一个子项的宽度相对于根。...让我们考虑以下示例，其中一个子级的高度与父级大小有关，而另一个子级的高度与根相关。
样式不冲突，不会层叠 CSS继承性 所谓继承性是指书写CSS样式表时，子标签会继承父标签的某些样式，如文本颜色和字号。想要设置一个可继承的属性，只需将它应用于父元素即可。...子元素可以继承父元素的样式（text-，font-，line-这些元素开头的都可以继承，以及color属性） CSS优先级 定义CSS样式时，经常出现两个或更多规则应用在同一元素上，这时就会出现优先级的问题...即在嵌套结构中，不管父元素样式的权重多大，被子元素继承时，他的权重都为0，也就是说子元素定义的样式会覆盖继承来的样式。 行内样式优先。...总之，他拥有比上面提到的选择器都大的优先级。 权重相同时，CSS遵循就近原则。也就是说靠近元素的样式具有最大的优先级，或者说排在最后的样式优先级最大。 CSS定义了一个!... 0,0,1,1 #nav p -----> 0,1,0,1 注意： 1.数位之间没有进制 比如说： 0,0,0,5 + 0,0,0,5 =0,0,0,10 而不是
calc()可以使用数学运算中的简单加（+）、减（-）、乘（*）和除（/）来解决问题，而且还可以根据单位如px,em,rem和百分比来转化计算，但是要注意，使用运算符号的时候要与两边的值有空格和间隙，否则不识别...浮动副作用1、背景不能显示 由于浮动产生，如果对父级设置了（CSS background背景）CSS背景颜色或CSS背景图片，而父级不能被撑开，所以导致CSS背景不能显示。...2、边框不能撑开 如上图中，如果父级设置了CSS边框属性（css border），由于子级里使用了float属性，产生浮动，父级不能被撑开，导致边框不能随内容而被撑开。...3、margin padding设置值不能正确显示 由于浮动导致父级子级之间设置了css padding、css margin属性的值不能正确表达。...，两个子级再设置相同高度100px，父级css height高度暂不设置（通常为实际css布局时候这样父级都不设置高度，而高度是随内容增加自适应高度）。
第一等：代表内联样式，如: style=“”，权值为1000。 第二等：代表id选择器，如：#id，权值为100。 第三等：代表类，伪类和属性选择器，如.class，权值为10。...第五等：通用选择器（*），子选择器（>），相邻同胞选择器（+），并不在这个等级中，权值为0 4、css3新增伪类： p:first-of-type----选择属于其父元素的首个 元素。...（1）absolute :生成绝对定位的元素， 相对于最近一级的 定位不是 static 的父元素来进行定位。...1）absolute：生成绝对定位的元素， 相对于最近一级的定位不是static的父元素来进行定位。...一个好的类名应该是描述他是什么而不是像什么避免 !important，可以选择其他选择器尽可能的精简规则，你可以合并不同类里的重复规则 51、用纯CSS创建一个三角形的原理是什么？
div, h1,p) 相邻选择器（h1 + p） 子选择器(ul > li) 后代选择器(li a) 通配符选择器(*) 优先级： !...margin实现自适应居中 弹性布局 flex :父级设置display: flex; 子级设置margin为auto实现自适应居中 父级设置相对定位，子级设置绝对定位，并且通过位移 transform...实现 table 布局，父级通过转换成表格形式，然后子级设置 vertical-align 实现。...缺点： （1）计算困难 （2）各个属性中如果使用百分比，相对父元素的属性并不是唯一的。造成我们使用百分比单位容易使布局问题变得复杂。...overflow属性，或者设置高度 建立伪类选择器清除浮动 //在css中添加:after伪元素 .parent:after{ /* 设置添加子元素的内容是空 */ content: '
更重要的是，CSS Tricks 在 margin-bottom 和 margin-top 之间进行了投票。 61% 的选民更喜欢边缘底部而不是边缘顶部。...editors=1100 另一个与边距折叠相关的示例是子级和父级，让我们假设以下内容： HTML： I'm the child...让我们假设以下内容： 父级有 padding: 1rem，这导致子级从顶部、左侧和右侧偏移。 但是，子元素应该紧贴其父元素的边缘。 好吧，负利润来拯救！...以下是我想到的一些问题： 间隔组件如何在父组件中获取其宽度或高度？它将如何在水平和垂直布局中工作？例如：堆栈内的间隔符与添加左侧空间的间隔符。....element:after { content: ""; display: block; height: 32px; } 也许我们可以选择通过伪元素而不是单独的元素来添加分隔符？
但在 CSS3 中，将伪元素单冒号的使用方法改为了使用双冒号::，以此来区分伪类和伪元素。因此，建议在使用伪元素时使用双冒号而不是单冒号。...即html设置的字体大小来定义，默认html的字体大小是16px； 8、继承相关 css的继承：就是给父级设置一些属性，子级继承了父级的该属性，这就是我们的css中的继承。...这一最强大的css框架，目前受LESS影响，已经进化到了全面兼容CSS的SCSS（SCSS 需要使用分号和花括号而不是换行和缩进）。...第四等：代表类型选择器和伪元素选择器，如div p，权值为0001。 通配符、子选择器、相邻选择器等的。如*、>、+,权值为0000。 继承的样式没有权值。...原因： 当父元素没设置足够大小的时候，而子元素设置了浮动的属性，子元素就会跳出父元素的边界（脱离文档流），尤其是当父元素的高度为auto时，而父元素中又没有其它非浮动的可见元素时，父盒子的高度就会直接塌陷为零
px 相对于显示器屏幕分辨率，无法用浏览器字体放大功能 em 值并不是固定的，会继承父级的字体大小： em = 像素值 / 父级font-size 解释下什么是浮动和它的工作原理？...可以参考面向对象的CSS 元素竖向的百分比设定是相对于容器的高度吗？ 元素竖向的百分比设定是相对于容器的宽度，而不是高度 全屏滚动的原理是什么？ 用到了CSS的那些属性？...响应式设计就是网站能够兼容多个终端，而不是为每个终端做一个特定的版本 基本原理是利用CSS3媒体查询，为不同尺寸的设备适配不同样式 对于低版本的IE，可采用JS获取屏幕宽度，然后通过resize方法来实现兼容...在 CSS 中伪类一直用 : 表示，如 :hover, :active 等 伪元素在CSS1中已存在，当时语法是用 : 表示，如 :before 和 :after 后来在CSS3中修订，伪元素用 ::...例如，父级行高为 1.5，子元素字体为 18px，则子元素行高为 1.5 * 18 = 27px 百分比：将计算后的值传递给后代 设置元素浮动后，该元素的 display 值会如何变化？
如果你这个css样式是定义在某个html网页中的话，那其他网页是无法使用的，但可以把 把css代码写一个单独的外部文件中，这个css样式文件以“.css”为扩展名，在内（不是在...ID选择器，#ID{}, 在标签内定义id=""，有严格的一一对应关系。 子选择器， .span>li{}，作用于父元素span类下一层的li标签。...{color:red;}/*类前面要加入一个英文圆点*/ ID选择器 在很多方面，ID选择器都类似于类选择符，但也有一些重要的区别： 为标签设置id="ID名称"，而不是class="类名称"。...ID选择符的前面是井号（#）号，而不是英文圆点（.）。 例子： 选择器是作用于所有子后代元素。后代选择器通过空格来进行选择，而子选择器是通过“>”进行选择。
符合网页布局第一准侧. > 6 浮动经典案例 由于父级盒子很多情况下，不方便给高度，但是子盒子浮动又不占有位置，最后父级盒子高度为 0 时，就会 影响下面的标准流盒子。...因为子盒子是浮动的，我们没有为其父盒子设置高度，浮动的盒子和标准流盒子不是一个级别，所以标准流盒子会上来，而浮动的盒子会覆盖标准流盒子 底下 footer 是标准流盒子，因为子盒子是浮动的，会上来，从而引发了脱标...所以在有些场景，我们得清除浮动 清除浮动本质: 清除浮动的本质是清除浮动元素造成的影响 如果父盒子本身有高度，则不需要清除浮动 清除浮动之后，父级就会根据浮动的子盒子自动检测高度。...父级有了高度，就不会影响下面的标准流了 解决办法： 有四种 简单介绍前两种 第一种： 语法： 选择器{clear:属性值;} 添加到 会上移的标准流盒子位置 代码 额外标签法（隔墙法）*...例如 ，或者其他标签如 优点： 通俗易懂，书写方便 缺点： 添加许多无意义的标签，结构化较差 注意： 要求这个新的空标签必须是块级元素 代码 > 父级添加 overflow 可以给父级添加
child2 { color: green; } .parent1 .child2:hover, .parent2 .child2:hover { color: blue; } 现在，你可以将子选择器嵌套在父选择器中...image.png CSS原生嵌套规则 你可以将任何选择器嵌套到另一个选择器中，但必须以符号开头，如&，....的直接子元素进行样式调整 :is(p) - 但是:is()使用最优先选择器的优先级 :where(p) - 但是:where()的优先级为0 在这个简单的示例中，它们都可以工作，但在以后使用更复杂的样式表时...例如： p.my-element { &::after {} &:hover {} &:target {} } 如果你不使用&，你的目标将是选择器的所有子元素，而不是p.my-element...原生嵌套问题 原生嵌套在:is()中包裹父选择器，这可能会导致与Sass输出的差异。
css样式，如下： .stress{color:red;} ---- ID选择器 在很多方面，ID选择器都类似于类选择符，但也有一些重要的区别： 1、为标签设置id=”ID名称”，而不是class=...2、ID选择符的前面是井号（#）号，而不是英文圆点（.）。 ---- ID和类选择器的区别 相同点：可以应用于任何元素 不同点： 1、ID选择器只能在文档中使用一次。...而后代选择器是作用于所有子后代元素。后代选择器通过空格来进行选择，而子选择器是通过“>”进行选择。...子选择器， .span>li{}，作用于父元素span类下一层的li标签。 包含选择器，.span li{}，作用于父元素span下所有li标签。...css 样式由选择符和声明组成，而声明又由属性和值组成，如下图所示： 选择符：又称选择器，指明网页中要应用样式规则的元素，如本例中是网页中所有的段（p）的文字将变成蓝色，而其他的元素（如ol）不会受到影响
, 可以实现 : 元素标签 不再受 标准流 控制 ; ( 块级元素 , 行内元素 , 行内块元素 的布局方式 ) 元素标签 可以 放置在指定的位置 , 靠左 或 靠右 ; CSS 浮动语法 : 选择器...元素 不管是 块级元素 还是 行内元素 , 设置 浮动 样式后 , 其显示模式 类似于 行内块元素 ; 4、浮动元素与父容器盒子关系 在 父容器 盒子模型 中 , 将 子元素 设置为 浮动元素 , 会出现如下情况...: 解决 父容器盒子模型 因为 子元素 被设置为 浮动元素 导致 高度默认为 0 像素 的问题 ; 清除浮动 效果 : 父容器 检测高度时 , 会考虑 浮动子元素 的高度 , 将浮动元素的高度 计算在父容器的总高度中...样式 父级元素设置 overflow 样式 语法 : 选择器 { /* 清除浮动 - 父级元素设置 overflow 样式 */ overflow: hidden; } overflow...: .clearfix:after 伪元素选择器 的含义是 在 该父容器盒子 的内部 , 插入新的子元素 , 该子元素设置选择器中的样式 ; .clearfix:after { clear:
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
腾讯会议
云直播
对象存储
