CSS手记(二)

通常情况下,直接指定的样式总是优先于继承的样式,但是通过使用inherit可以把情况反过来。


font-size继承的值是数值而不是百分数


font-variant 的small-caps,文本源中出现大写字母,就显示一个更大的大写字母,如果出现小写字母,就出现一个小一些的大写字母。


text-indent 文本缩进 该属性可以继承


text-align只能应用于块级元素(如段落),所以无法将行内的一个锚矩阵而不影响其它部分。

text-align只影响内部内容,而不影响控制元素的对齐


line-height属性是指文本行极限直接的距离,line-height值与字体大小之差就是行间距

line-height减去字体大小除以2就是到内容顶部和底部的距离


line-height值从父属性上继承时,要从父属性计算,而不是在子元素上计算

如果指定一个数,那么是继承这个数,而不是计算值


vertical-align只能用于行内元素和替换元素,如图像或表单输入元素,该属性不能继承,若为一个数值则向上移动该数值


所有垂直对其的元素都会影响行高,行框要足以包含最高行内框的顶端和最低行内框的底端。


word-spacing子元素会继承父元素的计算值


在一个元素上使用text-deciration设置颜色,则整个元素都有一致的元素装饰,就算子元素不同。如果修改,只能显式设置。


基本视觉格式化

要让一个元素脱离正常的文档流,只能将其设置为浮动或定位元素

一个正常流中块级元素框的水平部分综合就等于父元素的width

若margin-left,width,margin-right都设置值,则margin-right则变为auto
若marigin-left和margin-right都为auto,则元素居中(这不同于text-align,text-align只对块级元素的内联元素有效)
若三个值都为auto,则两个margin都为0,width会尽可能宽

由于水平外边距不会合并,父元素的内边距、 边距和外边距可能影响子元素

替换元素的width若为auto,则元素宽度为内容固有宽度


如果替换元素的width不同于其固有快读,那么height值也会成比例变化,除非height自己也显式设置一个值,height同理。

width和height都是内容区的高度和宽度,而不是可见元素框的高度和宽度。


正常流中一个块元素的margin-top和margin-bottom设置为auto,则自动重置为0.


如果height设置了一个百分数,则该值是包含块height的一个百分数


垂直格式化的外边距和进行相邻合并,以大者为准

如果垂直外边距都为负值,则浏览器会取两个外边距绝对值的最大值,如果一正一负,则会用正外边距减去负外边距。


列表项出现的标志实际上不是内容区的一部分


多行行内元素不是每一行都达到父段落的边界。


对于非替换行内元素,其高度为line-height,对于替换元素,元素行内框的高度恰好等于内容区的高度。


line-height是相对于元素本身的font-size设置的,而不是相对于父元素。


行内元素的边框边界由font-size而不是line-height控制。

外边距不会应用到行内元素(首尾两行除外)


尽管内外边距不影响行高,但是他们影响一个元素的布局,可能将文本推离其左右两端。


固有高度的替换元素可能比行框高要搞,这不会改变line-height值,包括替换元素本身,只会让行框的高度恰好能包含替换元素。


vertical-align的百分数值要根据line-height计算


内边距和边框会影响行框的高度


使用display改变的只是元素的显示角色,而不是基本值。也就是说,不会将段落生成的行内框并不会针对让其变为一个行内元素。


如果一个元素生成run-in框,而该框后面是一个块级框,那么该run-in元素将成为块级框开始处的行内框。

run-in依旧从其父元素继承属性,而不是它显示的位置。


只有当run-in后面跟着一个块级框时候才会有效,否则run-in会变成一个块级框



width和height无法应用于行内元素。


margin的百分数是相对于父元素的width值,所以如果父元素的width以某种方式发生改变


对于只包含文本的行,能改变行间距离的属性只有line-height、font-size和vertical-align。


为替换元素设置外边距会影响行高,而左右方面只是照常。


如果一个边框没有样式,那么就不必存在

边框会画在背景之上

border-style的默认值为none,所以要边框出现,则要显式声明一个边框样式

border-color为transparent时为透明


不论行内元素的边框指定怎样的宽度,元素的行高都不会改变


边框的左右边不会遮挡文字,而上下边会





评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值