它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。...具有BFC特性的元素可以看作是**隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且BFC具有普通容器所没有的一些特性。**后面介绍。...形成了BFC的区域不会与float box重叠（可阻止因浮动元素引发的文字环绕现象） 计算BFC高度时，浮动元素也参与计算（BFC会确切包含浮动的子元素，即闭合浮动） 注意⚠️，对于第五点，原本浮动元素是应该脱离文档流的...变成BFC，避免与.left box这个有float属性的元素重叠*/ } image.png 解决父元素高度塌陷 高度塌陷产生的原因：父元素未设置固定的高度，完全由子元素高度撑开；当子元素float...之后脱离了文档流，父元素内部就没有支撑，造成了高度的塌陷。
---- img标签 src：标识图像的位置； alt：指定图像的描述性文本，当图像不可见时（下载不成功时），可看到该属性指定的文本； title：提供在图像可见时对图像的描述(鼠标滑过图片时显示的文本...（真霸道，一个块级元素独占一行） 元素的高度、宽度、行高以及顶和底边距都可设置。 元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。...div>我要变成内联元素div> 内联元素特点： 和其他元素都在一行上； 元素的高度、宽度及顶部和底部边距不可设置； 元素的宽度就是它包含的文字或图片的宽度，不可改变。...（真霸道，一个块级元素独占一行） 2、元素的高度、宽度、行高以及顶和底边距都可设置。 3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。...，需要设置position:absolute(表示绝对定位)，这条语句的作用将元素从文档流中拖出来，然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位
important; height:200px; 7. td高度的问题 问题： table中td的宽度都不包含border的宽度，但是oprea和ff中td的高度包含了border的高度 解决： ...在ie中如果td中的没有内容，那么border将不会显示 8. div嵌套p时，出现空白行 问题： div中显示文本，ff、oprea、Chrome：top和bottom都会出现空白行，但是在...子容器浮动后，父容器扩展问题 问题： 子容器都float以后，父容器没有设定高度,父容器将不会扩展 解决： 只需要添加一个clear:both的div，代码如下： div style="border:...– _ –> div style="float:right;width:400px">↓这就是多出来的那只猪div> div> 解决： 1、 改变结构，不出现【一个容器包含2两个具有“float...子容器宽度大于父容器宽度时，内容超出 问题： 子DIV的宽度和父DIV的宽度都已经定义，在IE6中如果其子DIV的宽度大于父DIV的宽度，父DIV的宽度将会被扩展，在其他浏览器中父DIV的宽度将不会扩展
或者flex等具有弹性布局的属性。...可以将子元素设置为grid-column-start和grid-column-end等属性，然后在父元素上设置display: grid即可实现清除浮动。... grid-column-end: 4;">浮动元素3div> div> 还有一种比较特殊的方法是使用伪元素:before和:after，将它们添加到包含浮动元素的容器中，并给它们设置clear...我们可以在包含浮动元素的容器中添加一个::after伪元素，并且将这个伪元素的高度设置为0，然后利用CSS变量将容器的高度赋值给伪元素的高度，从而达到清除浮动的效果。...我们可以在包含浮动元素的容器中添加一个空的div元素，并且给这个元素设置clear:both属性，然后通过JavaScript来计算出容器的实际高度，将这个高度赋值给空的div元素。
二、核心解决的问题 文字围绕图片：img标签与多个文本标签放置在一个容器中，如果img浮动，文本标签会围绕图片。 但包含的内容会围绕浮动元素显示。...解决高度塌陷的问题 首先我们需要了解BFC和IFC这两人个基本的概念，因为他与浏览器的渲染有着密切的关系。...主要原因为：position、fieldset都需要子元素来撑开父容器的高度，但子元素浮动后又不存在高度，所以失效。 ...> div class="footer">footerdiv> 3.1.3 最后一个子元素clear:both 利用clear:both触发父容器重新计算高度的原理实现，示例代码如下： .wrap
第二个div用margin-left设置，让其在视觉上不被遮挡 3.2 当浮动元素相邻的下一个块级元素包含文本内容时，浮动元素没有覆盖文本，而是浮动在文本的左边 ...给父级元素加上高度，让其在视觉效果上呈现正常 --》扩展性不好，假如项目高度不固定（如瀑布流布局），此时没法由子元素内容确定父元素高度 2.2 给父级加浮动。 ...，但表现的需要是子元素，此时父元素浮动不生效。 ...第二个div用margin-left设置，让其在视觉上不被遮挡 3.2 当浮动元素相邻的下一个块级元素包含文本内容时，浮动元素没有覆盖文本，而是浮动在文本的左边 ...，但表现的需要是子元素，此时父元素浮动不生效。
一个块级元素如果没有设置 height，那么其高度就是由里面的子元素撑开，如果子元素使用浮动，脱离了标准的文档流，那么父元素的高度会将其忽略，如果不清除浮动，父元素会出现高度不够，那样如果设置 border...清除浮动的方式 父级 div 定义 height，原理：父级 div 手动定义 height，就解决了父级 div 无法自动获取到高度的问题。...父级 div 定义 display: table 。 父级 div 定义 伪类 :after 和 zoom 。...有损压缩会使图像数据质量下降，并且在编辑和重新保存 JPG 格式图像时，这种下降损失会累积。 JPG 不适用于所含颜色很少、具有大块颜色相近的区域或亮度差异十分明显的较简单的图片。...由于你子 DIV 并没有指定宽度，那它就是 100%，也就是与父 DIV 同宽，但这与继承无关，高度自然也没有继承一说。
padding: 用于控制内容与边框之间的距离； Border(边框): 围绕在内边距和内容外的边框。 Content(内容): 盒子的内容，显示文本和图像。...box3的布局是上下结构，上图发现box3跑到了上面，与.container产生了重叠，但文本内容没有发生覆盖，只有div发生覆盖现象。...如果没有明确设定包含容器高度的情况下，它要计算内容的全部高度才能确定在什么位置hidden，这样浮动元素的高度就要被计算进去。这样包含容器就会被撑开，清除浮动。...当我们给子元素添加padding和margin时，可以发现宽度width是父元素的宽度减去子元素的margin值和padding值。 ...而我们一般的做法时，首先确定img的父元素的宽度和高度，然后再将img的宽度和高度设置位100%，这样，图片就能铺满父元素了。 后台管理布局 <!
子元素选择器只能选择作为某元素**子元素(亲儿子)**的元素。 其写法就是把父级标签写在前面，子级标签写在后面，中间跟一个 > 进行连接 这里的子指的是亲儿子不包含孙子,重孙子之类。 <!...# 行内元素(inline-level) 行内元素（内联元素）不占有独立的区域，仅仅靠自身的字体大小和图像尺寸来支撑结构，一般不可以设置宽度、高度、对齐等属性，常用于控制页面中文本的样式。...行内元素的特点： （1）和相邻行内元素在一行上。 （2）高、宽无效，但水平方向的padding和margin可以设置，垂直方向的无效。 （3）默认宽度就是它本身内容的宽度。...不可以直接设置宽度高度 它本身内容的宽度 容纳文本或则其他行内元素 行内块元素 一行放多个行内块元素 可以设置宽度和高度 它本身内容的宽度 # 总结-块级元素和行内元素分别有哪些？...# CSS继承性 所谓继承性是指书写CSS样式表时，子标签会继承父标签的某些样式，如文本颜色和字号。想要设置一个可继承的属性，只需将它应用于父元素即可。 注意： 1.
padding: 用于控制内容与边框之间的距离； Border(边框): 围绕在内边距和内容外的边框。 Content(内容): 盒子的内容，显示文本和图像。...div的margin-bottom和下面div的margin-top会塌陷，也就是会取上下两者margin里最大值作为显示值 2、父子div： if 父级div中没有border，padding...box3的布局是上下结构，上图发现box3跑到了上面，与.container产生了重叠，但文本内容没有发生覆盖，只有div发生覆盖现象。...这个原因是因为第一个大盒子里的子元素使用了浮动，脱离了文档流，导致.container没有被撑开。box3认为.container没有高度（未被撑开），因此跑上去了。...如果没有明确设定包含容器高度的情况下，它要计算内容的全部高度才能确定在什么位置hidden，这样浮动元素的高度就要被计算进去。这样包含容器就会被撑开，清除浮动。
块级元素的垂直方向会发生margin合并，存在以下三种场景： 相邻兄弟元素之间margin合并； 父元素margin-top和子元素margin-top，父元素margin-bottom和子元素margin-bottom...给父元素设定高度。 margin的百分比值跟padding一样，垂直方向的margin和水平方向上的一样都是相对于父元素宽度计算的。...display: inline-block基线的不同之处 先看例子，图中span元素设置了display: inline-block和宽高，从而撑起了父元素div的高度，但span本身并无margin属性...正确的翻译是“每一个盒子的左外边距应该和包含块的左边缘相接触”。 第一，包含块未必就是父级元素。...绝对定位`position: absolute` 定义 和浮动元素一样，绝对定位也具有块状化、BFC、包裹性、脱离文档流、没有margin合并的特性。 但和浮动不同的是，绝对定位是完全的脱离文档流。
或者说，它能选择任何包含在内 的标签。 1.2 子元素选择器 作用： 子元素选择器只能选择作为某元素**子元素(亲儿子)**的元素。...它本身内容的宽度 容纳文本或则其他行内元素 行内块元素 一行放多个行内块元素 可以设置宽度和高度 它本身内容的宽度 2.6 标签显示模式转换 display 块转行内：display:inline...3.2 单行文本垂直居中 行高我们利用最多的一个地方是： 可以让单行文本在盒子中垂直居中对齐。 文字的行高等于盒子的高度。 这里情况些许复杂，开始学习，我们可以先从简单地方入手学会。...参数 作用 scroll 背景图像是随对象内容滚动 fixed 背景图像固定 4.6 背景简写 background：属性的值的书写顺序官方并没有强制标准的。...样式不冲突，不会层叠 CSS层叠性最后的执行口诀： 长江后浪推前浪，前浪死在沙滩上。 5.2 CSS继承性 ? 概念： 子标签会继承父标签的某些样式，如文本颜色和字号。
每个块级元素都从新的一行开始，并且其后的元素也另起一行。 2. 元素的高度、宽度、行高以及顶和底边距离都可设置。 3. 元素宽度在不设置的情况下，是它本身父容器的100%，除非设置一个宽度。...和其他元素都在一行上 2. 元素的高度、宽度及顶部和底边边距不可设置 3. ...固定定位（position:fixed） 绝对定位: positon:absolute,这条语句的作用是将元素从文档中拖出来，然后使用left、top、right、bottom属性相对于最接近的一个具有定位属性的父包含块进行绝对定位...父元素高度确定的多行文本、图片等的竖直居中的方法有两种： （重要方法）方法一：使用插入 table (包括tbody、tr、td)标签，同时设置 vertical-align：middle。...除了上面讲到的插入table标签，可以使父元素高度确定的多行文本垂直居中之外，本节介绍另外一种实现这种效果的方法。但这种方法兼容性比较差，只是提供大家学习参考。
区段、板块等（类似div，但主要针对文档类区域） 侧边栏 文章/文档 HTML5布局的优势：页面代码更加简单、高效；新布局标签本身具有的语义明确告知浏览器其在页面中的位置和结构意义...A：如果父元素只包含浮动元素，那么在未设置高度的同时，则父元素高度坍塌为零。 解决“塌陷”的办法： step 1. 创建一个用来清除浮动的CSS样式类（.clearfix） step 2....3.弹性布局（flexbox） 响应式布局中的一种，为了实现响应式布局，CSS3提供的一种最新布局模式。提供更加高效的方式来对布局容器的子元素进行排列、对齐和分配空白空间。 PC站常见布局 1....GIF图片 后缀名为.gif，只包含256种色彩，适用于简单和单纯的图像。可以实现全透明/不透明的效果，可以包含多帧画面，实现小动画。 实际应用： 1. 照片或色彩丰富的图片：jpg 2....背景图片进用来修饰和没画网页，在页面中没有占位，如果加在失败，对页面的排版没有影响。 判断使用内容图or背景图： 1. 内容图片一般具有内容意义，属于文档内容，应该使用HTML元素。 2.
如果图像比父图像小，则max-width: 100%不会对图像产生实际影响，因为它比父图像小。 使用最小宽度和最大宽度 ?...初始width值为100px，并在其上加上min-width和max-width值。 结果是元素宽度未超过其包含的块/父元素的50％。...height 属性 除了最小和最大宽度属性外，我们还具有与高度相同的属性。...用红色表示的文本应该在父文本中裁剪。因为面板主体是一个flex项目，所以它的min-height与它的内容相等。为了防止这种情况，我们应该重新设置最小高度值。看看HTML和CSS是怎么样的。...混合最小宽度和最大宽度 在某些情况下，我们有一个最小宽度的元素，但同时，它没有最大宽度。这可能会导致组件太宽，而我们并不想这样做。考虑以下示例 ?
这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化。...这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化。...nextAll( [expr] ) 取得一个包含匹配的元素集合中每一个元素所有的后面同辈元素的元素集合 parent( [expr] ) 取得一个包含着所有匹配元素的唯一父元素的元素集合。...") $("div span:first-child")匹配父元素的第1个子元素 $("div span:last-child") 匹配父元素的最后1个子元素 $("div button:only-child...") 匹配父元素的唯一1个子元素 表单元素选择器 $(":input") 匹配所有的表单输入元素，包括所有类型的input, textarea, select 和 button $(":text") 匹配所有类型为
特点： (1)任意放缩 用户可以任意缩放图像显示，而不会破坏图像的清晰度、细节等。 (2)文本独立 SVG图像中的文字独立于图像，文字保留可编辑和可搜寻的状态。...b、表单域：包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框、和文件上传框等。...(1)、父级div定义 height 原理：父级div手动定义height，就解决了父级div无法自动获取到高度的问题。...优点：简单、代码少、容易掌握 缺点：只适合高度固定的布局，要给出精确的高度，如果高度和父级div不一样时，会产生问题 建议：不推荐使用，只建议高度固定的布局时使用 (2)、结尾处加空div标签...；如果页面浮动布局多，就要增加很多空div，让人感觉很不好 建议：不推荐使用，但此方法是以前主要使用的一种清除浮动方法 (3)、父级div定义 伪类:after 和 zoom 原理：IE8以上和非
一、CSS特性 1.继承：子元素继承父元素的某些样式（因为有些元素有默认值，所以它们就不用继承父元素的）。 ...2.CSS选择符控制页面所有的html元素(包括哪些本身有默认值的元素)，使用通配符"*"，但效率较低，不建议使用。 语法：*{属性:值} 3.选择符的嵌套（包含/派生）使用。...优点是不再单独为父元素包含的子元素进行设置id使得css代码更加简化，优化了css代码！... [6]:当父元素没有指定高度并且子元素有浮动时，这个父元素的高度不会自动增加. [7]:在给盒子的父盒子加居中时，一定要有宽度才能使得父盒子居中....[2].内联元素：{display:inline}内联元素只能容忍文本和其他内联元素，它允许其他元素与其同一行，但宽度和高度变得不起作用，常见内联元素有：em、span、a等（不能设置宽和高，不影响换行
让图片在容器中显示的更舒适 设置图像在其容器内的适合度和位置，同时保留其宽高比。以前只能使用背景图像和background-size属性来实现。...父级必须具有视口高度。flex-grow：1可以应用于第一个或第二个元素，它将具有所有可用空间。 浏览器支持程度 99.5% 需要使用前缀 caniuse 11....使用transform居中子元素 使用 position:absoluteandtransform:translate() 进行居中，不需要知道父级和子元素的宽高，因此它非常适合响应式应用程序。...可在 CodePen 上查看真实效果和编辑代码 说明 伪类：：focus-within 将对应的样式应用于父元素（任何子元素被聚焦）。例如，表单元素内的输入元素。...CodePen上预览和编辑代码 浏览器支持程度 100%； 32. 斑马条纹列表 创建具有交替背景颜色的列表，这对于区分各行间的内容很有用。
如果被设置元素为文本、图片等行内元素时，在父元素中设置text-align:center实现行内元素水平居中，将子元素的display设置为inline-block，使子元素变成行内元素 ?...，这里要讲垂直居中，首先设定两个条件即父元素是盒子容器且高度已经设定 场景1：子元素是行内元素，高度是由其内容撑开的 这种情况下，需要通过设定父元素的line-height为其高度来使得子元素垂直居中...场景3：子元素是块级元素且高度已经设定 计算子元素的margin-top或margin-bottom，计算方法为父(元素高度-子元素高度)/2 div class="wrap "> div...3.2水平+垂直对齐 1. text-align + vertical-align 在父元素设置text-align和vertical-align，并将父元素设置为table-cell元素，子元素设置为...2.若子元素是图像，可不使用table-cell，而是其父元素用行高替代高度，且字体大小设为0。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
腾讯会议
云直播
对象存储
