CSS | 青训营笔记

小鱼干soo
116 阅读8分钟

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

本篇笔记内容分为了解CSS和深入CSS两大部分。
第一部分：CSS是什么？& CSS如何使用？
第二部分：选择器的优先级 & CSS的布局 & 块级与行级的区别 & 有关FlowBox & Grid布局

了解CSS

CSS是什么？（Cascading Style Sheets）

用来定义页面元素的样式。例如：设置字体和颜色、设置位置和大小、添加动画效果。

CSS基本组成

CSS规则：选择器 + {}

例：

h1：选择器 Selector；

color：属性 Property；

white：属性值 Value；

font-size: 14px; ：声明 Declaration。

h1 {
    color: white;
    font-size: 14px;
}

在页面中使用CSS

<!-- 外链(推荐) -->
<link rel="stylesheet" href="/assets/style">
​
<!-- 嵌入 -->
<style>
    li { margin: 0; list-style: none; }
    p {margin: lem 0; }
</style>
​
<!-- 内联 -->
<p style="margin: lem 0">Example Content</p>

CSS是如何工作的？

CSS工作流程图

选择器 Selector

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

使用多种方式选择元素：1、按照标签名、类名或id； 2、按照属性； 3、按照DOM树中的位置。

通配选择器 --> *
<style>
    * {
        color: red;
        font-size: 20px;
    }
</style>
标签选择器 --> HTML标签
<style>
    h1 {
        color: red;
    }
    p {
        color: blue;
        font-size: 20px;
    }
</style>
id选择器 --> #
<style>
    #logo {
        font-size: 60px;
        font-weight: 200;
    }
</style>
​
<h1 id="logo">
    <img src="" alt="HTML5 logo" width="48" />
    HTML5 文档    
</h1>
类选择器 --> .
<style>
    .done {
        color: blue;
        text-decoration: line-through;
    }
</style>
​
<h2>Todo List</h2>
<ul>
    <li class="done">Learn HTML</li>  <!-- 删除线 -->
    <li class="done">Learn CSS</li>   <!-- 删除线 -->
    <li>Learn JavaScript</li>
</ul>
属性选择器 --> [] { }
<label>用户名：</label>
<input value="zhao" disabled />
​
<label>密码：</label>
<input value="123456" type="password" />
​
<p><a href="#top">回到顶部</a></p>
<p><a href="a.jpg">查看图片</a></p>
​
<style>
    [disabled] {
        background: #eee;
        color: #999;
    }
</style>
​
<!--  只选择了密码input框
<style>
    input[type="password"] {
        border-color: red;
        color: red;
    }
</style>
-->
​
<!--
<style>
    <!-- 以#开头的会被匹配
    a[href^="#"] {
        color: red;
    }
​
    <!-- 以.jpg结尾的会被匹配
    a[href$=".jpg"] {
        color: deepskyblue;
    }
</style>
-->

伪类（pseudo-classes）

· 不基于标签和属性定位元素

· 几种伪类 ----> 1、状态伪类 2、结构性伪类

1、状态伪类
<a href="http://example.com">
    example.com
</a>
​
<label>
    用户名：
    <input type="text">
</label>
​
<style>
    /* 默认状态下 */
    a:link {
        color: black;
    }
    
    /* 访问后 */
    a:visited {
        color: gray;
    }
    
    /* 鼠标移动到链接上后 */
    a:hover {
        color: orange;
    }
    
    /* 鼠标按下后 */
    a:active {
        color: red;
    }
    
    /* focus状态 */
    :focus {
        outline: 2px solid orange;
    }
</style>
2、结构伪类
<ol>
    <li>阿凡达</li>
    <li>泰坦尼克号</li>
    <li>复仇者联盟 3</li>
    <li>侏罗纪世界</li>
    <li>星球大战</li>
</ol>

<style>
    li {
        list-style-position: inside;
        border-bottom: 1px solid;
        padding: 0.5em
    }
    
    li:first-child {
        color: coral;
    }
    
    li:last-child {
        border-bottom: none;
    }
</style>

选择器组合

<label>
	用户名：
    <input class="error" value="aa">
</label>
<span class="error">
	最少3个字符
