xlshen / css Goto Github PK

View Code? Open in Web Editor NEW

4.0 4.0 0.0 53 KB

CSS basic notes

css's People

Contributors

Stargazers

Watchers

css's Issues

CSS3 border-image属性

border-image参数：图片URL(border-image-source)、裁剪位置(border-image-slice)、重复性(border-image-repeat)

图片(border-image-source)：使用url()调用，如果没有设置为none
图片裁剪位置(border-image-slice):(1)(2)(3)
(1) 没有单位话专指像素px，例如：border-image:url(border.gif) 27 repeat，这里27就是像素
(2) 支持百分比，百分比的大小是相对应图片而言。假设图片大小为400px*300px，则20%就是裁剪图片的60px 80px 60px 80px的四边大小
(3) 裁剪特性：按照上右下左的顺序进行裁剪，30% 35% 40% 30%意思为在距图像上面30%地方裁剪一下，在距图像右侧35%地方裁剪一下,在距图像下部40%的地方裁剪一下,在距图片左侧30%的地方裁剪一下，把一个图像分成9份
重复性(border-image-repeat)：三个参数供选择，默认stretch(拉伸)，还有round(平铺)和repeat(重复)。参数使用时为0~2个，1个时表示水平和垂直均使用该参数，2个时第一个参数表示水平方向，第二个参数表示垂直方向。

border-image:url(border.png) 30% 40% round repeat; //表示水平方向平铺,垂直方向重复

`border-image`绘制原理简述

1、调用边框图片
border-image的url属性，通过相对或绝对路径链接图片
2、边框图片的剪裁
border-image的数值参数剪裁边框图片，形成九宫格
3、剪裁图片填充边框
边框图片被切割成9部分，以一一对应的关系放到div边框的九宫格中，然后再压缩(或拉伸)至边框
(border-width或border-image-width)的宽度大小
4、执行重复属性
被填充至边框九宫格四个角落的的边框图片是不执行重复属性的。上下的九宫格执行水平方向的重复属性(拉伸或平铺)，左右的格子执行垂直方向的重复属性，而中间的那个格子则水平重复和垂直方向的重复都要执行
5、完成绘制，实现效果

.border_image{
    width:400px;
    height:100px; 
    -moz-border-image:url(image/border.gif) 27/20px repeat; 
    -webkit-border-image:url(image/border.gif) 27/20px repeat; 
}
// 注：27/20px是窝希望边框的宽度为20px，所以在CSS中设置的

CSS层叠上下文和层叠顺序

深入理解层叠上下文和层叠顺序的原理和概念，对在布局中出现的各种“奇怪”的层叠问题都会迎刃而解

层叠上下文

层叠上下文（Stacking Context）是HTML中一个三维概念，如果一个元素拥有了层叠上下文，它在HTML文档中的布局位置（Z轴）就会升高。

层叠水平

层叠水平（Stacking Level）决定了在同一个层叠上下文中元素在Z轴的高度，层叠水平只有在同一层叠上下文中比较才有意义，普通元素的层叠水平优先由层叠上下文决定。

层叠顺序

层叠顺序（Stacking order）代表了元素发生重叠时的垂直显示顺序

//层叠顺序由低到高
层叠上下文(background/border)=>
负z-index=>
block盒子=>
float盒子=>
inline/inline-block盒子=>
z-index:0或z-index:auto或不依赖z-index的层叠上下文=>
正z-index

层叠法则

层叠顺序中高的在上

层叠水平一样，层叠顺序相同时，后面元素在上

层叠上下文特性

层叠上下文元素比普通元素高

层叠上下文可以阻断元素的混合模式

层叠上下文可以嵌套，内部层叠上下文及其所有子元素均受制于外部的层叠上下文

每个层叠上下文元素和兄弟元素独立，也就是当进行层叠变化或渲染的时候，只需要考虑后代元素

每个层叠上下文自成体系，当元素发生层叠的时，整个元素被认为是在父层叠上下文的层叠顺序中

层叠上下文创建

Ⅰ. 页面根元素层叠上下文：“根层叠上下文”
Ⅱ. z-index值为数值的定位元素的传统层叠上下文
Ⅲ. 其他CSS3属性

Ⅰ. 根层叠上下文

页面根元素，也就是滚动条的默认<html>元素。这就是为什么，绝对定位元素在left/top等值定位的时候，如果没有其他定位元素限制，会相对浏览器窗口定位的原因

Ⅱ. 定位元素与传统层叠上下文

对于包含有position:relative/position:absolute的定位元素，以及FireFox/IE浏览器（不包括Chrome等webkit内核浏览器）下含有position:fixed声明的定位元素，当其z-index值不是auto的时候，会创建层叠上下文【webkit浏览器设置position:fixed就会形成层叠上下文】

Ⅲ. CSS3级别层叠上下文

