这是我参与「第五届青训营 」伴学笔记创作活动的第 2 天

CSS

css:Cascading Style Sheets 层叠样式表

用来定义页面元素的样式：

• 设置字体和颜色。
• 设置位置和、大小
• 添加动画效果

选择器用来选中页面中的一些元素，给这些元素定义样式。

多条声明用分号隔开，放到大括号里面组成一个声明块。

选择器+{}称为一条规则。

h1{
    color:white;
    font-size:14px;
}
 选择器selector{
    选择器Property : 属性值；
    样式声明Declaration；
}

在页面中使用css

• 外链

      <link rel="stylesheet" href="/assets/style.css">
  

• 嵌入

      <style>
          li {margin:0;list-style:none;}
          p {margin:1em 0;}
      </style>
  

• 内联

  额外的给某些元素添加特殊的样式。

      <p style="margin:1em 0">Example Content</p>
  

CSS是如何工作的

在解析html的时候碰到link标签的引入的外部css文件或者其他方式引入的css,加载css,解析出所有dom树节点的css属性，从而得到一个渲染树，即计算出每一个节点该在的位置以及各自的样式，然后在渲染成真正的页面。

通过dom树，然后把解析出来的css附着到dom树上形成一颗渲染树，然后展示页面。

选择器Selector

找出页面中的元素，以便给他们设置样式。

使用多种方式选择元素

• 按照标签名、类名或者id
• 按照属性
• 按照DOM树中的位置

通配符选择器

选择所有元素，常用于初始化元素

*{
    color:red;
    font-size:12px;
}

标签选择器

h1{
    color:orange;
}
p{
    color:gray;
    font-size:20px;
}

id选择器

id是唯一的；一对一的关系

不唯一可能也可以生效，但是可能会发生一些无法预期的效果

#logo{
    font-size:60px;
    font-weight:200;
}

类选择器

多对多的关系 给同一类型的标签去设置样式

.done{
    color:gray;
    text-decoration:line-through;
}

属性选择器

根据属性名，或者属性名+属性值；

选择带有disabled属性的元素；

<label>用户名：</label>
<input value="zhao" disabled/>

<label>密码：</label>
<input value="123456" type="password"/>

<style>
    [diabled]{
        background: #eee;
        color:#999;
    }
</style>

选择属性名为type，属性值为password的input元素

<p>
    <label>密码：</label>
    <input type="password" value="123456"/>
</p>
<style>
    input[type="password"]{
        border-color:red;
        color:red;
      }
</style>

