了解CSS｜青训营笔记

余念难安
132 阅读7分钟

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

使用CSS

CSS的使用有三种方法，分别是外链，嵌入，以及内联

外链：将CSS代码单独写在一个文件中，通过link标签将其引入到页面内。

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

嵌入：将CSS代码写在style标签内直接嵌入到页面中

<style>
    p {
        border: 1px solid #999
    }
</style>

内联：HTML所有标签都有一个style属性，可以将CSS代码直接写入style属性中

<p style="margin:1px"></p>

推荐使用外链方法。

选择器 Selector

  • 找出页面中的元素，以便给他们设置样式
  • 使用多种方式选择元素
    • 按照标签名/类名或id
    • 按照属性
    • 按照DOM树中的位置

1. 通配选择器 *

通配选择器可以给所有标签都加上样式，但是优先级最低，一般在编写CSS代码时习惯在最上方加上设置外边框和内边框为0，并且设置为标准盒子模型。

* {
    margin:0;
    padding:0;
    box-sizing:border-box;
}

2. 标签选择器

为所有相同的标签设置样式

h1 {
    color:black;
}
p {
    color:red;
}

3. id选择器

当标签被设置id时，可以选择id值对其设置样式，注意id值不可以重复,选择id时使用井号

<h1 id="title">标题</h1>

<style>
#title {
    color:red;
}
</style>

4. 类选择器

当标签被设置class时，可以选择class类名对其设置样式，class类名可以重复，选择类名时使用点

<h1 class="title">标题</h1>

<style>
.title {
    color:red;
}
</style>

5. 属性选择器

当某一标签含有某一属性时，可以使用中括号包裹属性名，对含有该属性的标签添加样式

<input type="text" disable />
<input type="password" />
<a href="#top"></a>
<a href="a.jpg"></a>
<style>
[disable] {
    color:red;
}
/* 可以在属性等于任意值时选择 */
input[type="password"] {
    color:black
}
/* 可以对属性值进行一些匹配，^表示以“#”开头 */
a[href^="#"] {
    color:blue;
}
/* $表示以“.jpg”结尾 */
a[href$=".jpg"] {
    color:pink;
}
</style>

6. 伪类选择器

  • 不基于标签和属性定位元素
  • 几种伪类
    • 状态伪类
    • 结构性伪类

    1. 状态伪类

    某些标签具有一些不同的状态，而只有当它处于某一状态时才会被选中，例如a标签有默认状态link，访问过的状态visited，悬浮状态hover，点击后状态active，input标签有聚焦状态focus状态等。 
    <style>
a:active {
    color:red;
}
input:focus {
    border:1px solid #ccc;
}
</style>

    2. 结构性伪类

    会根据DOM节点出现在DOM树的不同位置进行选择，例如开头first-child，结尾last-child等。 
    li:last-child {
    border-bottom:none;
}

7. 组合 Combinators

image.png

8. 选择器组

不同选择器之间可以用逗号分隔，表示对所有标签都加上样式

<style>
h1,h2,h3 {
    color:red;
}
</style>

8. 优先级

!important > 行内样式 > ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性

颜色 RGB HSL

RGB：Red红，Green绿，Blue蓝，取值范围都是0～255。所有颜色都可以由三原色调配而成，颜色有两种写法，一种是#99ffaa，每两位代表一个十六进制数分别是红绿蓝三种颜色，第二种写法为rgb(255,255,255)，三个数也代表红绿蓝，二者可以相互转化。

HSL：Hue色相，取值范围0～360，Saturation饱和度，取值范围0～100%，Lightness亮度，取值范围0～100%。写法hsl(360,100%,100%)

透明度 alpha

范围0-1，可以写在rgb和hsl的最后面，写法，rgba(255,255,255,1)，hsla(360,100%,100%,0)

深入CSS

初始值

  • 在CSS中，每个属性都有一个初始值
    • background-color的初始值为transparent
    • margin-left的初始值为0
  • 可以使用initial关键字显式重制为初始值
    • background-color：initial

求值过程

image.png

布局（layout）

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

