链接伪类选择器」 用于向某些选择器添加特殊的效果。写的时候，他们的顺序尽量不要颠倒,按照lvha的顺序。否则可能引起错误。...2).父级添加overflow属性方法 可以给父级添加： overflow为 hidden| auto| scroll 都可以实现。...父级overflow:hidden; 书写简单 溢出隐藏 父级after伪元素 结构语义化正确 由于IE6-7不支持:after，兼容性问题 父级双伪元素 结构语义化正确 由于IE6-7不支持:after...能 要和定位父级元素搭配使用 固定定位fixed 完全脱标，不占有位置 相对于浏览器移动位置 能 单独使用，不需要父级 注意： 边偏移 需要和 定位模式 联合使用，单独使用无效； top 和 bottom...给img 添加 display：block; 转换为块级元素就不会存在问题了。 溢出的文字省略号显示 4.1 white-space white-space设置或检索对象内文本显示方式。
margin也可以设置负值，如果是负值则元素会向相反的方向移动，元素在页面中是按照自左向右的顺序排列的，所以默认情况下如果我们设置的左和上外边距则会移动元素自身，而设置下和右外边距会移动其他元素。...父子元素： 父子元素间相邻外边距，子元素的会传递给父元素(上外边距) 父子外边距的折叠会影响到页面的布局，必须要进行处理 元素的水平方向布局 一个元素在其父元素中必须满足： 从左到右...即左外边距+左边框+左内边距+内容区长度+右内边距+右边框+右外边距 = 父元素内容区长度 若不相等，则为过度约束，浏览器会自动调改 使其相等。...所以我们经常利用这个特点来使一个元素 在其父元素中水平居中 元素的垂直方向布局 子元素是在父元素的内容区中排列的， 如果子元素的大小超过了父元素，则子元素会从父元素中溢出 使用overflow...（可以-x或-y） 属性来设置父元素如何处理溢出的子元素 可选值: visible：默认值子元素会从父元素中溢出，在父元素外部的位置显示 hidden：溢出内容将会被裁剪不会显示
伪类选择器 伪类选择器用于向某些选择器添加特殊的效果。比如给链接添加特殊效果， 比如可以选择 第1个，第n个元素。...解决方案： 可以为父元素定义1像素的上边框或上内边距。 可以为父元素添加overflow:hidden。...由2可以推断出，一个父盒子里面的子盒子，如果其中一个子级有浮动的，则其他 子级都需要浮动。这样才能一行对齐显示。 元素添加浮动后，元素会具有行内块元素的特性。...父级添加overflow属性方法 可以通过触发BFC的方式，可以实现清除浮动效果。（BFC后面讲解） 可以给父级添加： overflow为 hidden|auto|scroll 都可以实现。...给img 添加 display：block; 转换为块级元素就不会存在问题了。 溢出的文字隐藏 word-break:自动换行 normal 使用浏览器默认的换行规则。
占据超出父级容器的宽度的百分比。如果所有的子元素的宽度相加没有超过父级的在宽度，则次属性无效。...总结： 如果父级的空间足够：flex-grow有效，flex-shrink无效。 如果父级的空间不够：flex-shrink 有效，flex-grow无效。...stretch：如果指定侧轴大小的属性值为'auto'，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照'min/max-width/height'属性的限制。...该行的子元素将相互对齐并在行中居中对齐，同时第一个元素与行的主起始位置的边距等同与最后一个元素与行的主结束位置的边距（如果剩余空间是负数，则保持两端相等长度的溢出）。...在其它情况下，第一个元素的边界与行的主起始位置的边界对齐，同时最后一个元素的边界与行的主结束位置的边距对齐，而剩余的伸缩盒项目则平均分布，并确保两两之间的空白空间相等。
优先级，层叠性基础上，如果样式声明冲突的话，则按照样式规则的优先级来进行样式的使用 低=>浏览器缺省设置(User Agent) 中=>内部样式表 或 外部样式表 ，内部样式表中就近原则，即后定义者优先...外边距的溢出, 特殊场合下，为子元素设置外边距(上下)会作用到父元素上 特殊场合： a. 父元素没有边框(上下) b. 为第一个(最后一个)子元素设置外边距 解决方案： a....为父元素增加边框(透明的)，弊端：父元素会变高 b. 可以为父元素设置上内边距来取代子元素上外边距，弊端：父元素高度会变高 c....绝对定位元素会变成块级元素 ⑤....外边距溢出问题 外边距常规的解决方法: A. 为父元素添加边框 B. 使用父元素的内边距，取代子元素的外边距 D.
块级元素（Block-level Elements） 块级元素是指那些会在新的一行开始显示的元素。这些元素通常会占据父容器的整个宽度，直到遇到下一个块级元素或容器的边缘。...它们每个都在新的一行上显示，具有相同的背景色、边距和内边距。每个 div 元素都占据了父容器的整个宽度，除非有其他元素阻止其占据更多空间。...即使这些 span 元素具有背景色、边距和内边距，它们也不会影响其他行内元素的布局。...二、常规流布局的计算规则 在常规流布局中，元素的排列方式遵循以下规则： 块级元素的排列 从上到下排列： 块级元素会从上到下排列，每个块级元素的起始位置都会在新的一行上。它们的宽度默认是父容器的全宽。...四、常规流布局中的常见问题 在使用常规流布局时，我们可能会遇到一些常见的问题，包括： 元素溢出： 当元素的内容超出其父容器的宽度时，内容会自动换行或溢出。
important > 行内样式 > ID选择器 > 类与伪类选择器 > 标签选择器 > 通用选择器 权重相同时，后面的样式会覆盖前面的样式 继承自父元素的权重最低 ---- 3.颜色 预定义的颜色值...外边距重叠 块的上外边距(margin-top)和下外边距(margin-bottom)有时合并(折叠)为单个边距，其大小为单个边距的最大值(或如果它们相等，则仅为其中一个)，这种行为称为边距折叠。...父元素与后代元素：父元素没有上边框和padding时，后代元素的margin-top会溢出，溢出后父元素的margin-top会与后代元素取最大值。..."; display: table; } 当上下同时取外边距的时候取上下两者的最大值 ---- padding padding CSS 简写属性控制元素所有四条边的内边距区域。...绝对定位的元素可以设置外边距（margins），且不会与其他边距合并。
布局相关知识 1 盒子模型 外盒子 在计算宽高时要算外边距。 内盒子在计算宽高时不计算内边距。 块级元素在普通文档流中独占一行，可设置宽高宽度默认是父级100%，内外边距，可容纳其他元素。...设置完浮动后块级元素会在一行显示，但是由于脱离文档流父元素会产生塌陷，这时要清除浮动来完善布局。...2 父级添加overflow属性方法 通过出发bfc来清除浮动 overflow为hidden|auto|scroll 优点：代码整洁 缺点：内容增多容易造成不会自动换行导致内容被隐藏掉如文本等...就会发现加了 margin相对应的边就会多出设置的空白。而且会多出横向滚动条因为宽度已经超出了屏幕的范围，(这条相对于父容器是body)。...3、一般width:auto使用的多，因为这样灵活，而width:100%使用比较少，因为在增加padding或者margin的时候，容易使其突破父级框，破环布局。
，再设置margin:0 auto使其水平居中 11....该方法优点在于结构简洁，不理想的地方：1.由于使用场景不同，负缩进的值可能会不一样，不易抽象成公用样式；2.当该元素为链接时，在非IE下虚线框将变得不完整；3.如果该元素被定义为内联级或者内联块级，不同浏览器下会有较多的差异...外边距合并只出现在块级元素上； // b. 浮动元素不会和相邻的元素产生外边距合并； // c. 绝对定位元素不会和相邻的元素产生外边距合并； // d....内联块级元素间不会产生外边距合并； // e. 根元素间不会产生外边距合并（如html与body间）； // f....设置了属性overflow且值不为visible的块级元素不会与它的子元素发生外边距合并； 22.
100 ) 位置上 , 但是无法设置其浮动在其它盒子上方 ; 7、绝对定位 绝对定位 是以 父级元素 为基准 , 设置 边偏移 ; 为 子元素 添加 绝对定位 , 如果 父容器有定位 , 则相对于父容器的坐标进行定位...不一定是 绝对定位 , 其它类型的定位也可以 , 在本博客的示例中 , 使用的就是 相对定位 ; 为父容器添加了相对定位 , 子容器也会相对于 父容器 进行定位 ; 7、绝对定位特点 绝对定位 以 带有定位的...父级元素 为基准 , 通过 边偏移 移动位置 ; 如果 绝对定位 的元素 的 父级元素 没有定位 , 那么会 一直向上查找有定位的父级元素 , 直到浏览器 ; 绝对定位 元素 不保留 原来的位置 ,...100 像素的外边距 , 父盒子也会被带下来 , 这就是外边距塌陷 ; 下面的示例 1 中 , 父盒子 和 子盒子 没有添加任何外边距 , 没有塌陷 ; 示例 2 中 , 为子盒子设置了 上外边距...; 效果参考 【CSS】清除浮动 ② ( 清除浮动 - 父级元素设置 overflow 样式 | overflow 属性样式效果 | 溢出隐藏效果 | 垂直进度条效果 | 水平垂直进度条效果 ) 博客
该元素将占用其父项的100％，加上左侧和右侧的边距。...考虑下面的模型，父级元素是一个 flex 布局： ? 我们想把第二项推到最右边，自动边距就派上用场了。...如果内容溢出，桌面浏览器会提供滚动条。...用例和示例 值得一提的是，下面的用例可能还不够，但是我尝试添加一些用例，希望它们对你们有用。 提示箭头 对于提示框，我们需要一个指向箭头，以使其对用户更加清晰。...CSS将如下所示： .item__action { margin-inline-start: auto; } CSS grid 和自动边距 在向网格项目添加边距时，它可以是固定值，百分比或自动值
要求：三列布局；中间主体内容前置，且宽度自适应；两边内容定宽 好处：重要的内容放在文档流前面可以优先渲染 原理：利用相对定位、浮动、负边距布局，而不添加额外标签 .container {...双飞翼布局：对圣杯布局（使用相对定位，对以后布局有局限性）的改进，消除相对定位布局 原理：主体元素上设置左右边距，预留两翼位置。左右两栏使用浮动和负边距归位，消除相对定位。...px 相对于显示器屏幕分辨率，无法用浏览器字体放大功能 em 值并不是固定的，会继承父级的字体大小： em = 像素值 / 父级font-size 解释下什么是浮动和它的工作原理？...此时，内容会溢出到容器外面而影响布局。这种现象被称为浮动（溢出）。...例如，父级行高为 1.5，子元素字体为 18px，则子元素行高为 1.5 * 18 = 27px 百分比：将计算后的值传递给后代 设置元素浮动后，该元素的 display 值会如何变化？
问题分析 在MDN上面有这么一段文字： 块的上外边距(margin-top)和下外边距(margin-bottom)有时合并(折叠)为单个边距，其大小为单个边距的最大值，这种行为称为边距折叠。...注意：只有上下边距会产生折叠，左右边距不会产生折叠。...有三种情况会产生边距折叠： 1、同一层相邻元素之间 元素A 元素B .A, .B { width...注意：即使设置父元素的外边距是0，margin: 0，第一个或最后一个子元素的外边距仍然会“溢出”到父元素的外面。...如果所有参与折叠的外边距都为负，折叠后的外边距的值为最小的负边距的值。这一规则适用于相邻元素和嵌套元素。
19、CSS属性overflow属性定义溢出元素内容区的内容会如何处理? 20、对line-height是如何理解的？ 21、元素竖向的百分比设定是相对于容器的高度吗？...39、z-index属性在什么情况下会失效 40、Flex 布局父级容器属性和子级项目属性有哪些？ 41、flex 布局中 align-content 与 align-items 有何区别？...（3）、父级div定义伪类:after和zoom。 （4）、父级div定义overflow:hidden。 （5）、父级div定义overflow:auto。...19、CSS属性overflow属性定义溢出元素内容区的内容会如何处理? 参数是scroll时候，必会出现滚动条。 参数是auto时候，子元素内容大于父元素时出现滚动条。...参数是visible时候，溢出的内容出现在父元素之外。 参数是hidden时候，溢出隐藏。 20、对line-height是如何理解的？ 行高是指一行文字的高度，具体说是两行文字间基线的距离。
，多出的盒子会另起一行对齐 float:inherit;该属性为继承父元素的浮动属性 列表浮动 清除浮动 额外标签法 添加一个新标签，设置该标签清除浮动 clear : left | right |...both 父级添加overflow法 产生问题的父标签添加 overflow 属性 overflow: hidden | auto | sroll; after 伪元素法 after伪元素法是额外标签法的升级版...（漂浮) 定位由两部分组成： 定位模式：相对定位、绝对定位、固定定位、静态定位 边偏移：top、left、fight、bottom 静态定位(static) 就是无定位，无法使用边便宜来调整盒子的位置...如果父元素没有定位，则找父级的父级，..…. 。...子元素使用绝对定位退表，可以在父元素中随意定位。
由于浮动元素会脱离文档流，所以导致不占据页面空间，所以会对父元素高度带来一定影响。...left 清除前面元素左浮动带来的影响 3、right 清除前面元素右浮动带来的影响 4、both 清除前面元素所有浮动带来的影响 优势：代码量少 容易掌握 简单易懂 弊端：会添加许多无意义的空标签...:both; } :after 选择器向选定的元素之后插入内容 content:""; 生成内容为空 display: block; 生成的元素以块级元素显示, clear:both...疑问 为什么会margin边距重叠？...overflow:hidden, 语义应该是溢出:隐藏，按道理说，子元素浮动了，但依然是在父元素里的，而父元素高度塌陷，高度为0了，子元素应该算是溢出了，为什么没有隐藏，反而撑开了父元素的高度？
子元素选择器是相对于父元素的第一级子元素符合条件。 相邻兄弟选择器，针对的元素是同级元素，拥有相同的父元素，且两个元素是相邻的。...css中常用的伪类如下表所示： 伪类名 说明 :active 向被激活的元素添加样式 :focus 向拥有输入焦点的元素添加样式 :hover 向鼠标悬停在上方的元素添加样式 :link 向未被访问的链接添加样式...:visited 向已被访问的链接添加样式 :first-child 向元素添加样式，且该元素是它的父元素的第一个子元素 :lang 向带有指定lang属性的元素添加样式 伪元素选择器 css中常用的伪元素如下表所示...： 伪元素名 说明 :first-letter 向文本的第一个字母添加样式 :first-line 向文本的第一行添加样式 :after 在元素之后添加内容 :before 在元素之前添加内容 css...display 设置元素如何显示，值none,block,inline,inline-block,inherit visibility 定义元素是否可见，visibility设置为隐藏，元素占用的空间依然会保留
会撑大盒子 解决方法 手动做减法，减掉border/padding的尺寸 内减模式：box-sizing:border-box 盒子模型-外边距 作用 拉开两个盒子之间的距离 属性名 margin...清除默认样式 示例 默认的内外边距 盒子模型-元素溢出 作用 控制溢出元素的内容的像是方式 属性名 overflow 属性值 关键字 含义 hidden 退出隐藏 scroll 溢出滚动（无论是否溢出，...都显示滚动条位置） auto 溢出滚动（溢出才显示滚动条） 外边距问题-合并现象 场景 垂直排列的兄弟元素，上下margin会合并 现象 取两个margin中的较大值生效 外边距问题-塌陷问题 场景...父子级的标签，子级的添加上外边距会产生塌陷问题 现象 导致父级一起向下移动 解决方法 取消子集margin，父级设置padding 父级设置overflow：hidden 父级设置border-top...行内元素-内外边距问题 场景 行内元素添加margin和padding，无法改变元素垂直位置 解决方法 给行内元素添加line-height可以改变垂直位置 盒子模型-圆角 作用 设置元素的外边框为圆角
（2）继承性 所谓继承性是指写css样式表时，子标记会继承父标记的某些样式，例如文本颜色和字号。想要设置一个可继承的属性，只需要将它应用于父元素即可。 ...（5）嵌套块元素垂直外边距的合并 当块级元素进行嵌套时，如果父盒子没有设置上边框和上内边距的话，子盒子的上外边距和父盒子的上外边距会进行合并。...6.3 内容溢出处理 （1）父容器高度塌陷 如果一个标准流中的合资所有的子元素都进行了浮动，而且盒子没有设置高度，那么父容器的整个高度会塌陷。 ...同时，父容器的z-index会影响子元素的层级级别。 父级添加font-size:0。 ③使用letter-spacing或word-spacing。
（宽高、边框样式、边距等）以及版面的布局等外观显示样式。...（2）继承性 所谓继承性是指写css样式表时，子标记会继承父标记的某些样式，例如文本颜色和字号。想要设置一个可继承的属性，只需要将它应用于父元素即可。 ...（5）嵌套块元素垂直外边距的合并 当块级元素进行嵌套时，如果父盒子没有设置上边框和上内边距的话，子盒子的上外边距和父盒子的上外边距会进行合并。...6.3 内容溢出处理 （1）父容器高度塌陷 如果一个标准流中的合资所有的子元素都进行了浮动，而且盒子没有设置高度，那么父容器的整个高度会塌陷。 ? ...②给父级添加font-size:0。 ③使用letter-spacing或word-spacing。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
腾讯会议
云直播
