·这篇笔记是css课程内容总结，对自己来说算是复习，结合了以前自己写的一些简单css实验
链接方式
外链 <style type="text/css">
嵌入 <link rel="stylesheet" type="text/css" href="111111.css">
内联 <div id="did" style="margin: auto;">
选择器
作用：找出页面中元素，设置样式。
选择方式：标签名、类名、id、属性、DOM相对位置
基本选择器
通用选择器：*{font-size:12px} 用于匹配所有元素类型.
标签选择器：p{font-size:12px}
类选择器：.classname{} 选择器定义:<div class="classname">……</div>
ID选择器：#myid{}
body{
background-color: beige;}
.TTT{
background-color: aliceblue;
width: 900px;
overflow-x: hidden;
}
#jianjie{
position: relative;
left: 370px;bottom: 600px;
}
组合选择器
| 名称 | 语法 | 说明 | 实例 |
|---|---|---|---|
| 多元素选择器 | A,B | 同时选中AB | p,div,……{} |
| 后代选择器 | A B | 选中B，B是A的子孙 | p div{} |
| 亲子选择器 | A>B | 选中B，B是A的子元素 | p>div>……{} |
| 兄弟选择器 | A~B | 选中B，在A后且和A同级 | p~div{} |
| 相邻选择器 | A+B | 选中B，B紧跟在A后 | p+div{} |
伪类
不基于标题和属性定位元素
分类：状态/结构性伪类
例如：
a:link{……} 向未被访问的链接添加样式，仅适用于超链接
a:hover{……} 当鼠标悬浮在元素上方时添加样式
颜色表示
六位字符： #8fac87
RGB表示：rgb(143,163,128)
HSL表示：hls(……,……,……)
alpha透明度：值为1时不透明。
特异度
权重大小：行内样式>ID>class/属性/伪类>类型/伪元素
继承
某些属性会自动继承父元素计算值，除非显示指定一个值。
布局
- 常规流：行级，块级，表格，FlexBox，Grid布局
- 浮动：float/clear
- 绝对定位：absolute
盒子模型
属性
- width
- 指定content box宽度
- 取值为长度、百分比、auto（由浏览器根据其他属性决定）
- 百分数相对于容器的content box宽度
- hight
- 指定content box高度
- 取值为长度、百分比、auto（由浏览器根据其他属性决定）
- 百分数相对于容器的content box宽度
- 容器有指定的高度时，百分数才生效
- padding
- 指定元素四个方位的内边距
- 百分数相对于容器宽度
- border
- 设置边框样式，粗细，颜色
- margin
- 指定元素四个方位的外边距
- 取值为长度、百分比、auto
- 百分数相对于容器宽度
块级与行级
- 块级：不和其他盒子并排摆放，适合所有盒模型属性。
- 行级：可以和其他行级盒子一起放在一行或多行，width,height不适用。
FlexBox布局
一种新的排版上下文，可以控制子级盒子摆放流向、摆放顺序、盒子高度宽度、水平垂直方向的对齐、是否允许折行。
集中对齐方式
Flexibility
可以设置子项弹性：容器有剩余空间时会伸展，空间不够时会收缩。
flex-grow:有剩余空间时的伸展能力。
flex-shrink:容器空间不足时的收缩能力
flex-basis:没有伸展或收缩时的基础长度
Grid
先确定网格线
自己写的一点页面
<style type="text/css">
div{
position: relative;top: 150px;
padding: 40px;width: 600px;
margin: auto;border: 3px;
border-style: groove;border-color: cornflowerblue;
}
</style>
//html部分，涉及到js内容就不放了
<div>
<p>素数蓝色，非素数粉色</p>
<script>
document.write(calc100());
</script>
</div>
总结
CSS中选择器是运用css美化页面的基础，例子不全，还需要我们自己动手尝试，不断积累不同的写法和功能。
盒子模型是CSS的基础内容，在排版和内容布局中必不可少。除此之外其他的布局方法，比如Grid布局，在网页设计中应用广泛。
利用css可以写出很多动画效果，甚至可以实现计时器等功能，需要我们多多学习、实践。
