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

CSS基础知识

Q:CSS是什么
A:Cascading Syle Sheets 层叠样式表用来定义页面元素的样式

设置字体和颜色
设置位置和大小
添加动画效果

CSS样式

h1{color:white; font-size:14px;}h1:选择器Selector对页面所有h1进行修改样式,里面是样式的属性Property及属性值Value 一个属性：属性值；为一个声明Declaration

示例2.1

在页面中给使用CSS

外链： CSS样式装入单独文件用link标签引入到页面里面（推荐）

<link rel="stylesheet" href="/assects/style.css">

嵌入：直接把样式嵌入到HTML标签里面

<style>
    li{margin:0; list-style:none;}
    p{margin:lem 0;}
</style>

内联：直接写在标签的style属性里无需选择器（不推荐）

<p style="margin:lem 0">Example Content</p>

选择器Selector

找出页面中的元素，以便给他们设置样式
使用各种方式选择元素

按照标签名、类名或id
按照属性
按照DOM树中的位置

通配选择器
标签选择器
id选择器
类选择器
属性选择器

伪类pseudo-classes

不基于标签和属性定位元素
几种伪类：状态为类、结构性伪类

示例2.2

示例2.3

示例2.4

示例2.5

选择器组

body,h1,h2,h3,h4,h5,h6,ul,ol,li{
    margin:0;
    padding:0;
}
[type="checkbox"],[type="radio"]{
    box-sizing:border-box;
    padding:0;
}

颜色

RGB 三条线分别表示红绿蓝三色的量
表示：rgb（红，绿，蓝）取值0-255
表示：#000000黑
#FFFFFF白
HSL 表示：hsl(0-360,0-100%,0-100%) alpha不透明度可在上面三中表示方法的后面加入一个数值取值0-1 rgba/hsla

字体（先写英文字符的字体）

通用字体族（最后写一个）

serif衬线体
sans-serif无衬线体
cursive手写体
fantasy
monospace等宽字体可以使用web fonts 下载字体

@font-face{
    font-family:f1;
    src:url("字体地址")format("woff2");
}

font-size

关键字：small、medium、large
长度：px、em eg:font-size：20px；
百分数：相对于父元素字体大小

font-style

normal:默认非斜体
italic:斜体

font-weight

font-weight：100到900（默认normal：400 bold：700）

line-height行高

white-space

normal
nowrap
pre
pre-wrap
pre-line

调试CSS

右键点击页面，选择「检查」
使用快捷键Ctrl+Shift+I（windows）、Cmd+Opt+I（Mac）

越特殊的的选择器优先级越高

继承(文字相关)

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

显示继承

*{box-sizing:inherit;}
html{box-sizing:border-box}
.some-widget{box-sizing:content-box;}

初始值

CSS中每个属性都有一个初始值
-background-color的初始值为transparent
-margin-left的初始值为0
可以使用initial关键字显式重置为初始值
-background-color：initial

CSS求值过程

布局

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

布局相关技术

常规流（行级、块级、表格布局、flexbox、grid布局）
浮动
绝对定位

盒模型

width

指定content box宽度
取值为长度、百分数、auto
auto由浏览器du根据其它属性确定
百分数相对于容器的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

border:1px solid #ccc;

border-left:1px solid #ccc;
border-right:2px dotted red;

border-width:1px 2px 3px 4px;
border-style:solid ;
border-color:green blue;

border-left-width:3px;
border-top-color:#f00;

margin

指定元素四个方向的外边距
取值为长度、百分数、auto
百分数相对于容器宽度
margin：auto水平居中

overflow

visible
hidden
scroll

display

block
inline
inline-block
none

常规流Normal Flow

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

BFC内的排版规则

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

主轴justify-content与侧轴align-items

Flexibility

flex-grow
flex-shrink
flex-basis

Grid布局

float浮动

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

理解CSS | 青训营笔记