内容要点
-
CSS 概述
-
CSS 选择器
-
设置文本样式
-
CSS 工作原理
-
CSS 布局
-
- 盒模型
- Flex 布局
- Grid
- 定位
详细内容 什么是css?
css的组成是神魔
如何·使用css
- 外链 link
- 嵌入 style
- 内联 p style
css的工作方式是怎样的
选择器
-
通配选择器 *{ }
-
标签选择器 p{ }
-
id选择器 #logo{ } //唯一的
-
类选择器 .logo{ }
-
属性选择器 [disabled]{ }
-
伪类选择器 a:hover{ }
- 直接组合 input:focus
- 后代组合 nav a
- 亲子组合 section>p
- 兄弟选择器 h2~p
- 相邻选择器 h2+p
组合
颜色
RGB
HSL
alpha
透明度
rgba
hsla
布局相关技术
常规流
行级 span em strong cite code
行级排版上下文IFC（只包含行级盒子的容器会创建一个IFC）
盒子在一行内水平摆放
一行放不下时，换行显示
text-align 决定一个盒子在行内的水平对齐
vertical-align 决定一个盒子在行内的垂直对齐
避开浮动元素
块级 body artice div main section h1-h6 p ul li
BFC内排版规则
盒子从上到下摆放
垂直margin合并
BFC内盒子的margin不会与外面的合并
BFC不会和浮动元素重叠
表格布局
FlexBox 一种新的排版上下文 他可以控制子级盒子的：
摆放的流向
摆放顺序
盒子宽度和高度
水平和垂直方向的对齐
是否允许折行
Grid布局
浮动
绝对定位
调试-
右键点击页面，选择检查 使用快捷键
ctrl+shift+I(Windows)
cmd+opt+I(Mac)
