css 进阶课程笔记@规则 at-rule: @规则、@语句、CSS语句、CSS指令 a. import @import

@规则

at-rule: @规则、@语句、CSS语句、CSS指令

a. import @import "路径";

导入另外一个css文件

b. charset

@charset "utf-8"; 告诉浏览器该CSS文件，使用的字符编码集是utf-8，必须写到第一行

代码示例

@charset "utf-8";
@import "reset.css";

h1 {
    text-align: center;
    font-size: 3em;
}

web字体和图标

web字体用户电脑上没有安装相应字体，强制让用户下载该字体使用@font-face指令制作一个新字体

 /* 制作一个新的字体，名称叫做good night */
        @font-face {
            font-family: "good night";
            src: url("./font/晚安体.ttf");
        }

        p {
            font-family: "good night";
        }

块级格式化上下文

常规流盒子的固有的一些特点：

常规流块盒在水平方向上，必须撑满包含块
常规流块盒在包含块的垂直方向上依次摆放
常规流块盒若外边距无缝相邻，则进行外边距合并
常规流块盒的自动高度和摆放位置，无视浮动元素

块级格式化上下文全称Block Formatting Context，简称BFC 它是一块独立的渲染区域，它规定了在该区域中，常规流块盒的布局。 a. 独立的渲染区域 b.规定的是常规流盒子的布局

什么情况会创建BFC?

1.根元素意味着，<html>元素创建的BFC区域，覆盖了网页中所有的元素，根元素是创建BFC的元素。

2.浮动和绝对定位元素（当然也包括固定定位，固定定位是绝对定位的一种特殊情况而已）

3.overflow不等于visible的块盒

下面是示例

BFC 的规则：

不同的BFC区域，它们进行渲染时互不干扰创建BFC的元素，隔绝了它内部和外部的联系，内部的渲染不会影响到外部

具体规则：

创建BFC的元素，它的自动高度需要计算浮动元素，因此这里对于 body 里面直接放一个div，div里面有浮动的元素，高度坍塌的问题，有了新的解决办法，就是让高度坍塌的盒子变成创建BFC的元素，这里可以使用浮动，绝对定位，还可以使用 overflow = hidden。但是影响最小的还是使用在高度坍塌的盒子使用clear这个属性,在要解决盒子坍塌的最下面加一个元素，然后把设置clear = both，最优雅的是使用伪类元素，清除浮动的影响,这个对别的元素影响最小。如果内部是定位元素，定位已经完全脱离了常规流，当然如果不设置外层容器高度，也会坍塌。需要设置container的高度。

.clearfix::after { content: ""; display: block; clear: both; }

他为什么要去计算浮动元素的高度呢？还是为了前面隔绝不同BFC之间的影响。

创建BFC的元素，它的边框盒不会与浮动元素重叠。为什么这样呢？还是因为需要隔绝BFC内部和外部的互相影响。这里可以相当于pink颜色设置了margin-left，你再去设置了他的margin-left没有任何效果。

<div class="float"></div>
<div class="container"></div>

    .float {
    float: left;
    width: 100px;
    height: 500px;
    margin-right: 50px;
    background-color: lightblue;
}

.container {
    overflow: hidden;
    width: 1000px;
    height: 500px;
    background-color: pink;
}

上面的重大作用就是做下面的两栏布局。

创建BFC的元素，不会和它的子元素进行外边距合并，只有处于同一个BFC的元素之间才会存在外边距合并，处于不同的BFC的元素不可能外边距合并的。为什么这样呢？还是因为需要隔绝BFC内部和外部的互相影响。

 <div class="container">
        <div class="float"></div>
    </div>

.float {
    width: 100px;
    height: 5000px;
    margin-top: 50px;
    background-color: lightblue;
}

.container {
    overflow: hidden;
    width: 1000px;
    height: 5000px;
    margin-top: 20px;
    background-color: pink;
}

container 这个div处于在根元素创建的BFC中，而float元素处于container创建的BFC中，不同的BFC不可能进行高度合并。

布局

两栏布局

