CSS 学习笔记

引子

这是最近学习 css 记的笔记,其中有些内容还是很有用的,做个记录,便于以后查询,可能会更新。

引入方式

  • link
  • @import(放在 CSS 里)
  • style标签内引入
  • 内联样式,直接通过标签的style属性设置,不推荐使用

选择器

基础选择器

类型 作用
* 匹配页面内所有元素
id 选择器#ct 匹配页面对应的某个元素
类选择器.p1 匹配页面对应的某类元素
标签选择器 p 匹配页面对应标签元素

组合选择器

类型 作用
E,F E 和 F 都被选中
E F 匹配 E 下所有后代的 F 元素
E>F 匹配 E 的字元素的 F 元素
E+F 匹配 E 相邻的 F 元素
E ~ F 匹配所有与 E 相邻的 F 元素
.class1.class2 匹配同时拥有这两个类型的元素

属性选择器

匹配某个元素某个属性是..的选择器,一般不常用,例如div[id]表示匹配所有具有id属性的div

伪类选择器

表示某个元素的某种状态的选择器

例如

1
2
3
4
5
6
7
8
9
10
11
12
:link
:visited
:hover
:active
:checked
:focous
:enabled
:disabled
:first-child / :last-child // 匹配一组兄弟元素中第一个或最后一个元素
:first-of-type / :last-of-type // 匹配一组兄弟元素中其类型的第一个或最后一个元素
:nth-child / nth-last-child // 匹配一组兄弟元素中第n个或倒数第n个元素
:nth-of-type/ nth-last-of-type // 匹配一组兄弟元素中其类型的第n个或倒数第n个元素

伪元素选择器

1
2
3
4
5
::before
::after
::first-letter //选中某块级元素第一行的第一个字母,并且文字所处的行之前没有其他内容
::first-line //选中某块级元素第一行,并且文字所处的行之前没有其他内容
::selection //应用于文档中被用户高亮的部分(比如使用鼠标或其他选择设备选中的部分)这里课件有问题,我查阅了MDN这个是伪元素选择器,但是课件把他放在了伪类选择器中,望改正

选择器优先级

首先,选择器的优先级如下:

  1. !important标记
  2. 内联 style 样式
  3. ID 选择器
  4. Class 选择器
  5. 伪类选择器
  6. 属性选择器
  7. 标签选择器
  8. 通配符
  9. 浏览器自定义

实际组合中,我们从高优先级规则依次往低优先级开始对比,高优先级的选择器标记多,则高优先级选择器优先级更高,如果两组选择器组合一样,那么后面的属性会覆盖前面的属性例如:

1
2
3
4
5
6
7
8
#header .a .b p {
color: red;
} // 权重 a=1 b=2 c=1

#header .a .b .c p {
color: red;
} // a=1 b=3 > 2
// ===>下面这个选择器组合优先级更高

基本样式

块级元素与行内元素

  • 块级元素可以包含块级元素和行内元素,行内元素只能包含文本和行内
  • 块级元素占据一整块空间,行内元素只占据自身宽高
  • 宽高的设置和内外边距设置也有差距
    • 宽高只对块级元素生效,对行内元素无效

常见块级元素和行内元素

1
2
// 块级元素 div h1-h6 p hr form ul dl ol pre table li dd dt tr td th // 行内元素
em strong span a br img button input label select textarea code script

边框

1
border // width color style
1
2
3
4
5
6
7
8
9
10
11
12
// 边框做一个三角形,设置颜色为透明就能实现三角形
.t{
height:0px;
width:0px;
border-top: 30px red solid;
border-right: 30px red solid;
border-bottom: 30px red solid;
border-left: 30px red solid;
}

// 圆角
border-radius

边距

1
2
3
margin //外边距
border // 边框
padding // 内边距

display

1
2
3
display
// inline block list-item
// inline inline-block inline-table

font

chrome 的最小字体是 12px

文本

1
2
3
text-transform 改变文字大小写
word-spacing 改变单词间距
letter-spacing 改变字母间距

常见样式

背景 line-height

1
2
3
4
5
6
7
background

inline-block // 缝隙问题 回车字符会有个缝隙,因为它是行内元素
// 去掉缝隙可以通过设置父元素font-size为0,字元素再设置回来
// inline-block行内元素,会以文字基线对齐,可以通过vertical-align来让它顶部或底部对齐


盒模型

1
2
3
4
5
6
margin  border padding content // 标准盒模型width是content
// IE 盒模型 width=border + padding + content

// CSS3样式
box-sizing:content-box 标准盒模型
box-sizing:border-box IE盒模型

字体图标

1
2
3
4
5
6
7
设计师将图标设计好后转化成unicode码,我们使用unicode放到页面上就形成了字体图标

使用@font-face定义字体库

