、绝对、固定）时，子元素边偏移从 最近父元素 的左上角开始 5.2.5 进阶小结 父子关系中，绝对定位子元素 的边偏移起始位置为： 最近的 定位父元素的 左上角 5.3 进阶案例 2：子绝父相 为保持父元素在原有文档流定位...布局中有 “子绝父相” 之说。 子绝父相：子元素绝对定位，其父元素用相对定位。...准备代码： 实现代码 小结： 父子定位中，通常为了布局的便捷，我们会采取“子绝父相”的布局手法。...祖父和父都存在定位（相对、绝对、固定）时，子元素边偏移从 最近父元素 的左上角开始 4 、 为了布局方便，更多采取： 子绝父相 6. ...叠放次序：用于给定位元素设置展示效果的优先级。 注意： 1 、 优先级越高，定位元素就越不容易被其他定位元素覆盖 2 、默认的叠放次序为 auto 。
常见的状态伪类主要包括： :link 应用于未被访问过的链接； :hover 应用于鼠标悬停到的元素； :active 应用于被激活的元素； :visited 应用于被访问过的链接...() 选择指定的元素，从元素的最后一个开始计算； :first-of-type 选择一个上级元素下的第一个同类子元素； :last-of-type 选择一个上级元素的最后一个同类子元素； :...only-child 选择的元素是它的父元素的唯一一个子元素； :only-of-type 选择一个元素是它的上级元素的唯一一个相同类型的子元素； :empty 选择的元素里面没有任何内容。...伪元素的应用： 清除浮动：如果父元素的所有子元素都是浮动的，父元素的高度则无法撑开。可以通过对父元素添加after伪类撑开父元素高度，因为after就是其最后一个子元素。...本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
按序号选择 :first-of-type--例子：p:first-of-type 选择某个父元素下所有同类型的第一个 元素。...:last-of-type--同上，最后一个 :only-of-type--选中某个父元素下只要唯一一个p元素 :only-child--例子：p:only-child 选择属于某个父元素的唯一子元素的每个...a标签（链接）的颜色，包括未访问/已访问/鼠标悬停/鼠标长按时的显示效果。...另外，:hover还可以用于选中所有的其它标签，比如div：hover，当鼠标悬停到div区域上时，会产生一个效果，可以用来设置动画。...hot/new小图标时可用”子绝父相“，来达到无论缩放浏览器窗口都不会移位的效果。
伪元素 概念：使用CSS模拟标签，创建网页中不重要的图 用法：找父级，在父级中添加子标签 伪元素 作用 ::before 在父元素内容最前添加一个伪元素 ::after 在父元素内容最后添加一个伪元素...二、相对定位 占有原来的位置 仍然具有具体标签原有的显示模式特点 改变的位置是参照自己原来的位置 三、绝对定位...先找已经定位的父级（一般是 相对定位），以这个父级为参照物 子绝父相 就近找定位的父级，如果逐层找不到这样的父级，就以浏览器窗口为参照物定位。...如果父级没有定位，那么以浏览器窗口为参照物。...通过PxCook量取小图片大小，将小图片的宽高设置给盒子 3. 将精灵图设置为盒子的 背景图片 4.
vertical-align: middle 使子元素垂直居中。 外部父级必须有固定的宽高。 浏览器支持情况 100% 查看本条 caniuse 5....父级必须具有视口高度。flex-grow：1可以应用于第一个或第二个元素，它将具有所有可用空间。 浏览器支持程度 99.5% 需要使用前缀 caniuse 11....background:inherit 使伪元素继承父级的线性渐变 top:0.5rem 将伪元素相对于其父元素略微偏移。...可在 CodePen 上查看真实效果和编辑代码 说明 伪类：：focus-within 将对应的样式应用于父元素（任何子元素被聚焦）。例如，表单元素内的输入元素。....sibling-fade:hover span:not(:hover)当父级悬停时，选择当前未悬停的span子项并将其透明度更改为0.5。
1、浮动 1、浮动引发的特殊效果 1、元素一旦浮动起来之后，都将变为块级元素 2、元素一旦浮动起来之后，宽度在不设定的情况下，将以内容为准 3、当父元素中显示不下所有的已浮动子元素的话...清除前面元素右浮动所带来的影响 4、both 清除前面元素任何一种浮动效果所带来的影响 3、浮动元素对父元素的高度影响...父元素的高度是以未浮动的子元素为准的 1、直接设置父元素的高度 弊端：必须要知道父元素的高度是多少 2、设置父元素也跟着浮动...3、collapse ：用在表格时，当删除表格中的一行或一列的话不影响表格的整体布局 面试： 解释 display...，去移动元素 2、定位 - 相对定位 1、什么是相对定位 元素会相对于它原来的位置偏移某个距离 经常会应用于元素的位置微调
z">id标签 class 在元素的属性里加上class标签，然后用”.class名称”选择所有具有相同class名称的元素。... div> age div> 则name和age都会居中，选择的只要是后代就行，可以是子元素的子元 子元素选择器 以大于号分隔，子选取元素的直接后代，如： div>p {text-align...:center;} div> div> name div> age div> 则只有age会居中显示 相邻兄弟选择器 以加号分隔，若元素有共同的父元素，则可以选择紧接在另一元素后的元素...，若元素有共同的父元素，选取所有指定元素之后的相邻兄弟元素，如： div~p {color:blue;} div> test div> name age</age...FF00FF} a:active {color: #0000FF} first-child伪类 伪元素 first-line： 用于相文中首行设置样式，且只应用于块级元素，可设置的属性有： font
css中设置div元素居中显示的四种方法 一、先确定div的基本样式 二、具体实现方法 第一种：利用子绝父相和margin: auto实现 第二种：利用子绝父相和过渡动画tranform实现 第三种：同样是利用子绝父相和...margin负值实现 第四种：利用flex弹性盒布局实现 ---- 一、先确定div的基本样式 先给div随便设置些基本的样式，这样所得到的结果容易看出效果。...class="warp"> div class="box">div> div> 二、具体实现方法 第一种：利用子绝父相和margin: auto实现 给父级div设置相对定位，子元素div...tranform实现 给父级div设置相对定位，子元素div设置绝对定位，将left、top设置为50%；然后设置transform: translate(-50%,-50%);即可实现。...原理：设置了left: 50%;top:50%; 之后，子元素位于如图所在位置， 此时，我们需要向左移动子级div宽度的一半，子级div所在位置如图所示 向上移动子级div高度的一半，结果如图所示
在本文中，我们将深入探讨其中一个最受期待的 CSS 特性：:has 伪类。事实证明，它远不仅仅是一个“父选择器”。 语法 :has 伪类用于根据元素内容选择元素。...它应用于我们想应用规则的元素上，并将其传递给应该包含的元素的选择器： /* 这里我们选择任何包含 `h1` 的具有 `post` 类的元素 */ .post:has(h1) { background-color...: teal; } 使用 :has 作为父选择器 将 :has 作为父选择器可以简化许多情况。...例如，要选择具有 hr 元素作为直接子元素的 div 元素，可以使用选择器 div:has(>hr)。 我们可以使用 相邻兄弟组合器 + 来选择紧跟在另一个元素后面的元素。...与其他伪类组合 当在子元素上悬停时，改变容器的样式听起来相当酷，不是吗？ 我们可以将 has 与 hover 结合使用来实现这一点。
它在CSS中是一个重要的解决方案，不仅仅是一个简单的“父级”选择器。 使用 :has() 选择器，您可以将样式应用于父元素或祖先HTML元素。...它是一个强大的CSS工具，您可以用于以下目的： 为子元素的父元素设置样式：如果一个 div> 元素包含一个 元素，你可以使用 :has() 选择器来为它设置样式。...根据内容选择元素：您可以使用 :has() 选择器来选择所有包含具有 "important" 类的子元素的 div> 元素。 :has() 选择器可以与任何有效的CSS选择器一起使用，包括其他伪类。...现在，我们要选择一个元素的父级。...基于子元素的选择 使用 :has ，我们不仅可以选择父元素，还可以选择子元素。
CSS3 E:last-of-type { sRules } 匹配同类型中的最后一个同级兄弟元素E 要使该属性生效，E元素必须是某个元素的子元素，E的父元素最高是html，即E可以是html的子元素，...要使该属性生效，E元素必须是某个元素的子元素，E的父元素最高是html，即E可以是html的子元素，也就是说E可以是body 该选择符总是能命中父元素的唯一同类型子元素E，不论该元素的位置 <style...(n) CSS3 E:nth-last-of-type(n) { sRules } 匹配同类型中的倒数第n个同级兄弟元素E 要使该属性生效，E元素必须是某个元素的子元素，E的父元素最高是html，即E可以是...此伪对象仅作用于块对象。...内联对象要使用该伪对象，必须先将其设置为块级对象 该伪对象常被用来配合font-size属性和float属性制作首字下沉效果 p::first-letter {
() 作用类似，但是仅匹配使用同种标签的元素 E:last-child 匹配父元素的最后一个子元素，等同于:nth-last-child(1) E:first-of-type 匹配父元素下使用同种标签的第一个子元素...display: none：彻底隐藏元素，元素从文档流中消失，既不占据空间也不能交互，也不影响布局 z-index: -9999：将层级放到底部，被覆盖，看起来隐藏 transform: scale(...因为子元素脱离了父元素的文档流，所以父元素失去了高度，导致了塌陷。要解决这个问题，就是让父元素具有高度。...的透明效果有什么不同？...（设置 rgba 透明的元素的子元素不会继承透明效果！）
而 :link 和 :visited 两者的顺序无所谓，互不影响。 5....对于很多字体来说，1ex ≈ 0.5em； em 1em 等于父级元素的字体大小，2em 就是父级元素字体大小的二倍； rem 当用在根元素（）的 font-size 上面时 ，它代表了它的初始值...因此上面代码在点击子元素时会先执行子元素绑定的事件，然后向上冒泡，触发父元素绑定的事件。 addEventListener 函数的第三个参数是个布尔值。...，可以将事件绑定到父元素上，并让子节点上发生的事件冒泡到父节点上，利用 e.target 属性可以获取到当前触发事件的子元素。...可能指向 div 元素，也可能指向它的子元素。
(An+B) 匹配父元素里以A个为一组的每组中的第B个div元素. tr:nth-last-child(An+B) 匹配父元素里以A个为一组的每组中的倒数第B个div元素. button:only-child...匹配父元素里唯一的 button 子元素. input:only-of-type 匹配父元素里唯一使用了input标记的子元素. a:focus 匹配拥有焦点的 a 元素. a:tab-focus 匹配通过按...:empty 匹配内容为空的 input元素. div:has-child 匹配只含有一个子元素的 div 元素. div:has-children 匹配含有多个子元素的 div 元素. menu:popup...菜单元素被调用时, 它的父元素会被设置为调用它的元素. behavior: menu-bar; 菜单栏行为.此行为与菜单的唯一不同. behavior: popup-menu; 打开弹出菜单.具有该行为的元素在点击后会打开子元素中的第一个...鼠标悬停的菜单项元素会被赋予 :current 状态. 菜单元素被调用时, 它的父元素会被设置为调用它的元素.
伪类（Pseudo-classes）： 匹配处于确定状态的一个或多个元素，比如被鼠标指针悬停的元素，或当前被选中或未选中的复选框，或元素是DOM树中一父节点的第一个子节点。...[attr~=val]：该选择器仅选择具有 attr 属性的元素，而且要求 val 值是 attr 值包含的被空格分隔的取值列表里中的一个。...你可能希望某个元素在处于某种状态下呈现另一种样式，例如当鼠标悬停在元素上面时，或者当一个复选框被禁用或被勾选时，又或者当一个元素是它在 DOM 树中父元素的第一个子元素时。...然而选择器七同时击败了五和六——它有与五相同数量的子选择器在链中，但一个元素已被换为了一个类选择器。所以获胜的专用性值是33比23和24。...层叠结束 ---- 继承 应用于某个元素的一些属性值将由该元素的子元素继承，而有些则不会。
，子元素选择器只能选择作为某个元素的子元素。...下面给大家介绍几个常用的伪类。 :link 应用于未被访问过的链接。IE6 不兼容，解决此问题，直接使用 a 标签。 :hover 应用于有鼠标指针悬停于其上的元素。...在 IE6 只能应用于 a 连接，IE7+ 所有元素都兼容。 :active 应用于被激活的元素，如被点击的链接、被按下的按钮等。 :visited 应用于已经被访问过的链接。 具有最大优先级。也就是说任何情况下，只要定义了它,它的样式最终就会被应用。 的样式具有最大的优先级，或者说排在最后的样式优先级最大。所有都相同时，声明靠后的优先级大。
> E[foo*="bar"] 选中HTML标签名为E，且包含属性名为foo，其值包含子字符串”bar“的元素，该选择器的效果包含上面两种 div[foo^="bar"]将选中div foo="xxxbarxxx.../div> 伪类选择器 选择器 描述 :root 选中文档的根元素，始终指向html元素 E:nth-child(n) 选中E元素的父元素的第n个同类子元素 E:nth-last-child(n) 选中...E元素的父元素的第n个同类子元素，从后向前数 E:nth-of-type(n) 选中E元素的父元素的第n个同类子元素（同:nth-child的区别见番外篇） E:nth-last-of-type(n)...选中E元素的父元素的第n个同类子元素（同:nth-last-child的区别见番外篇） E:first-child 选中E元素的父元素的第1个同类子元素 E:last-child 选中E元素的父元素的最后一个同类子元素...E:first-of-type 选中E元素的父元素的第一个同类子元素（见） E:last -of-type 选中E元素的父元素的最后一个同类子元素（同:last-child的区别见番外篇） E:only-child
初始值: 0 应用于: 块级元素和替换元素 百分数: 相对于包含块的宽度(高度) max-width | max-heightt 初始值: none 应用于: 块级元素和替换元素...margin 初始值: 未定义 应用于: 所有元素 百分数: 相对于包含块的width [注意]对于普通元素来说，包含块就是块级父级元素，对于定位元素来说，包含块是定位父级。...所以，普通元素的margin百分比相对于块级父级元素的width，定位元素的margin百分比相对于定位父级的width margin可以设置为负值，margin和宽高支持auto，以及margin具有非常奇怪的重叠特性...background-color: lightblue; display:inline-block; width: 100%; } 兄弟一 兄弟二 2、父级元素和第一个或最后一个子元素...: 1em; background-color: lightblue; } div class="box"> div class="inner">子级div>
，将特殊的样式添加到页面对象的第一个子元素中 :lang，允许设计者定义指定的页面中所使用的语言 文字字号 font-size属性的作用改变字体的大小。...E:not(s)，选择匹配所有不匹配简单选择符s的E元素 E:empty，匹配没有任何子元素的元素E E:target，匹配当前链接地址指向的E元素 E:first-child，匹配父元素的第一个子元素...E E:last-child，匹配父元素的最后一个子元素E E:nth-child(n)，匹配父元素的第n个子元素E E:nth-last-child(n)，匹配父元素的倒数第n个子元素E E:only-child...，匹配父元素仅有的一个子元素E E:first-of-type，匹配同类型中的第一个同级兄弟元素E E:last-of-type，匹配同类型中的最后一个同级兄弟元素E E:only-of-type，匹配同类型中的唯一的一个同级兄弟元素...a在未被访问前的样式 E:visited，设置超链接a在其链接地址已被访问过时的样式 E:hover，设置元素在光标悬停时的样式 E:active，设置元素在被用户激活时的样式 E:foucs，设置元素在成为输入焦点时的样式
CSS第五天-定位 静态定位：static 定位的默认值，写边偏移也不会有效果 ---- 相对定位：relative 父元素搭配子绝父相使用 根据自身原来的位置，进行定位 没有脱标，在页面还占有位置...天生就是给绝对定位当爹用 ---- 绝对定位：absolute 根据最近带有定位(非静态)的祖先元素来定位 子绝父相 脱离标准流，在页面不占有位置 绝对定位，固定定位，浮动，可以直接设置宽度和高度，默认宽度是内容宽度...=== 给当前元素设置 宽度和margin: 0 auto 浮动元素 === 给外面标准流的父元素设置 宽度和margin：0 auto 定位元素 === left: 50% translateX(-...等比例缩放 cover 将背景图片等比缩放，填满盒子 刚好没空白 background: color image repeat position/size //连写同时设置时，需要注意覆盖问题 ---...- 垂直的用法： 文本框和表单按钮无法对齐 input和img无法对齐 div中的文本框，文本框无法贴顶问题 div不设高度由img标签撑开，此时img标签下面会存在额外间隙问题 使用line-height
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
腾讯会议
云直播
对象存储