相关技术

  • 常规流：行级、块级、表格布局、FlexBox、Grid布局
  • 浮动
  • 绝对定位

content-box标准盒子模型、W3C盒子模型

image.png

  1. width宽度
    • 指定content box宽度
    • 取值为长度、百分数、auto
    • auto由浏览器根据其他属性确定
    • 百分数相对于容器的content box宽度
  2. height高度
    • 指定content box高度
    • 取值为长度、百分数、auto
    • auto取值由内容计算得来
    • 百分数相对于容器的content box高度
    • 容器有指定的高度时，百分数才生效
  3. border边框
    • 指定元素四个方向的内边距 border-top:10px
    • 百分数相对于容器宽度
    • 指定容器边框样式、粗细和颜色 border:1px solid #ccc
    小技巧：当设置边框四个方向不同颜色，将盒子宽高都设置为0，隐藏某几个方向的边框即可生成一个三角形
  4. margin外边距
    • 指定元素四个方向的外边距
    • 取值为长度、百分数、auto
    • 百分数相对于容器的宽度
    • 使用margin:auto水平居中
    • 若上下两个元素分别设置下边距和上边距，二者中间的距离只会取两个边距的最大值，而不是加和

border-box怪异盒子模型、IE盒子模型

image.png

盒子模型区别

  • content-box：padding和border不被包含在定义的width和height之内。 盒子的实际宽度=设置的width+padding+border
  • border-box：padding和border被包含在定义的width和height之内。 盒子的实际宽度=设置的width（padding和border不会影响实际宽度）

overflow溢出

  • visible：默认值
  • hidden：溢出部分隐藏
  • scroll：显示滚动条

块级VS行级

Block Level BoxInline Level Box
不和其他盒子并列摆放和其他行级盒子放在一起或拆开成多行
适用所有的盒模型属性盒模型中的width、height不适用
块级元素行级元素
生成块级盒子生成行级盒子、内容分散在多个行盒（inline box）中
body、article、main、div、section、ul、li、h1-h6、p等span、em、strong、cite、code等
display:blockdisplay:inline

display属性

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

常规流 Normal Flow

  • 根元素、浮动和绝对定位的元素会脱离常规流
  • 其他元素都在常规流内（in-flow）
  • 常规流中的盒子，在某种排版上下文中参与布局
    1. 行级排版上下文
      • Inline Formatting Context(IFC)
      • 只包含行级盒子的容器都会创建一个IFC
      • IFC的排版规则
        • 盒子在一行内水平摆放
        • 一行放不下时，换行显示
        • text-align决定一行内盒子的水平对齐
        • vertical-align决定一个盒子在行内的垂直对齐
        • 避开浮动（float）元素
    2. 块级排版上下文
      • Block Formatting Context(BFC)
      • 某些容器会创建一个BFC
        • 根元素
        • 浮动、绝对定位、inling-block
        • Flex子项和grid子项
        • overflow值不是visible的块盒
        • display:flow-root
    3. BFC内的排版规则
      • 盒子从上到下播放
      • 垂直margin合并
      • BFC内盒子的margin不会与外面的合并
      • BFC不会和浮动元素重叠
    4. Flex Box
      • 一种新的排版上下文
      • 它可以控制子集盒子的：
        • 摆放的流向（ ↑ ← → ↓ ）
        • 摆放顺序
        • 盒子宽度和高度
        • 水平和垂直方向的对齐
        • 是否允许折行
        • justify-content控制主轴，align-items控制侧轴，flex设置所占份数
    5. Grid布局
    • display:grid使元素生成一个块级的Grid容器
    • 使用grid-template相关属性将容器划分为网格
    • 设置每一个子项占哪些行和列

float浮动

由于目前的flex布局和grid布局功能强大，几乎很少再使用浮动布局，只有在少部分场景例如图文结合的情况才会使用。

position定位

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

学习CSS的几点建议

  • 充分利用MDN和M3C CSS规范
  • 保持好奇心，善用浏览器开发工具
  • 持续学习，CSS新特性还在不断出现
avatar
文章
阅读
粉丝