CSS｜ 青训营笔记

CathyWong
129 阅读5分钟

CSS｜ 青训营笔记

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

一、本堂课重点内容：

  • CSS的概念，在页面中的使用，工作原理。
  • CSS选择器，颜色、字体等基础语法，CSS的调试。
  • css选择器的特异度，属性的继承，CSS求值过程。
  • CSS的布局。

二、详细知识点介绍：

1.CSS的概念

  • Cascading Style Sheets
  • 用来定义页面元素的样式
    • 设置字体和颜色
    • 设置位置和大小
    • 添加动画效果
h1(选择器selector）{
    color(选择器property):white(属性值value);
    font-size:14px;(生命declaration)
  • 在页面中使用CSS：
<!--外链--> 
<link rel = "stylesheet" href = "/assets/style.css">

<!--嵌入--> 
<style>
    li {margin: 0; list-style: none;} 
    p {margin: 1em 0;} 
</style> 

<!--内联--> 
<p style = "margin:1em 0" > Example Content </p>

不推荐使用内联。

2.CSS是如何工作的

加载HTML->解析HTML->(加载CSS->解析CSS--添加样式到DOM节点-->)创建DOM树->展示页面

3.选择器

找出页面中多个元素，以便给他们设置样式

  • 通配选择器：选择页面上所有的HTML元素
* {
  color: blue;
}
  • 标签选择器
  • id选择器：使用 HTML 元素的 id 属性来选择特定元素。元素的 id 在页面中是唯一。
#id{
  color: red;
}
  • 类选择器：选择有特定 class 属性的 HTML 元素。
.class {
  color: red;
}
  • 属性选择器:根据元素的属性及属性值来选择元素
input[type="password"]{
    color:red;
}

也可以匹配

a[href$=".jpg"]{
    color:blue;
}
  • 伪类（pseudo-classes）：状态性，结构性

状态性：

a:link{
    color:black;
}
a:visited{
    color:gray;
}

结构性：

li:first-child{
    color:red;
}
  • 组合（combinators）:直接组合AB、后代组合A B、亲子组合A>B、兄弟选择器A~B、相邻选择器A+B。
  • 选择器组

格式化文本：颜色-RGB/HSL、alpha透明度、字体font-family、font-size、line-height、white-space

调试CSS：右键点击页面，选择【检查】。或使用快捷键Ctrl+shift+I。

选择器的特异度（Specificity） id>（伪）类>标签

4.继承

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

  • 显式继承：如果一个属性不可继承，可以用inherit关键词显式继承。
* {
    box-sizing:inherit;
}

初始值：CSS中每个属性都有一个初始值。可以用initial关键字显式重置为初始值。

5.求值过程

image.png

image.png

6.布局

  • 确定内容的大小和位置的算法
  • 依据元素、容器、兄弟节点和内容等信息来计算。
  • 布局相关技术：常规流、浮动、绝对定位。

盒模型

image.png

  • height

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

  • padding

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

  • border

    • 指定容器边框样式、粗细和颜色
    • 三种属性(width/style/color)、四个方向。

  • margin

    • 指定元素四个方向的外边距
    • 取值可以是长度、百分数、auto
    • 百分数相对于容器宽度
    • margin:auto可以用来水平居中
    • margin collapse

overflow可以设置溢出的部分是什么状态。

（1）常规流

  • 行级vs块级
块级行级
不和其他盒子并列排放和其他行级盒子一起放在一行或拆成多行
适用所有的盒模型属性盒模型中的width、height不适用

块级元素行级元素
生成块级盒子- 生成行级盒子
- 内容分散在多个行盒（line box）中
body\artivle\div\main\section
\h1~6\p\ul\li…		span\em\strong\cite\code
display:blockdisplay:inline

display:inline-block 本身是行级，可以放在行盒中；可以设置宽高；作为一个整体不会被拆成多行。

display:none排版时完全忽略

  • 根元素、浮动和绝对定位的元素会脱离常规流
  • 其他元素都在常规流之内（in-flow）
  • 常规流中的盒子，在某种排版上下文中参与布局。

行级排版上下文

  • inline formatting context(IFC)
  • 只包含行级盒子的容器会创建一个IFC
  • IFC内的排版规则
    • 盒子在一行内水平摆放
    • 一行放不下时，换行显示
    • text-align决定一行内盒子的水平对齐
    • vertical-align决定一个盒子在行内的垂直对齐
    • 避开浮动（float）元素

块级排版上下文

  • Block Formatiing Context（BFC）
  • 某些容器会创建一个BFC
    • 根元素
    • 浮动、绝对定位、inline-block
    • Flex子项和Grid子项
    • overflow值不是visible的块盒
    • diaplay：flow-root；
  • BFC内的排版规则
    • 盒子从上到下摆放
    • 垂直margin合并
    • BFC内盒子的matgin不会与外面的合并
    • BFC不会和浮动元素重叠

Flex Box

  • 一种新的排版上下文
  • 它可以控制盒子的
    • 摆放的流向、顺序
    • 盒子宽度和高度
    • 水平和垂直方向的对齐
    • 是否允许折行

主轴：可以使用justify-content对齐

侧轴：可以使用align-items对齐

Flexibility

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

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

Grid布局

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

（2）float浮动

position属性

  • static

  • relative

    • 在常规流里面布局
    • 相对于自己本应该在的位置进行便宜
    • 使用top、left、bottom、right设置偏移长度
    • 流内其他元素当他没有偏移一样布局（不影响其他元素）

  • absolute

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

  • fixed

    • 脱离常规流
    • 相对于视口定位

三、实践练习例子：

通过设置border粗细、颜色不同，可以画出三角形。

css: 
* {
    margin: 0;
    padding: 0;
} 
.content { 
    width:0; 
    height:0; 
    margin:0 auto;
    border:50px solid transparent;
    border-top: 50px solid pink; 
    }
    
html: 
<div class="content"></div>

四、课后个人总结：

  • 可以充分利用MDN和W3C CSS规范学习CSS。在浏览器的开发者工具里可以学习页面的布局。
  • 常规流和浮动是不同的布局技术，flex和grid都属于常规流。

五、引用参考：

  • 笔记内容来自课程视频，无参考其他文档。
avatar
文章
阅读
粉丝