您现在的位置是：网站首页> 编程资料编程资料
详解CSS的结构与层叠以及格式化DIV重叠 CSS让DIV层叠 两个DIV或多个DIV顺序重叠加CSS3图片可展开扇形效果的层叠展开特效源码权重和层叠规则决定了CSS样式优先级采用CSS定位属性实现Html中DIV层叠与悬浮CSS层叠样式表的层叠是什么意思(自我理解)CSS中的属性选择符和结构化伪类CSS技术的出现实现结构与表现分离CSS样式按整洁易懂的结构组织将CSS按照层叠式结构化重新组织与构建
2021-09-05
805人已围观
简介 这篇文章主要介绍了CSS的结构与层叠以及格式化,是学习CSS布局的基础知识,需要的朋友可以参考下
结构与层叠
每个合法的文档都会生成一个结构树，有了结构树元素的祖先、属性兄弟元素等等创建选择器来选择元素，这是CSS继承的核心。继承是从一个元素向后代元素传递属性值所采用的机制。面向一个元素使用哪些值时，用户代理不仅要考虑继承，还要考虑特殊性，另外需要考虑声明本身的来源，这个过程就叫层叠。
本文讨论3种机制之间的关联：特殊性、继承和层叠。
特殊性
同一元素可以使用不同的方法来选择元素。但是每个规则，用户代理会计算选择器的特殊性，并将这个特殊性附加到规则的个个声明。如果一个元素有两个或多个冲突的属性声明，那么最高特殊性的声明会胜出。
特殊性计算规则：
1）对于选择器中给定的各个ID属性值，加0100
2）对于选择器中给定的各个类属性值，属性选择或伪类，加0010
3）对于选择器中给定的各个元素和伪元素，加0001
4）结合符和通配选择器对特殊性没有任何贡献
对于重叠的选择，如果符合多种规则，这些规则将累加计算。0011特殊性优于0001，0100优于0022。这是因为值从左向右排序。
题目：下列选择器同指向同一元素，容器的颜色应该为什么颜色？
- div.container div.bright{background: #996699;}
- div.bright{background: #99CCCC;}
- div#id216{background: #FFFF66;}
- #id216{background: #CC3333;}
- div.container div#id216{background: #333399;}
考察特殊性，答案#333399;特殊性分别为：0022，0011，0101，0100，0112
注意：特殊性不是解决冲突的全部，实际上，所有样式冲突的解决都由层叠来处理。
到目前为止，我们只见过以0开头的特殊性。一般地，第一个0是为内联样式声明保留的，他比所有其他声明的特殊性都高。
有时候某个声明可能非常重要，超过了所有其他声明，并允许在这些声明的结束分号之前插入！important来标志。
- #id216{ background: #990033 !important;}
当样式表增设！important时，内联冲突样式将会失效，以important为准。
继承
基于继承机制，样式不仅应用到指定的元素，还会应用到它的后代元素。
一般地，大多数框模型属性（包括外边距、内边距、背景和边框）都不能继承，其原因是因为如果这些属性被继承，文档将会变得更加混乱。
继承的值根本没有特殊性，甚至连0特殊性都没有。（0特殊性比无特殊性要强）
不加区别地使用通配选择器可能存在的问题之一，由于他能匹配任何袁术，所以通配选择器往往有一种短路继承的效果。
层叠
如果特殊性相等的两个规则相同同时应用到同一个元素，浏览器会通过层叠解决这个冲突。
css所基于的方法就是让样式层叠在一切，这是通过结合继承和特殊性做到的。层叠的规则：
1）找出所有相关的规则，这些规则都包含与一个给定元素匹配的选择器。
2）按显式权重对应用到该元素的所有声明排序。标志!important的规则的权重要高于没有 !important标志的规则。声明权重考虑5级：（权重有大到小顺序依次为）
1.读者的重要声明
2.创作人员的重要声明
3.创作人员的正常声明
4.读者的正常声明
5.用户代理声明
3）按特殊性对应用到给定元素的所有声明排序。有较高特殊性的元素权重要大于有较低特殊性的元素。
4）按出现顺序对应用到给定元素的所有声明顺序。一个声明在样式表或文档中越后出现，他的权重就越大。。如果样式表中有导入的样式表，一般认为出现在导入样式表中的声明在前，在主样式表中的所有声明在后。
注意：多类选择符，以空格分割不同的类名，但是根据层叠的规则，元素中的类的顺序无关，而是与样式表声明的位置有关。
red和blue和yellow设置冲突的背景颜色属性，但是，box最终显示的颜色和html中这三个类顺序无关。声明样式表如下：
- .red{background: red;}
- .yellow{background: yellow;}
- .blue{background: blue;}
box最终显示的颜色以声明的顺序有关，最终显示为blue背景颜色。
基本视觉格式化
css包含如此开放、如此强大的一个模型，对于这样一个模型，可以有无数种方法结合应用各种属性，可以得到的效果数不胜数。
基本框
css假定每个元素都会生成一个或多个矩形框，这称为元素框。各元素中心有一个内容区，这个内容区周围包含可选的内外边距和边框（之所以认为是可选，是因为可以设置为0）。
对不同类型的元素格式化时存在着差别。块级元素的处理就不同于行内元素，而浮动元素和定位元素也分别有各自不同的表现。
包含块
每个元素都相当于包含块摆放；可以这么说，包含块就是一个元素的”布局上下文“，css2.1定义了一系列规则来确定元素的包含块。
常用名词：
正常流，文本从左向右，从上向下显示。要让一个元素不在正常流中，唯一的办法是使之成为浮动或定位元素。
非替换元素，如果元素的内容包含在文档中，则称之为非替换元素。
替换元素，指用作为其他内容占位符的一个元素。替换元素的一个经典例子就是img元素。它只是指向一个图像文件，这个文件将插入到文档流中该img元素本身的位置。
块级元素，这是指段落、标题或div之类的元素。这个元素在正常流中，会在其框之前和之后生成”换行“，所以处于正常流中的块级元素会垂直摆放。通过声明display:block，可以让元素生成块级框。
行内元素，这是指strong或span之类的元素。这个元素不会在之前或之后生成”行分割符“，它们是块级元素的后代。通过声明display:inline，可以让元素生成vyige行内框。
根元素，位于文档流顶端的元素，在html文档中，这就是元素html。
块级元素-水平格式化
width并不是指可见元素框的宽度，如果为一个元素声明了内编剧、边框以及宽度，他们指定的宽度则是左外边界到右外边界的距离。可以通过设定box-sizing：content-box来模拟ie6的怪异现象，即使得元素的宽度为实际设置的宽度width，而不是width+padding+border。
使用auto
A paragraph
假设padding-left(padding-right)、margin-left(margin-rignt)、width，border-left-right(border-right)七个属性的和必须等与外容器的宽度，即400px，设置左边距auto，那么左边距的宽度将是200px。就是说，auto是用来”填补“所需的距离，使元素的总宽度等于其包含块的width。
- .container1 p{background: #ccc;margin-right: auto;
- margin-left: auto;width: 100px; }
效果如下：
因此，如果设置margin-left和margin-right都为auto：
将两个外边距设置为相等的长度是将元素居中的一个正确方法，这不同于使用text-align(text-align只应用与块级元素的内联内容，所以将元素的text-align设置为center并不能将这个元素居中)。
如果设置width和marin-left都为auto，那么margin-left将会被设置为0：
- .container1 p{
- background: #ccc;margin-right: 100px;
- margin-left: auto;width: auto;
- }
设置负外边距，
- .container1 p{
- background: #ccc;margin-right: 100px;
- margin-left: -100px;width: auto;
- }
width的值为400px-100px（+margin-left）+100px。因为marin-left的为负值，因此content的实际width要加上(负的margin-left值)
块级元素-垂直格式化
一个元素默认的高度由其内容决定。高度还会受内容宽度的影响；段落越窄，相应地就会越高，以便容纳其中所有的内联内容。
如果正常流中一个块元素的margin-top或margin-bottom设置为auto，它会自动计算为0.遗憾的是，如果值为0，就不能你容易地将正常流元素在其包含块中居中。也就是说，如果将一个元素的上、下外边距设置为auto。实际上它们都会被重置为0，使得元素没有外边距。
合并垂直外边距
垂直格式化的另一个重要方面是垂直相邻外边距的合并。这种合并性为只应用于外边距。如果元素有内边距和边框，它们绝对不会合并。
举个例子，一个无序列表，其列表项前后相邻。
- li{margin-top: 10px;margin-bottom: 15px;}
每个列表项有10px的上外边距和15px的下外边距。不过，在显示这个列表时，相邻列表项之间的距离是15px而不是25px：
之所以会这样，是因为相邻外边距会沿着竖起轴合并。换句话，两个外边距中较小的一个会被比较大的一个合并。
如果相邻有多个外边距，也会出现合并，如列表的最后。对前面的例子进行补充，假设应用一下规则：
最后列表合并外边距为28px.
如果其中一个外边距为负数，那么实际外边距就是最大的外边距减去负数外边距的绝对值。
行内元素的行布局
对于行内元素来说，这没有块级元素那么简单和直接，块级元素知识生成框，通常不允许其他内容与这些框并存。
文本使用text-align进行两端对其时，word-spacing的值可能被覆盖（如果letter-spacing是一个长度值，这个值不能被覆盖）。
基本术语和概念
匿名文本，是指所有未包含在行内元素中的字符串
I'msohappy!
序列中I'm和happy!都是匿名文本。
em框，em框在字体中定义，也成为字符框。实际的字形可能比其em框更高或更矮。
内容区，在非替换元素中，内容区可能有两种。内容区可以是元素中个字符的em框串在一起构成的框，也可以是由元素中字符字形描述的框。
行间距，是font-size值和line-height值只差，这个差实际上要分为两半，分别应用到内容区的顶部和底部。为内容区增加的这两部分分别称为版兼具。行内距只应用于非替换元素。
行内框，这个框通过向内容区增加行间距来描述。对于非替换元素，袁术行内框的高度刚好等于line-height的值。对于替换元素，元素行内框的高度则恰好等于内容区的高度，因为行间距不应用到替换元素。
行框，这个包含该行中出现的行内框的最高点和最低点的最小框。换句话说，行框的上边界要位于最高行内框的上边界，而行框的底边要放在最低行内框的下边界。
1）内容区类似于一个块级元素的内容框。
2）行内元素的背景应用于内容区及所有内边距。
3）行内元素的边框要包围内容区及所有内边距和边框。非替换元素的内边距、边框和外边距对行内元素或其生成的框没有垂直效果；也就是所它们不会影响元素行内框的高度。
4）替换元素的外边距和边框确实会影响该元素行内框的高度，相应地，也可能影响包含该元素的边框高度。
行内非替换元素
假设有一下标记：
- This is textsome of which emphasized,plus other text
which id
larger than the surrounding text.
效果如下：
大多数文本的font-size都是12px，只有一个行内非替换元素中的文本大小是24px。不过，所有文本的line-height都是12px，因为line-heght是一个继承属性。因此strong元素的line-height也是12px。
由于行内框的顶端在元素内容区内部，所以元素的内容落在了行框的外边，实际上与其他行框发生了重叠。其结果是，文本行看上去很不规则。
- This is textsome of which emphasized,plus other text
which id
larger than the surrounding text.
把元素上升4像素，折回同时提升其内容区和行内框。由于strong元素的行内框顶端已经是行中的最高点，对垂直对其的这个修改会把整个行框的顶端也向上移4像素。效果如图：
垂直对齐影响行框高度。
如果line-height不使用单位，而是用值小于1的数值，那么line-height将会相对于元素本省font-size设置行高，而不是相对于父元素设置。
相关内容
- 使用CSS实现图片分割效果的简单方法介绍纯CSS3圆形图片鼠标滑过背景视觉差动画特效源码CSS+JS实现带方向感的鼠标滑过图片3D动画特效源码纯HTML5+CSS3制作图片旋转基于CSS剪裁图片实现js幻灯片效果特效源码使用CSS实现中间镂空的图片遮罩效果CSS3实现的为图片添加旋转背景特效源码HTML5+CSS3实现的图片多种滤镜特效源码CSS基础教程十九之CSS图文混排，图像签名，多图拼接和图片特效 基于CSS3实现图片模糊过滤效果基于html5和css3制作炫酷网站带缩略图的图片画廊
- CSS视差滚动效果CSS的ul和li实现横向排列和去掉li的点CSS3实现滚动条动画效果代码分享CSS3实现鼠标中轮滚动树生长过程特效源码CSS怎么隐藏滚动条(三种方法)纯css3实现的圆球顺时针滚动效果源码使用CSS3来实现滚动视差效果的教程css实现图片横向排列滚动效果
- 深入解析CSS中z-index属性对层叠顺序的处理
- CSS编写时的高性能以及高维护性代码优化建议总结CSS代码编写的一些性能优化技巧总结网站性能优化之CSS无图片技术CSS优化总结——网络性能与语法性能建议 CSS 网站性能优化笔记对css性能优化的一点看法JavaScript和CSS的优化提高网站性能CSS性能优化提高css性能的方法
- CSS自定义绿色复选框按钮样式HTML+CSS实现单选框、复选框美观的样式利用CSS3实现单选框动画特效示例代码纯css3实现效果超级炫的checkbox复选框和radio单选框CSS3实例分享--超炫checkbox复选框和radio单选框CSS3实现的表单单选框、复选框特效CSS3实现复选框动画特效示例代码 使用CSS实现页面复选框的方法纯CSS实现自定义单选框和复选框功能
- CSS定位“十字架”之水平垂直居中利用CSS3的flexbox实现水平垂直居中与三列等高布局Flexbox制作CSS布局实现水平垂直居中的简单实例浅析CSS实现水平垂直同时居中的5种思路让DIV水平垂直居中的两种完美方法推荐CSS解决页面图片水平垂直居中问题的方法全面总结使用CSS实现水平垂直居中效果的方法HTML对于元素水平垂直居中的探讨关于html水平垂直居中的问题小结DIV或者DIV里面的图片水平与垂直居中的方法
- CSS3哪些新特性值得称赞 结合CSS3的布局新特征谈谈常见布局方法
- 基于DOM+CSS3实现OrgChart组织结构图插件 css3中transform属性实现的4种功能详解CSS3.0(Cascading Style Sheet) 层叠级联样式表纯CSS3实现div按照顺序出入效果CSS3实现列表无限滚动/轮播效果css3 利用transform-origin 实现圆点分布在大圆上布局及旋转特效CSS3实现的侧滑菜单CSS3实现的3D隧道效果用CSS3画一个爱心css3 实现文字闪烁效果的三种方式示例代码六种css3实现的边框过渡效果
- 基于CSS3实现立方体自转效果 纯CSS3实现的3D立方体旋转动画特效源码HTML5/CSS3实现的立方体翻转3D全屏焦点图特效源码采用CSS3实现的表面颜色可渐变3D立方体动画特效源码彩色3D立方体扭曲CSS3动画可在不同角度扭曲、放大和缩小css3 transform 3d 使用html5+css3创建动态旋转的3d立方体css3 transform 3d 使用css3创建动态3d立方体(html5实践)
- CSS3中几个新增加的盒模型属性使用教程css3弹性盒模型（Flexbox）详细介绍css3弹性盒模型实例介绍深入讲解CSS中盒模型的用法3DSMAX打造漂亮的花瓣型纸盒模型教程css盒模型和块级、行内元素深入理解CSS 盒模型（Box Model）的学习和理解CSS 盒模型、块状元素与内联元素、CSS选择器CSS教程之CSS盒模型CSS教程:通过实例学习和理解CSS盒模型CSS网页布局的核心内容:CSS盒模型