</span>

<style>
    .error {
        color: red;
    }
    
    /* 只对输入框生效 */
    input.error {
        border-color: red;
    }
</style>

选择器组

body, h1, h2, h3, h4, h5, h6, ul, ol, li {
	margin: 0;
	padding: 0;
}

[type="checkbox"], [type="redio"] {
    box-sizing: border-box;
    padding: 0;
}

颜色 - RGB

#8fac87 rgb(143, 172, 135)

颜色 - HSL

Hue：色相(H)是色彩的基本属性，如红色、黄色等；取值范围是0 ~ 360。

字体 font-family

可以指定多个字体，为了适应不同设备。

通用字体族

serif 衬线体（Georgia、宋体）；sans-serif 无衬线体（Arial、Helvetica、黑体、微软雅黑）；Cursive 手写体（Caflish Script、楷体）；Fantasy（Comic Sans MS、Papyrus）；Monospace 等宽字体（Consolas、Courier、中文字体）

使用Web Fonts
<h1>Web fonts are awesome!</h1>

<style>
    @font-face {
        font-family: "Megrim";
        src:url(http://)
            format('woff2')
    }
    
    h1 {
        font-family: Megrim, Cursive;
    }
</style>

字体大小 font-size

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

斜体 font-style: italic

字重（字的粗细） font-weight:

取值：100 ~ 900。 400 - normal；700 - bold。

与字体有关，不是所有字体都有100 - 900字重

行高 line-height

字体 font

font: style weight size/height family

例：

h1 {
	font: bold 14px/1.7 Helvetica, sans-serif;
}

p {
    font: 14px serif;
    
}

文本对齐 text-align

左对齐：left 右对齐：right 居中对齐：center 两端对齐：justify

文本间距 spacing

字间距：letter-spacing 词间距：word-spacing 单位：px

文本缩进 text-indent

作用对象：段落的第一行。

文字修饰 text-decoration

无修饰：none 下划线：underline 删除线：line-through 上划线：overline

处理元素中的空白 white-space

  • normal：默认。连续的空白符会被合并，换行符会被当作空白符来处理。

  • nowrap：和 normal 一样，连续的空白符会被合并。但文本内的换行无效。

  • pre：空白会被浏览器保留。其行为方式类似 HTML 中的pre标签。

  • pre-wrap：保留空白符序列，但是正常地进行换行。

  • pre-line：合并空白符序列，但是保留换行符。

  • inherit：规定应该从父元素继承 white-space 属性的值。

*引用自CSS white-space 属性 | 菜鸟教程 (runoob.com)

break-spaces 与 pre-wrap的行为相同，除了：

  • 任何保留的空白序列总是占用空间，包括在行尾。
  • 每个保留的空格字符后都存在换行机会，包括空格字符之间。
  • 这样保留的空间占用空间而不会挂起，从而影响盒子的固有尺寸（最小内容大小和最大内容大小）。

调试CSS

  • 右键 ---> 检查

  • 快捷键

    • Ctrl+Shift+I

深入CSS

选择器的特异度(Specificity)

id > (伪)类 > 标签

例：

“主要按钮”的color，background被改变。

<button class="btn">普通按钮</button>
<button class="btn primary">主要按钮</button>
<style>
  .btn {
    display: inline-block;
    padding: .36em .8em;
    margin-right: .5em;
    line-height: 1.5;
    text-align: center;
    cursor: pointer;
    border-radius: .3em;
    border: none;
    background: #e6e6e6;
    color: #333;
  }
  .btn.primary {
    color: #fff;
    background: #218de6;
  }
</style>

继承

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

显式继承
* {
    box-sizing: inherit;
}

html {
    box-sizing: border-box;
}

.some-weight {
    box-sizing: content-box;
}

初始值

  • CSS中，每个属性都有一个初始值

    • background-color的初始值为transparent
    • margin-left的初始值为0

  • 可以使用initial关键字显式重置为初始值

    • 例：background-color: initial

CSS求值过程

CSS求值过程流程图

布局（Layout）是什么？

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

布局相关技术：

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

盒模型

width

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

height

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

内边距 padding

  • 指定元素四个方向的内边距
  • 百分数相对于容器宽度

border

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

  • 三种属性

    • border-width
    • border-style
    • border-color

  • 四个方向

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

当四条边颜色不相同时，得到三角形！！！

外边距margin

  • 指定元素四个方向的外边距
  • 取值可以是长度、百分数、auto
  • 百分数相对于容器宽度

margin: auto 水平居中

border-sizing: border-box 包括padding和border在内的宽高

overflow

  • visible：超出盒子部分显示
  • hidden：超出盒子部分隐藏
  • scroll：可滚动

块级 VS 行级

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

display属性

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

常规流 Normal Flow

行级排版上下文

  • Inline Formatting Context（IFC）

  • 只包含行级盒子的容器会创建一个IFC

  • IFC内的排版规则

    • 盒子在一行内水平摆放
    • 一行放不下时，换行显示
    • text-align决定一行内盒子的水平对齐
    • vertical-align决定一个盒子在行内的垂直对齐
    • 避开浮动（float）元素*

块级排版上下文

  • Block Formatting Context（BFC）

  • 某些容器会创建一个BFC

    • 根元素
    • 浮动、绝对定位、inline-block
    • Flex子项和Grid子项
    • overflow值不是visible的块盒
    • display: flow-root;

  • BFC内的排版规则

    • 盒子从上到下摆放
    • 垂直margin合并
    • BFC内盒子的margin不会与外面合并
    • BFC不会和浮动元素重叠

Flex Box 是什么？

  • 一种新的排版上下文

  • 它可以控制子级盒子的：

    • 摆放的流向
    • 摆放顺序
    • 盒子宽度和高度
    • 水平和垂直方向的对齐
    • 是否允许换行

控制流向 flex-direction

  • row：从左到右
  • row-reverse：从右到左
  • column：从上到下
  • column-reverse：从下到上

image.png 图源[Flexbox 使用指南]

主轴与侧轴

横向是主轴，纵向是侧轴。

主轴上的对齐

justify-content： 定义了items在主轴上的对齐方式。

image.png 图源[Flexbox 使用指南]

align-items： 定义了items在交叉轴上的对齐方式（主轴为单根轴线）。

image.png 图源[Flexbox 使用指南]

align-self：

【引用】CSS align-self 属性 | 菜鸟教程 (runoob.com)

order：

作用：可以决定本身的排列先后顺序

Flexibility

  • 可以设置子项的弹性：当容器有剩余空间时，会伸展；容器空间不够时，会收缩。

    • flex-grow 有剩余空间时的伸展能力
    • flex-shrink 容器空间不足时收缩的能力
    • flex-basis 没有伸展或收缩时的基础长度

flex

flex: 1 flex-grow: 1

flex: 100px flex-basis: 100px

flex: 2 1 flex-grow: 2; flex-shrink: 1

flex: 1 100px flex-grow: 1; flex-basis: 100px

flex: 2 0 100px flex-grow: 2; flex-shrink: 0; flex-basis: 100px

flex: auto flex: 1 1 auto

flex: none flex: 0 0 auto

Grid布局？

display: grid

  • 使元素生成一个块级的Grid容器
  • 使用grid-template相关属性将容器划分为网格
  • 设置每一个子项占哪些行/列

grid-template-columns: 纵向的

grid-template-rows: 横向的

grid line 网格线

grid-row-start: 1;

grid-column-start: 1;

grid-row-end: 3;

grid-column-end: 3;

float 浮动

可以实现图片的文字环绕

position属性

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

position: relative

  • 在常规流里面布局
  • 使用top、left、right、bottom设置偏移长度
  • 流内其它元素当它没有偏移一样布局

position: absolute

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

拓展

粘性定位 position：sticky

可以被认为使相对定位和固定定位的混合。

  • 以浏览器的可视窗口为参照点移动元素（固定定位特点）
  • 粘性定位占有原先的位置（相对定位特点）
  • 必须添加 top、left、right、bottom其中一个才有效。

总结

逐渐熟练于通过写文章的方式整理笔记，边整理边巩固。
关于CSS还有很多使用需要去亲自敲代码加深记忆。

avatar
文章
阅读
粉丝