2.2 margin问题 2.2.1 margin-top传递问题：父子级包含的时候，子级的margin-top会传递给父级，解决办法：给父级加上border...2.2.3.3 如果目标元素下方没有其他同辈元素，为什么margin-bottom:0不代表它在父元素的底部？...1、如果你#b元素是#a元素的子元素，可以直接通过 #a #b {...} 2、#a与#b是亲兄弟关系，有相同的父节点，且#b跟#a紧临，可以通过 #a + #b{..}来控制#b里面的元素样式； 注：...如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器 二、span标签：行内区分样式时使用。...{……}） 4、群组选择器，用逗号隔开 p, h1, div{……} 5、包含选择器，用空格表示包含 div a{......} 6、通配符，不建议使用，原因
CSS选择器的字符串参数，返回一个NodeList对象或Element；功能与JQuery类库中的()相似，两者参数相同，不同的是：()返回值为一个JQuery对象表示匹配的元素集，JQuery对象是一个类数组...，可以用标准的数组标示方括号来访问JQuery对象的内容；也可以用toArray()方法来将JQuery对象转化为真实的数组； 参数举例：1、ID: #nav 2、 标签名：div 3、class属性值...1、parentNode: 父节点，没有为null; 2、childNodes : 节点的子节点的实时表示，值为NodeList对象； 3、firstChild... 5、 节点的增删：操作文档进行文档节点的增加和删除 1、创建节点：document.createElement() 参数为不区分大小写的标签名(对于HTML),对XML文档会区分大小写...第二个参数是该父节点的子节点，可以为null,为null是功能与appendChild相同； 如果使用以上两个方法再次插入已经存在的节点，已存在节点将会自动从它的当前位置删除并在新的位置从新插入
通配符选择器 *{属性:值;} 特点：给所有的标签都使用相同的样式。 ★不推荐使用，增加浏览器和服务器负担。 复合选择器 概念：两个或者两个以上的基础选择器通过不同的方式连接在一起。...（不推荐使用） ---- 标签分类 块元素 典型代表: div, h1-h6, p, ul, li 特点: 1.独占一行 2.可以设置宽高 3.嵌套（包含）下，子块元素宽度（没有定义情况下）...20px 30px 40px 150% 20px 30px 30px 2 20px 30px 60px 总结:不带单位时，行高是和子元素文字大小相乘，em和%的行高是和父元素文字大小相乘。...PS：z-index:10改变层叠优先级，值越大优先级越高 ---- 标签包含规范 div可以包含所有的标签。 p标签不能包含div h1等标签（一般包含行内元素）。...h1可以包含p，div等标签（一般不这样）。 行内元素尽量包含行内元素，行内元素不要包含块元素。 ? ---- 规避脱标流 尽量使用标准流。 标准流解决不了的使用浮动。 浮动解决不了的使用定位。
也不会再有字体的限制，用户系统即使没有安装某一字体，也会看到和他们制作时完全相同的画面。...(1)、父级div定义 height 原理：父级div手动定义height，就解决了父级div无法自动获取到高度的问题。...优点：简单、代码少、容易掌握 缺点：只适合高度固定的布局，要给出精确的高度，如果高度和父级div不一样时，会产生问题 建议：不推荐使用，只建议高度固定的布局时使用 (2)、结尾处加空div标签...；如果页面浮动布局多，就要增加很多空div，让人感觉很不好 建议：不推荐使用，但此方法是以前主要使用的一种清除浮动方法 (3)、父级div定义 伪类:after 和 zoom 原理：IE8以上和非...(相对父元素的字体大小倍数) em（font size of the element）是指相对于父元素的字体大小的单位。它与rem之间其实很相似，区别在。
清除浮动的方式： 父级div定义height 最后一个浮动元素后加空div标签 并添加样式clear:both。 包含浮动元素的父标签添加样式overflow为hidden或auto。...父级div定义zoom 7.CSS3新增伪类有那些？...8.前端项目中为什么要初始化CSS样式？ 因为浏览器的兼容问题，不同浏览器对标签的默认值是不同的，如果没有对浏览器的CSS初始化，会造成相同页面在不同浏览器的显示存在差异。...style> div class="box"> 盒子模型 div> 当我们在浏览器查看元素时，却发现元素的大小变成了240px。...+ border + margin 也就是，width/height 只是内容高度，不包含 padding 和 border 值。
为什么它们不共享相同的选项呢？我们将很快揭开这个谜团，但首先，我需要分享另一个对齐属性：align-self。...="item">div> div class="flex-wrapper"> div class="item">div> div> 结果缺不一样。...❞ 规范对此有一个名字：「假设大小」(Hypothetical size)。 在这种情况下，限制因素是父元素没有足够的空间容纳一个宽度为 2000px 的子元素。...Flexbox算法可能会「将元素收缩到低于这个期望大小」，但「默认情况下，它们将始终按比例缩放，保持两个元素之间的比例」。 如果我们不希望元素按比例缩小,可以使用flex-shrink属性。...>> ❝对于包含文本的元素，最小宽度是最长不可断开的字符串的长度。 ❞ 好消息是：我们可以「使用min-width属性重新定义最小大小」。
max-width的常见且简单的用例是将其与图像一起使用。 考虑以下示例： ? 图像比它的父元素大。通过使用max-width: 100%，图像的宽度不会超过其父图像的宽度。...如果图像比父图像小，则max-width: 100%不会对图像产生实际影响，因为它比父图像小。 使用最小宽度和最大宽度 ?...结果是元素宽度未超过其包含的块/父元素的50％。 height 属性 除了最小和最大宽度属性外，我们还具有与高度相同的属性。...section的高度将展开以包含新内容。有了它，我们就可以构建灵活的组件，并对其内容做出响应。...最大宽度/高度和视口单位的流体比率 为了使比例容器能够根据视口大小进行响应缩放，引入了padding hack。 现在，我们可以通过组合CSS中的视口单位和最大宽度/高度来模仿相同的行为。 ?
（如div下可包含div） 行内元素（常见的行内元素a,span.img） 一行显示多个 宽度为内容的宽度 不可以设置高度和宽度 标签内一般不包含标签（如a标签内包含a标签） 行内块元素 行内块元素包含块级元素和行内元素的特征...important（infinite）>id（1000）>class（100）>伪类选择器（:first-of-type）>伪元素选择器（::after）元素选择器（div） 如果优先级相同，选择最后出现的样式...auto //子元素内容大于父元素，显示滚动条，超出显示，不超出不显示 visible //溢出内容出现在父元素之外 hidden //溢出隐藏 10....为什么要初始化css 因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没有初始化CSS，往往会导致页面在不同浏览器之间出现差异。...px和em的区别是什么 px和em都是长度单位，两者的区别是：px的值是固定的，指定为多少就是多少，计算比较容易；em的值不是固定的，是相对于容器字体的大小，并且em会继承父级元素的字体大小。
* 768px (7). em 倍数，1em 相当于父元素默认大小 (8). rem 相对于根元素(html)设置的字体大小来指定倍数 5....②. value1% value2% 采用当前元素宽和高的占比，来作为背景图大小 ③. cover 覆盖，会将背景图像等比放大，直到背景图完全覆盖到元素为止 ④. contain 包含，会将背景图像等比放大...语法:font:font-style font-variant font-weight font-size font-family 注意:该简写属性中，必须包含 family 的值，不设置的值，...指定 1 个值，每个单元格的水平和垂直间距相同 ②....相关判断条件 A. gt: greater than，选择条件版本以上的版本，不包含条件版本 B. lt: less than ，选择条件版本以下的版本，不包含条件版本 C. gte: greater
为什么我们需要从webpack5升级到Turbopack?构建速度： Turbopack 的设计目标之一是提供快速的构建和交付体验。...Automatic Image Optimization（自动图像优化）： Turbopack 自动处理和优化您应用中的图像，以提供最佳的加载性能。...它会根据设备的屏幕大小和分辨率，动态调整图像的大小和质量，并使用现代的图像格式（如 WebP），以减少图像的文件大小和加载时间。Webpack5 需要使用额外的插件或加载器才能实现类似的功能。...为什么不选择viteVite 依赖于浏览器的原生 ES Modules 系统，不需要打包代码，响应更新很快，但是如果文件过多，这种方式会导致浏览器大量进行网络请求，会导致启动时间相对较慢。...所以nextjs作者选择同 webpack 一样方式，打包，但是使用了 Turbo 构建引擎，一个增量记忆化框架，永远不会重复相同的工作。
这里给父元素设置了字体大小为20px，然后给子元素的border宽度设置为1em，这时，子元素的border值为20px，确实是相对于父元素的字体大小设置的： image.png 那如果我们给子元素的字体设置为...所以，em的使用还是比较复杂的，它可能会继承任意一级父元素的字体大小。需要谨慎使用。 rem相对于em就简单了很多，它是根据页面的根元素（根元素）的字体大小来计算的。...CSS 将光栅图像(如照片等)的显示方式定义为默认每一个图像大小为1px。...也就是说0、0Hz、0kHz是不一样的。所以，在使用频率单位时，不要直接写0。另外，这两个单位是不区分大小写的。 4. 时间单位 CSS中的时间单位有两个：秒（s）和毫秒（ms）。...不同定位的包含块不尽相同： 如果元素为静态（ static ）或相对定位（ relative ），包含块一般是其父容器； 如果元素为绝对定位（ absolute ），包含块应该是离它最近的 position
class="base">div> transform 转变动画 包含四个常用的功能： translate：位移 scale：缩放 rotate：旋转 skew：倾斜 一般配合transition...所以，我们不建议全局应用该属性，而是单独对某一属性使用。 需要注意的是，自从chrome 27之后，就取消了对这个属性的支持。同时，该属性只对英文、数字生效，对中文不生效。...div），选择id为box元素内部所有的div元素 子选择器（.one>one_1），选择父元素为.one的所有.one_1的元素 相邻同胞选择器（.one+.two），选择紧接在.one之后的所有.two...3D显示芯片是将三维图像和特效处理功能集中在显示芯片内，也即所谓的“硬件加速”功能。 要解释两者的区别，要先明白两者的相同之处：两者都有总线和外界联系，有自己的缓存体系，以及数字和逻辑运算单元。...属性相同的），会默认变为复合层渲染，如果处理不当会极大的影响性能。
把inline-block的父元素 字体大小(font-size) 设置为0。...而小数 换算出来的 像素 是不精准的。所以 使用rem的时候 要考虑到不精准的情况 要预留一些余地 给不精准的情况。对于精确性非常高的地方 就不要使用rem来布局了。 CSS面试题 1....间隙原因：字符间距 解决方案：1.消灭空白字符：注释掉 标签之间的空白字符 2.消灭字符间距：把父级元素的字体大小设置为0，再设置元素自身的字体大小。 4....如何清除浮动，为什么清除浮动 这是因为 float元素 不会占据父元素的布局空间，有可能 float元素 就会超出 父元素，从而对其它的元素 造成影响。...，而是加一个伪元素 放到浮动元素的后面，从而让父元素 包含浮动元素。
类选择器最大的优势是可以为元素对象定义单独或相同的样式。 可以选择一个或者多个标签 小技巧： 1.长名称或词组可以使用中横线来为选择器命名。 2.不建议使用“_”下划线来命名CSS选择器。 ...其写法就是把父级标签写在前面，子级标签写在后面，中间跟一个 > 进行连接，注意，符号左右两侧各保留一个空格。 白话： 这里的子 指的是 亲儿子 不包含孙子 重孙子之类。...行内元素(inline-level) 行内元素（内联元素）不占有独立的区域，仅仅靠自身的字体大小和图像尺寸来支撑结构，一般不可以设置宽度、高度、对齐等属性，常用于控制页面中文本的样式。...浮动首先创建包含块的概念（包裹）。就是说， 浮动的元素总是找理它最近的 父级元素对齐。但是不会超出内边距的范围。 浮动的元素排列位置，跟上一个元素（块级）有关系。...一列固定宽度且居中 最普通的，最为常用的结构 两列左窄右宽型 通栏平均分布型 清除浮动 为什么要清除浮动 准确地说，并不是清除浮动，而是清除浮动后造成的影响 清除浮动本质 清除浮动主要为了解决父级元素因为子级浮动引起内部高度为
清除浮动的方式 父级 div 定义 height，原理：父级 div 手动定义 height，就解决了父级 div 无法自动获取到高度的问题。...如何优化图像、图像格式的区别 ? JPG 的特性 支持摄影图像或写实图像的高级压缩，并且可利用压缩比例控制图像文件大小。...PNG 的特性 能在保证最不失真的情况下尽可能压缩图像文件的大小。...大家要注意 html 中必须使用 div 标签，不要妄图使用什么 p 标签来达到目的。因为 div 有个默认属性，即如果不设置宽度，那它会自动填满它的父标签的宽度。这里的 main 就是例子。...浮动元素碰到包含它的边框或者浮动元素的边框停留。 影响 浮动会导致父元素无法被撑开，影响与父元素同级的元素。
如果某些选择器定义的样式完全相同，或部分相同，就可以利用并集选择器为它们定义相同的CSS样式。 并集选择器和的意思，只要逗号隔开的，所有选择器都会执行后面样式。 的元素。 其写法就是把父级标签写在前面，子级标签写在后面，中间跟一个 > 进行连接 这里的子指的是亲儿子不包含孙子,重孙子之类。 <!...# 行内元素(inline-level) 行内元素（内联元素）不占有独立的区域，仅仅靠自身的字体大小和图像尺寸来支撑结构，一般不可以设置宽度、高度、对齐等属性，常用于控制页面中文本的样式。...然而，一个网页中往往会应用很多小的背景图像作为修饰，当网页中的图像过多时，服务器就会频繁地接受和发送请求，这将大大降低页面的加载速度。 现在我们来回答为什么需要精灵技术？...# CSS继承性 所谓继承性是指书写CSS样式表时，子标签会继承父标签的某些样式，如文本颜色和字号。想要设置一个可继承的属性，只需将它应用于父元素即可。 注意： 1.
/* 推荐 */ .jdc {} li {} p{} /* 不推荐 */ *{} #jdc {} div{} 因为div 没有语义，我们尽量少用 CSS复合选择器 复合选择器是由两个或多个基础选择器...其写法就是把父级标签写在前面，子级标签写在后面，中间跟一个 > 进行连接 这里的子,指的是亲儿子。不包含孙子 重孙子之类。...（默认的） no-repeat 背景图像不平铺 repeat-x 背景图像在横向上平铺 repeat-y 背景图像在纵向平铺 「4....样式不冲突，不会层叠。 「2. CSS 继承性」 -概念： 子标签会继承父标签的某些样式，如文本颜色和字号。 想要设置一个可继承的属性，只需将它应用于父元素即可。...为什么需要精灵技术：为了有效地减少服务器接受和发送请求的次数，提高页面的加载速度。
标准 W3C 盒子模型的范围包括 margin、border、padding、content，并且 content 部分不包含其他部分。...它们对盒子模型的解释各不相同，先看看我们熟知的标准盒子模型： 标准的w3c盒子模型的范围包括margin、border、padding、content，并且content部分不包含其他部分。...float 或者absolute定位的元素，只能是块元素或表格。float浮动为什么会出现浮动和什么时候需要清除浮动？清除浮动的方式？浮动元素碰到包含它的边框或者浮动元素的边框停留。...清除浮动的方式：父级div定义height最后一个浮动元素后加空div标签 并添加样式clear:both。包含浮动元素的父标签添加样式overflow为hidden或auto。...em的值不是固定的，并且em会继承父级元素的字体大小。 浏览器的默认字体高度都是16px。所以未经调整的浏览器都符合：1em=16px。
内联样式会放到已经排序的结果集合最后，所以如果不设置 !important，内联样式的优先级是最大的。 !important 优先级 在设置 !important 的声明前，会先设置不包含 !...布局（重排） Render Object 在添加到树之后，还需要重新计算位置和大小；ComputedStyle 里面已经包含了这些信息，为什么还需要重新计算呢？...布局是从 Root Render Object 开始递归的，每一个 Render Object 都有对自身进行布局的方法。为什么需要递归（也就是先计算子节点再回头计算父节点）计算位置和大小呢？...因为有些布局信息需要子节点先计算，之后才能通过子节点的布局信息计算出父节点的位置和大小；例如父节点的高度需要子节点撑起。如果子节点的宽度是父节点高度的 50%，要怎么办呢？...，滚动条也包含在了盒模型中，但是滚动条的大小并不是所有的浏览器都能修改的。
important > 行内样式 > ID选择器 > 类与伪类选择器 > 标签选择器 > 通用选择器 权重相同时，后面的样式会覆盖前面的样式 继承自父元素的权重最低 ---- 3.颜色 预定义的颜色值...% 相对于父元素的百分比 em 相对于当前元素的字体大小 rem 相对于根元素的字体大小 基本是相对于的字体大小 vw 相对于视窗宽度的百分比 vh 相对于视窗高度的百分比 div style...: 2em">第三层div> div> div> /* 分别是32px, 64px, 128px, 子标签会默认继承父标签的属性*/ ---- letter-spacing...，或者随着包含它的区块滚动。...可以在父元素的css属性中增加 overflow: hidden这一属性后 父元素不再随子元素而改变 或者在父元素之前加上一个空元素: .div-outer::before { content: "
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
腾讯会议
云直播
对象存储