<style>
        .clearfix::after{
            content: "";
            display: block;
            clear: both;
        }
        .container {
            background: lightblue;
            width: 90%;
            margin: 0 auto;
        }
        .aside{
            float: left;
            background: #008c8c;
            color: #fff;
            width: 300px;
            margin-right: 30px;
        }

        .main{
            overflow: hidden;
            background: gray;
        }
    </style>

<body>
    <div class="container clearfix">
        <aside class="aside">
            Lorem ipsum dolor sit ame
        </aside>
        <div class="main">
            Lorem ipsum dolor  nisi.
        </div>
    </div>
</body>

这个实现两栏布局的原理是左边一个div，这个div让他左浮动，浮动后，如果右边再放一个div，div的布局的边框盒子会忽略这个盒子，内容会从左边div的盒子右边开始布局。如果此时你设置了边框盒子为BFC，通过设置overflow: hidden;来设置右边盒子为BFC，因为BFC的边框盒不会和浮动元素重叠，这样右边就会从左边盒子的右侧开始。注：不论右侧div是否设置了浮动，右侧div的内容都不会从左侧浮动盒子的内容重叠。

三栏布局

<style>
        .clearfix::after {
            content: "";
            display: block;
            clear: both;
        }

        .container {
            padding: 30px;
            border: 3px solid;
        }

        .left {
            float: left;
            width: 300px;
            background: lightblue;
            margin-right: 20px;
        }

        .right {
            float: right;
            width: 300px;
            background: lightblue;
            margin-left: 20px;
        }

        .main{
            overflow: hidden;
            border: 2px solid;
        }
    </style>

<body>
    <div class="container clearfix">
        <aside class="left">
            Lorem ipsum dolor sit 
            </aside>
            
        <aside class="right">
            Lorem ipsum dolor, perferendis et.
        </aside>

        <div class="main">
           Lorem ipsum, quos.
        </div>
    </div>
</body>

三栏布局的原理和两栏布局的原理差不多，三栏布局需要的是在搞两个左右两个浮动，中间的的不浮动。中间的同样需要BFC布局，BFC布局还是和原来的一样，通过设置overflow: hidden;来设置。

主区域靠前因为根据搜索引擎的原因，核心内容需要放到前面，这样也算是搜索引擎的优化.

<style>
        .container {
            padding: 30px;
            border: 3px solid;
            position: relative;
        }

        .left {
            width: 300px;
            background: lightblue;
            margin-right: 20px;
            position: absolute;
            left: 30px;
            top: 30px;
        }

        .right {
            width: 300px;
            background: lightblue;
            margin-left: 20px;
            position: absolute;
            right: 30px;
            top: 30px;
        }

        .main {
            margin: 0 300px;
            border: 2px solid;
        }
    </style>

<body>
    <div class="container">
        <aside class="left">
            Lorem ipsum dolor sit amet consectetur</aside>

        <aside class="right">
            Lorem ipsum dolor, sit amet consectetur a</aside>
        <div class="main">
            Lorem ipsum        </div>

    </div>
</body>

原理是左右两个div用的定位，然后中间的div用的直接设置左右两侧的margin就可以了。

等高布局

等高的方法主要有以下三种：

a. CSS3的弹性盒

b. JS控制

c. 伪等高

这里主要讲的是伪等高的做法，伪等高的前提条件是主要区域的内容比侧边栏的内容高度高，做法其实很简单，就是将侧边栏设置一个比主要区域高度高的高度，然后整体的高度有主区域的高度决定，再设置超出主区域的高度隐藏。 1.container 超出当前容器隐藏,内容是有主区域的高度决定的。 2.左边浮动盒子 height 10000px margin-bottom 是 -9990px,其实左侧浮动盒子的真实高度是 10000 - 99990px = 10px,而后面容器的高度是由主区域的高度撑开，侧边栏那样设置的目的就是为了防止浮动元素把容器撑得很开 3.看到左侧的盒子很高，其实你看到的是背景，盒子的真实高度是10px.

<style>
        .clearfix::after{
            content: "";
            display: block;
            clear: both;
        }
        
        .container {
            width: 90%;
            margin: 0 auto;
            overflow: hidden;
        }
        
        .aside{
            float: left;
            background: #008c8c;
            color: #fff;
            width: 300px;
            margin-right: 30px;
            height: 10000px;
            margin-bottom: -9990px;
        }

        .main{
            overflow: hidden;
            background: gray;
        }
    </style>
