CSS核心技术详解-核心概念

Eastboat 发布于2019-05-23 17:34 / 3227人阅读

摘要：每个页面只可能有一个可是窗口，并提供滚动条机制，但是可以嵌入多个页面包含块重点强调这只是一个概念元素的位置和尺寸都相对于一个父元素矩形那么这个矩形就是一个包含块。

CSS解析规则

对空格不敏感，因此每个样式后面都加一个分号，不然会把后面的css当做整体解析，直到遇到分号为止

最后一个属性的分号是可以不加的

当遇见不认识的属性或属性值的时候，将忽略此属性继续解析后面的属性,浏览器只会解析认识的属性

为什么浏览器兼容的时候可以添加前缀");-webkit-box-sizing:border-box box-sizing:border-boxbox-sizeing

当浏览器认识 -webkit-box-sizing属性时，就会使用此属性，如果两个属性都认识，那么box-sizing属性就会覆盖上面的(层叠掉)

复合属性border:1px solid #dedede 如果其中有一个值是错误的，那么整个属性都不会解析

最后一对css规则的大括号可以不闭合

后代选择器中间必须加空格 div p

换行会被当成一个空格

    div
    .box{
            width:200px
        }
        //解析后
    div .box{ 
      width:200px
    }

关键字不可以用引号 color:"orange"

多组选择器中，只要有一个选择器是错误，其他的都不会执行如:#app 0box

@import "style.css"只能写在样式表的前面，写在后面的话会被忽略

替换元素和非替换元素

替换元素是指浏览器根据元素的标签和属性来决定元素的具体内容 img:src input:checkbox ...

非替换元素是指内容直接显示在浏览器的元素 h1 p span

属性值的计算规则

客户端解析文档并构建文档树之后，会给文档中的每一个元素的属性分配一个属性值，这个属性值最终可能进过指定值、计算值、使用值、实际值这四个步骤

继承:存在继承的时候，子元素继承的是父元素的计算值

某些属性会继承父元素的值 如color

div{
    font-size:10px
}
.child{
    font-size:120%  //实际计算后是 10px*120%
}

可继承或不可继承都可以通过inherit属性来继承父元素的某个属性继承的值是父元素的计算值

div{
    width:100px;
    height:200px;
    border:1px solid #dedede;
}
.child{
    width:50px;
    height:inherit;
    border:inherit
}

可视化格式模型

我们熟知的盒子模型是由自身元素产生的，主要是对width、height、padding、border、margin的解释，而可视化格式模型规则是将这些盒子按照一定的规则拜访到页面上也就是规定每个盒子应该怎么去布局，所以可视化格子模型与一个元素的布局息息相关

文档树：html中每个元素都是由子元素，祖先元素，兄弟元素等组成，这种结构非常像树装

视口viewport: 也叫作可视窗口，根据屏幕百分比布局，可视区域改变，布局也会改变。每个页面只可能有一个可是窗口，并提供滚动条机制，但是iframe可以嵌入多个页面

包含块(重点强调:这只是一个概念)

元素的位置和尺寸都相对于一个父元素(矩形),那么这个矩形就是一个包含块。每个元素都会产生一个包含块，但是这个包含块是虚无的，只是个概念

如div>p>span，div生成一个包含块来包含p和span,p也会有一个包含块来包含span,主要作用是给他里面的元素做一个位置上的参照(应该从哪里开始摆放)

包含块不会限制里面元素的大小，若里面的元素超出，则超出的部分溢出,使用overflow:hidden

包含块创建

根元素的包含块叫做初始包含块,具体有客户端创建

定位值为fixed时，包含块有视口创建

定位值为relative,static或者没有设置定位属性，包含块由最近的父元素或组件元素创建

定位值为absolute 则包含块有最近的定位值relative,absolute,fixed创建，如果没有定位的祖先元素，则包含块是初始包含块 5.祖先元素是行内元素时，包含块取决于父元素或祖元素的direction属性

控制框(记录中...)

格式化上下文BFC/IFC(记录中...)

专线服务混合云核心技术 linux核心技术 java核心技术大数据核心技术

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/7384.html

性能优化

摘要：如果你的运行缓慢，你可以考虑是否能优化请求，减少对的操作，尽量少的操，或者牺牲其它的来换取性能。在认识描述这些核心元素的过程中，我们也会分享一些当我们构建的时候遵守的一些经验规则，一个应用应该保持健壮和高性能来维持竞争力。一个开源的前端错误收集工具 frontend-tracker，你值得收藏~ 蒲公英团队最近开发了一款前端错误收集工具，名叫 frontend-tracker ，这款...

liangzai_cool 2019-08-22 13:45 评论0 收藏0
那些年，我的前端/Java后端书单

摘要：全文为这些年，我曾阅读深入理解过或正在阅读学习即将阅读的一些优秀经典前端后端书籍。当然，如果您喜欢这篇文章，可以动手点点赞或者收藏。全文为这些年，我曾阅读、深入理解过（或正在阅读学习、即将阅读）的一些优秀经典前端/Java后端书籍。全文为纯原创，且将持续更新，未经许可，不得进行转载。当然，如果您喜欢这篇文章，可以动手点点赞或者收藏。基础基础书籍进阶进阶阶段，深入学习的书...

Tecode 2019-08-22 18:11 评论0 收藏0
那些年，我的前端/Java后端书单

摘要：全文为这些年，我曾阅读深入理解过或正在阅读学习即将阅读的一些优秀经典前端后端书籍。当然，如果您喜欢这篇文章，可以动手点点赞或者收藏。全文为这些年，我曾阅读、深入理解过（或正在阅读学习、即将阅读）的一些优秀经典前端/Java后端书籍。全文为纯原创，且将持续更新，未经许可，不得进行转载。当然，如果您喜欢这篇文章，可以动手点点赞或者收藏。基础基础书籍进阶进阶阶段，深入学习的书...

idealcn 2019-08-30 15:53 评论0 收藏0
那些年，我的前端/Java后端书单

摘要：全文为这些年，我曾阅读深入理解过或正在阅读学习即将阅读的一些优秀经典前端后端书籍。当然，如果您喜欢这篇文章，可以动手点点赞或者收藏。全文为这些年，我曾阅读、深入理解过（或正在阅读学习、即将阅读）的一些优秀经典前端/Java后端书籍。全文为纯原创，且将持续更新，未经许可，不得进行转载。当然，如果您喜欢这篇文章，可以动手点点赞或者收藏。基础基础书籍进阶进阶阶段，深入学习的书...

fxp 2019-08-02 16:03 评论0 收藏0
那些年，我的前端/Java后端书单

摘要：全文为这些年，我曾阅读深入理解过或正在阅读学习即将阅读的一些优秀经典前端后端书籍。当然，如果您喜欢这篇文章，可以动手点点赞或者收藏。全文为这些年，我曾阅读、深入理解过（或正在阅读学习、即将阅读）的一些优秀经典前端/Java后端书籍。全文为纯原创，且将持续更新，未经许可，不得进行转载。当然，如果您喜欢这篇文章，可以动手点点赞或者收藏。基础基础书籍进阶进阶阶段，深入学习的书...

VPointer 2019-08-16 12:32 评论0 收藏0