#第二周学习笔记
###为网页添加样式
####一些简单的选择器
1 id选择器
2 元素选择器
3 类原则器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
h1{
color: aquamarine;
background-color: beige;
text-align: center;
}
.jia{
color:red;
background-color: #fff;
}
#zz{
color: black;
}
</style>
</head>
<body>
<h1>
这是一个标题
</h1>
<p class="jia">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dignissimos, odio?</p>
<p id="zz">Exercitationem maiores cumque, nostrum quae est blanditiis odio officia dolorem?</p>
<p class="jia">Minima cum tenetur velit molestiae fugiat? Placeat similique magnam quod.</p>
</body>
</html>
各个选择器的特点的
1 类选择器应用灵活，比较常用
2 元素选择器作用范围太广了
3 id 选择器作用范围比较窄、
####声明块
在{}中书写元素的属性
####css代码书写的位置
1 内部样式表
将样式书写在style中书写在body上这样方便浏览器渲染
2
内联样式表，元素样式表
直接书写在元素的style属性中
3 外部样式表
将样式书写在外部一个专门的css代码文件中
需要使用一个新的元素link,链接样式表。
1).可以解决页面样式重复的问题
2）.有利于浏览器缓存(因为当浏览器第一次读到css代码来链接是会缓存起来)
3）.有利于代码分离，便于阅读
维护
###常见的样式声明
1 color
预设值：即定义好的单词
三原色，色值；光学三元色(红蓝绿)，每个颜色可以用0~255之间的数字来表示色值
rgb 表示法
rgb(, , ,)
hex表示法
2 background-color
背景颜色
3 font-size
元素内部文字的大小
单位px(表示文字的绝对大小)
en(表示文字的相对父元素的大小)
4 font-weight
表示文字的粗细
可以设置数字，也可以预设值normal(不加粗)
blod(加粗)
5 font-family
字体 可以设置多个，一般最后设置一个sans-style,当你设置的字体用户都没有是就让浏览器找一个他有的非衬线字体
6 font-style
字体样式，通常用于设置写斜体
i元素，默认样式是写的
strong元素默认加粗
em 默认斜体
7 text-decoration
文本修饰给文字加线
del元素
表示错误的类容
s元素
表示类容过期的
8 text-indent
表示首行文本缩进
可以写px,也可以写en
9 line-hight
表示每行文本的距离
通常使用相对高度
直接写数字，表示相对当前字体的大小
10 width
宽度
11 height
高度
12 letter-spase
文字间隙
11 text-align
元素的对其方式
选择器
选择器：帮助你精准的选中想要的元素
简单选择器
- ID选择器
- 元素选择器
- 类选择器
- 通配符选择器
- 属性选择器(根据属性名和属性值选中元素)
- 伪类选择器(选中某些元素的某种状态)
1）link: 超链接未访问时的状态
2）visited: 超链接访问过后的状态
3）hover: 鼠标悬停状态
4）active：激活状态，鼠标按下状态
爱恨法则：love hate
- 伪元素选择器
before
after
##层叠
声明冲突：同一个样式，多次应用到同一个元素
层叠：解决声明冲突的过程，浏览器自动处理（权重计算）
1. 比较重要性
重要性从高到底：
作者样式表：开发者书写的样式
1） 作者样式表中的!important样式
2) 作者样式表中的普通样式
3) 浏览器默认样式表中的样式
2. 比较特殊性
看选择器
总体规则：选择器选中的范围越窄，越特殊
具体规则：通过选择器，计算出一个4位数（x x x x）
- 千位：如果是内联样式，记1，否则记0
- 百位：等于选择器中所有id选择器的数量
- 十位：等于选择器中所有类选择器、属性选择器、伪类选择器的数量
- 个位：等于选择器中所有元素选择器、伪元素选择器的数量
3. 比较源次序
代码书写靠后的胜出
应用
- 重置样式表
书写一些作者样式，覆盖浏览器的默认样式
重置样式表 -> 浏览器的默认样式
常见的重置样式表：normalize.css、reset.css、meyer.css
- 爱恨法则
link > visited > hover > active
继承
子元素会继承父元素的某些CSS属性
通常，跟文字内容相关的属性都能被继承
盒模型
box：盒子，每个元素在页面中都会生成一个矩形区域（盒子）
盒子类型：
- 行盒，display等于inline的元素
- 块盒，display等于block的元素
行盒在页面中不换行、块盒独占一行
display默认值为inline
浏览器默认样式表设置的块盒：容器元素、h1~h6、p
常见的行盒：span、a、img、video、audio
盒子的组成部分
无论是行盒、还是块盒，都由下面几个部分组成，从内到外分别是：
- 内容 content
width、height，设置的是盒子内容的宽高
内容部分通常叫做整个盒子的内容盒 content-box
- 填充(内边距) padding
盒子边框到盒子内容的距离
padding-left、padding-right、padding-top、padding-bottom
padding: 简写属性
padding: 上 右 下 左
填充区+内容区 = 填充盒 padding-box
- 边框 border
边框 = 边框样式 + 边框宽度 + 边框颜色
边框样式：border-style
边框宽度：border-width
边框颜色：border-color
边框+填充区+内容区 = 边框盒 border-box
- 外边距 margin
边框到其他盒子的距离
margin-top、margin-left、margin-right、margin-bottom
速写属性margin
盒模型应用
默认情况下，width 和 height 设置的是内容盒宽高。
衡量设计稿尺寸的时候，往往使用的是边框盒，但设置width和height，则设置的是内容盒
- 精确计算
- CSS3：box-sizing
改变背景覆盖范围
默认情况下，背景覆盖边框盒
可以通过background-clip进行修改
溢出处理
overflow，控制内容溢出边框盒后的处理方式
断词规则
word-break，会影响文字在什么位置被截断换行
normal：普通。CJK字符（文字位置截断），非CJK字符（单词位置截断）
break-all：截断所有。所有字符都在文字处截断
keep-all：保持所有。所有文字都在单词之间截断
空白处理
white-space: nowrap
常规流
盒模型：规定单个盒子的规则
视觉格式化模型（布局规则）：页面中的多个盒子排列规则
视觉格式化模型，大体上将页面中盒子的排列分为三种方式：
- 常规流
- 浮动
- 定位
常规流布局
常规流、文档流、普通文档流、常规文档流
所有元素，默认情况下，都属于常规流布局
总体规则：块盒独占一行，行盒水平依次排列
包含块（containing block）：每个盒子都有它的包含块，包含块决定了盒子的排列区域。
绝大部分情况下：盒子的包含块，为其父元素的内容盒
块盒
- 每个块盒的总宽度，必须刚好等于包含块的宽度
宽度的默认值是auto
margin的取值也可以是auto，默认值0
auto：将剩余空间吸收掉
width吸收能力强于margin
若宽度、边框、内边距、外边距计算后，仍然有剩余空间，该剩余空间被margin-right全部吸收
在常规流中，块盒在其包含快中居中，可以定宽、然后左右margin设置为auto。
- 每个块盒垂直方向上的auto值
height:auto， 适应内容的高度
margin:auto， 表示0
- 百分比取值
padding、宽、margin可以取值为百分比
以上的所有百分比相对于包含块的宽度。
高度的百分比：
1）. 包含块的高度是否取决于子元素的高度，设置百分比无效
2）. 包含块的高度不取决于子元素的高度，百分比相对于父元素高度
- 上下外边距的合并
两个常规流块盒，上下外边距相邻，会进行合并。
两个外边距取最大值。
浮动
视觉格式化模型，大体上将页面中盒子的排列分为三种方式：
- 常规流
- 浮动
- 定位
应用场景
- 文字环绕
- 横向排列
浮动的基本特点
修改float属性值为：
- left：左浮动，元素靠上靠左
- right：右浮动，元素靠上靠右
默认值为none
- 当一个元素浮动后，元素必定为块盒(更改display属性为block)
- 浮动元素的包含块，和常规流一样，为父元素的内容盒
盒子尺寸
- 宽度为auto时，适应内容宽度
- 高度为auto时，与常规流一致，适应内容的高度
- margin为auto，为0.
- 边框、内边距、百分比设置与常规流一样
盒子排列
- 左浮动的盒子靠上靠左排列
- 右浮动的盒子考上靠右排列
- 浮动盒子在包含块中排列时，会避开常规流块盒
- 常规流块盒在排列时，无视浮动盒子
- 行盒在排列时，会避开浮动盒子
- 外边距合并不会发生
如果文字没有在行盒中，浏览器会自动生成一个行盒包裹文字，该行盒叫做匿名行盒。
高度坍塌
高度坍塌的根源：常规流盒子的自动高度，在计算时，不会考虑浮动盒子
清除浮动，涉及css属性：clear
- 默认值：none
- left：清除左浮动，该元素必须出现在前面所有左浮动盒子的下方
- right：清除右浮动，该元素必须出现在前面所有右浮动盒子的下方
- both：清除左右浮动，该元素必须出现在前面所有浮动盒子的下方
定位
视觉格式化模型，大体上将页面中盒子的排列分为三种方式：
- 常规流
- 浮动：float
- 定位：position
定位：手动控制元素在包含块中的精准位置
涉及的CSS属性：position
position属性
- 默认值：static，静态定位（不定位）
- relative：相对定位
- absolute：绝对定位
- fixed：固定定位
一个元素，只要position的取值不是static，认为该元素是一个定位元素。
定位元素会脱离文档流（相对定位除外）
一个脱离了文档流的元素：
- 文档流中的元素摆放时，会忽略脱离了文档流的元素
- 文档流中元素计算自动高度时，会忽略脱离了文档流的元素
相对定位
不会导致元素脱离文档流，只是让元素在原来位置上进行偏移。
可以通过四个CSS属性对设置其位置：
- left
- right
- top
- bottom
盒子的偏移不会对其他盒子造成任何影响。
绝对定位
- 宽高为auto，适应内容
- 包含块变化：找祖先中第一个定位元素，该元素的填充盒为其包含块。若找不到，则它的包含块为整个网页（初始化包含块）
#固定定位
其他情况和绝对定位完全一样。
包含块不同：固定为视口（浏览器的可视窗口）
定位下的居中
某个方向居中：
- 定宽（高）
- 将左右（上下）距离设置为0
- 将左右（上下）margin设置为auto
绝对定位和固定定位中，margin为auto时，会自动吸收剩余空间
多个定位元素重叠时
堆叠上下文
设置z-index，通常情况下，该值越大，越靠近用户
只有定位元素设置z-index有效
z-index可以是负数，如果是负数，则遇到常规流、浮动元素，则会被其覆盖
补充
- 绝对定位、固定定位元素一定是块盒
- 绝对定位、固定定位元素一定不是浮动
- 没有外边距合并
3169
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
