摘要：解决方法使用负将其往下拉或者设置为来避免生成行框。对于浮动或绝对定位元素，计算值与声明值可能不同。浮动元素必须包含其所有的浮动子元素使用属性清除浮动时，例如，实际上是为设置属性的元素增加。
- 仅作用于块级元素的属性
width，height（这俩可用于替换元素）
text—align， text—indent， vertical—align（也可用于表单元格和替换元素如input/img）
background-position(注意百分数和绝对值的区别，同时这个属性会影响平铺效果)
［基本视觉格式化］
1. 框模型：
－ background包括内容框、内边距和边框，外边距通常是透明的，显示父元素的背景；
2. 水平属性：
－子元素的左（右）margin，左（右）padding，左（右）border和内容框width的值加起来必须等于父元素的内容框width；
－如果设置margin—left,margin-right,width（只有这三个值可以设置为auto）之中的两个为特定值，余下的那个为auto，则设置为auto的属性值会自动计算以填充父元素的width：
＊ 如果三个值都为非auto的特定值（over constrained），那么margin-right会被强制设置为auto； ＊ 如果margin中某一个设置为auto，另一个设置特定值，width设置为auto，则设置为auto的margin会被置为0； ＊ 如果width设置为特定值，两个margin设置为auto，则会**水平居中**！！
－ 父元素的padding会跟子元素的margin叠加；
－ 非替换元素的默认宽度由其内容决定；为替换元素设置width为auto（如img），那么其值将会是其本来的宽度；如果只设置width，那么height会等比例变化，反之亦然。
3. 垂直属性：
与水平属性类似，不同点／注意点：
－ 如果将margin-top或margin-bottom设置为auto，则会被默认为0，因此不能垂直居中囧，除非用特定值显示设置；
－ 使用百分数设置子元素height时，如果没有显示设置父元素的height值，那么子元素height会默认为auto；
－ 如果父元素只包含子块级元素，那么父元素的height将不包含子元素的margin，除非父元素有border或padding！！为什么呢，因为垂直方向上的margin会重叠。由此看来，要避免重叠，就需要使用border和padding来讲相邻margin隔开哦；
行内元素：
－ line-height（行框高度）对于替换元素而言，就是其内容的高度。因此替换元素无行间距（line-height － font-size）；对于非替换元素而言，是其内容框高度加上行间距;
－ 对于只包含文本的行，能改变其行间距离的只有line-height, font-size, vertical-align。
非替换元素：
－ 当line-height值小于font-size时可能会产生文本重叠，为避免此现象可设置line-height为1 em（需设置font-size）或1（根据font-size的缩放因子），此外它会继承父元素的计算值而不是字面值，除非显式定义；
－ 行内元素的内边距、外边距和边框都不会影响行高。其中外边距只有左右有效，上下无效；但如有正的内边距且有背景，则有可能覆盖邻行（仍不影响行高和布局，就是说设置了内边距行高也不会变高）；
替换元素：
－ 行内元素的内边距、外边距和边框会影响行高，且上下margin有效。
－ 为img设置一个height值，会影响行高，但其line-height的有效值不会改变，有些属性例如vertical-align仍然是使用line-height有效值进行计算；
－ 如果一个替换元素是一个块级元素或表格单元格中的唯一后代，那么就会被放到基线上，例如div中的img。解决方法：使用负margin将其往下拉或者设置display为block来避免生成行框。
4. 其他
－ display属性：
* 设置元素display属性为inline-block时， 其表现类似行内替换元素；如果没有显式定义width，则它会自动收缩以适应内容宽度，也就是说会使其宽度刚好能包含所有内容且没有多余； * 设置元素display属性为run-in，表示如果该元素后面是一个display为block的元素，则该元素表现为行内元素放在后面那个元素的开头，否则其本身将显示为块级元素。 * 对于浮动或绝对定位元素，计算值与声明值可能不同。除inline-table之外大部分声明值（包括inline，inline-block，run-in）都会被计算为block。
［border、margin、padding］
margin
－ 如果使用百分数，则计算值是相对于父元素的width值（not height）而言。哪怕是margin-top也是！
border
－ 不指定的值会使用默认值, e.x.:
{ border: solid 1px dotted;
border: 1px;
}
此处第二条border设置会覆盖第一条，由于在第二条中没有设置border-style，默认为none，所以将不会有border；
［浮动和定位］
浮动：
浮动元素的margin不会合并；
假设要使一个非替换元素浮动，需要为其指定一个width，否则会按浏览器规定的最小width浮动；
浮动元素会生成一个块级框，而不论这个元素本身是什么；
浮动元素的顶端不能比其父元素或之前所有浮动元素的顶端更高；
当浮动元素与文档流中的元素重叠时：
（1）如果是块级元素，则其内容会在浮动元素之上，而边框和背景则在之下；
（2）如果是行内元素，则其内容、边框和背景都在浮动元素之上，即不会被覆盖。
这与元素出现在文档流中的先后顺序无关。
浮动元素必须包含其所有的浮动子元素；
使用clear属性清除浮动时，例如clear: left，实际上是为设置clear属性的元素增加margin-top。因此，有可能即使该元素设置了margin-top，也会与浮动元素紧紧相连，除非margin-top的值足够大。要使两者之间有间隔，可以设置浮动元素的margin-bottom。
定位：
绝对定位
*如果父元素是块级元素且position的值为非static，则子元素absolute定位是其外边距外界相对于父元素的边框界定区域定位；
*通过指定top, bottom, left, right的值，可以隐式指定元素的宽高；
*除bottom外被设置成auto的属性，会默认与元素静态位置的对应值一致；
*水平／垂直方向上，当元素过度受限时（left和right的值以及元素水平方向的各尺寸之和不等于父元素width），会忽略right／bottom的值。如果有设置为auto的属性，则改变其值来满足前等式，如果两个则平分，所以可以用来做居中（margin设为auto，其他值均为0）！
*假设一个元素有设置z-index值，那么其所有子元素都是相对于这个叠放上下文来放置，并且css2.1中规定所有元素绝对不能放在其叠放上下文的背景之下，但可以在其内容之下；
固定定位
*right的值总是等于－left，bottom的值总是等于－top。
持续更新中。。。。。
本文参考 《css权威指南》
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/116406.html
摘要：剖析新版，为你所用大漠第二个议题是大漠老师的，大漠老师是的站长，著有图解核心技术与案例实战。自定义属性大漠老师多次强调，这叫做自定义属性，不叫变量。 前言 对于我来讲，虽然做前端那么多年，但对 CSS 的探索非常少，很多 CSS 知识还是在毕业之前积累下来。揣着一本《精通CSS:高级Web标准解决方案(第二版)》（现在出第三版了，这是我在 CSS 道路上的启蒙书）在前端路上走了这么几...
摘要：高度模型浅识为的简写，简称为块级格式化上下文，为浏览器渲染某一区域的机制，中只有和中还增加了和。并非所有的布局都会在开发中使用，但是其中也会涉及一些知识点。然而在不同的纯制作各种图形纯制作各种图形多图预警 一劳永逸的搞定 flex 布局 寻根溯源话布局 一切都始于这样一个问题：怎样通过 CSS 简单而优雅的实现水平、垂直同时居中。记得刚开始学习 CSS 的时候，看到 float 属性不...
摘要：前言这是系列最后一篇，本文主要总结了的用法，以及最后对函数进行抽象。一个多说无益，还是上代码来得实在还记得编程艺术中的总结一中那个无聊的根据元素在节点树里的位置来设置样式的吧现在可以用属性直接更改样式了。 前言：这是CSS－DOM系列最后一篇，本文主要总结了className的用法，以及最后对函数进行抽象。 －－－－－－－－－－－－－－－－－－我是分割线－－－－－－－－－－－－－－－－...
摘要：前言这是系列最后一篇，本文主要总结了的用法，以及最后对函数进行抽象。一个多说无益，还是上代码来得实在还记得编程艺术中的总结一中那个无聊的根据元素在节点树里的位置来设置样式的吧现在可以用属性直接更改样式了。 前言：这是CSS－DOM系列最后一篇，本文主要总结了className的用法，以及最后对函数进行抽象。 －－－－－－－－－－－－－－－－－－我是分割线－－－－－－－－－－－－－－－－...
阅读 1209·2021-09-30 09:47
阅读 3760·2021-09-06 15:02
阅读 1768·2021-09-01 10:46
阅读 2355·2019-08-30 15:52
阅读 589·2019-08-29 15:28
阅读 1869·2019-08-29 15:08
阅读 1144·2019-08-29 13:28
阅读 2566·2019-08-29 12:19
