CSS是什么？
CSS全称是Cascading Style Sheets
- 用来定义页面元素的样式
- 设置字体和颜色
- 设置位置和大小
- 添加动画效果
三大特征
- HTML(内容)
- css(样式)
- JavaScript(行为)
简单的CSS代码示例
h1{
color: white;
font-size: 14px;
}
在页面中如何使用CSS
- 外链式
<link rel="stylesheet" href="./index.css">
- 嵌入式
<style>
h1{
color: white;
font-size: 14px;
}
</style>
- 内联式
<h1 style="color: violet;">我是h1</h1>
选择器selector
- 找出页面中的元素，以便于给他们设置样式
- 使用多种方式选择元素
- 1.按照标签名、类名或id
- 2.按照属性
- 3.按照DOM树中的位置
选择器分类
- 1.通配选择器
- 2.标签选择器
- 3.id选择器
- 4.类选择器
- 5.属性选择器
伪类(pesudo - classes)
不基于标签和属性定位元素
几种伪类
- 状态伪类
- 结构性伪类
组合(Combinators)
| 名称 | 语法 | 说明 | 示例 |
|---|---|---|---|
| 直接组合 | AB | 满足A同时满足B | input：focus |
| 后代组合 | A B | 选中B，如果它是A的子孙 | nav a |
| 亲子组合 | A>B | 选中B，如果它是A的子元素 | section > p |
| 兄弟选择器 | A~B | 选中B，如果它在A后且和A同级 | h2 ~ p |
| 相邻选择器 | A+B | 选中B，如果它紧跟在A后面 | h2 + p |
选择器组使用规范
body,h1,h2,h3,h4,h5,h6,ul,ol,li{
margin:0;
padding:0
}
[type="checked"],[type="radio"]{
box-sizing=border-box;
padding:0;
}
颜色-RGB
颜色-HSL
HUE
- 色相(H)是色彩的基本属性，如红色、黄色等；取值范围是0-360
Saturation
- 饱和度(s)是指色彩的鲜艳程度，越高越鲜艳；取值范围0-100%
Lightness
- 亮度(L)指颜色的明亮程度，越高颜色越亮；取值范围是0-100%
CSS颜色关键字
alpha透明度
字体 font-family
通用字体族 cdpn.io/webzhao/deb…
使用建议
字体列表最后写上通用字体族
英文字体放在中文字体前面
字体 font-size
关键字
- small、medium、large
长度
- px、em
百分数
- 相对于父元素字体大小
调试CSS
右键点击页面，选择[检查]
使用 快捷键
ctrl+shift+I (Window)
cmd+opt+I (MAC)
CSS初始值
CSS中，每个属性都有一个初始值
background-color 的初始值为 transparent
margin-left 的初始值为 0
可以使用 initial 关键字显示重置为初始值
- background-color:initial
CSS求值过程
布局(Layout)是什么？
确定内容的大小和位置的算法
依据元素、容器、兄弟节点和内容等信息来计算
布局相关技术
常规流
行级
块级
表格布局
FlexBox
Grid 布局
浮动
绝对定位
width
指定 content box 宽度
取值为长度、百分数、auto
auto 由浏览器根据其他属性确定
百分数相对于容器的 content box 宽度
Height
指定 content box 高度
取值为长度、百分数、auto
auto 由浏览器根据其他属性确定
百分数相对于容器的 content box 高度
容器有指定的高度时，百分数才生效
padding
指定元素四个方向的内边距
百分数相对于容器宽度
border
指定容器边框样式、粗细和颜色
三种属性
- border-width
border:1px solid #ccc- border-style
border-left:1px solid #ccc- border-color
border-right:2px solid red
- 四个方向
border-top
border-right
border-bottom
border-left
当四条边框颜色不同时
margin
- 指定元素四个方向的外边距
- 取值可以是长度、百分数、auto
- 百分数相对于容器宽度
margin:auto 水平居中
margin collapse
overlow
块级与行级
| Block Level Box | Inline Level BOX |
|---|---|
| 不和其他盒子并列拜访 | 和其他行级盒子一起放在一行或拆开成多行 |
| 使用所有的盒模型属性 | 盒模型中的width、heigh不适用 |
| 块级元素 | 行级元素 |
|---|---|
| 生成块级元素 | - 生成行级元素 - 内容分散在多个行盒(line box) 中 |
| body、article、div、main、section、h1-h6、p、ul、li等 | span、em、strong、cite、code等 |
| display:block | display:inline |
display 属性
| blcok | 块级盒子 |
|---|---|
| inline | 行级盒子 |
| inline-block | 本身是行级，可以放在行盒中；可以设置宽高；作为一个整体不会被拆散成多行 |
| none | 排版时完全被忽略 |
常规流 Normal Flow
根元素、浮动和绝对定位的元素回脱离常规流
其他元素都在常规流之内(in-flow)
常规流中的盒子，在某种排版上下文中参与布局
排版方式
- 1.行级排版上下文
- Inline Fromatting Context(IFC)
- 只包含行级盒子的容器会创建一个IFC
- IFC内的排版规则
盒子在一行内水平摆放>
一行放不下时，换行显示
text-align决定一行内盒子的水平对齐
vertical-align决定一个盒子在行内的垂直对齐
避开浮动(float)元素
- 2.块级排版上下文
- Block Formatting Context(BFC)
- 某些容器会创建一个BFC
根元素
浮动、绝对定位、inline-block
flex 子项和 Grid 子项
overflow 值不是 visible 的块盒
display：flow-root
3.Table排版上下文
4.Flex排版上下文
5.Grid排版上下文
BFC内的排版规则
盒子从上到下摆放
垂直margin 合并
BFC 内盒子的 margin 不会与外面的合并
BFC 不会和浮动元素重叠
Flex Box是什么？
一种新的排版上下文
它可以控制子级盒子的：
- 摆放的流向(→ ⬅ ⬆ ⬇)
- 摆放顺序
- 盒子宽度和高度
- 水平和垂直方向的对齐
- 是否允许拆行
- 示例：codepen.io/webzhao/emb…
Flexibility
可以设置子项的弹性：当容器有剩余空间时，会伸展；容器空间不够时，会伸缩。
flex-grow 有剩余空间时的伸展能力
- flex-shrink 容器控件不足时收缩的能力
- flex-basis 没有伸展或收缩时的基础长度
Grid布局
- Flex Box
- Grid
display:grid
- display:grid 使元素生成一个块级的 Grid 容器
- 使用 grid-template 相关属性将容器划分为网格
- 设置每一个子项占哪些行/列
划分网格
grid area 网格区域
loat 浮动
position 属性
| 名称 | 特点 |
|---|---|
| static | 默认值，非定位元素 |
| relative | 相对自身原本位置偏移，不脱离文档流 |
| absolute | 绝对定位，相对非 static 祖先元素定位 |
| fixed | 相对于视口绝对定位 |
position：relative
在常规流里面布局
相对于自己本应该在的位置进行偏移
使用 top、 left、 bottom、 right设置偏移长度
流内其他元素当他没有偏移一样布局
position：absolute
脱离常规流
相对于最近的非 static 祖先定位
不会对流内元素布局造成影响
