侯体宗的博客
  • 首页
  • Hyperf版
  • beego仿版
  • 人生(杂谈)
  • 技术
  • 关于我
  • 更多分类
    • 文件下载
    • 文字修仙
    • 中国象棋ai
    • 群聊
    • 九宫格抽奖
    • 拼图
    • 消消乐
    • 相册

详解CSS的结构与层叠以及格式化

前端  /  管理员 发布于 7年前   452

结构与层叠

每个合法的文档都会生成一个结构树,有了结构树元素的祖先、属性兄弟元素等等创建选择器来选择元素,这是CSS继承的核心。继承是从一个元素向后代元素传递属性值所采用的机制。面向一个元素使用哪些值时,用户代理不仅要考虑继承,还要考虑特殊性,另外需要考虑声明本身的来源,这个过程就叫层叠。

本文讨论3种机制之间的关联:特殊性、继承和层叠。

特殊性

同一元素可以使用不同的方法来选择元素。但是每个规则,用户代理会计算选择器的特殊性,并将这个特殊性附加到规则的个个声明。如果一个元素有两个或多个冲突的属性声明,那么最高特殊性的声明会胜出。

特殊性计算规则:

1)对于选择器中给定的各个ID属性值,加0100

2)对于选择器中给定的各个类属性值,属性选择或伪类,加0010

3)对于选择器中给定的各个元素和伪元素,加0001

4)结合符和通配选择器对特殊性没有任何贡献

对于重叠的选择,如果符合多种规则,这些规则将累加计算。0011特殊性优于0001,0100优于0022。这是因为值从左向右排序。

题目:下列选择器同指向同一元素,容器的颜色应该为什么颜色?

CSS Code复制内容到剪贴板
  1. div.container  div.bright{background: #996699;}   
  2. div.bright{background: #99CCCC;}   
  3. div#id216{background: #FFFF66;}   
  4. #id216{background: #CC3333;}   
  5. div.container div#id216{background: #333399;}  

考察特殊性,答案#333399;特殊性分别为:0022,0011,0101,0100,0112

 

注意:特殊性不是解决冲突的全部,实际上,所有样式冲突的解决都由层叠来处理。

到目前为止,我们只见过以0开头的特殊性。一般地,第一个0是为内联样式声明保留的,他比所有其他声明的特殊性都高。

CSS Code复制内容到剪贴板
  1. <div class ="bright" id ="id216" style="background:#003300"></div>  

有时候某个声明可能非常重要,超过了所有其他声明,并允许在这些声明的结束分号之前插入!important来标志。

CSS Code复制内容到剪贴板
  1. #id216{ background: #990033 !important;}  

当样式表增设!important时,内联冲突样式将会失效,以important为准。

 

继承

基于继承机制,样式不仅应用到指定的元素,还会应用到它的后代元素。

一般地,大多数框模型属性(包括外边距、内边距、背景和边框)都不能继承,其原因是因为如果这些属性被继承,文档将会变得更加混乱。

继承的值根本没有特殊性,甚至连0特殊性都没有。(0特殊性比无特殊性要强)

不加区别地使用通配选择器可能存在的问题之一,由于他能匹配任何袁术,所以通配选择器往往有一种短路继承的效果。

 

层叠

如果特殊性相等的两个规则相同同时应用到同一个元素,浏览器会通过层叠解决这个冲突。

css所基于的方法就是让样式层叠在一切,这是通过结合继承和特殊性做到的。层叠的规则:

1)找出所有相关的规则,这些规则都包含与一个给定元素匹配的选择器。

2)按显式权重对应用到该元素的所有声明排序。标志!important的规则的权重要高于没有 !important标志的规则。声明权重考虑5级:(权重有大到小顺序依次为)

    1.读者的重要声明

    2.创作人员的重要声明

    3.创作人员的正常声明

    4.读者的正常声明

    5.用户代理声明

3)按特殊性对应用到给定元素的所有声明排序。有较高特殊性的元素权重要大于有较低特殊性的元素。

4)按出现顺序对应用到给定元素的所有声明顺序。一个声明在样式表或文档中越后出现,他的权重就越大。。如果样式表中有导入的样式表,一般认为出现在导入样式表中的声明在前,在主样式表中的所有声明在后。

 

注意:多类选择符,以空格分割不同的类名,但是根据层叠的规则,元素中的类的顺序无关,而是与样式表声明的位置有关。

CSS Code复制内容到剪贴板
  1. <div class = "box red blue yellow"></div>  

red和blue和yellow设置冲突的背景颜色属性,但是,box最终显示的颜色和html中这三个类顺序无关。声明样式表如下:

CSS Code复制内容到剪贴板
  1. .red{background: red;}   
  2. .yellow{background: yellow;}   
  3. .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