可以是用font-class方式使用,其实就是把unicode帮我们事先定义好了

使用font-awesome,也是类似的将unicode实现定义好

图标有多种实现方式

  • img标签
  • CSS Sprite 图,就是将多个小图标拼在一起,减少页面请求
  • 字体图标,font-icon
  • CSS ICON 单纯使用 CSS 画图标
  • SVG Sprite,将多个 svg 合成一个 svg,减少请求

清除浮动

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
/* 清除浮动 */
/* 方法一:添加伪类元素 */
.clearfix::after {
content: "";
clear: both;
display: block;
}

/* 方法二:overflow,这个方法实际原理是BFC */
.clearfix {
overflow: hidden/auto/scroll;
}

/* 方法三:给父元素结束标签前插入块级元素 */
<div
class="father"
> <div
class="child"
> 1</div
> <div
class="child"
> 2</div
> <div
class="child"
> 3</div
> <div
class="lastchild"
> 4</div
> </div
> .child {
float: left;
}

.lastchild {
display: block;
}

定位

  • 定位方式
    • static
    • 绝对定位 absolute
    • 相对定位 relative
    • 固定定位 fixed
  • 实现
    • static:文档流的正常定位方式。
    • absolute:不为元素预留空间,元素会脱离标准文档流,通过指定元素相对于最近的非 static 定位祖先元素的偏移,来确定元素位置。绝对定位的元素可以设置外边距(margins),且不会与其他边距合并。
    • relative:该关键字下,元素先放置在未添加定位时的位置,再在不改变页面布局的前提下调整元素位置(因此会在此元素未添加定位时所在位置留下空白)。
    • fixed:不为元素预留空间,而是通过指定元素相对于浏览器窗口(viewport)的位置来指定元素位置。元素的位置在屏幕滚动时不会改变。
  • 参考点
    • absolute:相对于最近的非static祖先元素定位。
    • relative:元素在标准文档流中未添加定位时的原始位置。
    • fixed:浏览器窗口左上顶点。
  • 使用场景
    • static:默认场景。
    • absolute:创建 BFC,脱离文档流,可以通过 z-index 层叠。
    • relative:不会脱离标准文档流,常用在可以位移的元素上。
    • fixed:浮动在页面上的广告,或者回到顶部/底部等锚点等按钮尝试用该定位方式。

