深入CSS|青训营笔记

这是我参与「第四届青训营 」笔记创作活动的第3天

选择器的优先级

• 选择器权重，特异度（越往下越高）
• 继承或者* 0，0，0，0
• 元素选择器 0，0，0，1
• 类选择器，伪类选择器 0，0，1，0
• ID选择器 0，1，0，0
• 行内样式 1，0，0，0
• ！important 重要的 无穷大

特异度计算示例

        .nav li{
            color:red;
        }
        .pink{
            color:pink;
            font-weight:700;
        }
        /*此时.nav li权重大于 .pink的权重
            要想给第一个li颜色改为pink如下
        */
        .nav .pink{
            color:pink;
            font-weight:700;
        }
    </style>
    <ul class="nav">
        <li class="pink">一二三四</li>
        <li>一二三四</li>
        <li>一二三四</li>
        <li>一二三四</li>
    </ul>

解释说明： .nav li是类选择器+标签选择器，特异度是0，0，1，1，而 .pink是类选择器，特异度是0，0，1，0，因此想要给第一个li修改样式，选择器使用.pink是无法修改样式的，要使用 .nav .pink特异度是0，0，2，0，此时特异度超过.nav li ，修改样式成功 优先级注意点：

1. 权重是由4组数字组成，没有进位的
2. 可以理解为类选择器永远大于元素选择器，id选择器永远大于类选择器
3. 等级判断从左向右，如果某一位数值相同，则判断下一位数值
4. 继承的权重是0
5. a链接浏览器默认指定了一个样式，即蓝色有下划线

css的层叠性

相同选择器给设置相同样式，此时一个样式就会覆盖（层叠）另一个冲突的样式

层叠性主要解决样式冲突的问题

方便实现样式的复用

示例

        div{
            color:red;
            font-size:20px;
        }
        div{
            color:purple;
        }
        /*color层叠，font实现上一个div的样式*/
    </style>
        <div>层叠性测试</div>

总结： 层叠性原则：

• 样式冲突，遵循就近元素，哪个样式离结构近，就执行哪个样式
• 样式不冲突就不会层叠

css的继承性

可继承是指，比如color，当前标签没有设置color属性时就会从当前标签的父级元素就寻找color属性值，如果没有再重复上述步骤

哪些是常见继承，哪些不可继承 文字相关可继承

box-sizing不可继承，但是我想要他的值，就可以在通配选择器（*）中设置该属性值为inherit，就使得该属性可以显式继承

初始值是在①不可继承属性没有设定属性值时②可继承属性没有设定属性值并且父级元素中也没有设定该属性值的场景下会使用到

        *{
            box-sizing:inherit;
        }
        html{
            box-sizing:border-box;
        }
        .some-widget{
            box-sizing:content-box;
        }
    </style>

解释说明：使用通配符选择器将box-sizing设置为inherit就使得box-sizing可以被继承，同理 对于盒子内外边距这些不可继承的属性，也可以使用inherit属性值使属性变成可显式继承的属性*

初始值： 每个css属性都有一个初始属性值 比如：background-color的初始值是transparent margi-left的初始值为 同样，可以使用initial关键字显式重置为初始值 background-color：initial；

注意：子标签会继承父标签的某些样式，比如文本颜色和字号； （text-，dont-，line-开头的样式） 但是盒子的内外边距、高度等不会被继承

css的求值过程

一个元素的某属性可能匹配到有0到多个声明值，

指定值：按照。。。。选出优先级最高的一个属性值 计算值：通过相对值或者关键字转换，比如em转换为px

计算值和使用值得区别：浏览器拿到css后可以马上转换出来得值，比如分析css中font-size就可以完成一个转换em->px，但是比如border的值为100%这就是没办法马上转换出来的值，要实际在渲染中才能进一步转换会放在formatting中去计算

注意 继承是计算到父级的使用值，就是不会继承到em而是会继承到px

容器line-height：1.2em，h1：20px，h1的行高不是h1的字体再乘以1.2，而是根据父级的字体算出行高后继承这个行高 示例：

            margin: 10px;
            background-color: pink;
            line-height: 1.2em;
            font-size: 16px;
        }
        div p{
            font-size:20px;
        }

解释说明： p标签的行高并不是20px* 1.2而是16px* 1.2，所以说明继承继承父级元素的使用值而不是计算值

布局

• 确定内容的大小和位置的算法
• 根据元素、容器、兄弟节点和内容等信息来计算

布局的相关技术 常规流：行级元素和块级元素

浮动：比如把图片设置为浮动，就可以浮在常规流上不对常规流有影响

盒模型：

外边距-内边距-边框-内容

常见属性

width

