css基础---第二篇
2015-10-02 14:01
531 查看
上一篇: http://blog.csdn.net/u011344924/article/details/48784141
一、特殊性,继承和层叠
1.特殊性
选择器的特殊性由选择器本身的组件确定,特殊性值表述为4个部分,如:0,0,0,0
对于选择器中给定的各个ID属性值,加0,1,0,0
对于选择器中给定的各个类属性值,属性选择或伪类,加0,0,1,0
对于选择器中给定的各个元素和伪元素,加0,0,0,1
结合符和通配选择器对特殊性没有任何贡献
重要声明 !important标志为重要,!important总是放在声明的最后,即分号前面。如果放错位置,整个声明都将无效。
所以优先级为 !important > 内联声明 > ID > class > 元素 > 通配
2.继承
样式不仅应用到指定的元素,还会应用到它的后代元素。当然并不是所有属性都可以继承。
一般地,大多数框模型属性(包括外边距,内边距,背景和边框)都不能继承。
3.层叠
按权重和来源排序:读者的重要声明>创作人员的重要声明>创作人员的正常声明>读者的正常声明>用户代理声明
按特殊性排序:如果权重相同则按特殊性排序,最特殊的声明最优先
按顺序排序:如果权重,来源,特殊性完全相同,那么在样式表中后出现的一个会胜出
二、文本属性
text-indent文本缩进:元素的第一行缩进一个给定长度,一般用于块级元素。该属性可以继承
text-align水平对齐:只用于块级元素,用于设置元素中的文本行相互间的对齐方式。
line-height行高:指定文本行之间的垂直间隔。该值从父元素继承时,要从父元素计算,而不是在子元素上计算。使用line-height缩放因子解决继承问题。
vertical-align垂直对齐:基线,上标下标,底端,顶端,居中,百分数,长度
word-spacing字间隔:修改字间间隔
letter-spacing字母间隔:修改字母间隔
text-transform文本转换:capitalize对每个单词首字母大写,uppercase,lowercase,none
text-decoration文本装饰:该属性不能继承
text-shadow文本阴影
white-space处理空白符
direction文本方向:ltr,rtl,inherit
三、视觉模型
1.基本框
盒子模型的宽度为:content+padding+border+margin
设置一个元素的宽width一般为设置content的大小
auto只能用来设置margin,width和height的值,可以用auto弥补实际值与所需总和的差距。
如果两个外边距都设置为auto,则会将它们设置为相等的长度,因此将元素在其父元素中居中(width=?px;margin-left:auto;margin-right:auto)
(text-align只应用于块级元素的内联内容)
可以看出,text-align:center居中与margin:0 auto居中的差异。margin:0 auto居中主要是将整个块级元素在其父元素中的居中,而text-align:center居中主要是将块级元素中的内容在改元素中居中显示。
合并垂直外边距:相邻外边距会沿着竖轴合并,即两个外边距中较小的一个会被较大的一个合并
如果一个边框没有样式,就没有宽度。如果要创建一个不可见的边框,就引入边框颜色值transparent,这个值用于创建有宽度的不可见的边框。
四、浮动和定位
1、浮动:
浮动元素的包含块是其最近的块级祖先元素。
浮动元素会生成一个块级框,而不论这个元素本身是什么。
特定规则控制着浮动元素的摆放:
1.浮动元素的左(或右)外边界不能超出其包含块的左(或右)内边界。
2.浮动元素的左(或右)外边界必须是源文档中之前出现的左浮动(或右浮动)元素的右(左)外边界,除非后出现的浮动元素的顶端在先出现浮动元素的底端下面。
3.左浮动元素的右外边界不会再其右边右浮动元素的左外边界的右边。一个右浮动元素的左外边界不会在其左边任何左浮动元素的右外边界的左边。
这条规则可以防止浮动元素的相互重叠。
4.一个浮动元素的顶端不能比其父元素的内顶端更高。如果一个浮动元素在两个合并外边距之间,放置这个浮动元素时就好像在两个元素之间有一个块级父元素。
5.浮动元素的顶端不能比之前所有浮动元素或块级元素的顶端更高。
6.如果源文档中一个浮动元素之前出现另一个元素,浮动元素的顶端不能比包含该元素所生成框的任何行框的顶端更高。
限制了元素的向上浮动。
7.左(或右)浮动元素的左边(右边)有另一个浮动元素,前者的右外边界不能在其包含块的右(左)边界的右边(左边)。
8.满足其他约束条件下的前提下,浮动元素必须尽可能高地放置。
9.左浮动元素必须向左尽可能远,右浮动元素则必须向右尽可能远。位置越高,就会向右或向左浮动得越远。
当浮动元素与正常流中内容重叠时规则:
1.行内框与一个浮动元素重叠时,其边框,背景和内容都在该浮动元素"之上"显示
2.块框与一个浮动元素重叠时,其边框和背景在该浮动元素"之下"显示,而内容在浮动元素"之上"显示
清除浮动:
1.浮动元素的后面一个元素添加clear:both
2.浮动元素的父元素添加overflow:hidden
3.clearfix
2.定位position
static 元素框正常生成。块级元素生成一个矩形框,作为文档流的一部分,行内元素则会创建一个或多个行框,置于其父元素中。
relative 元素框偏移某个距离。元素仍保持其未定位前的形状,它原本所占的空间仍保留。
absolute 元素框从文档流完全删除,并相对于其包含块定位,包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭,就好像该元素原来不存在一样。元素定位后生成一个块级框,而不论原来它在正常流中生成何种类型的框。
fixed 元素框的表现类似于将position设置为absolute,不过其包含块是视窗本身。
元素的可见性:
visibility:hidden会置为不可见,处于不可见状态时,元素还是会影响文档的布局。元素还在那,只是你看不见它。
而display:none,元素不仅不显示,还会从文档中删除,所有对文档布局没有任何影响。
一、特殊性,继承和层叠
1.特殊性
选择器的特殊性由选择器本身的组件确定,特殊性值表述为4个部分,如:0,0,0,0
对于选择器中给定的各个ID属性值,加0,1,0,0
对于选择器中给定的各个类属性值,属性选择或伪类,加0,0,1,0
对于选择器中给定的各个元素和伪元素,加0,0,0,1
结合符和通配选择器对特殊性没有任何贡献
重要声明 !important标志为重要,!important总是放在声明的最后,即分号前面。如果放错位置,整个声明都将无效。
所以优先级为 !important > 内联声明 > ID > class > 元素 > 通配
2.继承
样式不仅应用到指定的元素,还会应用到它的后代元素。当然并不是所有属性都可以继承。
一般地,大多数框模型属性(包括外边距,内边距,背景和边框)都不能继承。
3.层叠
按权重和来源排序:读者的重要声明>创作人员的重要声明>创作人员的正常声明>读者的正常声明>用户代理声明
按特殊性排序:如果权重相同则按特殊性排序,最特殊的声明最优先
按顺序排序:如果权重,来源,特殊性完全相同,那么在样式表中后出现的一个会胜出
二、文本属性
text-indent文本缩进:元素的第一行缩进一个给定长度,一般用于块级元素。该属性可以继承
text-align水平对齐:只用于块级元素,用于设置元素中的文本行相互间的对齐方式。
line-height行高:指定文本行之间的垂直间隔。该值从父元素继承时,要从父元素计算,而不是在子元素上计算。使用line-height缩放因子解决继承问题。
vertical-align垂直对齐:基线,上标下标,底端,顶端,居中,百分数,长度
word-spacing字间隔:修改字间间隔
letter-spacing字母间隔:修改字母间隔
text-transform文本转换:capitalize对每个单词首字母大写,uppercase,lowercase,none
text-decoration文本装饰:该属性不能继承
text-shadow文本阴影
white-space处理空白符
direction文本方向:ltr,rtl,inherit
三、视觉模型
1.基本框
盒子模型的宽度为:content+padding+border+margin
设置一个元素的宽width一般为设置content的大小
auto只能用来设置margin,width和height的值,可以用auto弥补实际值与所需总和的差距。
如果两个外边距都设置为auto,则会将它们设置为相等的长度,因此将元素在其父元素中居中(width=?px;margin-left:auto;margin-right:auto)
(text-align只应用于块级元素的内联内容)
可以看出,text-align:center居中与margin:0 auto居中的差异。margin:0 auto居中主要是将整个块级元素在其父元素中的居中,而text-align:center居中主要是将块级元素中的内容在改元素中居中显示。
合并垂直外边距:相邻外边距会沿着竖轴合并,即两个外边距中较小的一个会被较大的一个合并
如果一个边框没有样式,就没有宽度。如果要创建一个不可见的边框,就引入边框颜色值transparent,这个值用于创建有宽度的不可见的边框。
四、浮动和定位
1、浮动:
浮动元素的包含块是其最近的块级祖先元素。
浮动元素会生成一个块级框,而不论这个元素本身是什么。
特定规则控制着浮动元素的摆放:
1.浮动元素的左(或右)外边界不能超出其包含块的左(或右)内边界。
2.浮动元素的左(或右)外边界必须是源文档中之前出现的左浮动(或右浮动)元素的右(左)外边界,除非后出现的浮动元素的顶端在先出现浮动元素的底端下面。
3.左浮动元素的右外边界不会再其右边右浮动元素的左外边界的右边。一个右浮动元素的左外边界不会在其左边任何左浮动元素的右外边界的左边。
这条规则可以防止浮动元素的相互重叠。
4.一个浮动元素的顶端不能比其父元素的内顶端更高。如果一个浮动元素在两个合并外边距之间,放置这个浮动元素时就好像在两个元素之间有一个块级父元素。
5.浮动元素的顶端不能比之前所有浮动元素或块级元素的顶端更高。
6.如果源文档中一个浮动元素之前出现另一个元素,浮动元素的顶端不能比包含该元素所生成框的任何行框的顶端更高。
限制了元素的向上浮动。
7.左(或右)浮动元素的左边(右边)有另一个浮动元素,前者的右外边界不能在其包含块的右(左)边界的右边(左边)。
8.满足其他约束条件下的前提下,浮动元素必须尽可能高地放置。
9.左浮动元素必须向左尽可能远,右浮动元素则必须向右尽可能远。位置越高,就会向右或向左浮动得越远。
当浮动元素与正常流中内容重叠时规则:
1.行内框与一个浮动元素重叠时,其边框,背景和内容都在该浮动元素"之上"显示
2.块框与一个浮动元素重叠时,其边框和背景在该浮动元素"之下"显示,而内容在浮动元素"之上"显示
清除浮动:
1.浮动元素的后面一个元素添加clear:both
2.浮动元素的父元素添加overflow:hidden
3.clearfix
2.定位position
static 元素框正常生成。块级元素生成一个矩形框,作为文档流的一部分,行内元素则会创建一个或多个行框,置于其父元素中。
relative 元素框偏移某个距离。元素仍保持其未定位前的形状,它原本所占的空间仍保留。
absolute 元素框从文档流完全删除,并相对于其包含块定位,包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭,就好像该元素原来不存在一样。元素定位后生成一个块级框,而不论原来它在正常流中生成何种类型的框。
fixed 元素框的表现类似于将position设置为absolute,不过其包含块是视窗本身。
元素的可见性:
visibility:hidden会置为不可见,处于不可见状态时,元素还是会影响文档的布局。元素还在那,只是你看不见它。
而display:none,元素不仅不显示,还会从文档中删除,所有对文档布局没有任何影响。
相关文章推荐
- haslayout初步认知
- CSS hack 如何区分所有IE浏览器和非IE浏览器
- 一、HTML和CSS基础--HTML+CSS基础课程--第1部分
- CSS3的关键帧动画(KeyframeAnimations)简介
- CSS盒子模型
- CSS定位:普通流定位属性和浮动
- CSS实现背景透明,文字不透明,兼容所有浏览器
- web前端,实现上下翻页,支持鼠标滑动翻页h5+css+jq
- CSS文本和字体
- W3school学习笔记之CSS3
- CSS轮廓,突出元素
- CSS表格
- CSS列表
- CSS控制a标签链接的四种状态
- CSS样式背景样式
- CSS基础:基本选择器分类和使用
- CSS基础:text-overflow:ellipsis溢出文本
- HTML,CSS,font-family:中文字体的英文名称 (宋体 微软雅黑)
- 运用CSS实现float:center 居中浮动li
- css 两栏自适应布局--左边固定宽度 右边自适应