按照标签的分类可以分为块级元素和行内元素 什么是块级元素？ 独占其父元素的整个水平空间，垂直空间等于其内容高度的元素称之为块级元素。...style> ``` 就上述代码而言可以看到#content中的内容会跟div2中的内容重叠，同时也可以看到div2是直接换行，紧贴着其父元素的左侧往下排列，这就是普通文档流的排列规则...如何触发成为一个BFC盒模型的条件还是挺简单的 ``` 1:float的值不为null 2:overflow的值不为visible 3:display的值为table-cell,table-caption...，使得内容溢出到容器外面而影响（甚至破坏）布局的现象。...这个现象叫浮动溢出，为了防止这个现象的出现而进行的CSS处理，就叫CSS清除浮动。)、防止margin重叠等场景
BFC的区域不会与float box重叠。 BFC是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。 计算BFC的高度时，浮动元素也会参与计算。...、table-caption position的值为absolute或fixed 20 为什么会出现浮动和什么时候需要清除浮动？...CSS选择器的解析是从右向左解析的。若从左向右的匹配，发现不符合规则，需要进行回溯，会损失很多性能。...若从右向左匹配，先找到所有的最右节点，对于每一个节点，向上寻找其父节点直到找到根元素或满足条件的匹配规则，则结束这个分支的遍历。...下可能会出现FOUC现象（即样式失效导致的页面闪烁问题） 44 CSS属性overflow属性定义溢出元素内容区的内容会如何处理?
之前写三角形, 都是直接记住代码,没有探究原因,我也是直到有一次面试时,面试大哥让我说说css创建三角形的原理,我就......回来就赶紧翻资料.接下来我就将当时我理解的过程列举出来: （1） 写一个我们最熟悉的...父级div定义zoom 21 上下margin重合的问题 在重合元素外包裹一层容器，并触发该容器生成一个BFC。...若从左向右的匹配，发现不符合规则，需要进行回溯，会损失很多性能。若从右向左匹配，先找到所有的最右节点，对于每一个节点，向上寻找其父节点直到找到根元素或满足条件的匹配规则，则结束这个分支的遍历。...下可能会出现FOUC现象（即样式失效导致的页面闪烁问题） 44 CSS属性overflow属性定义溢出元素内容区的内容会如何处理?...参数是visible时候，溢出的内容出现在父元素之外。 参数是hidden时候，溢出隐藏。
table-column：此元素会作为一个单元格列显示（类似 ） table-cell：此元素会作为一个表格单元格显示（类似 和 ） table-caption：此元素会作为一个表格标题显示...p元素是其父元素唯一的 元素，还是可以有其他的元素，只要p元素只有一个； p:only-child 选择该p元素是其父元素的唯一子元素； p:nth-child(n) 选择属于其父元素的第n个p...，使得内容溢出到容器外面而影响（甚至破坏）布局的现象。...这个现象叫浮动溢出，为了防止这个现象的出现而进行的CSS处理，就叫CSS清除浮动。 （2）与浮动元素同级的非浮动元素会跟随其后。...预处理器：less，sass等等（给css像其他程序语言一样，加入一些编程元素，让css能像其他程序语言一样做一些预定的处理，然后就有了css预处理器）喜欢Sass，less，stylus。
W3C对BFC的定义如下： 浮动元素和绝对定位元素，非块级盒子的块级容器（例如 inline-blocks, table-cells, 和 table-captions），以及overflow值不为“visiable...如果我删除了一些文本，那么就没有足够的内容来包围图像，而且由于浮动被从文档流中脱离，所以边框会上升，并在图像下方，直到文本的高度。 ?...margin 和外部 div 上的 margin 之间没有任何东西，所以两个会折叠，因此 p 最终与 div 的顶部和底部齐平。...查看演示 在多列布局中使用 BFC 如果我们创建一个占满整个容器宽度的多列布局，在某些浏览器中最后一列有时候会掉到下一行。这可能是因为浏览器四舍五入了列宽从而所有列的总宽度会超出容器。...即使在没有任何不想要的副作用的情况下，使用 overflow 也可能会让其他开发人员感到困惑。为什么 overflow 设置为 auto 或 scroll?最初的开发者的意图是什么?
它们的特性区别有哪些？ 1、块级元素(block element)，占据其父元素（容器）的整个空间，因此创建了一个“块”。通常浏览器会在块级元素前后另起一行。能容纳其他块元素或者内联元素。...） noscript - 可选脚本内容（对于不支持script的浏览器显示此内容） ol - 排序列表 p - 段落 pre - 格式化文本 table - 表格 ul - 非排序列表 2、行内元素(inline...块级元素会独占一行，默认情况下，其宽度自动填满其父元素宽度。...class='box'> 我要居中我要居中我要居中 div> //若想要上面的文本居中，对应的CSS样式因如下所示编写 div{ text-align: center } 4、文本溢出解决方法。...在使用“em”作单位时，一定需要知道其父元素的设置，因为“em”就是一个相对值，而且是一个相对于父元素的值。
W3C对BFC的定义如下： 浮动元素和绝对定位元素，非块级盒子的块级容器（例如 inline-blocks, table-cells, 和 table-captions），以及overflow值不为“...float示例 如果我删除了一些文本，那么就没有足够的内容来包围图像，而且由于浮动被从文档流中脱离，所以边框会上升，并在图像下方，直到文本的高度。 ?...margin 和外部 div 上的 margin 之间没有任何东西，所以两个会折叠，因此 p 最终与 div 的顶部和底部齐平。...在多列布局中使用 BFC 如果我们创建一个占满整个容器宽度的多列布局，在某些浏览器中最后一列有时候会掉到下一行。这可能是因为浏览器四舍五入了列宽从而所有列的总宽度会超出容器。...即使在没有任何不想要的副作用的情况下，使用 overflow 也可能会让其他开发人员感到困惑。为什么 overflow 设置为 auto 或 scroll?最初的开发者的意图是什么?
作为前端新手，经常会坐在显示器前花很多很多时间去 “追” 视觉稿，也经常会在 “为什么这个属性不生效” 和 “为什么这个属性生效了但是不是我想要的效果” 之间摇摆，直到我开始看张鑫旭老师的《CSS 世界...遵循着法则，很多问题也许会迎刃而解。 因为在阅读本书 CSS 的 “流” 相关内容时让我有了一种恍然大悟的感觉，所以才有了此篇读书笔记。...“流” 跟现实世界的 “水流” 有异曲同工的表现。所谓 “流”，就是 CSS 世界中引导元素排列和定位的一条看不见的 “水流”。...{ width: 102px; } .first-div { border: 1px solid; } 嵌套一层标签，父元素定宽，子元素因为 width 使用的是默认值 auto，所以会如水流般自动填满父级容器...只要经过一定的实践，我们都会发现对于普通文档流中的元素，百分比高度值要想起作用，其父级必须有一个可以生效的高度值。 4.3 为何父级没有具体高度值的时候，height: 100% 会无效呢？
上已经收录，文章的已分类，也整理了很多我的文档，和教程资料。 通常，我们希望限制元素相对于其父元素的宽度，同时使其具有动态性。因此，有一个基础宽度或高度的能力，使其扩展的基础上，可用的空间。...注意，max-height的默认值是none。 考虑下面的示例，其中我为内容设置了max-height。 但是，因为它大于指定的空间，所以会发生溢出。 因此，文本超出了其父边界。 ?...Hero 元素的最小高度 一般来说，我不喜欢给元素添加固定的高度。我觉得这样做，会破坏流式布局的结构。但有些情况设置固定高度却很有用。 考虑下面的例子，在这里我们有一个设置了固定高度的hero部分。...我们可以用这种方式先解决问题，尽管这可能会导致页面看起来很奇怪，但是我认为应该首先防止内容管理系统(CMS)中发生这样的事情。这样，问题就解决了，看起来也不错。 ?...modal是一个div>元素，因此它已经具有其父元素的100％宽度，对吗？ 考虑下面为模态设计简化的测试案例。 请注意，如果可用视口空间不足，则宽度如何更改为其父级的100％。 ?
{ width: 100px; height: 100px; background-color: pink;}为什么margin: 0 auto会让div居中margin 可以有4个值，分别对应影响的方向是上...BFC的区域不会与float box重叠。BFC是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。计算BFC的高度时，浮动元素也会参与计算。...float属性不为none 【会影响上级元素】position为absolute或fixed 【会影响上机元素】display为inline-block, table-cell, table-caption...属性定义溢出元素内容区的内容会如何处理?...若从右向左匹配，先找到所有的最右节点，对于每一个节点，向上寻找其父节点直到找到根元素或满足条件的匹配规则，则结束这个分支的遍历。
BFC的区域不会与float box重叠。 BFC是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。 计算BFC的高度时，浮动元素也会参与计算。...、table-caption position的值为absolute或fixed 16、为什么会出现浮动和什么时候需要清除浮动？...若从左向右的匹配，发现不符合规则，需要进行回溯，会损失很多性能。 若从右向左匹配，先找到所有的最右节点，对于每一个节点，向上寻找其父节点直到找到根元素或满足条件的匹配规则，则结束这个分支的遍历。...36、CSS属性overflow属性定义溢出元素内容区的内容会如何处理? 参数是scroll时候，必会出现滚动条。 参数是auto时候，子元素内容大于父元素时出现滚动条。...参数是visible时候，溢出的内容出现在父元素之外。 参数是hidden时候，溢出隐藏。
这样可以强制容器元素包含浮动元素，并且不会出现溢出的情况。... class="clearfix"> div style="float:left;">浮动元素div> div> 使用display属性：将浮动元素的容器元素设置为table、table-cell...还有一种比较特殊的情况，即使用flexbox布局时，浮动元素会自动清除。这是因为在flex容器中，子元素会默认设置为flex-item，而不是常规文档流中的block元素。...工作原理 当一个元素应用 float 属性后，它会沿其父容器的左侧或右侧边缘浮动。其他非浮动元素将不会覆盖浮动元素，而是环绕它。同时，浮动元素里面的文本和内联元素也会环绕浮动元素。...使用 display: flex 或 display: grid： 使用 Flexbox 或 Grid 布局的容器会自动清除浮动，因为这两种布局方式不受子元素的浮动属性影响。
如何使文本溢出边界不换行强制在一行内显示 #test { width: 150px; white-space: nowrap; } // 设置容器的宽度和...--我是透明的容器-->div> div class="inner">我是不透明的内容div> // 原理是容器层与内容层并级，容器层设置透明度，内容层通过负margin或者...: rgba(0,0,0,0.2); } div class="outer"> 我是不透明的内容 div> //...如何让已知宽度的容器水平居中 #test { width: 960px; margin: 0 auto; } 17. 为什么容器的背景色没显示出来？...为什么容器无法自适应内容高度？
在本文中，会先解释auto的工作方式以及如何最大程度地利用auto的技术细节,当然，会配合一些用例和示例。 简介 auto关键字的使用因属性而异。 对于本文，我将在每个属性的上下文中解释值。...div> div> 要使.item获得其容器的全部高度，我们可以使用以下方法之一: 给.wrapper一个固定的高度，然后为.item元素添加height: 100% 对.wrapper使用...如果内容适合填充框内部，则它看起来与可见内容相同，但仍会建立新的块格式化上下文。 如果内容溢出，桌面浏览器会提供滚动条。...如果我检查了子项并转到computed styles，你猜下left属性的值会是什么？ ? left的默认值为16px，即使没有设置。为什么会发生这种情况？...现在，你可能会问，这样做有什么好处?好吧，让我继续。 假设子项必须在较小的视口中位于距左侧100像素的位置，对于桌面，它应恢复为默认位置。
一、常用标签及对应的属性1、标题标签【不同级标题h1~h6】 我是一个标题标签">标题1 标题2 标题6...：table>table>属性：①边框：border="1"②单元格边沿到单元内容的距离：cellpadding（上下左右都变）③单元格与单元格之间的距离：cellspacing（2）表格标题 table>图片8、表单标签（1）表单容器：的服务器地址">（2）输入框...>div>为块级元素（会自动换行，可设置宽高）类似的标签还有div、p、h1（2）为行内元素（没有默认样式，主要修饰文字，不会自动换行，大小由内容自动撑开）类似的标签还有a...父子关系（子元素进行定位，相对于其父级【设置了定位/没有设置而是找到浏览器】的绝对定位）②fiexd：窗口定位（浏览器窗口）（3）常见搭配<!
给div设置一个宽度，然后添加margin:0 auto属性 div{ width:200px; margin:0 auto; } 居中一个浮动元素 确定容器的宽高 宽500 高 300...table 此元素会作为块级表格来显示 inherit 规定应该从父元素继承 display 属性的值 position的值relative和absolute定位原点是？...(_这个符号只有ie6会识别) 渐进识别的方式，从总体中逐渐排除局部。 首先，巧妙的使用“\9”这一标记，将IE游览器从所有情况中分离出来。...不同类型的 Box,会参与不同的 Formatting Context（决定如何渲染文档的容器）,因此Box内的元素会以不同的方式渲染,也就是说BFC内部的元素和外部的元素不会互相影响。....class2 div{ } 如果权重相同，则最后定义的样式会起作用，但是应该避免这种情况出现 请解释一下为什么会出现浮动和什么时候需要清除浮动？
前端面试之CSS ---- display: none; 与 visibility: hidden; 的区别 联系：它们都能让元素不可见 区别： display:none;会让元素完全从渲染树中消失...给div设置一个宽度，然后添加margin:0 auto属性 div{ width:200px; margin:0 auto; } 居中一个浮动元素 //确定容器的宽高 宽500 高...table 此元素会作为块级表格来显示 inherit 规定应该从父元素继承 display 属性的值 position的值relative和absolute定位原点是？...一个页面是由很多个 Box 组成的,元素的类型和 display 属性,决定了这个 Box 的类型 不同类型的 Box,会参与不同的 Formatting Context（决定如何渲染文档的容器）,因此...非IE浏览器下，容器不设高度且子元素浮动时，容器高度不能被内容撑开。 此时，内容会溢出到容器外面而影响布局。这种现象被称为浮动（溢出）。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
腾讯会议
云直播
