有何作用 绝对定位的奇淫技巧 CSS特性 vertical-align为什么时灵时不灵 生效条件 只能应用在display为inline、inline-block、inline-table、table-cell...inline-table） overflow 计算值(Computed)不为 visible 的块元素 display 值为 flow-root 的元素 contain 值为 layout、content...或 paint 的元素 弹性元素（display 为 flex 或 inline-flex 元素的直接子元素） 网格元素（display 为 grid 或 inline-grid 元素的直接子元素）...使用案例 清除浮动 .container{ /* overflow: hidden; */ /* position: absolute; */ /* float...写法比较简洁，建议尝试一下。
行，列，行组，列组和单元格可以在它们周围绘制边框（CSS 2.2中有两个边框模型）。开发者可以在单元格中垂直或水平对齐数据，并可以将一行或者一列的所有单元格数据对齐。...row1和row2之间的边界是什么颜色（黑色或蓝色）和厚度（1px或3px）？我们在关于边界冲突解决的部分讨论这一点 。...单元格可能会跨越多行或多列。（虽然CSS 2.2没有定义如何确定跨越行或列的数量，但用户代理可能对源文档有特殊的理解; CSS的未来更新可能提供了一种用CSS语法表达这种理解的方法。）...因此，一个表可以使用左右两个'auto' margins实现居中。 CSS的未来更新可能会引入使表格自动适应其包含块的方法。 ?...如果该属性值为'auto'（对于'display：table'和'display：inline-table'）意味着使用自动表格布局算法。
display: inline-list-item 我在MDN上面看到有这个属性，但是我实际尝试发现这个属性是不能使用的，在 http://caniuse.com/#search=in… 上面也没有找到这个元素的兼容性...，所以应该是不能使用的，支持度全无 display: flex flex是一种弹性布局属性 注意，设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。.../blo… 实例：实现一个固定宽度但内容可变的列表 目前我有一个需求，有一个列表页，左侧固定，右侧固定，总宽度固定，但是左侧的内容可能会增加，右侧的内容也可能会增加，要求平时一行展示，增加的时候两行展示...flex布局，所以为了保证良好的运行，建议还是使用display: box，box和flex布局的主要差别如下: 容器属性 display: box 该显示样式的新值可将此元素及其直系子代加入弹性框模型中...run-in: 此元素会根据上下文作为块级元素或内联元素显示； grid: 栅格模型，类似block inline-grid: 栅格模型，类似inline-block ruby, ruby-base
行内级元素：inline-level element，display 为 inline、inline-block、inline-table 的元素称为行内级元素。...原子行内级盒子的内容不会拆分成多行显示。 盒子的概念 盒子有不同的类型，不同类型的盒子的格式化方法也有所不同。盒子的类型取决于 CSS display 属性。... 运行效果： 行内级元素 如果一个元素的 display 属性为 inline、inline-block 或 inline-table，则称该元素为行内级元素。...块级元素：display 为 block、list-item 或 table 时 行内级元素： display 属性为 inline、inline-block 或 inline-table 元素如何定位...此处仅指定位和位置计算而言，元素在文档树中仍然与其他元素有父子或兄弟等关系。 绝对定位的元素，位置会使用 top、bottom、left 和 right 相对其包含块进行计算。
通常我们使用块级格式化上下文（BFC）就能解决。 什么是BFC？...什么情况下会创建BFC 根元素或包含根元素的元素 浮动元素（元素的 float 不是 none） 绝对定位元素（元素的 position 为 absolute 或 fixed） 行内块元素（元素的 display...table、row、tbody、thead、tfoot的默认属性）或 inline-table） overflow 值不为 visible 的块元素 display 值为 flow-root 的元素（...[image] 但事实上，float中的文字已经脱离文档，如果文档流文字过少，浮动元素就会溢出父元素边缘。...overflow属性，但某些情况下我们不需要滚动条，此时滚动条就变成了这种方式的副作用，因此display有个新的属性flow-root可以在任何需要创建BFC场景下使用，它并且不会带来任何副作用。
这里就引出了浮动定位 2、浮动定位 float float属性 取值为 left/right 这个属性原本不是用来布局的，而是用来做文字环绕的，但是后来人们发现做布局也不错，就一直这么用了，...overflow:hidden, 语义应该是溢出:隐藏，按道理说，子元素浮动了，但依然是在父元素里的，而父元素高度塌陷，高度为0了，子元素应该算是溢出了，为什么没有隐藏，反而撑开了父元素的高度？...为什么display:table也能清除浮动，原理是什么？...inline-level box， display属性为inline, inline-block, inline-table的元素，会生成inline-level box。...总结 清除浮动的方式有很多种，但是实现的原理主要是靠clear属性，和触发新的BFC，通过详细的解释与比较，最后两种内容生成的方式是比较推荐使用的，如果需要考虑margin重叠的问题，就用方案7，不考虑就用方案
正文-CSS属性样式表 了解了 CSS 具体的各种工作原理、使用方式、选择器规则、层叠算法等之后，那么该来学习的也就是 css 都支持哪些属性样式表了。...解决方法有很多种，说白了就是一点：脱离默认的文档流布局方式 方式有以下几种： display:inline-block（行内块元素） 浮动 float: left/right 绝对定位 position...8.浮动 float float 属性值通常会用到这两个：left right 浏览器默认是按照标准文档流从上到下，从左到右布局绘制各个元素，此时这些元素可以说位于同一个层面，但当碰到元素设置了 float... 这是因为多个浮动元素之间并排显示的前提的有足够的空间让这些元素并排，所以通常对于浮动元素的宽度设置是通过百分比来设置，确保多个并排的元素即使窗口发生变化仍旧可以并排布局。 ...也就是说在父类元素中，不管是使用了相对定位，绝对定位，固定定位之后，都可以用来作为后代绝对定位的参考元素。 但通常都是使用子绝父相的模式，其他模式并没有什么意义。
内在盒子负责内容显示。 如 display: inline-table; 外在盒子就是inline，内在盒子就是table。...外在盒子决定了元素要像内联元素一样并排在一排显示，内在盒子则决定了元素可以设置宽高、垂直方向的margin等属性。如下图 ?...padding padding是四大金刚中最稳定的了，少见有什么异常。...border-style属性的值有none/solid/dashed/dotted/double等，基本看名字就能猜出什么来了: ?...两个上下相邻的BFC之间折不折叠要看具体情况，如display: inline-block float: left不会折叠，而overflow: hidden则会折叠。
你真的了解margin吗？你知道margin有什么特性吗？你知道什么是垂直外边距合并？margin在块元素、内联元素中的区别？什么时候该用padding而不是margin？你知道负margin吗？...你知道负margin在实际工作中的用途吗？常见的浏览器下margin出现的bug有哪些？…… Margin是什么 CSS 边距属性定义元素周围的空间。...总结下来margin 属性可以应用于几乎所有的元素，除了表格显示类型（不包括 table-caption, table and inline-table）的元素，而且垂直外边距对非置换内联元素（non-replaced...IE6中双边距Bug： 发生场合：当给父元素内第一个浮动元素设置margin-left（元素float:left）或margin-right（元素float:right）时margin加倍。...为什么display:inline可以解决这个双边距bug，首先是inline元素或inline-block元素是不存在双边距问题的。
就CSS2而言`display:inline|inline-block|inline-table|table-cell|table-column-group`的元素对应inline-level box,...采用floats或absolute positioning作为positioning scheme时，或display:inline-block/table-cell/table-caption/flex...solid 1px red;} .float{float:left;width:200px;} ?...虽然 div#left 浮点了，但 div#right 的left outer edge还是与 div#container 的left content edge相接触。...,移行时前后各一个.如：cap-tain,ex-pose等. 6．当两个音节间只有一个辅音字母时,如果该辅音字母前的元音字母按重读开音节的规则发音,该辅音字母移至下一行.如：fa-ther等.但如果元音按重读闭音节的规则发音
CSS 并不是面试重点考察的领域，但如果能在 CSS 领域有自己的见解和经验，会使自己更加脱颖而出。 1 介绍一下标准的CSS的盒子模型？与低版本IE的盒子模型有什么不同的？...类似于优先级机制：position：absolute/fixed优先级最高，有他们在时，float不起作用，display值需要调整。float 或者absolute定位的元素，只能是块元素或表格。...（即每个字占的空间大了 1 px，但点阵没变），于是略显稀疏。 28 margin和padding分别适合什么场景使用？...写在body标签后由于浏览器以逐行方式对HTML文档进行解析，当解析到写在尾部的样式表（外联或写在style标签）会导致浏览器停止之前的渲染，等待加载且解析样式表完成之后重新渲染，在windows的IE...div class="right"> 圣杯布局和双飞翼布局解决问题的方案在前一半是相同的，也就是三栏全部float浮动，但左右两栏加上负margin让其跟中间栏div并排，以形成三栏布局
块级元素可以使用 float: left; 或 float: right; 来左右对齐，使用 auto-margins 中间对齐。而行内元素使用 text-align 属性来对齐。...清除浮动 我们使用 clear 属性来清除浮动，有3个可选值: left: 在左侧不能出现浮动元素，处于左侧所有浮动元素的最下方 right: 在右侧不能出现浮动元素，处于右侧所有浮动元素的最下方 both...并且参与 block fomatting context; inline-level box: display 属性为 inline, inline-block, inline-table 的元素，会生成...反之也如此 计算 BFC 的高度时，浮动元素也参与计算 会生成 BFC 的元素 根元素 float 属性不为 none position 为 absolute 或 fixed display 为 inline-block...table-cell, table-caption, flex, inline-flex overflow 不为 visible overflow: hidden overflow: hidden 最常使用的地方有三处
多个div元素为了并排显示，连这种事都干得出！ 接下来，我们来说一个非常非常重要的知识点，那就是浮动布局。那么，到底什么是浮动呢，还是以案例为主吧。...那么，有没有什么办法，让多个块级元素在同一行显示呢？当然是有的，我们可以采用浮动布局，也就是说，让这些div元素“飘起来”，注意哦，飘起来以后，有两个方向，一个是向左漂浮，另一个则是向右漂浮。...刚才，我们弄了三个div元素，都设置了float:left，于是，他们就脱离了原本的轨道，术语叫做脱离标准流。其实就是把自己的位置给腾出来了，来个例子吧。...首先，为了方便起见，我们把float：left，float:right这两个样式也封装一下，作为一个通用的工具样式，先把上一节课的tool.css拷贝过来： ?...那么，在我们开发网页的时候，我们肯定不希望这样的事情发生吧，还记得我们当初采用浮动布局的目的是什么吗，是不是要让几个块级元素并排显示呀？
伪元素由两个冒号::开头，然后是伪元素的名称。 使用两个冒号::是为了和伪类（CSS2中并没有区别）做区分。考虑兼容性CSS2中已存在的伪元素仍可以使用单引号:语法。...低版本IE的盒子模型有什么不同的？...（类似 ） 其他属性 display: list-item | run-in display: list-item 此元素会作为列表显示 display: run-in 此元素会根据上下文作为块级元素或内联元素显示...可能原因： 使用import方法导入样式表 将样式表放在页面底部 有几个样式表，放在html结构的不同位置 原理：当样式表晚于结构性html加载，当加载到此样式表时，页面将停止之前的渲染。...此样式表被下载和解析后，将重新渲染页面，也就出现了短暂的花屏现象。 解决方法: 使用link标签将样式表放在文档head中 什么是外边距重叠？ 重叠的结果是什么？
margin-right右边距失效 由 Ghostzhang 发表于 2017-06-22 00:52 更新于 2017-06-21 19:00 不小心看了下知乎，万年潜水，突然看到有一个邀答，问题在这里...从Chrome的开发者工具来看，子元素的margin只有top、left、bottom有效，右边距失效。...试着移动下子元素： 可以看到子元素的外边距位置是随着子元素移动的，所以才会出现了移到右边后右边的外边距没有显示的结果。...的状态： 总结下： 默认状态下的块级元素右边距是无效的 设置float（除了none以外的值）、display (inline-block，inline-flex，inline-grid，inline-table...通过设置display（inline-block，inline-flex，inline-grid，inline-table）可以让右边距生效。
在使用过程中为了统一认识，使用box-sizing:border-box比较好。 上文提到了可以显式设置width、height，目前也存在一些设置width/height不起作用的元素。...inline元素的margin和padding属性，水平方向的padding-left, padding-right, margin-left, margin-right都产生边距效果；但竖直方向的padding-top...布局主要靠两种属性，float和postion float float有几个属性值，left、right，none等，使用float后元素会脱离文档流，使元素display:block,float不会对其上方的元素产生影响...float的属性值有none、left、right，有几个要点： 只有横向浮动，并没有纵向浮动。...浮动元素的前一个元素不会受到任何影响（如果你想让两个块状元素并排显示，必须让两个块状元素都应用float）。
3.1.2 一定要两个div并排显示，并不被覆盖，解决办法，a. ...解决办法：给需要浮动显示的子元素加上浮动 1.2.2 两个兄弟元素，需要并排无间隙显示：第一个 float:left;。...，有内联元素或者注释，并且和父级元素宽度相差不超过3px-->会出现小尾巴（文字自动被复制到内联元素中） 解决办法1：两个浮动元素中间避免出现内联元素或注释 解决办法1：...3.1.2 一定要两个div并排显示，并不被覆盖，解决办法，a. ...解决办法：给需要浮动显示的子元素加上浮动 1.2.2 两个兄弟元素，需要并排无间隙显示：第一个 float:left;。
本文第一部分翻译自Vertical-Align: All You Need To Know，就是之前在CSS上下左右居中参考资料部分提到的待翻译的那一篇 其余部分是对原文的技巧总结 一.译文 经常需要让一些并排显示的元素竖直对齐...CSS提供了一些可选方案，有时通过float来解决，有时用position: absolute，有时甚至用手动添加margin或padding这样的脏方法，我不很喜欢这些方案。...这些优势让它成了一个有价值的选项 vertical-align的怪脾气 但vertical-align有时候真的很讨厌，用起来会有些挫败感，似乎有一些神秘的规则。...因为大多数竖直对齐（除了top和bottom）都是相对其baseline的，导致该行所有其它元素也都跟着调整位置 一些示例： 如果一行有个高元素横跨整个高度，vertical-align对它就不起作用了...内联元素之间的所有空白字符都被合并成一个空格，就是这个空格碍事，例如想让两个内联元素仅挨在一起并都设置width: 50%的话，就没有足够的空间容纳两个50%的元素和一个空格。
诸如 、 等不能包含子元素的标签，不支持 ::before 和 ::after 正常情况下也符合上一条规则，但加载失败后其 ::before 和 :...content 直接使用字符串 使用ASCII编码转义的特殊字符 (字符表) a:visited:before { content: "\2713 "; /*显示一个对勾 √ */ } 使用属性...…、/\ 等辅助类字符，无法被正确处理成首字符，会和第一个“有效字符”连带处理 首字符前面不能有图片或者inline-table之类的元素存在 ::before也会参与到::first-letter的规则中..., vertical-align（只有当float为none的时候）这些CSS属性们 换句话说，如果尝试使用visibility:hidden或者display:none隐藏::first-letter...都是可以的，且支持多层嵌套 如果是inline-block, inline-table，会直接无效 如果是flex，则直接选择了下一行(纯文本而非相邻的子元素)的首字符 ?
清除浮动有哪些方式？ 12、什么是 BFC？ 13、对 CSS 的新属性有了解过的吗？ 14、讲一讲 CSS 的权重和优先级？ 15、介绍 Flex 布局，flex 是什么属性的缩写？...24、css sprite是什么,有什么优缺点？ 25、display,float,position的关系？ 26、css中link与@import的区别？ 27、CSS3新特性有哪些？...top，right，bottom，left等属性不会被应用。 relative：对象遵循正常文档流，但将依据top，right，bottom，left等属性在正常文档流中偏移位置。...如果display为none，那么position和float都不起作用，这种情况下元素不产生框 否则，如果position值为absolute或者fixed，框就是绝对定位的，float的计算值为none...（3）当两个外边距一正一负时，折叠的结果是两者相加的和。 33、CSS属性content有什么作用？有什么应用？
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
腾讯会议
云直播
对象存储