z-index值不是auto的flex项（父元素dispaly:flex|inline-flex）

元素opacity的值不是1

元素transform值不是none

元素mix-blend-mode值不是normal

元素filter值不是none

元素isolation值是isolate

will-change指定的属性值为上面任意一个

元素的-webkit-overflow-scrolling设为touch

层叠顺序和层叠上下文

如果层叠上下文元素不依赖z-index数值，则其层叠顺序是z-index:auto可看成z:index:0级别
如果层叠上下文元素依赖z-index数值，则其层叠顺序由z-index值决定

清除浮动元素

父元素应用overflow:hidden以强制它包围浮动元素
让父元素浮动起来
给父元素的最后添加一个非浮动的子元素,然后清除该子元素(①. div元素②. 使用clearfix规则)

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Examples</title>
    <style>
        section {border:1px solid blue; margin:0 0 10px 0;}
        p {margin 0;}
        footer {border:1px solid red;}
        img {float:left;}
    </style>
    </head>
    <body>
        <section> 
            <img src="upload.gif" />
            <p>It’s fun to float</p>
        </section> 
        <footer> Here is the footer element</footer> 
    </body>
</html>

第一种:

section {border:1px solid blue; margin:0 0 10px 0; overflow:hidden;}

第二种:

section {border:1px solid blue; margin:0 0 10px 0; float:left; width:100%;}
footer {border:1px solid red; clear:left;}

注意：浮动非图片元素时，必须给它设定宽度,否则后果难以预料
第三种:

<body>
    <section class="clearfix"> 
        <img src="test.gif" />
        <p>It’s fun to float.</p>
        <div class="clear_me"></div>
    </section> 
    <footer> Here is the footer element that runs across the bottom of the page.</footer> 
</body>
// 一
<style>
    section {border: 1px solid blue; margin: 0 0 10px 0;}
    p {margin 0;}
    footer {border: 1px solid red;}
    img {float:left;}
    .clear_me {clear:left;}
</style>
// 二
<section class="clearfix"> 
    <img src="test.jpg"> 
    <p>It’s fun to float.</p> 
 </section>
.clearfix:after { 
    content:"."; 
    display:block; 
    height:0; 
    visibility:hidden; 
    clear:both; 
}

浮动是实现多栏布局（在更多浏览器支持CSS3的Multi-column Layout Module之前）唯一最可靠的方式

HTML解析+CSS的回流与重绘

浏览器解析HTML时的基本过程:

用户输入网址(假设是个HTML页面，并且是第一次访问)，浏览器向服务器发出请求，服务器返回HTML文件

浏览器开始载入HTML代码，发现<head>标签内有一个<link>标签引用外部CSS文件

浏览器又发出CSS文件的请求，服务器返回这个CSS文件

浏览器继续载入HTML中<body>部分的代码，并且CSS文件已经拿到手了，可以开始渲染页面了

浏览器在代码中发现一个<img>标签引用了一张图片，向服务器发出请求，此时浏览器不会等到图片下载完,而是继续渲染后面的代码

服务器返回图片文件，由于图片占用了一定面积，影响了后面段落的排布，因此浏览器需要回过头来重新渲染这部分代码

浏览器发现了一个包含一行JavaScript代码的<script>标签，赶快运行它

JavaScript脚本执行了这条语句，它命令浏览器隐藏掉代码中的某个<div style="display: none">。杯具啊，突然就少了这么一个元素，浏览器不得不重新渲染这部分代码

终于等到了</html>的到来,浏览器泪流满面……

等等！还没完，用户点了一下界面中的“换肤”按钮，JavaScript让浏览器换了一下<link>标签的CSS路径

浏览器召集了在座的各位<div><span><ul><li>，”大伙儿收拾收拾行李,咱得重新来过……“，浏览器向服务器请求了新的CSS文件，重新渲染页面

从上面的过程可以看出，当页面的布局发生变化时，浏览器会回过头来重新渲染，这就是页面为什么会慢的一个原因，当一个点的变化影响了布局，这就会使得要倒回去重新渲染，这个倒回去的过程称为reflow(回流)。另外还有一个是repaint(重绘)，当只改变背景颜色，文字颜色，边框颜色而不改变页面布局时，浏览器就会repaint。repaint的速度明显比reflow的速度快。

display:none VS visibility:hidden

空间占据

回流与重绘

株连性

第二点：display:none隐藏产生reflow和repaint(回流与重绘)，而visibility:hidden没有这个影响前端性能的问题。
第三点：”株连性“方面的差异
display:none就是“株连性”明显的声明：一旦父节点元素应用了display:none，父节点及其子孙节点元素全部不可见，而且无论其子孙元素如何不屈地挣扎都无济于事。我们给一个父元素应用visibility:hidden，则其子孙后代也都会全部不可见,如果子孙元素应用了visibility:visible，那么这个子孙元素又会显现出来。