CSS的使用
CSS用来定义元素的样式，例如设置字体的大小和颜色，内容的位置和长宽，还有给内容添加各种动画效果。 CSS用选择器来选中要控制的内容，常用的有标签选择器、ID选择器、类选择器、通配选择器和属性选择器。 并且选择器有优先级，优先级越高页面内容就会优先使用该选择器来控制页面内容。 优先级从高到低的排序为：ID选择器>类选择器>标签选择器>通配选择器>属性选择器。
继承
某些属性会自动继承其父元素的计算值，除非显式指定一个值
下图就是一个显式继承的例子，html的box-sizing样式首先继承了*的box-sizing: inherit,但是html中添加了显式样式box-sizing： border-box,此时html的box-sizing样式为box-sizing： border-box,.some-widget首先也继承父元素的box-sizing,但是.some-widget添加了显式样式box-sizing: content-box,此时.some-widget的样式就是box-sizing: content-box。
图片来源:字节跳动青训营 理解CSS课程
初始值
CSS中，每个属性都有一个初始值
- background-color的初始值为transparent
- margin-left的初始值为0
可以使用initial关键字显式重置为初始值
- background-color:initial
布局（Layout）
布局是什么？
- 确定内容的大小和位置的算法
- 依据元素、容器、兄弟节点和内容信息来计算
布局相关技术
浮动：float： 绝对定位：position: absolute display:block等
图片来源:字节跳动青训营 理解CSS课程
width
- 指定content box 宽度
- 取值为长度、百分数、auto
- auto由浏览器根据其他属性确定
- 百分数相对于容器的content box宽度
height
- 指定content box的高度
- 取值为长度、百分数、auto
- auto取值由内容计算得来
- 百分数相对于容器的content box高度
- 容器有指定的高度时，百分数才生效
padding
- 指定元素四个方向的内边距
- 百分数相对于容器宽度
margin
- 指定元素四个方向的外边距
- 取值可以是长度、百分数、auto
- 百分数相对于容器的宽度
使用margin：auto水平居中示例代码
<div></div>
<style>
div {
width: 200px;
height: 200px;
background: coral;
margin-left: auto;
margin-right: auto;
}
</style>
复制代码
CSS 部分样式
颜色
1、RGB模型-----rgb(0-255.0-255,0-255)
2、HSL-----Hue色相、Saturation饱和度、Lightness亮度
颜色关键字 aplha透明度 1完全不透明 (0-1) rgba(,,,0,4) hsla(,,,0.3)
字体
font-family:不同设备安装字体有限，指定多个字体，从前到后使用字体
sans-serif monospace等通用字体族，一般最后添加
使用web fonts 字体文件放在服务器: @font-face{ }
字体大小
font-size 关键字：small medium large，长度：px em（相对单位，相对父亲的倍数），百分数（相对于父元素字体大小）
