CSS学习 | 青训营笔记

60 阅读8分钟

这是我参与「第五届青训营 」伴学笔记创作活动的第2天,今天学习的内容是前端基础三件套中的CSS。

主要内容有以下:

  • CSS基础
  • 样式如何生效
  • CSS布局介绍

CSS基础

CSS的构成

p{
	color:blue;
	font-size:14px;
}
  • p是选择器selector,也就是选择要对哪些标签修改样式,这里就是修改所有p标签的样式
  • color和font-size都是选择器属性,后面跟属性值;这样一个键值对就是一条声明
  • 选择器加上大括号的内容称为一条规则,css就是由这样的很多条规则组成的

💡 如何使用CSS

  • 外链使用link标签引入样式,样式写在单独的css文件里
  • 嵌入是在html文件里使用style标签,将样式写在标签内
  • 内联是直接在某个标签内使用style属性添加样式,不用写选择器
<!--外链-->
<link rel="stylesheet" href="/assets/style.css">

<!--嵌入-->
<style>
	p{ color:blue; font-size:14px; }
<style>

<!--内联-->
<p style="color:blue;font-size:14px;">Hello World</p>

💡 CSS是如何工作的

解析CSS后将dom树变成一个渲染树,最后展示页面

1.png

选择器

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

选择元素的方式:

  • 按照标签名(p,h1,…)、类名(class=””)、id(id=“”)
  • 按照属性
  • 按照DOM树中的位置

常见选择器

  • 通配选择器 对所有元素都会生效
*{
	color:red;
	font-size:20px;
}
  • 标签选择器 这里选择文字标签p
p{
	color:orange;
	font-size:14px;
}
  • 类选择器
.top{
    font-weight: bolder;
}
  • id选择器 id值需唯一
#logo{
    font-size: 60px;
    font-weight: 200;
}
  • 属性选择器

选择有某种属性,或属性为特定值的元素,且值可以使用匹配来条件筛选

[diasbled]{
    background-color: #eee;
    color: #999;
}
/* 只想选择属性为特定值的 */
input[type="password"]{
    border-color: red;
    color: red;
}
  • 伪类(pseudo-classes)

状态伪类 link,visited,hover,active,focus

/* 状态伪类 当元素处于某种状态才会被选中 如链接默认、已访问、鼠标悬停、激活 */
a:link{
    font-weight: bold;
}
a:visited{
    color: grey;
}
a:hover{
    color: aqua;
}
a:active{
    color: red;
}
/* 聚焦状态 */
:focus{
 outline: 2px solid orange;
}

结构性伪类 first-child,last-child

/* 结构性伪类 根据元素在dom树中的位置进行选择 还有更多用法*/
li{
    border-bottom: 1px solid;
}
li:first-child{
    color:pink;
}
li:last-child{
    border-bottom: none;
    color:blueviolet;
}

选择器组合使用

1.png

多个选择器设置同一样式用”,”组合

body,h1,h2,p,a{
	color:red;
}
[type="button"],[type="password"]{
	margin:0;
}

样式如何生效

特异度(Specificity)

根据选择器的特异度决定生效优先级。id优先级最高,(伪)类,标签其次

2.png

继承

3.png

  • 文字相关的内容比如字号颜色一般都可以继承,但盒模型的属性不可以,比如width

显示继承:

box-sizing定义如何计算一个元素的总宽度和总高度,主要设置是否需要加上内边距(padding)和边框等

/*通过inherit属性值让不可继承的属性继承给子元素*/
*{
	box-sizing:inherit;/*宽高继承自父元素*/
}
html{
	box-sizing:border-box;/*不包含margin*/
}
.some-widget{
	box-sizing:content-box;/*默认值*/
}

初始值:

  • CSS中每个属性都有一个初始值,可以使用关键字initial重置为初始值

CSS样式的计算流程

4.png

5.png

CSS布局

0.png

  • 布局是确定内容和大小位置的算法
  • 依据元素、容器、兄弟节点和内容等信息来计算
  • 三种主要的布局方式:常规流(Normal Flow)、float、绝对定位

盒模型

box-sizing: content-box

  • 盒模型可以看作一个盒子,一个容器。
  • 内容content有基础的宽高,然后有内边距padding,边框border,外边距margin

📦 width

  • 指定content box宽度
  • 取值为长度、百分数、auto
  • auto由浏览器根据其他属性决定
  • 百分数是相对于容器(当前这个元素所在的盒子)的content box宽度

📦 height

  • 指定content box高度
  • 取值为长度、百分数、auto
  • auto由浏览器根据其他属性决定
  • 百分数是相对于容器的content box高度
  • 容器有指定的高度时,百分数才生效

📦 padding

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

写一个值是对四边都生效,两个值是左右和上下的值,四个值是上左下右顺时针一圈的值。