</head>

<body>

    <div class="container clearfix">
           <aside class="aside">
            Lorem ipsum dolor        
            </aside>
            
        <div class="main">
            Lorem ipsum,
        </div>
    </div>
    
</body>

后台页面布局

<style>
        body {
            margin: 0;
        }

        h1 {
            margin: 0;
        }

        .app {
            position: fixed;
            width: 100%;
            height: 100%;
        }

        .header {
            height: 60px;
            background: #000;
            color: #fff;
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
        }

        .container{
            width: 100%;
            height: 100%;
            background: lightblue;
            padding-top: 60px;
            box-sizing: border-box;
        }

        .container .left{
            float: left;
            width: 300px;
            background: rgb(119, 119, 119);
            color: #fff;
            height: 100%;
            padding: 20px;
            box-sizing: border-box;
            overflow: auto;
        }

        .container .main{
            overflow: hidden;
            height: 100%;
            background: #fff;
            padding: 20px;
            box-sizing: border-box;
            overflow: auto;
        }
    </style>
</head>

<body>
    <div class="app">
        <header class="header">
            <h1>的撒按时打发十分阿斯蒂发</h1>
        </header>
        <div class="container">
            <aside class="left">
                Lorem ipsum
            </aside>    
            <div class="main">
                Lorem ipsum 
            </div>
        </div>
    </div>
</body>

浮动的细节

规律

左浮动的盒子向上向左排列
右浮动的盒子向上向右排列
浮动盒子的顶边不得高于上一个盒子的顶边
若剩余空间无法放下浮动的盒子，则该盒子向下移动，直到具备足够的空间能容纳盒子，然后再向左或向右移动

观察6为啥是位于5的下面而不是位于3的下面呢？因为6本身应该跟在5后面的位置，但是4,5的空间放不下，放不下，要先往下移动，往下移动5的高度，就可以放下了，由于是左浮动，就移动到5的下面了。

浮动的规律

行高的取值

px, 像素值这一项不用解释，就是像素值
无单位的数字
em单位
百分比这个是怎么处理的？是不是和无单位的数字是一样的？

这里核心需要解释的是第2和第3项。我们以下面的情况来举例。

 line-height: 2em;

  line-height: 2;

上面这两种情况都表示行高为字体大小的两倍，不同的是第一种情况是先计算像素值，再继承。而第二种是先继承这个2倍，再到当前字体的大小 *2算行高。也就是说如果设定line-height的元素的他的font-size 和他的祖先元素的font-size 的大小不一样，两者的写法就会不一样。

举例

.container {
               line-height: 2;
        }
        .p1{
            font-size: 40px;
        }

        .p2{
            font-size: 12px;
        }
    </style>
    

<body>
    <div class="container">
        <p class="p1">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet molestiae sed doloremque sapiente? Explicabo, quidem itaque, repudiandae fugiat impedit suscipit, amet inventore necessitatibus pariatur iste quisquam laborum hic aperiam ab.
        </p>
        <p class="p2">
            Lorem ipsum, dolor sit amet consectetur adipisicing elit. Tenetur earum corporis, eius, ut ratione nihil exercitationem cum voluptatibus et velit repellat debitis esse praesentium odio provident ex totam, delectus expedita.
        </p>
    </div>
</body>

如果上面 line-height: 2em;那么p1 的行高就是浏览器的默认字体大小 *2 = 24px, p2的字体高度也是如此，如果是 line-height: 2;那么p1的行高就是40 * 2 = 80px.P2的高度是 12 * 2 = 24px.

body背景

注：这点东西很是与众不同，用到时再去研究。

画布 canvas

一块区域

特点：

最小宽度为视口宽度
最小高度为视口高度

HTML元素的背景

覆盖画布

BODY元素的背景

如果HTML元素有背景，BODY元素正常（背景覆盖边框盒）

如果HTML元素没有背景，BODY元素的背景覆盖画布

关于画布背景图

