在实际布局中，往往这并不是我们所希望的，所以需要闭合浮动元素，使其包含框表现出正常的高度。...行内框、浮动框或绝对定位之间的外边距不会合并。）；而 inline 以水平方式布局，垂直方向的 margin 和 padding 都是无效的，大小跟内容一样，且无法设置宽高。...---- 文字在超出长度时，如何实现用省略号代替 ? 超长长度的文字在省略显示后，如何在鼠标悬停时，以悬浮框的形式显示出全部信息 ?...---- 有一个高度自适应的 div，里面有两个 div，一个高度 100px，如何让另一个填满剩下的高度 ？...而宽度 100% 是相对于它的父标签来的，如果我们改变了它父标签的宽度，那 main 的宽度也就会变——比如我们把浏览器窗口缩小，那 container 的宽度就会变小，而 main 的宽度也就变小，
注意是行框盒子的最小高度，而不是块级元素的实际高度。...（图中两个div行高一样，div.one 的背景色区域就是行框盒子的高度，而 div.two 的背景区域则是实际高度，其行框盒子高度和 div.one 是一样的。） ?...div元素的高度仍然和上图一模一样，由字母x和行距共同撑起。此时如果删除字母x，div的高度不变，因为span元素的行框盒子前会产生幽灵空白节点，而幽灵空白节点+行高也能撑起div。 ?...如何设置，最终父元素的高度都是数值大的那个line-height决定的。...由于内联元素默认基线对齐，所以字母x和span元素发生了位移以使基线对齐，导致div高度变大。而此时字母x的半行距比span元素的半行距大，大出的部分就是div的高度增加的部分。
清除浮动的方式 浮动的定义： 非IE浏览器下，容器不设高度且子元素浮动时，容器高度不能被内容撑开。 此时，内容会溢出到容器外面而影响布局。这种现象被称为浮动（溢出）。...浮动的工作原理： 浮动元素脱离文档流，不占据空间（引起“高度塌陷”现象） 浮动元素碰到包含它的边框或者其他浮动元素的边框停留 浮动元素可以左右移动，直到遇到另一个浮动元素或者遇到它外边缘的包含框。...当包含框的高度小于浮动框的时候，此时就会出现“高度塌陷”。 浮动元素引起的问题？...父元素的高度无法被撑开，影响与父元素同级的元素 与浮动元素同级的非浮动元素会跟随其后 若浮动的元素不是第一个元素，则该元素之前的元素也要浮动，否则会影响页面的显示结构 清除浮动的方式如下： 给父级div...编码优化：怎样写出更好的 CSS？ 构建：如何处理我的 CSS，才能让它的打包结果最优？ 可维护性：代码写完了，如何最小化它后续的变更成本？如何确保任何一个同事都能轻松接手？
display:node：把元素隐藏起来，并且会改变页面布局，可以理解成在页面中把该元素删掉。 如何画一个三角形 左右边框设置为透明，长度为底部边框的一半。...为什么要清除浮动 主要是为了解决父元素高度坍陷问题。...如何清除 1、父元素设置overflow: hidden(少用) 2、clearfix：使用内容生成的方式清除浮动，不会破坏文档流。...5.计算BFC的高度，浮动元素也参与计算 BFC作用： 1.自适应两栏布局 2.可以阻止元素被浮动元素覆盖 3.可以包含浮动元素---清除内部浮动 原理：触发父div的BFC属性...，使下面的子div都处在父div的同一个BFC区域之内 4.分属于不同的BFC时，可以阻止margin重叠 CSS3特性 vh和vw vh 相对于视窗的高度，视窗高度是100vh vw 相对于视窗的宽度
; B：不同点： absolute的”根元素“是可以设置的，而fixed的”根元素“固定为浏览器窗口。...类似于优先级机制：position：absolute/fixed优先级最高，有他们在时，float浮动不起作用，display值需要调整。...浮动元素引起的问题： （1）在非IE浏览器（如Firefox）下，当容器的高度为auto，且容器的内容中有浮动（float为left或 right）的元素，在这种情况下，容器的高度不能自动伸长撑开以适应内容的高度...浮动的元素，高度会塌陷，而高度的塌陷使我们页面后面的布局不能正常显示。...35、有一个高度自适应的div，里面有两个div，一个高度100px，希望另一个填满剩下的高度。
BFC 的区域不会与 float box 折叠。BFC 的高度也会受到浮动元素的影响，浮动元素参与计算。 ?...主要作用 创建独立的渲染环境 防止因浮动导致的高度塌陷 防止上下相邻的外边距折叠 如何创建 BFC html 元素本身就是 BFC display === flow-root/inline-block/...，高度由该行框内最大高度的行内框决定 content area 内容区域，高度是 font-size 和 padding 的和 containing box 包含框，最外层的包裹盒子 line-height...行内元素在垂直方向上可按照顶部、底部或基线对其。...这些行盒不会在垂直方向上被分离（除非在其他地方有特殊规定），并且他们也不重叠。 垂直方向上，当行内元素的高度比行盒要低，那么 vertical-align 属性决定垂直方向上的对齐方式。
BFC 也就是常说的块格式化上下文，这是一个独立的渲染区域，规定了内部如何布局，并且这个区域的子元素不会影响到外面的元素，其中比较重要的布局规则有内部 box 垂直放置，计算 BFC 的高度的时候，浮动元素也参与计算...等，当按百分比设定它们时，依据的也是父容器的宽度，而不是高度。...否则，如果float不是none，框是浮动的，display根据下表进行调整 否则，如果元素是根元素，display根据下表进行调整 其他情况下display的值为指定值 总结起来：绝对定位、浮动...来控制元素时就会出错 6、在实际应用中，class常被用到文字版块和页面修饰上，而id多被用在宏伟布局和设计包含块，或包含框的样式。...3.js写在尾部，主要是因为js主要扮演事件处理的功能，一方面很多操作是在页面渲染后才执行的。
背景颜色background-color 背景颜色的值可以是英文，可以是十六进制颜色值，可以是rgb 背景图片background-image 背景图片的大小可以和容器大小不一样 背景图片不会占位 如果容器大...设置当对象的内容超过其指定高度及宽度时如何显示内容 visible默认值，内容不会被修剪，会呈现在元素框之外 hidden内容会被修剪，并且其余内容是不可见的 scroll内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容...间距margin 内填充padding 浮动float 浮动原理：浮动使元素脱离文档普通流，漂浮在普通流之上的 浮动元素依然按照其在普通流的位置上出现，然后尽可能的根据设置的浮动方向向左或向右浮动，...知道浮动元素的外边缘遇到包含框或者另一个浮动元素为止，且允许文本和内联元素环绕它 浮动会产生块级框，而不管该元素本身是什么 清除浮动带来的影响 clear清除浮动 none不清除,left不允许左边有浮动对象...如果不存在这样的包含块，则相对于body元素，即相对于浏览器窗口 position:absolute div{ width: 200px; height: 200px; border
注意设置 absolute 属性的元素在标准流中不占位置。 **fixed:固定定位。**位置被设置为 fixed 的元素，可定位于相对于浏览器窗口的指定坐标。不论窗口滚动与否，元素都会留在那个位置。...如果有多个浮动元素，浮动元素会按顺序排下来而不会发生重叠的现象。 如果有多个浮动元素，后面的元素高度不会超过前面的元素，并且不会超过包含块。...3.3 清除浮动的方法 方法1：给父级div定义 高度 原理：给父级DIV定义固定高度（height），能解决父级DIV 无法获取高度得问题。...link支持使用Javascript控制DOM去改变样式；而@import不支持。...当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部。
注意： 重置浏览器窗口大小查看 "justify" 是如何工作的。...baseline对齐（当图片和文字或输入框等在一行但是没对齐时，可以设置此属性，来调整） text-decoration:none text-decoration 属性用来设置或删除文本的装饰...此外，浮动的框之后的block元素元素会认为这个框不存在，但其中的文本依然会为这个元素让出位置。 浮动的框之后的inline元素，会为这个框空出位置，然后按顺序排列。 示例代码： <!...整段代码就相当于在浮动元素后面跟了个宽高为0的空div，然后设定它clear:both来达到清除浮动的效果。 之所以用它，是因为，你不必在html文件中写入大量无意义的空标签，又能清除浮动。...元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。
效果： 还可在调试窗口调整颜色来测试（调试窗口：页面上右键--检查，或者f12） 调整好之后，把调整后的值复制到我们的css属性里面就行了 还可以通过hover来设置鼠标移动上去变颜色...先看这个问题昂：在给c2的div标签加上浮动之前是下面这样的效果： 我并没有给c1那个div标签设置高度，但是你发现c1这个div标签是有高度的，这是因为里面两个c2div我设置了高度了，这两个...div将c1这个div标签撑起来了 当我们加上浮动之后，你再看这个c1的div标签的高度：发现c1这个div的高度没有了，显示的高度是1.99，是因为我给它设置了边框，上下边框加起来正好2px，...浮动元素会生成一个块级框，而不论它本身是何种元素。 关于浮动的两个特点： 浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。...z-index 值表示谁压着谁，数值大的压盖住数值小的， 只有定位了的元素，才能有z-index,也就是说，不管相对定位，绝对定位，固定定位，都可以使用z-index，而浮动元素float不能使用z-index
6 如何居中div？如何居中一个浮动元素？如何让绝对定位的div居中？...清除浮动的方式？ 浮动元素碰到包含它的边框或者浮动元素的边框停留。由于浮动元素不在文档流中，所以文档流的块框表现得就像浮动框不存在一样。浮动元素会漂浮在文档流的块框上。...div，通过改变此div的属性使两个盒子分属于两个不同的BFC，以此来阻止margin重叠*/ overflow: hidden; //此时已经触发了BFC属性。...等，当按百分比设定它们时，依据的也是父容器的宽度，而不是高度。...41 有一个高度自适应的div，里面有两个div，一个高度100px，希望另一个填满剩下的高度 外层div使用position：relative；高度要求自适应的div使用position: absolute
6 如何居中div？如何居中一个浮动元素？如何让绝对定位的div居中？...该布局模型的目的是提供一种更加高效的方式来对容器中的条目进行布局、对齐和分配空间。在传统的布局方式中，block 布局是把块在垂直方向从上到下依次排列的；而 inline 布局则是在水平方向来排列。...清除浮动的方式？ 浮动元素碰到包含它的边框或者浮动元素的边框停留。由于浮动元素不在文档流中，所以文档流的块框表现得就像浮动框不存在一样。浮动元素会漂浮在文档流的块框上。...等，当按百分比设定它们时，依据的也是父容器的宽度，而不是高度。...41 有一个高度自适应的div，里面有两个div，一个高度100px，希望另一个填满剩下的高度 外层div使用position：relative；高度要求自适应的div使用position: absolute
;">xxx 说明：在Chrome下，第一、四个div的高度为30px（由于inline-block 形成了一个行框盒子，从而出现了幽灵空白节点，其受到字体行高属性影响...css中基线示意.png ex是CSS中的一个相对单位，指的是小写字母x的高度，1ex指小写字母x的高度。 内联元素默认是基线对齐的，而基线通常指x的底部。...只有元素是“充分利用可用空间”时，margin才可以改变元素的可视尺寸。..."高度塌陷"可以让跟随的内容和浮动元素在一个水平线上；行框盒子如果和浮动元素的垂直高度有重叠，则行框盒子在正常定位下只会跟随浮动元素，而不会产生重叠。这是实现文字环绕的重要两点！...即，设置了clear属性的元素自身如何如何，而不是让float元素如何如何。
两者的区别 请看优雅的 Demo 通过以上实例发现，其实我们想要达到的效果更确切地说是闭合浮动，而不是单纯的清除浮动，在footer上设置clear：both清除浮动并不能解决wrap高度塌陷的问题。...浮动框不属于文档中的普通流，当一个元素浮动之后，不会影响到块级框的布局而只会影响内联框（通常是文本）的排列，文档中的普通流就会表现得和浮动框不存在一样，当浮动框高度超出包含框的时候，也就会出现包含框不会自动伸高来闭合浮动元素...在实际布局中，往往这并不是我们所希望的，所以需要闭合浮动元素，使其包含框表现出正常的高度。 绝对定位就不多说了，不在本文讨论范围之内，下回分解。...boxes)，而匿名框中的display:table-cell可以创建新的BFC，换句话说，触发块级格式化上下文的是匿名框，而不是display:table。...fieldset 元素在www.w3.org里目前没有任何有关这个触发行为的信息，直到HTML5标准里才出现。
比如，display: block 块级元素默认高度会霸占父节点 100% 宽度，而高度默认会由子内容决定，类似于 Android 中的 wrap_content。...，比如某张图片本来居中显示，但当窗口缩小到比图片还小时，图片就根据窗口进行缩小，此时就可结合 max-width 来实现。...所以此时看到的效果就是，浮动元素 div3 是在块级元素 div2 下。...应用： 弹窗框 压盖（角标之类） fixed 固定定位 固定定位参考点就是浏览器的左上角，不管页面如何发生滑动，元素显示的位置都没有发生改变。...而浮动的元素不能用 从父现象：父亲怂了，儿子再牛逼也没用。意思是，如果父亲1比父亲2大，那么，即使儿子1比儿子2小，儿子1也能在最上层。
行内标签和块标签有哪些以及都有什么特点 块标签 每一个块属性标签都是从新的一行开始，而且之后的元素也都会从新的一行开始 可以设置宽度、高度，行高，距顶部距离，距底部距离 块属性标签的宽度假如不做设置，会直接默认为父元素宽度的...div 如何实现垂直居中？...清除浮动方法总结 父元素高度塌陷了 在父元素的最后加一个冗余元素并为其设置clear:both 采用伪元素，这里我们使用:after 使用overflow属性，给父元素添加overflow:hidden...||auto 保持浮动层水平垂直居中 利用定位与margin：auto 如何保持文字水平垂直居中 text-align:center; /*水平居中*/ div{ width:200px;height...: 数字输入框 range :特定范围内的数值选择器(通过拖动滚动条改变一定范围内的数字) color : 颜色选取器 只在 Opera 和 Blackberry 浏览器 datetime : 显示完整日期和时间
行内元素（如a标签），在文档流中的时候因为是行内元素所以无法设置宽高；而当设置了绝对定位或者浮动，会生成块级框（即变成块级元素），所以就可以设置宽高了。 2.img标签是行内元素为什么可以设置宽高？...可以使用水平内边距、边框和外边距调整它们的间距。但是，垂直内边距、边框和外边距不影响行内框的高度。...主要有两个影响， （1）浮动的框脱离文档的普通流，浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。可参见：CSS 浮动。 （2）在 CSS 中，任何元素都可以浮动。...浮动元素会生成一个块级框，而不论它本身是何种元素。这样的话就可以对浮动后的行内元素应用高和宽的属性了。可参见：CSS float 属性。...9.如何让浮动的div水平居中? 元素垂直居中： 对于页面上的块级元素，我发现设置CSS样式margin:auto 0;或者vertical-align:middle;都没有效果。
1 文档流 要了解css的布局，就要先了解什么是文档流。文档流就是HTML元素的一种排列规则。 而正常文档流就是在不用样式控制之下，html元素的默认排版方式。...这是浮动文字 经过对比可以发现，在不使用浮动之前，三个盒子都按照块元素的正常文档流排列方式，并且父元素的高也随着他们的内容大小变化。...而一旦使用了浮动元素。...，边框这些属性在浮动元素之间，仅仅是在它们之间是生效的。...我能不能让它不要忽视浮动元素，而是排在浮动元素之后呢？能不能让段落标签不这么紧贴着，而是以边框为基准排在浮动元素后面呢？答案是肯定的。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