tips:当把容器content的宽高都设为0,且四条边框颜色各不相同时可以得到下图,只有边框且分界线是斜切过来的。得到了三个三角形,根据需要可以把其中几个三角形设置为透明从而得到各种各样的形状 4.png

📦 border

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

5.png

📦 margin

  • 指定元素四个方向的外边距
  • 取值为长度、百分数、auto
  • 百分数是相对于容器的宽度
  • 当margin-left与margin-right均为auto的时候能达到水平居中的效果
  • margin在垂直方向上会有边距的合并,会取相邻两个元素中较大的边距值

box-sizing: border-box

  • 此时的width和height是包含padding以及border在内一起计算的
  • 实际项目中会使用border-box比较多

盒模型布局规则

🧱 块级 Block Level Box display: block

  • 不和其他盒子并排摆放
  • 适用所有的盒模型属性
  • 块级元素
    • 生成块级盒子
    • 标签body、article、div、main、section、h1-6、p、ul、li等

〰️ 行级 Inline Level Box display:inline

  • 和其他行级盒子放在一行或拆开成多行
  • 盒模型中的width、height不适用
  • 行级元素
    • 生成行级盒子
    • 内容分散在多个行盒(inline box)中
    • 标签span、em、strong、cite、code等

display:block|inline|inline-block|none

inline-block:本身是行级,可以放在行盒中;可以设置宽高;作为一个整体不会被拆散成多行 none:排版时完全忽略(被隐藏)

常规流(Normal Flow)

行级排版上下文

〰️ 行级排版上下文 IFC

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

IFC内的排版规则

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

这里有一个超长的单词,由于有宽度限制,一行放不下的时候会超出,当将overflow-wrap改成break-word的时候长单词会自动换行;这里的图片和em标签的内容都属于是inline-box的排版方式,能够放在一行内。

块级排版上下文

🧱 块级排版上下文 BFC

  • Block Formatting Context
  • 某些容器会创建一个BFC
    • 根元素html
    • 浮动的元素、绝对定位、inline-block
    • Flex子项和Grid子项
    • overflow值不是visible的块盒(overflow:hidden)
    • display:flow-root;

IFC内的排版规则

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

span标签里的内容原本是行级排版的方式,但是由于里面多了一个div容器是块级的,CSS引擎就把div前后的内容作为匿名的盒子(匿名盒子也就是说这不是我们自己写在html里的内容),三个盒子这样就i可以排版了。

Flex Box

📦 Flex Box

  • 一种新的排版上下文(一维的布局模式)
  • display:flex

他可以控制子级盒子的:

  • 摆放的流向(→ ← ↑ ↓)flex-direction

  • 摆放顺序

  • 盒子宽度和高度

  • 水平和垂直方向的对齐 justify-content 2.png

  • 是否允许折行

目前使用最多的排版方式

flex-direction: row|column|row-reverse

justify-content:主轴上的对齐

正序,倒序,居中排列

盒子之间的间距都相同,但与页面的边距不太一样

align-items:侧轴上对齐 默认值是stretch

  • 这是对于盒子整体设置的,也可以使用align-self对一个特定元素设置对齐方式 还有order进行排序

5.png

Flexibility

Flexibility

  • 可以设置子项的弹性:当容器有剩余空间时,会伸展;容器空间不够时,会收缩。
  • flex-grow有剩余空间时的伸展能力,默认值为0
  • flex-shrink容器空间不足时的收缩能力,默认值为1
  • flex-basis没有伸展或收缩时的基础长度,默认去找之前设定的宽高

这些可以缩写成一个flex属性 8.png

  • 有剩余的空间时除去原本既不伸展也不收缩的300空间,剩下空余的以2:1分配给A,B
  • 当空间不够时,多出的100px根据宽度比乘上2:1:1之后的比例 也就是10:5:1由A,B,C收缩
  • 有padding和margin时计算就不太一样了

Grid布局

9.png

  • Grid是一个二维的布局,通过grid-template属性将容器分成二维的网格
  • 划分好网格后设置每一个子项占的行\列

10.png

0.png 1fr代表one fraction 就是一份

grid line 网格线

11.png

12.png

用序号表示网格线

13.png 这样用四边的网格线 1 1 3 3 就可以表示一个区域

14.png

Float

为了实现文字环绕的效果

图文混排时给img标签设置float: left就行

绝对定位

position属性

  • static:默认值,非定位元素
  • relative:相对于自身原本位置偏移,不脱离文档流

15.png

  • absolute:绝对定位,相对非static祖先元素定位

找不到祖先非static元素,就相对于根元素html定位

16.png

  • fixed:相对于视口(当前可视区域)绝对定位

example:

CodePen Embed - 青训营/CSS/position-fixed

tips:充分利用MDNW3C CSS规范