背景图的宽度百分比，相对于视口
背景图的高度百分比，相对于网页高度
背景图的横向位置百分比、预设值，相对于视口
背景图的纵向位置百分比、预设值，相对于网页高度

行盒的垂直对齐

多个行盒垂直方向上的对齐

给没有对齐元素设置vertical-align

预设值比方说top，bottom这些预设值。

数值因为文字的预设值可能因为字体不同位置也不同，有时通过预设值很难达到我们想要的垂直对齐等效果，所以这个时候就需要通过数据去调整。特别需要注意的是即便我们设置图片或者文字的 vertical-align ：middle。我们在视觉上看去也有可能是对不起的，详细去看字体基线的问题。

比方说小兔鲜里面的icon和文字对不齐就是用的vertical-align去调节的。而不是要指望去通过vertical-align：middle去对齐，这个是对不齐的。

图片的底部白边

为啥会出现白边呢？

图片的父元素是一个块盒，块盒高度自动，图片底部和父元素底边之间往往会出现空白。

设置父元素的字体大小为0
将图片设置为块盒（它的 display 属性的默认值是 inline。默认是行盒，因为他是一个内容）

参考线-深入理解字体

字体的参照图

font-size、line-height、vertical-align、font-family

文字

文字是通过一些文字制作软件制作的，比如fontforge

制作文字时，会有几根参考线，不同的文字类型，参考线不一样。同一种文字类型，参考线一致。

font-size

字体大小，设置的是文字的相对大小

文字的相对大小：1000、2048、1024

文字顶线到底线的距离，是文字的实际大小（content-area，内容区）

行盒的背景，覆盖content-area

其实这里 2048可以理解为我们设置的 px = 2048px,实际字体的大小也是可以理解为上图上活字印刷里面整个方块的大小。也就是如果px= 2048px,那么整个活字框的边长是2398，除了整个方块，上下每一行之间实际还有间隙，那么这个间隙就是下面说的gap，整个方块加上上下的gap就是行高。一个行高的上下区域其实就是下面的虚拟区。这个gap如果行高设置normal，默认值，就是使用文字默认的gap。否则会根据设置的行高去调整这个gap值。这个行高所包含的区域其实就是虚拟区。

行高

顶线向上延申的空间，和底线向下延申的空间，两个空间相等，该空间叫做gap（空隙）

gap默认情况下，是字体设计者决定

top到botoom（看ppt图），叫做virtual-area（虚拟区）

行高，就是virtual-area

line-height:normal，默认值，使用文字默认的gap

文字一定出现一行的最中间——错误 content-area一定出现在virtual-area的中间

vertical-align

决定参考线：font-size、font-family、line-height

一个元素如果子元素出现行盒，该元素内部也会产生参考线

baseline：该元素的基线与父元素的基线对齐

super: 该元素的基线与父元素的上基线对齐

sub：该元素的基线与父元素的下基线对齐

text-top: 该元素的virtual-area的顶边，对齐父元素的text-top

text-bottom: 该元素的virtual-area的底边，对齐父元素的text-bottom

top：该元素的virtual-area的定边，对齐line-box的顶边

bottom：该元素的virtual-area的底边，对齐line-box的底边

middle: 该元素的中线（content-area的一半），与父元素的X字母高度一半的位置对齐

行盒组合起来，可以形成多行，每一行的区域叫做line-box，line-box的顶边是该行内所有行盒最高顶边，底边是该行行盒的最低底边。

实际，一个元素的实际占用高度（高度自动），高度的计算通过line-box计算。

行盒：inline-box 行框（自己的翻译）：line-box

数值：相对于基线的偏移量，向上为正数，向下为负数。

百分比：相对于基线的偏移量，百分比是相对于自身virtual-area的高度

line-box是承载文字内容的必要条件，以下情况不生成行框：

某元素内部没有任何行盒
某元素字体大小为0

应用1 解决img元素在div里面会留下下面一部分空间，上面也可能会留下空间的问题。原因在img属于行内块元素，在当前div元素会形成line-box，这个line-box由外层这个div的lineheight = noraml ，fontsize，fontFamily确定，默认会img的baseline和这个div的baseline对齐，而需要解决这个问题根本在于不生成line-box，将里面唯一的元素设置成block就可以了。