type^=“t”:属性type的属性值以t为开头的元素；type$=“t”:属性type的属性值以t为结尾的元素；

 

     <p><a href="#top">回到顶部</a></p>
     <p><a href="a.jpg">查看图片</a></p>

 
 <style>
   a[href^="#"] {
     color: #f54767;
     background: 0 center/1em url(https://assets.codepen.io/59477/arrow-up.png) no-repeat;
     padding-left: 1.1em;
   }

   a[href$=".jpg"] {
     color: deepskyblue;
     background: 0 center/1em url(https://assets.codepen.io/59477/image3.png) no-repeat;
     padding-left: 1.2em;
   }
 </style>

伪类

• 不基于标签和属性定位元素
• 几种伪类
  • 状态伪类； 元素处以特定的状态下才会被选中
  • 结构性伪类； 根据dom节点在dom树中出现的位置。

MDN伪类列表 状态伪类

• :active是鼠标点击时的样式；
• :hover时鼠标经过的样式;
• :visited已经访问过的链接。
• :focus 输入框聚焦状态

结构性伪类

方便为某一组兄弟的某一个设置单独的样式。

• :first-child代表一组兄弟元素中的第一个元素
• :last-child代表一组兄弟元素中的最后元素

<ol>
  <li>苍兰决</li>
  <li>星汉灿烂</li>
  <li>周生如故</li>
  <li>一闪一闪亮星星</li>
  <li>沉香如屑</li>
</ol>
<style>
    li{
      list-style-position: inside;
      border-bottom: 1px solid;
      padding:0.5em;
    }
    li:first-child{
      color:red;
      list-style-position: outside;
    }
    li:last-child{
      border-bottom: none;
    }
</style>

组合

选择器组

方便为多个选择器设置相同的样式

颜色

RGB

三原色各分量的组合。指定每一种原色数量的多少去确定一个颜色的值。

• #000000 (00-ff)
• rgb(255,255,255) (0-255)

HLS

更符合人阅读的表示方法。 hsl(0, 64%, 40%)

亮度：0全黑，不亮。

做按钮点击，hover时颜色变化，变亮或者变暗。用hsl比较方便

透明度

• #00000000 (00-ff)
• rgba(255,255,255,1) (0-1)
• hsla(0,100%,50%,1) (0-1)
• 当为0时完全透明，为1时完全不透明，含义应该叫不透明度。

字体

font:style weight size/height family

font-family

• 字体列表最后写上通用字体族
• 英文字体放在中文字体前面

<style>
  h1 {
    font-family: Optima, Georgia, serif;
  }
  body {
    font-family: Helvetica, sans-serif;
  }
</style>

font-family不是设置的一个固定的值，而是逗号隔开的多个值； 字体族；因为网页需要被不同的设备访问，不同的设备上安装的和拥有的字体都是有限的，所以可以指定多个字体，然后从前往后一层一层去匹配。

通用字体族

一种风格，一种分类，并不是具体的字体。

在font-family最后要加上通用字体族。当设备上，前面所期望的字体都没有时，假设是无衬线体，浏览器会自动给从设备上找一种属于无衬线的字体去展示，防止展示的与期望差别太大。

在中英文混排的情况下，英文字体写在中文字体前面。 实际的浏览器会按照逐个字符去找相应的指定的字体。假设英文字体是a,中文字体是微软雅黑，假设把微软雅黑放在前面，则所有的英文字母都会用微软雅黑，因为微软雅黑的字体里面也有英文字符。反过来因为a是英文字符，没有中文，所以中文字符就会匹配到后面的微软雅黑。区分英文和中文。

使用web fonts

肯定会带来性能上的开销。

中文也可用web-fonts；但是中文字体包都比较大，所以一般会用一些工具进行裁切，将用到的一些裁出来，这样加载的字体包可以小一些。

<h1>Web fonts are awesome!</h1>

<style>
  @font-face {
    font-family: "Megrim"; /*引用的字体类型，即自定义一个名称，方便后续使用*/
    src: url(https://fonts.gstatic.com/s/megrim/v11/46kulbz5WjvLqJZVam_hVUdI1w.woff2) format('woff2');
  }

  h1 {
    font-family: Megrim, Cursive;
  }
</style>

font-size

• 关键字
  • small、medium、large
• 长度
  • px、em
• 百分数
  • 相对于父元素字体大小

font-style: italic斜体

font-weight:100-900;字体粗细；

• 100-300
• 400:normal
• 500-600
• 700:bold
• 800-900
• 不是所有的字体加粗都奏效，要看字体是否支持这么多种字重，并不是所有的字体在设计时都涉及了这么多字重，

line-height行高

两行文字之间的基准线（baseline）之间的距离

若行高的属性值没有单位（line-height:1.6），则表示是其自身字体大小的多少倍。

text-align

文本水平对齐方式 MDN text-align

• left
• right
• center
• justify 两端对齐，最后一行无效

spacing

• letter-spacing 字符之间的间距
• word-spacing 单词之间的间距（空格分隔）设置标签、单词之间的空格长度。

text-indent

一个块元素首行文本内容之前的缩进量.

text-decoration

装饰(可做删除线，链接的下划线。。。)

• none
• underline
• line-through
• overline

white-space

CSS 属性是用来设置如何处理元素中的空白。

默认情况下，html中多个连续的空白字符会被合并成一个，当作文本分隔符。

属性值解析

这个属性表明了两件事:

• 空白字符是否以及如何它们该如何合并。
• 行是否采用软换行。

选择器的特异度

在多个选择器都匹配到同一个元素的时候，且设置的是同一个样式，该元素到底采取哪个选择器中的样式。

选择器的权重，按照256进制计算的

选择器	权重	权重等级
!important	Infinity	0
行间样式(style属性)	1000	1
id选择器	100	2
class(属性选择器)(伪类)	10	2
标签(伪元素)	1	4
通配符	0	5

特异度：查每种选择器的数量；

选择器的特殊程度，越特殊，优先级越高

继承

某些属性会自动继承其父元素的计算值，除非显式指定一个值。

<p>
  This is a <em>test</em> of <strong>inherit</strong>
</p>
<style>
    body{
      font-size:20px;
    }
    p{
      color:blue;
    }
    em{
      color:red;
    }
</style>

显示继承

有一些属性是不可继承的，需要得到他的值，他的值就是等同于父级的值，想要他从父级继承

*{
    box-sizing:inherit;
}

在css里面，一般和文字相关的属性都是可以继承的，和盒模型相关的一些属性都是不可继承的

若一个元素一层一层往上找，还是没有找到某个属性的值，使用初始值

属性初始值

当一个元素他是不可继承的，而且没有给他设置值，使用初始值；或者是他是可继承的，但是他一层一层往上找，没找到，也是使用初始值。

• CSS中，每个属性都有一个初始值
  • background-color的初始值为transparent(透明)
  • margin-left的初始值为0
• 可以使用initial关键字显示重置为初始值
  • background-color:initial

CSS求值过程

求值过程

浏览器为了布局和渲染页面，他需要找到页面上每一个元素的对应的每一个css属性的值。
计算值是浏览器在拿到css之后就可以立马转换过来的相对值。resolving阶段
在拿到html和css没有办法计算出来的值，需要等实际渲染时，比如body设置宽度是100%，需要在用户实际打开的时候，到实际的环境里面，浏览器宽度是多少才能算出来，这时候放在formatting这个阶段，使用值。

布局

布局是什么

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

布局相关技术

盒模型

在布局的时候把每个元素都理解成盒子box

盒子+margin

width

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

height

• 指定content box高度
• 取值为长度、百分数、auto
• auto取值由内容计算得来
• 百分数相对于容器的content box的高度
• 外部容器有指定的高度时，百分数才生效

当设置height为百分数时，他是相对于他的容器的高度，但是如果外部容器没有设置高度，则外部容器的高度是根据里面的内容确定，矛盾！

padding

• 指定元素四个方向的内边距
• 百分数相对于容器的宽度
• 四个值：顺时针；上右下左
• 三个值：（以等宽为主） 上【右左】 下
• 二个值：【上下】【右左】

border

• 只当容器边框样式、粗细、颜色（复合属性）

• border-style

  • solid 实线
  • dashed 长虚线
  • dotted 点虚线

• border-width

• border-color

• 四个方向

  • border-top
  • border-right
  • border-bottom
  • border-left

• 四条边框颜色不同时

  • 容器有宽高时

     div{
       width:50px;
       height:50px;
       border:20px solid #000;
       border-color:red green blue yellow;
     }
  

  

  • 当content box的宽高都为0
  • 设置其他三边border-color透明-》三角形

    div{
      width:0px;
      height:0px;
      border:20px solid #000;
      border-color:red transparent transparent transparent;
    }
    

margin

• 指定元素四个方向的外边距

• 取值可以是长度、百分数、auto

• 百分数相对于容器的宽度

• 使用margin:auto 水平居中；

  • margin-left:auto;margin-right:auto;
  • 块盒，默认占据一行，除去自身容器的宽度，剩余空间，margin的左右边平均分。

• MDN margin重叠

  垂直方向

  • 同级元素 （margin合并）

    在文字排版时比较方便，比如一级标题和段落都设置了距离其他内容的最小边距，不会因为都设置了而叠加起来，会取一个最大的边距进行设置。

    两个元素垂直方向，第一个元素设置下外边距，另一个元素设置上外边距，两个外边距并不会叠加，而是取其中边距值较大的生效。

    <div class="top"></div>
    <div class="bottom"></div>
    <style>
        .top{
          height:100px;
          background-color: red;
          margin-bottom:100px;
        }
        .bottom{
          height:100px;
          background-color: green;
          margin-top:50px;
        }
    </style>
    

    

  • 父子元素 （margin塌陷）

  父元素设置了margin-top;子元素也设置了margin-top；父子元素一体，边距大的值生效。

      <div class="p">
          <div class="c"></div>
      </div>
      <style>
          .p{
            width:100px;
            height:100px;
            margin-top:50px;
            background-color: red;
          }
          .c{
            width:50px;
            height:50px;
            background-color: green;
            margin-top:100px;
          }
      </style>
  

  

  若父元素未设置margin-top,子元素设置了margin-top,父子一体，按照子元素的margin-top;

  .p{
    width:100px;
    height:100px;
    background-color: red;
  }
  .c{
    width:50px;
    height:50px;
    background-color: green;
    margin-top:50px;
  }
  

怪异盒子

box-sizing:border-box

overflow

容器内容超出容器时的行为，即溢出时怎么做。MDN

• visible 溢出部分可见
• hidden 隐藏
• scroll 显示滚动条(包含水平和垂直的滚动条)
• auto 若不溢出，则没有滚动条，哪个方向溢出哪个方向出现滚动条

块级 & 行级

• Block Level Box
  • 不和其他盒子并列摆放（独占一行）
  • 适用所有的盒模型属性
• Inline Level Box
  • 和其他行级盒子一起放在一行或者拆开成多行
  • 盒模型中的width、height不适用。
  • width和height由内容决定

box盒子（块盒，行盒）是css里面的概念。元素（p,div）是html里面的概念。

块级元素

• 生成块级盒子
• body、article、div、main、section、h1-6、p、ul、li等
• display:block

行级元素

• 生成行级盒子
• 内容分散在多个行盒(line box)中
• span、em、strong、cite、code等
• display:inline

display属性

• block 块级盒子
• inline 行级盒子
• inline-block 本身是行级，可以放在行盒中；可以设置width、height。作为一个整体不会被拆散成多行（理解为图片）
• none 排版时完全被忽略

常规流

行级排版上下文

• Inline Formatting Context(IFC)
• 只包含行级盒子的容器会创建一个IFC
• IFC内的排版规则
  • 盒子在一行内水平摆放
  • 一行放不下时，换行显示
  • text-align决定了一行内盒子的水平对齐
  • vertical-align决定一个盒子在行内的垂直对齐
  • 避开浮动float元素

<div>
  This is a paragraph of text with long word Honorificabilitudinitatibus. Here is an image 
  <img src="https://assets.codepen.io/59477/cat.png" alt="cat"/> And 
  <em>Inline Block</em>
</div>
<style>
    div{
      width:10em;
      /* overflow-wrap: break-word; */
      background: #411;
    }
    em{
      display: inline-block;
      width:3em;
      background: #33c;
    }
</style>

em设置属性display:inline-block，行级块元素，会产生一个行级盒子，可以设置width，height，而且不会被拆分为多行。 img是一个行级元素，产生行级盒子。 其他都是文本。所以div容器内部都是行级盒子 ，因此会创建IFC。

块级排版上下文

• Block Formatting Context(BFC)
• 某些容器会创建一个BFC
  • 根元素
  • 浮动，绝对定位，inline-block
  • Flex子项和Grid子项
  • overflow值不是visible的块盒
  • display:flow-root，会创建一个没有副作用的BFC，类似于根元素
• BFC内排版规则
  • 和自从上到下摆放
  • 垂直margin合并
  • BFC内盒子的margin不会与外面合并
  • BFC不会与浮动元素重叠
• 作用
  • 包含内部浮动
  • 排除外部浮动
  • 防止外边距重叠

在常规流中，一个盒子内，他的子盒子，只能都是块级的或者都是行级的。如果都是块级的，那就从上到下去摆放，如果都是行级的那就从左往右去摆放。
如果一个盒子内，既有行级盒子又有块级盒子，浏览器怎么处理?
他会创建两个匿名的块级盒子把文字包起来。

    <span>
        This is a text and
        <div>block</div>
        and other text.
   </span>

   <style>
    span {
      line-height: 3;
      border: 2px solid red;
      background: coral;
    }

    div {
      line-height: 1.5;
      background: lime;
    }
  </style>

Flex Box

• 一种新的排版上下文 一维布局
• 他可以控制子级盒子
  • 摆放的流向
  • 摆放顺序
  • 盒子的宽度和高度
  • 水平和垂直方向的对齐
  • 是否允许折行

主轴和交叉轴

主轴排列方式

交叉轴排列方式

默认stretch

给弹性盒子内部子盒子可以单独设置排列方式

子项的排列顺序标号

Flexibility

• 可以设置子项的弹性，当容器有剩余空间时，会伸展，容器空间不够时，会收缩。
• flex-grow，有剩余空间时的伸展能力
• flex-shrink,容器空间不足时的收缩能力
• flex-basis，没有伸展和收缩时的基础长度

复合属性flex

Grid布局

• display:grid 使元素生成一个块级的Grid容器 二维布局
• 使用grid-template相关属性将容器划分成网格
• 设置每个子项占哪些行与列。

<div class="wrap">
  <div class="a">A</div>
  <div class="b">B</div>
  <div class="c">C</div>
  <div class="d">D</div>
  <div class="e">E</div>
</div>
<style>
    .wrap{
      width:450px;
      height:250px;
      border:2px solid #000;
      display: grid;
      grid-template-columns: 100px 100px 200px;
      grid-template-rows: 100px 100px;
    }
    .a{
      background: red;
    }
    .b{
      background-color: green;
    }
    .c{
      background-color: blue;
    }
    .d{
      background-color: yellow;
    }
    .e{
      background-color: darkorchid;
    }
</style>

定义了两行(100 100)三列(100 100 200)的网格

定义两行三列，百分数分别相对于容器的高和宽，auto，表示剩余部分占一份

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

两行三列，1fr（fraction）代表一份，在划分列的时候，一共450px,划去确定的100px,剩余350,剩下的两列每列都是1fr，都是一份，平均分。

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

网格线

根据网格线确定grid area，以确定某个子项在哪些格子里

float

初始作用就是用来做文字环绕图片的效果。(图文混排)

position

• static 默认值，非定位元素
• relative 相对自身原本位置偏移，不脱离文档流
• absolute 绝对定位，先对于非static祖先元素定位
• fixed 相对于视口绝对定位

relative

• 在常规流里面布局
• 相对于自己本应该在的位置进行偏移
• 使用top left bottom right 设置便宜长度
• 流内其他元素当他没有偏移一样布局

absolute

• 脱离常规流
• 相对于非static 祖先定位
• 不会对流内元素布局造成影响