• 指定conten box宽度
• 取值为长度、百分数、auto
• auto由浏览器根据其他属性确定
• 百分数相对于容器的content box宽度

height

• 指定conten box高度
• 取值为长度、百分数、auto
• auto由内容计算确定
• 百分数相对于容器的content box高度
• 容器有指定的高度时，百分数才会生效，比如高度指定为auto是百分数是不会生效的

padding

• 指定元素四个方向的内边距
• 百分数相对于容器宽度 padding-top，padding-bottom设置为百分数也是相对于容器宽度而不是高度

border

指定容器边框样式、粗细、颜色

• 三种属性
  • border-width
  • border-style实线虚线
  • border-color边框颜色
• 四个方向
  • border-top
  • border-right
  • border-bottom
  • border-left

三角形效果实现

四条边框颜色不同时，连接地方是斜着的，因此可以容器宽度和高度设置为0就会得到三角形，根据需要把某些三角形设置为透明就可以得到朝向不同的三角形 红色朝向为上三角形示例：

            border: 50px solid red;
            width: 0px;
            height: 0px;
            border-top-color: transparent;
            border-right-color: transparent;
            border-left-color: transparent;
        }

margin

• 指定元素四个方向的外边距
• 取值为长度、百分数、auto
• 百分数相对于容器宽度 使用margin：auto可以实现容器水平居中效果

外边距可以让块级盒子水平居中，但是必须满足两个条件

①盒子必须指定了宽度width

②盒子的左右外边距都设置为了auto

            width:900px;
            height:200px;
            background-color:pink;
            margin:0 auto;
            text-align:center;
        }

margin collapse

会按照最大边距来设置

两个div之间间距是100px而不是200px； 比如说标题段落，文字排版时会很方便，设置了标题的外间距，段落的外间距，在放在一起的 时候不会因为加起来而使得排版难看

溢出内容可以使用overflow来展示出来，当宽高是用值来确定时

<div class="b"></div>

<style>
  .a {
    background: lightblue;
    height: 100px;
    margin-bottom: 100px;
  }

  .b {
    background: coral;
    height: 100px;
    margin-top: 100px;
  }
</style>

块级盒子

步和其他盒子并列摆放 适用所有盒模型属性

行级盒子

和其他行级盒子一起放在一行或者拆成多行 盒模型中的width和height不适用，行级元素的width和height是由内容决定的

行级块级元素

display属性 block 块级盒子 inline 行级盒子 inline-block 本身是行级，可以放在行盒，可以设置宽和高，作为一个整体不会被拆成多行 none排版时被完全忽略

常规流ppt 行级排版上下文ppt 块级排版上下文ppt bfc内排版规则ppt

不同BFC盒子不会发生margin-collapse

Flex Box

一种更灵活的布局方式 flexdecoration控制布局的流向，水平或垂直

主轴是几个元素摆放 的方向，侧轴是与主轴垂直的方向 justify-content align-items

给容器设置align-items：flex-start，然后可以给一个子元素设置为别的属性值比如align-items：flex-end；

flex-grow是把剩下的按照比例分配，所以a和b分别为2，1时，是剩下分配，那 a就不是b的两倍大 flex-basis就是不发生变化时原本的大小 flex-shrink，容器的缩小的能力

grid布局

flex是一个单一的方向的布局方式 grid是二维的一个排版方式，grid-template把容器分割成一个二维的网格，设置每一个子项占那些行/列

划分网格：

grid-template-columns: 100px 100px 200px;
grid-template-rows: 100px 100px

图片grid1

grid-template-columns: 30% 30% auto;
grid-template-rows: 100px auto

图片grid2

grid-template-columns: 100px 1fr 1fr;
grid-template-rows: 100px 1fr

图片grid3

gridline网格线

float浮动

实现文字环绕的效果

用float实现左右布局的效果，有了flex和grid之后就是实现文字环绕

绝对定位

position

• static
  • 默认值，非定位元素
• relative
  • 在常规流里布局
  • 相对于子级本应该在的位置进行偏移
  • 使用top 、left、bottom、right设置偏移长度
  • 流内其他元素当它没有偏移一样布局
• absolute
  • 脱离常规流，常规流的元素当它不存在
  • 相对于最近的非static祖先定位
  • 不会对流内元素布局造成影响
  • html元素是非static元素
• fixed
  • 相对于窗口视口定位，生成绝对定位的元素， 相对于浏览器窗口进行定位。可以通过设置 "left", "top", "right" 以及 "bottom" 属性给目标元素定位。 例如：将id = content 的div固定在窗口底部，距离窗口左边距离200px。滚动条上下滚动，div仍然在窗口底部。

黏性定位，滚动到顶部就不动了