<div>
    <!-- 测试文字 -->
    <img src="./images/01.jpeg" alt=""> 
 </div>

 img {
    height: 300px;
    text-decoration: none;
    /* 解决办法 */
    /* display: block; */
}

div {
    background-color: lightblue;
    font-size: 200px;
}

应用2 这也从一方面说明前面推断的没有被行盒包裹的盒子浏览器会生成一个匿名行盒。

应用3 多个行盒或者行块盒在同一个容器里面上下不对齐的做法，调试vertical-align ：某一个数值，具体数值可以使用浏览器里面的开发工具去调试，调试到理想的位置，在代码里面写上这个数值就可以了。使用 middle并不能达到真正的文字和图片居中对齐。这样的经典情况有图片，文字。 input 这类元素和文字。

可替换元素和行块盒的基线

图片：基线位置位于图片的下外边距。

 <div>
    <img src="./images/01.jpeg" alt="">文字
 </div>

div {
    font-size: 300px;
    background-color: lightblue;
}

img {
    height: 300px;
    /* margin-bottom: 100px; */
}

首先整个浅色框框的高度是被里面图片，文字最大的一个撑开的，我们的图片高度太小了，小于文字实际需要的高度，然后在这一行的line-box里面默认对齐的方式是基线对齐，所以这里是文字的基线和图片的基线对齐，上面也说图片的基线是包括图片margin的，这里由于没有设置margin,所以这里看到的是文字的下基线和图片的下边缘对齐。由于图片高度只有那么大，所以露出来了一点。

下面的图是设置了margin，文字和图片设置的margin对齐，又由于上边缘被图片上边缘顶了起来，所以就是这样了。

设置图片底部margin-bottom后

    font-size: 300px;
    background-color: lightblue;
}

