CSS是一种层叠样式表，用于给HTML或XML文档添加样式。它包括元素选择器、ID选择器和类选择器等，以及内联、内部和外部样式表的使用。文章还详细介绍了颜色、字体、文本样式和盒模型的概念，如行高、边距、边框和内容区域，以及浮动和定位在布局中的作用。
CSS (Cascading Style Sheets，层叠样式表），是一种用来为结构化文档（如 HTML 文档或 XML 应用）添加样式（字体、间距和颜色等）的计算机语言，CSS 文件扩展名为 .css。
#CSS 为网页添加样式
CSS规则=选择器+生命块
选择器:选中元素
1.元素选择器 h1{} p{}
2.ID选择器 为要添加样式的元素加上id属性后，在style元素中写"#id{}"
3.类选择器 可以把多个元素赋予同一个class属性值，在style元素中写".class值{}" 同一个元素可以赋予多个class属性class="001 002"
声明块 写在{}中
声明块中包含很多声明(属性), 每一个声明以;结束
CSS代码书写位置
1.内部样式表，写在<style></style>中 通常写在<head></head>中
2.内联样式表，在元素中加上style属性，以;结束
3.外部样式表，另建css文件。 在head中写子元素<link> 在href属性中写css文件路径 (推荐) i.同一css文件可以用于多页面
ii.浏览器缓存，有利于页面响应
iii.代码分离，有利于阅读和维护代码
———————————————————————————————————————————
1.color
三原色，色值（红、绿、蓝）
rgb表示法：
每个颜色使用0~255之间的数字来表达
...
rgb(0,255,0)分别表示红,绿,蓝
...
hex(十六进制)表示法：红绿蓝 淘宝红：#ff4400/#f40 黑色：#000000/#000 白色：#ffffff/#fff 红：#ff0000/f00 紫色：#ff00ff/#f0f 青色：#0ff 黄色：#ff0 灰色：#ccc
2.background-color
3.font-size
两种单位：px(像素)绝对单位
em相对单位（相对于父元素）
每个元素都有字体大小，没有声明就直接使用父元素的字体大小，如果没有父元素就使用基准字号
user agent 用户代理（浏览器）
4.font-weight <strong></strong> 表示重要的、不能忽略的内容
表示文字粗细程度，可以取值数字，也可以使用预设值（bold/normal）
5.font-family
文字类型(字体) 必须是用户计算机中存在的字体才有用 sans-serif放最后 非衬线字体
6.font-style:italic <i></i> 通常用它表示一个图标 <em></em> 斜体
字体样式，通常用来设置字体倾斜
7.text-decoration
文本修饰
text-decoration:underline/line-through/overline
-del元素：错误的、被删除的元素（默认有删除线）
-s元素：表示过期的内容（默认有删除线）
8.text-indent
首行文本缩进 text-indent:2em; 中英文缩进长度相同
9.line-height
行高，行高越大，每行文本的距离越大
设置行高为容器元素，可以让文本在容器中垂直居中
设置为纯数字，表示相对当前字体的高度
10.height 高度
11.width：宽度
12.letter-spacing
文字之间的间隔
13.text-align
文字的水平排列方式
———————————————————————————————————————————
##简单选择器 选中元素
1.ID选择器（#）
2.元素选择器
3.类选择器 （.）
4.通配符选择器
*表示选中所有元素
5.属性选择器（选中属性、属性值）
[href=""]{} 表示选中所有含有href属性、或某个href值的元素
6.伪类选择器 某元素后加:
选中某些元素的某种状态
a:hover{} 选中鼠标悬停时的a元素
:active 选中鼠标按下时的某元素
a:link 选中未被访问的超链接
a:visited 选中已被访问过的超链接
不同选择器要按顺序写 按首字母love hate 顺序
7.伪元素选择器 :: 被选中的是 before 和 after 元素
例
span::before{
content:《;
}
———————————————————————————————————————————
##选择器的组合 表示并且
———————————————————————————————————————————
#层叠
声明冲突：同一个样式的不同值，多次应用到同一元素
层叠：解决声明冲突的过程，浏览器自动处理 ，最后只能显示一个样式（权重计算）
1.比较重要性
重要性从高到低：作者样式表(开发者的样式)中的!important样式>作者样式表的普通样式>浏览器默认样式
2.比较特殊性
重要性比较完成后，冲突没有解决
总体规则：选择器选中的范围越窄，越特殊
具体规则：通过选择器，计算出一个4位数（x x x x）数字越大，越特殊
千位：如果是内联样式，记作1，否则记为0
百位：等于某元素值所有id选择器的数量
十位：等于某元素值选择器中所有类选择器、属性选择器、伪类选择器的数量
个位：等于某元素值选择器中所有元素选择器
3.比较源次序
代码书写靠后的优先
##应用
1.重置样式表
书写一些作者样式，覆盖浏览器的默认样式
重置样式表 覆盖 默认样式
2.爱恨法则
———————————————————————————————————————————
#继承
子元素会继承父元素的某些css属性
通常与文字内容相关的属性都能被继承
———————————————————————————————————————————
#属性值的计算过程
一个元素 一个元素一次渲染，顺序按照页面文档的树形目录结构进行
渲染每个元素的前提条件：该元素的所有CSS属性必须有值
一个元素，从所有属性都没有值，到所有的属性都有值，这个计算过程叫属性值计算过程
1.确定声明值：开发者样式表声明值和浏览器默认样式表，没有冲突的声明，作为CSS属性值
2.层叠冲突：对有冲突的声明使用层叠规则，确定CSS属性值
3.使用继承：对仍然没有值的属性，若可以继承，则继承父元素的值
4.使用默认值：对仍然没有值的属性，使用默认值
强制继承在某属性值为:inherit;
将某属性设置为默认值:initial
———————————————————————————————————————————
#盒模型
box：每个元素在页面中都会生成一个矩形区域（盒子）
盒子类型：
1.行盒（不会独占一行） display=inline的元素
2.块盒 display=block的元素
行盒在页面中不换行，块盒独占一行
display默认值为inline
浏览器默认样式设置的块盒：容器元素，h1~h6、p
常见的行盒：span、a、img、vedio、audio
#盒子的组成部分
无论是行盒，还是块盒，都由下面几个部分组成，从内到外分别是
1.内容 content
width、height，设置的是盒子内容的宽高
内容部分通常叫做整个盒子的**内容盒 content-box**
2.填充 padding （内边距）
盒子边框到盒子内容的距离
padding-left、padding-right、padding-top、padding-bottom
padding：简写属性 直接写数值 顺序 上 右 下 左 如果上下相同，左右相同可以只写两个 / 全都一样 可以写一个
填充区+内容区=**填充盒 padding-box**
3.边框 border
边框=边框样式+边框宽度+边框颜色
border style=solid（实线）.............. 也可以按上右下左顺序设置不同的样式
border weight
border color
可以只写border 然后设置样式 宽度 颜色
边框+填充区+内容区 = **边框盒 border-box**
4.外边距 margin （盒子与盒子之间的距离）
边框到其他盒子的距离
margin-top margin-right margin-bottom margin-left
———————————————————————————————————————————
#盒模型的应用
## 改变宽高宽高范围
默认情况下，width和height设置的是内容盒宽高
设置边框盒的宽高 box-sizing:border-box
##溢出处理
overflow，控制内容溢出边框盒后的处理方式
overflow:visible.hidden.scroll-y/scroll-x/scroll.(生成滚动条).auto(需要时出现滚动条)
text-overflow: ellipsis； （省略号）
##断词规则
word-break,会影响文字在什么位置被截断换行
normal:普通 CJK字符（文字位置截断） 非CJK字符 在单词位置截断
break-all:所有字符都在文字处截断
keep-all：所有字符都在单词处截断
#空白处理
white-space:nowrap; (不换行)
———————————————————————————————————————————
#行盒的和模型
行盒的宽高取决于内容
行盒不能设置宽高
内边距（填充区） 边框也是 外边距也是
左右padding/border/margin 占据空间，有效
上下padding/border/margin 不占据空间，无效
———————————————————————————————————————————
#行块盒 display：inline-block
1.不独占一行
2.盒模型中所有元素都有效
_____________________________________________________________________________
#常规流
视觉格式化模型（布局规则）：页面中的多个盒子的排列规则
1.常规流
2.浮动
3.定位
##常规流布局（常规流、文档流、普通文档流、常规文档流）
所有元素，默认情况下，都属于常规流布局
总体规则：块盒独占一行，行盒水平依次排列
包含块（containing block）：每个盒子都有它的包含块，包含块决定了盒子的排列区域
绝大部分情况下：盒子的包含块是其父元素的内容盒
**块盒**
1.每个块盒的总宽度，必须等于包含块的总宽度
———————————————————————————————————————————
#浮动
1.文字环绕
2.横向排列
##浮动的特点
修改float属性值为：
left：元素靠上、靠左排列
right：元素靠上、靠右排列
默认值为none
当一个元素浮动后，它必定为块盒（更改display属性为block）
浮动元素的包含块，和常规流一样，为父元素的内容盒
##盒子尺寸
1.宽度为auto时，适应内容宽度
2.高度为auto时，适应内容的高度 与常规流一致
3.margin为auto时，任意方向为0
4.边框、内边距、百分比设置与常规流一样 相对于包含块（父元素的内容块）
##盒子排列
1.左浮动盒子靠上、靠左排列
2.右浮动的盒子靠上、靠右排列
3.浮动盒子在包含块中排列时，会避开常规流盒子
4.常规流块盒在排列时，无视浮动盒子
5.行盒在排列时，会避开浮动盒子
-如果文字没有在行盒中，浏览器会自动生成行盒，该行盒叫 匿名行盒
6.外边距合并不会发生
##高度坍塌
原因：常规流盒子的自动高度，在计算时，不会考虑浮动盒子
清除浮动，涉及css属性：clear
-默认值：none
-left：清除左浮动，使该元素出现在前面所有左浮动盒子的下方
-right：清除右浮动，使该元素出现在所有右浮动盒子的下方
、可以用伪元素，并赋予clear属性
.clearfix::after{
content:"";
display:block;
clear:both;
}
———————————————————————————————————————————
#定位 手动控制元素在包含块中的精准位置
涉及CSS属性：position
默认值：static 静态定位（不定位）
relative 相对定位
absolute 绝对定位
fixed 固定定位
定位元素会脱离文档流（相对定位除外）
一个脱离了文档流的元素：
1.文档流中的元素会忽略脱离常规流的元素
2.文档流中元素计算高度时，会忽略脱离了文档流的元素
##相对定位
不会使元素脱离文档流，只是让元素在原来位置上进行偏移
可以通过四个css属性进行设置
left right top bottom
相对定位下，盒子的便宜不会对其他盒子造成影响
##绝对定位
1.盒模型宽高是auto，盒子尺寸适应内容
2.包含块变化：找祖先元素中第一个定位元素，该元素的填充盒为其包含块，若找不到，则他的包含快为整个网页（初始化包含块）
left right top bottom 分别设置各方向上离包含块的距离
##固定定位
其他情况和固定定位完全一样
包含块不同：固定为视口（浏览器的可视窗口）
####定位下的居中
某个方向居中
1.定宽（高）
2.将左右（上下）距离设置为0
3.将左右（上下）margin设置为auto
绝对定位和固定定位中，margin为auto时 自动吸收剩余空间
####多个定位元素重叠时
堆叠上下文
设置z-index，通常情况下，该值越大，越靠近用户
z-index 可以为负值，但会被浮动元素 常规流元素覆盖
border-radius 设置边框弧度
##绝对定位 固定定位元素都是块盒
绝对定位 固定定位一定不是浮动元素
没有外边距合并
9341
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
