CSS--绝对定位解析

position : absolute; left : 10px || 10% || auto 默认值:auto left right的百分数相对于包含块的宽度 top bottom 相对于包含块的高度 定位是相当于最近的非static祖先元素或者根元素 在left right都声明的情况下: 计算公式 left+margin-left+border+width+padding+margin-right+right=包含块width+padding 下面只深入解析left right都声明的情况 ①定位元素没指定宽度,指定了left和right,没指定margin 元素在包含块水平居中,width被拉伸

CSS绝对定位实现水平/垂直居中

1.元素定宽 left:10%; right:10%; margin:auto; width : 100px; left和right根据实际情况来设置 百分比是参照父元素的宽度的。也可以为定值 如果margin-left margin-right都不为auto,则right会被重新计算 当父元素宽度变化到没有left+right+元素的width的和大时,位置会发生偏差 2.元素不定宽 left:10%; right:10% 元素宽度会随父元素宽度变化 同理也能实现垂直居中 对于定高: bottom : 10%; top:10%

CSS--深入解析float规则

float:left || right ||none || inhert 无继承性 left : 元素向父元素的左边浮动 确定float元素的位置可以参照一下几点规则: ①浮动元素的外边距不会合并,浮动指浮动元素的外边距与包含块(最近的祖先块级祖先元素)的内容框(即不包含padding)左边(右边)对齐。 ②浮动元素不会重叠,除非margin为负值.浮动元素也不会超出包含块内容框,除非margin为负值或者浮动元素的宽和高比包含块的大,只有这两种情况会超出。 ③在文档结构中,如果浮动元素前是块级元素,则浮动元素不会和块级元素在一行。如果浮动元素后是块级元素,则后面的块级元素会忽略浮动元素,会和浮动元素在一行(但是此时浮动元素会覆盖块级元素的背景,还会影响块级元素文字的位置,例如left浮动时,块级元素的文字是不能在最左边显示的)。如果浮动元素前面或者后面是行内元素(

CSS样式优先级

当样式声明发生冲突时,各个样式声明优先级是如何判断的 1.样式声明后面有!important 的是老大 如果声明为!important的出现冲突,则就近原则,即在后面声明的会覆盖前面的。 2.内联的样式是爸爸 3.id选择器教你做人 4.类选择器,属性选择器 ,伪类 5 标签选择器 伪元素 6.通配符* 7.用户代理(浏览器默认) 8.继承的属性 当优先级相同时,遵循就近原则,后声明的会覆盖前面声明的

深入解析vertical-align line-height属性

1.vertical-align 默认值:baseline 即设置该属性的元素的基线(baseline)与行框的基线对齐。W3C上描述的是与父级元素的基线对齐是不准确的,比如出现多行的情况。 生效的对象 : 只对inline,inline-block的元素有效,对块级元素无效。 继承性:无继承性 常用的值: baseline :元素的基线与行框的基线对齐。 middle : 元素所在行内框的中线与行框的中线对齐。 top : 元素所在行内框的顶边与行框内高度最大的行内框顶部对齐 bottom : 元素所在行内框的底边与行框内高度最大的行内框底部对齐 固定值 : 元素的基线相对行框基线向上(为正值时)或向下((为负值时)偏移指定距离。 text-top :元素顶部与行框内的匿名文本的顶部对齐。 text-bottom