CSS Code复制内容到剪贴板
  1. <div class ="container1"><p>A paragraph</p></div>   
  2. .container1{width: 400px;border: 1px solid #000;}   
  3. .container1 p{margin-left:auto;margin-right: 100px;width: 100px;}  

假设padding-left(padding-right)、margin-left(margin-rignt)、width,border-left-right(border-right)七个属性的和必须等与外容器的宽度,即400px,设置左边距auto,那么左边距的宽度将是200px。就是说,auto是用来”填补“所需的距离,使元素的总宽度等于其包含块的width。

CSS Code复制内容到剪贴板
  1. .container1 p{background: #ccc;margin-right: auto;   
  2. margin-left: auto;width: 100px; }  

效果如下:

因此,如果设置margin-left和margin-right都为auto:

将两个外边距设置为相等的长度是将元素居中的一个正确方法,这不同于使用text-align(text-align只应用与块级元素的内联内容,所以将元素的text-align设置为center并不能将这个元素居中)。

如果设置width和marin-left都为auto,那么margin-left将会被设置为0:

CSS Code复制内容到剪贴板
  1. .container1 p{   
  2.         background: #ccc;margin-right: 100px;   
  3.         margin-left: auto;width: auto;   
  4.     }  

设置负外边距,

CSS Code复制内容到剪贴板
  1. .container1 p{   
  2.         background: #ccc;margin-right: 100px;   
  3.         margin-left: -100px;width: auto;   
  4.     }  

width的值为400px-100px(+margin-left)+100px。因为marin-left的为负值,因此content的实际width要加上(负的margin-left值)

 

块级元素-垂直格式化

一个元素默认的高度由其内容决定。高度还会受内容宽度的影响;段落越窄,相应地就会越高,以便容纳其中所有的内联内容。

如果正常流中一个块元素的margin-top或margin-bottom设置为auto,它会自动计算为0.遗憾的是,如果值为0,就不能你容易地将正常流元素在其包含块中居中。也就是说,如果将一个元素的上、下外边距设置为auto。实际上它们都会被重置为0,使得元素没有外边距。

 

 合并垂直外边距

垂直格式化的另一个重要方面是垂直相邻外边距的合并。这种合并性为只应用于外边距。如果元素有内边距和边框,它们绝对不会合并。

举个例子,一个无序列表,其列表项前后相邻。

CSS Code复制内容到剪贴板
  1. li{margin-top: 10px;margin-bottom: 15px;}  

每个列表项有10px的上外边距和15px的下外边距。不过,在显示这个列表时,相邻列表项之间的距离是15px而不是25px:

之所以会这样,是因为相邻外边距会沿着竖起轴合并。换句话,两个外边距中较小的一个会被比较大的一个合并。

如果相邻有多个外边距,也会出现合并,如列表的最后。对前面的例子进行补充,假设应用一下规则:

最后列表合并外边距为28px.

如果其中一个外边距为负数,那么实际外边距就是最大的外边距减去负数外边距的绝对值。

 

行内元素的行布局

对于行内元素来说,这没有块级元素那么简单和直接,块级元素知识生成框,通常不允许其他内容与这些框并存。

文本使用text-align进行两端对其时,word-spacing的值可能被覆盖(如果letter-spacing是一个长度值,这个值不能被覆盖)。

基本术语和概念

匿名文本,是指所有未包含在行内元素中的字符串<p>I'm<em>so</em>happy!</p>

序列中I'm和happy!都是匿名文本。

em框,em框在字体中定义,也成为字符框。实际的字形可能比其em框更高或更矮。

内容区,在非替换元素中,内容区可能有两种。内容区可以是元素中个字符的em框串在一起构成的框,也可以是由元素中字符字形描述的框。

行间距,是font-size值和line-height值只差,这个差实际上要分为两半,分别应用到内容区的顶部和底部。为内容区增加的这两部分分别称为版兼具。行内距只应用于非替换元素。

行内框,这个框通过向内容区增加行间距来描述。对于非替换元素,袁术行内框的高度刚好等于line-height的值。对于替换元素,元素行内框的高度则恰好等于内容区的高度,因为行间距不应用到替换元素。

行框,这个包含该行中出现的行内框的最高点和最低点的最小框。换句话说,行框的上边界要位于最高行内框的上边界,而行框的底边要放在最低行内框的下边界。

1)内容区类似于一个块级元素的内容框。

2)行内元素的背景应用于内容区及所有内边距。

3)行内元素的边框要包围内容区及所有内边距和边框。非替换元素的内边距、边框和外边距对行内元素或其生成的框没有垂直效果;也就是所它们不会影响元素行内框的高度。

4)替换元素的外边距和边框确实会影响该元素行内框的高度,相应地,也可能影响包含该元素的边框高度。

 

行内非替换元素

假设有一下标记:

CSS Code复制内容到剪贴板
  1. <p style="font-size:12px;line-height:12px;">   
  2.     This is text<em>some of which emphasized</em>,plus other text<br>which id <strong style ="font-size:24px;">strongly emphasized</strong>and which is<br>larger than the surrounding text.   
  3. </p>  

效果如下:

大多数文本的font-size都是12px,只有一个行内非替换元素中的文本大小是24px。不过,所有文本的line-height都是12px,因为line-heght是一个继承属性。因此strong元素的line-height也是12px。

