走进CSS
这是我参与「第五届青训营 」笔记创作活动的第2天
课程内容
- css基础用法
- css选择器类型和特点
- css布局相关技术
详细知识点
什么是CSS？
- CSS 指层叠样式表 (Cascading Style Sheets)
- 样式定义如何显示 HTML 元素
- 样式通常存储在样式表中
- 把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
- 外部样式表可以极大提高工作效率
- 外部样式表通常存储在 CSS 文件中
- 多个样式定义可层叠为一个
CSS实例
h1{
color:white;
font-size:14px;
}
CSS是如何工作的
在页面中使用CSS
- 外链 推荐，使得各项分离
<link rel= - 嵌入
<style> - 内联
<p style=></p>
css是如何工作的
选择器 selector 找出页面中的元素，以便给他们设置样式 使用多种方式选择元素 按照标签名、类名或id 按照属性 按照dom树中的位置
通配选择器
*{}匹配所有
标签选择器：
用标签来设置样式
id选择器
如果元素设置了id值便可以使用id选择器
id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 "#" 来定义。
#para1 { text-align:center; color:red; }
类选择器
用class设置样式，class可以存在多个一样的
.center {text-align:center;}
属性选择器
[disabled]{}
input[type="password"]{
border-color:red;
color:red;
}
类似的例子
a[href^="#"]{
~~~
}
意为：如果a标签的href属性以#开头的选中，以$结尾的选择
伪类选择器
对该标签的某种状态下进行样式更改
a：hover移动到上面之后
active 按上去之后
link 默认状态下的样式
visited 访问过链接之后
focus 在输入框准备开始打字时
结构伪类
li：first-child 设置li的第一个样式
选择器标签组合
选择器组：各个标签之间用逗号隔开
颜色rgb:rgb（）
颜色-hsl
字体 font-family
- font-size 字号
- font-weight 字重
- line-height 行高
white-space
- normal有空格就显示一个
- nowrap不显示空格
- pre 有多少显示多少
- pre-wrap保留空格，该换行换行
- pre-line
深入css
选择器优先级 选择器特异度
继承
某些属性会自动继承其父元素的计算值，除非显式指定一个值
inherit：显式继承
初始值
css中，每个属性都有一个初始值
可以使用initial关键字显式重置为初始值
布局是什么
是确定内容的大小和位置的算法
依据元素、容器、兄弟节点和内容等信息来计算
布局相关技术
常规流：行级 块级 表格布局 flexbox grid布局
浮动 绝对定位
width
- 指定content box高度
- 取值为长度、百分数、auto
- auto由浏览器根据其它属性确定
- 百分数相对于容器的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
margin
- 指定元素四个方向的外边距
- 取值为长度、百分数、auto
- 百分数相对于容器宽度
- 使用margin：auto 水平居中
- margin collapse
- margin 在垂直方向上的边距会合并 （拓展）
注意
border-box指的是包括边框占据为所指定的大小
而默认的contain-box是指里面的文字占据的大小为指定大小
OverFlow属性: 控制溢出部分
- visible可视
- hidden隐藏
- scroll滚动
行级与块级
display属性
block 块级盒子 inline 行级盒子
inline-block 本身是行级，可以放在行盒中；可以设置宽高；作为一个整体不会被拆散成多行
常规流
行级排版上下文
块级排版上下文
bfc内部的排版规则
Flex Box
- display：flex
- 不均分
- 主轴侧轴
如图可见：A\B\C三个部分并没有均分整个盒子
display：gird
- 划分网格
- gird布局
float 浮动
可以实现图片环绕文字的效果
现阶段实现左右布局效果可以使用flex box代替
position属性
- static 默认值
- relative 相对自身原本位置偏移，不脱离文档流
- absolute 绝对定位，相对非static祖先元素定位
- fixed 相对于视口绝对定位
总结
学习css的几点建议
- 充分利用mdn和w3c css规范
- 保持好奇心，善用浏览器的开发者工具
- 持续学习，css新特性还在不断出现
