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

重点内容：

1. 介绍css
2. css的选择器
3. css的继承
4. css的初始值和求值过程
5. css的布局以及相关技术

1.css是什么？用来做什么？

css用来定义页面元素的样式

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

在页面中使用CSS的方式有三种：

• 内联：在需要修改样式的标签内部，通过style="( 属性：属性值；)"的形式为该标签设置css样式。<p style="color:red;">test</style>
• 嵌入：将css代码放入style标签内，放在html页面。<style> p{color:red;} </style>
• 外联：通过link标签引入。<link rel="stylesheet" href="test.css">

2.css的选择器

• 通配选择器 * { font-size: px; }

• 标签选择器 h1 { color: ; }

• id选择器 #logo { font-size: px; }

• 类选择器 .done { color: ; }

• 属性选择器 [disabled] { background: ; } input[type="password"] { border-color: ; } a[href^="#"] { color: ;} a[href$=".jpg"] { color: ;}

3.css的继承

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

可继承的属性

1. 字体系列属性
2. 文本系列属性
3. 元素可见性
4. 表格布局属性
5. 列表布局属性
6. 生成内容属性
7. 光标属性
8. 页面样式属性
9. 声音样式属性

显式继承

*{
    box-sizing: inherit;
}

html {
    box-sizing: border-box;
}

.some-widget {
     box-sizing: content-box;
 }

4.css的初始值

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

5.css的求值过程

6.css的布局

<1>布局是什么？

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

<2>布局的相关技术

• 常规流
  • 行级
  • 块级
  • 表格布局
  • FlexBox
  • Grid布局
• 浮动
• 绝对定位

7.css的学习总结

css的使用方法以及各种选择器的使用，都是最基础，要掌握好的技术。对页面布局美化是在基础上更为重要的。