BFC

  • 块格式化上下文(Block Formatting Context,BFC) 是 Web 页面的可视化 CSS 渲染的一部分,是块盒子的布局过程发生的区域,也是浮动元素与其他元素交互的区域。

  • 如何生成 BFC

    • 浮动元素
    • 行内块元素
    • 绝对定位
    • overflow值不为 visible 的块元素
    • flex 元素
    • grid 元素
  • BFC 作用

    • 不和浮动元素重叠
    • 清除浮动
    • 防止垂直 margin 重叠
  • 防止 margin 重叠的例子

    • `html


      Haha


      <p>Hehe</p>
      

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      25
      26
      27
      28
      29
      30
      31
      32
      33
      34
      35
      36
      37
      38
      39
      40
      41
      42
      43
      44
      45
      46
      47
      48
      49
      50
      51
      52
      53
      54
      55
      56
      57
      58
      59
      60
      61
      62
      63
      64
      65
      66
      67
      68
      69
      70
      71
      72
      73
      74
      75
      76
      77
      78
      79
      80
      81
      82
      83
      84
      85
      86
      87
      88
      89
      90
      91
      92
      93
      94
      95
      96
      97
      98
      99
      100
      101
      102
      103
      104
      105
      106
      107
      108
      109
      110
      111
      112
      113
      114
      115
      116
      117
      118
      119
      120
      121
      122
      123
      124
      125
      126
      127
      128
      129
      130
      131
      132
      133
      134
      135
      136
      137
      138
      139
      140
      141
      142
      143
      144
      145
      146
      147
      148
      149
      150
      151
      152
      153
      154
      155
      156
      157
      158

      ### 外边距合并

      - 合并场景
      - 相邻元素之间
      - 父元素与第一个或最后一个子元素
      - 空的块级元素
      - 如何合并
      - 块级元素的[上外边距](https://developer.mozilla.org/zh-CN/docs/Web/CSS/margin-top)和[下外边距](https://developer.mozilla.org/zh-CN/docs/Web/CSS/margin-bottom)有时会合并(或折叠)为一个外边距,其大小取其中的最大者,这种行为称为**外边距折叠**(margin collapsing),有时也翻译为**外边距合并**。注意[浮动元素](https://developer.mozilla.org/zh-CN/docs/Web/CSS/float)和[绝对定位元素](https://developer.mozilla.org/zh-CN/docs/Web/CSS/position#absolute)的外边距不会折叠。
      - 如何不让相邻元素外边距合并
      - 浮动元素、inline-block 元素、绝对定位元素的 margin 不会和垂直方向上其他元素的 margin 折叠
      - 父子外边距合并的范例
      - [https://jsbin.com/qoyuzabexu/1/edit?html,css,output](https://jsbin.com/qoyuzabexu/1/edit?html,css,output)

      ## 浏览器兼容

      处理思路

      - 产品角度
      - 成本角度
      - 做到什么程度
      - 如何做
      - 兼容库
      - 选择工具
      - 条件注释

      渐进增强:基础逐步升级

      优雅降级:高级逐步降级

      ### 常见属性兼容

      1. inline-block: >=ie8
      2. min-width/min-height >=ie8
      3. :before,:afte: >=ie8
      4. div:hover >=ie7
      5. background-size >=ie9
      6. 圆角 >=ie9
      7. 阴影 >=ie9
      8. 动画/渐变 >=ie10

      ### 名词解释

      - 条件注释:针对 IE 浏览器的条件注视功能,绝对某些标签是否执行。

      - IE Hack:针对 IE 浏览器的 bug,使用`_`、`*`、`\9`等方法,让某些 css 样式只在对应的 IE 版本生效。
      - js 能力检测:检测对应浏览器是否支持某些特定的能力,然后以此来处理兼容性问题。
      - html5shiv.js:这个 js 文件能够通过`createElement`来创建特定标签兼容 html5 标签。
      - respond.js:Respond.js 让不支持 Media Query 的浏览器包括 IE6+IE8 等其他浏览器支持查询。
      - css reset:初始化部分标签的样式,去掉不同浏览器不同的初始样式带来的影响。
      - normalize.css:相比上卖弄的 css reset,没有强制初始化所有样式,而是针对性的初始化了部分样式,同时修补来某些浏览器的初始样式带来的问题。
      - Modernizr:Modernizr 给不支持 html5 的标签的浏览器,如 IE6,7,8 追加一点由 Remy Sharp 开发的 html5 垫片脚本,使其识别`<aside>`、`<section>`等 html5 元素,给浏览器做‘功能检测’。
      - postCSS:PostCSS 是一个允许使用 JS 插件转换样式的工具。 这些插件可以检查(lint)你的 CSS,支持 CSS Variables 和 Mixins, 编译尚未被浏览器广泛支持的先进的 CSS 语法,内联图片,以及其它很多优秀的功能。

      ### 小工具

      - Css reset
      - normalize.css
      - Modernize

      ## 布局

      - 文档流
      - 浮动
      - 定位

      ### 单列布局

      页面所有内容在中间,两边空白

      ### 双列布局

      常见的后台管理系统,侧栏固定宽度,内容自适应

      ### 三列布局

      两侧固定,中间内容自适应

      ### 水平等距

      +margin 实现

      ### flex 布局

      ### grid 布局

      ### 移动度布局

      - 设置 meta
      - 适配(媒体查询,动态 rem)

      ## CSS 居中

      ```css
      /* 块级元素水平居中 */
      .box {
      margin: 0 auto;
      }

      /* 行内元素水平居中 */
      .box {
      text-align: center;
      }

      /* 行内块级元素水平居中 */
      .box {
      text-align: center;
      }

      /* 垂直居中 */
      .ct {
      padding: 40px 0;
      }

      /* 绝对定位实现居中 */
      /* 需要知道居中内容大小 */
      .abc {
      position: absolute;
      left: 50%;
      top: 50%;
      width: 400px;
      height: 300px;
      margin-left: -200px;
      margin-top: -150px;
      transform: translate(-50%, -50%);
      /* CSS3属性,IE9以上才支持 */
      }

      /* vertical-align */
      .box::before {
      content: "";
      display: inline-block;
      height: 100%;
      vertical-align: middle;
      }

      .box img {
      vertical-align: middle;
      }

      /* table-cell */
      .box {
      width: 300px;
      height: 200px;
      border: 1px solid;
      display: table-cell;
      vertical-align: middle;
      }

      /* flex 居中 */
      .flex-container {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      width: 400px;
      height: 600px;
      }

媒体查询

这个技术常见于响应式布局:

1
2
3
4
5
6
7
8
9
10
11
12
/* 屏幕宽度大于990就是蓝色背景,否则就是橘黄色背景 */
@media screen and (max-width: 990px) {
.container {
background: orange;
}
}

@media screen and (min-width: 990px) {
.container {
background: blue;
}
}

编码规范

命名技巧

  • 语义化标签优先
  • 基于功能命名、基于内容命名、基于表现命名
  • 简明、无后患

CSS 书写规范

  • tab2 个空格
  • 颜色用小写,缩写
  • 小数不用写前缀
  • 尽量使用缩写

结尾

未完待续……

作者

bert_cai

发布于

2019-05-15

更新于

2020-11-16

许可协议

评论