由于行内框的顶端在元素内容区内部,所以元素的内容落在了行框的外边,实际上与其他行框发生了重叠。其结果是,文本行看上去很不规则。

CSS Code复制内容到剪贴板
  1. <p style="font-size:12px;line-height:14px;">   
  2.     This is text<em>some of which emphasized</em>,plus other text<br>which id <strong style ="font-size:24px;verical-align:4px">strongly emphasized</strong>and which is<br>larger than the surrounding text.   
  3. </p>  

把元素上升4像素,折回同时提升其内容区和行内框。由于strong元素的行内框顶端已经是行中的最高点,对垂直对其的这个修改会把整个行框的顶端也向上移4像素。效果如图:

垂直对齐影响行框高度。

如果line-height不使用单位,而是用值小于1的数值,那么line-height将会相对于元素本省font-size设置行高,而不是相对于父元素设置。

 

 


  • 上一条:
    基于css3 animate制作绚丽的动画效果
    下一条:
    使用CSS实现图片分割效果的简单方法介绍
  • 昵称:

    邮箱:

    0条评论 (评论内容有缓存机制,请悉知!)
    最新最热
    • 分类目录
    • 人生(杂谈)
    • 技术
    • linux
    • Java
    • php
    • 框架(架构)
    • 前端
    • ThinkPHP
    • 数据库
    • 微信(小程序)
    • Laravel
    • Redis
    • Docker
    • Go
    • swoole
    • Windows
    • Python
    • 苹果(mac/ios)
    • 相关文章
    • 使用 Alpine.js 排序插件对元素进行排序(0个评论)
    • 在js中使用jszip + file-saver实现批量下载OSS文件功能示例(0个评论)
    • 在vue中实现父页面按钮显示子组件中的el-dialog效果(0个评论)
    • 使用mock-server实现模拟接口对接流程步骤(0个评论)
    • vue项目打包程序实现把项目打包成一个exe可执行程序(0个评论)
    • 近期文章
    • 智能合约Solidity学习CryptoZombie第三课:组建僵尸军队(高级Solidity理论)(0个评论)
    • 智能合约Solidity学习CryptoZombie第二课:让你的僵尸猎食(0个评论)
    • 智能合约Solidity学习CryptoZombie第一课:生成一只你的僵尸(0个评论)
    • 在go中实现一个常用的先进先出的缓存淘汰算法示例代码(0个评论)
    • 在go+gin中使用"github.com/skip2/go-qrcode"实现url转二维码功能(0个评论)
    • 在go语言中使用api.geonames.org接口实现根据国际邮政编码获取地址信息功能(1个评论)
    • 在go语言中使用github.com/signintech/gopdf实现生成pdf分页文件功能(0个评论)
    • gmail发邮件报错:534 5.7.9 Application-specific password required...解决方案(0个评论)
    • 欧盟关于强迫劳动的规定的官方举报渠道及官方举报网站(0个评论)
    • 在go语言中使用github.com/signintech/gopdf实现生成pdf文件功能(0个评论)
    • 近期评论
    • 122 在

      学历:一种延缓就业设计,生活需求下的权衡之选中评论 工作几年后,报名考研了,到现在还没认真学习备考,迷茫中。作为一名北漂互联网打工人..
    • 123 在

      Clash for Windows作者删库跑路了,github已404中评论 按理说只要你在国内,所有的流量进出都在监控范围内,不管你怎么隐藏也没用,想搞你分..
    • 原梓番博客 在

      在Laravel框架中使用模型Model分表最简单的方法中评论 好久好久都没看友情链接申请了,今天刚看,已经添加。..
    • 博主 在

      佛跳墙vpn软件不会用?上不了网?佛跳墙vpn常见问题以及解决办法中评论 @1111老铁这个不行了,可以看看近期评论的其他文章..
    • 1111 在

      佛跳墙vpn软件不会用?上不了网?佛跳墙vpn常见问题以及解决办法中评论 网站不能打开,博主百忙中能否发个APP下载链接,佛跳墙或极光..
    • 2016-10
    • 2016-11
    • 2017-06
    • 2017-07
    • 2017-08
    • 2017-09
    • 2017-10
    • 2017-11
    • 2018-03
    • 2018-04
    • 2018-05
    • 2018-06
    • 2018-09
    • 2018-11
    • 2018-12
    • 2019-02
    • 2020-03
    • 2020-04
    • 2020-05
    • 2020-06
    • 2021-04
    • 2021-05
    • 2021-07
    • 2021-08
    • 2021-09
    • 2021-10
    • 2021-11
    • 2022-08
    • 2022-09
    • 2022-10
    • 2022-11
    • 2022-12
    • 2023-01
    • 2023-02
    • 2023-03
    • 2023-04
    • 2023-05
    • 2023-06
    • 2023-07
    • 2023-09
    • 2023-10
    • 2023-11
    • 2023-12
    • 2024-01
    • 2024-02
    • 2024-03
    • 2024-04
    Top

    Copyright·© 2019 侯体宗版权所有· 粤ICP备20027696号 PHP交流群

    侯体宗的博客