02- 理解 CSS | 青训营笔记

欢莱
71 阅读5分钟

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

由于在一年半前已经学习并且运用过CSS啦，所以本篇文章当做复习啦！

一、CSS 介绍

Cascading Style Sheets 层叠样式表。定义页面元素的样式。

二、使用 CSS

  • 外链
<link rel="stylesheet" href="/assets/style.css">
  • 嵌入
<style>
   p { margin: 0;}
</style>
  • 内联
<p style="margin: 0">哈哈</p>

三、CSS 选择器

  • 通配选择器 *
  • 标签选择器 h1
  • id 选择器 #logo
  • 类选择器 .save
  • 属性选择器
    • [disabled] 选择有 disabled 属性的元素
    • input[type="password"] 选择 type 属性为 password 的 input 元素
    • a[href^="#"] 选择 href 值以 # 开头的 a 元素
    • a[href$=".jpg"] 选择 href 值以 .jpg 结尾的 a 元素
  • 伪类 （不基于标签和属性定位元素）
    • 状态伪类
      • :hover 、:active、:focus
    • 结构性伪类
      • li:first-child
  • 组合 input:focus、nav a、div > p、h2 ~ p、h2 + p
  • 选择器组 h2, p, div

四、CSS 颜色

  • RGB color: rgb(234, 12, 190) 加上透明度：color: rgb(234, 12, 190, 0.7)（有些浏览器需要是 rgba）
  • HSL color: hsl(234, 78%, 20%)
    • Hue 色相（色彩的基本属性，取值范围：0-360）
    • Saturation 饱和度（色彩的鲜艳程度，越高越鲜艳，取值范围：0-100%）
    • Lightness 亮度（颜色的明亮程度，越高越亮，取值范围：0-100%）
  • 颜色值 red
  • 十六进制 #f3f400f6

五、CSS 字体

font-family

h1 {
    font-family: Optima, Georgia, serif;
}

多个值，为了不同设备，从前往后，设备有该字体则设置该字体。

通用字体族：

  • serif 衬线体 宋体等
  • sans-serif 非衬线体 黑体、微软雅黑、Arial等
  • Cursive 手写体 楷体等
  • Fantasy 梦幻字体、艺术字体
  • Monospace 等宽字体

在 font-family 值的最后，要加上通用字体族（指某类字体），保证字体正常显示。

注：英文字体写在中文字体前。因为从前往后解析，若中文字体在前，显示的英文字体将是中文的英文，而不是我们设置的英文字体。

font-size

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

font-wight

100-900

其中 400是normal、700是bold

但是字体本身设计的可能并没有那么多的字重，所以有时200和300一样的效果。

line-height

两行文字基准线间的距离。

没有单位的数字表示相对于字体大小的倍数。

white-space

  • normal 默认 只展示一个空格，多个空格合并为一个。根据盒子宽度换行。
  • nowrap 强制不换行，只在一行显示。
  • pre 保留原有的格式（包括换行和空格）
  • pre-wrap 保留空格
  • pre-line 保留换行

调试：快捷键 f12 或 ctrl+shift+i

六、选择器的特异度

  • id 100
  • 伪类、类 10
  • 标签 1

可以这样计算： #nav .list li a:link

标题(伪)类标签
122

就为 122

七、继承

可继承属性：

  • font

    • word-break
    • letter-spacing
    • text-align
    • text-rendering
    • word-spacing
    • white-space
    • text-indent
    • text-transform
    • text-shadow

  • line-height

  • color

  • visibility

  • cursor

显式继承：
本不是继承属性，但我们可以设置他继承。如 box-sizing: inherit

initial 显式重置为初始值

八、布局

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

盒子

  • width/height
  • padding
  • border
    • image.png四条边颜色不同时，连接地方时斜切。根据需要设置其他边透明，设置各边宽度，则可得到一个想要的形状。 image.png
  • margin
    • 百分比是相对于容器
    • margin: 0 auto; 水平居中
    • 垂直方向存在边距的合并，合并以大值为准。（有解决办法，之后再写）

box-sizing: border-box 设置 width = content + 2padding + 2border （项目经常用到此属性值）
box-sizing: content-box 默认值，设置 width = content


display 属性

  • block 块级盒子
  • inline 行级盒子
  • inline-block 既有行级属性，又有块级属性
  • none 排版时完全被忽略（即不显示本元素，且不占位置/空间）

行级排版上下文 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

  • 一种新的排版上下文
  • 可以控制子级盒子的：
    • 摆放的流向(→ ← ↑ ↓)
    • 摆放顺序
    • 盒子宽度和高度
    • 水平和垂直方向的对齐
    • 是否允许折行

display: flex 可以看 阮一峰老师的 Flex 布局教程

二维布局： 阮一峰老师的 Grid 网络布局教程

float 属性

有了 Flex、Grid 布局，不用再去考虑清除浮动等问题。
将float回归它本来的用途，就是文字环绕图片。

<img src="1.jpg" style="float:left" />
<p>img设置float为left，img就脱离了文档流，p标签会
与img重叠一部分，但p标签中的文字是环绕图片的。
</p>

position 属性

  • static 默认值，非定位元素
  • relative 相对定位，相对于原位置的偏移，不脱离文档流，（原位置还保留）
  • absolute 绝对定位，相对于 position 值非 static 的祖先元素定位，脱离文档流
  • fixed 相对于视口绝对定位，脱离文档流
  • sticky 粘性布局，是CSS3新属性。

具体可以看我的这篇文章 CSS 的 position（定位）属性

avatar
文章
阅读
粉丝