img {
    height: 300px;
    margin-bottom: 100px;
}`

表单元素：基线位置在内容底边

行块盒：

行块盒最后一行有line-box，用最后一行的基线作为整个行块盒的基线。
如果行块盒内部没有行盒，则使用下外边距作为基线

堆叠上下文

堆叠上下文（stack context），它是一块区域，这块区域由某个元素创建，它规定了该区域中的内容在Z轴上排列的先后顺序。

创建堆叠上下文的元素

html元素（根元素）
设置了z-index（非auto）数值的定位元素

同一个堆叠上下文中元素在Z轴上的排列

从后到前的排列顺序：

创建堆叠上下文的元素的背景和边框
堆叠级别(z-index, stack level)为负值的堆叠上下文
常规流非定位的块盒
非定位的浮动盒子
常规流非定位行盒
任何 z-index 是 auto 的定位子元素，以及 z-index 是 0 的堆叠上下文
堆叠级别为正值的堆叠上下文

每个堆叠上下文，独立于其他堆叠上下文，它们之间不能相互穿插。

svg

svg: scalable vector graphics，可缩放的矢量图

该图片使用代码书写而成
缩放不会失真
内容轻量

怎么使用

svg可以嵌入浏览器，也可以单独成为一个文件

xml语言，svg使用该语言定义

书写svg代码

矩形:rect

圆形：circle

椭圆：ellipse

线条：line

折线：polyline

多边形：polygon

路径：path

M = moveto L = lineto H = horizontal lineto V = vertical lineto C = curveto S = smooth curveto Q = quadratic Belzier curve T = smooth quadratic Belzier curveto A = elliptical Arc

A 半径1
半径2
顺时针旋转角度
小弧（0）或大弧（1）
顺时针（1）逆时针（0）

Z = closepath

数据链接

data url

如何书写

数据链接：将目标文件的数据直接书写到路径位置

语法：data:MIME,数据

意义

优点：

减少了浏览器中的请求

请求

响应

减少了请求中浪费的时间

有利于动态生成数据

缺点：

增加了资源的体积

导致了传输内容增加，从而增加了单个资源的传输时间

不利于浏览器的缓存

浏览器通常会缓存图片文件、css文件、js文件。

会增加原资源的体积到原来的4/3

应用场景：

但请求单个图片体积较小，并且该图片因为各种原因，不适合制作雪碧图，可以使用数据链接。
图片由其他代码动态生成，并且图片较小，可以使用数据链接。

base64

一种编码方式

通常用于将一些二进制数据，用一个可书写的字符串表示。

##浏览器兼容性

问题产生原因

市场竞争
标准版本的变化

厂商前缀

比如：box-sizing，谷歌旧版本浏览器中使用-webkit-box-sizing:border-box

市场竞争，标准没有发布
标准仍在讨论中（草案），浏览器厂商希望先支持

IE： -ms- Chrome，safari: -webkit- opera： -o- firefox: -moz-

浏览器在处理样式或元素时，使用如下的方式：当遇到无法识别的代码时，直接略过。

谷歌浏览器的滚动条样式

实际上，在开发中使用自定义的滚动条，往往是使用div+css+JS实现的

多个背景图中选一个作为背景

css hack

根据不同的浏览器（主要针对IE），设置不同的样式和元素

样式

IE中，CSS的特殊符号

*属性，兼容IE5、IE6、IE7
_属性，兼容IE5~IE6
属性值\9，兼容IE5~IE11
属性值\0，兼容IE8~IE11
属性值\9\0，兼容IE9~IE10

IE5、6、7的外边距bug，浮动元素的左外边距翻倍

条件判断

渐近增强和优雅降级

两种解决兼容性问题的思路，会影响代码的书写风格

渐近增强：先适应大部分浏览器，然后针对新版本浏览器加入新的样式

书写代码时，先尽量避免书写有兼容性问题的代码，完成之后，再逐步加入新标准中的代码。

优雅降级：先制作完整的功能，然后针对低版本浏览器进行特殊处理

书写代码时，先不用特别在意兼容性，完成整个功能之后，再针对低版本浏览器处理样式。

caniuse

查找css兼容性

caniuse.com

居中总结

下面说的绝对定位包括固定定位，固定定位是一种特殊的绝对定位。

居中：盒子在其包含块中居中

行盒（行块盒）水平居中

直接设置行盒（行块盒）父元素text-align:center

常规流块盒水平居中

定宽，设置左右margin为auto

浮动元素水平居中

目前的做法是去调整margin left margin riht 去调整

绝对定位元素的水平居中

定宽，设置左右的坐标为0（left:0, right:0），将左右margin设置为auto

定位元素不论是水平居中还是垂直居中，思路都是同时设置水平方向或者垂直方向的距离为0，然后再设置margin 为 0 去调整。

实际上，固定定位（fixed）是绝对定位（absolute）的特殊情况

单行文本的垂直居中

设置文本所在元素的行高，为整个区域的高度

行块盒或块盒内多行文本的垂直居中

没有完美方案

设置盒子上下内边距相同，达到类似的效果。

绝对定位的垂直居中

定高，设置上下的坐标为0（top:0, bottom:0），将上下margin设置为auto

绝对定位的元素水平和垂直居中有两种方式

方式一

position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;

方式二

position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);

样式补充

display:list-item

设置为该属性值的盒子，本质上仍然是一个块盒，但同时该盒子会附带另一个盒子

元素本身生成的盒子叫做主盒子，附带的盒子称为次盒子，次盒子和主盒子水平排列

涉及的css：

list-style-type

设置次盒子中内容的类型

list-style-position

设置次盒子相对于主盒子的位置

速写属性list-style

清空次盒子

list-style:none

图片失效时的宽高问题

如果img元素的图片链接无效，img元素的特性和普通行盒一样，无法设置宽高

行盒中包含行块盒或可替换元素

行盒的高度与它内部的行块盒或可替换元素的高度无关

text-align:justify

text-align:

left: 左对齐
right：右对齐
center：居中
justify：除最后一行外，分散对齐

制作一个三角形

direction 和 writing-mode

开始 start -> 结束 end 左 left -> 右 end

开始和结束是相对的，不同国家有不同的习惯

左右是绝对的

direction设置的是开始到结束的方向

writing-mode：设置文字书写方向

css 进阶课程笔记

@规则