20210112 周瑞兵
一、 知识点总结
1.选择器
1.1 ID选择器
1.1.1 元素编号
在HTML页面上每个元素都应该有一个唯一的编号（就像在现实生活中，每个人都有一个属于自己的身份证号一样），浏览器可以通过这个编号来管理该元素。这个编号就是 元素编号，也称作 元素标识符 ( element identifier )。元素编号可以通过元素的 id 属性(attribute)来指定，为此我们应努力确保ID属性的唯一性。
1.1.2 ID选择器基本用法
网页标签ID与ID选择器同名，则适用此样式，其基本用法为：
#elementId{
}
1.2 伪类：网页元素的各种状态
a:link{
color: #555555;
text-decoration: none;
}
a:visited{
color: #555555;
}
a:hover{
color: orange;
text-decoration: underline;
}
a:active{
color: red;
}
a:link:未访问状态
a:visited:访问过后状态
a:hover：鼠标悬停状态
a:active：激活选定状态
注：定义顺序必须是此顺序
简记方法：先爱（l:link v:visited）后恨(h:hover ate:active)
1.3 后代选择器（包含选择器）：用空格隔开
li span{
color: #0000ff;
}
li a{
color: black;
}
.mydiv a{
}
#div1 a{
font-size: 30px;
}
/*后代与伪类结合*/
li a:hover{
color: red;
}
<div class=”mydiv”>
<a href=”#”>是是</a>
</div>
<div id="div1">
<a href="#">是是</a>
</div>
1.4 子元素选择器：直接子标签适用此样式(用 ’>‘ 隔开)
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
h1 > strong {color:red;}
</style>
</head>
<body>
<h1>This is <strong>very</strong> <strong>very</strong> important.</h1>
<h1>This is <em>really <strong>very</strong></em> important.</h1>
</boy>
</html>
注：子代选择器和后代选择器不同在于，只能出现在当前容器下的子类受用，不出现隔代继承。
1.5 组合选择器 （将不同的选择器组合在一起）
li,p,#div1,.mydiv{
font-size: 16px;
color: red;
}
1.6 通配选择器
*{
margin: 0;
padding: 0;
}
1.7 选择器之间的优先级
判断依据:哪个选择器去定的范围小，哪个选择器的优先级高。
也可以通过！important改变优先级。
2 常用的CSS属性
2.1 元素尺寸
2.1.1 元素宽度
在CSS代码中通过 width 属性可以控制元素的宽度，其用法为:
width : value ;
value 可以使用 像素也可以使用百分比赋值。
2.1.2 元素高度
在CSS代码中通过 width 属性可以控制元素的宽度，其用法为同width一致。
2.2 边框（border）
元素的边框涉及属性较多，不仅涉及 粗细 、样式 、颜色 等属性，
还可以针对某一条边来设置边框的 粗细、样式、颜色 等。
2.2.1 边框粗细
边框粗细的设置可以通过 border-width 属性来实现:
border-width:value;
2.2.2 边框风格
边框风格的设置可以通过 border-width 属性来实现:
border-style : none | solid | double | dotted | ... ;
2.2.3 边框颜色
边框颜色的设置可以通过 border-width 属性来实现:
border-color : color ;
通常设置四边边框的 粗细、风格、颜色 可以通过 border 属性来实现：
border : width style color ;
2.3 外边距
margin 属性设置元素的外边距。
外边距是盒子周围一圈看不到的空间。它会把其他元素从盒子旁边推开。 外边距属性值可以为正也可以
为负。设置负值会导致和其他内容重叠。
无论使用标准模型还是替代模型，外边距总是在计算可见部分
后额外添加
2.3.1 设置外边距
设置四周填充一致，用法如下：
margin: value;
margin 如果值超过一个，按上右下左(顺时针)的顺序渲染，如果缺省则上和下一样，左和右一样 （对
称的值一样）
margin: value1 value2 ...;
2.3.2 让块元素横向居中显示
margin: value auto;
2.3.3 外边距折叠
如果你有两个外边距相接的元素，这些外边距将合并为一个外边距，即最大的单个外边距的大小。
2.4 内边距
padding 属性设置元素的填充
内边距位于边框和内容区域之间。与外边距不同，您不能有负数量的内边距，所以值必须是0或正的
值。应用于元素的任何背景都将显示在内边距后面，内边距通常用于将内容推离边框。
2.4.1 设置内边距
设置四周填充一致，用法如下：
padding: value;
padding 如果值超过一个，按上右下左(顺时针)的顺序渲染，如果缺省则上和下一样，左和右一样 （对
称的值一样）
padding: value1 value2 ...;
2.5 盒子模型
完整的 CSS 盒模型应用于块级盒子，内联盒子只使用盒模型中定义的部分内容。模型定义了盒的每个部
分 —— margin, border, padding, and content —— 合在一起就可以创建我们在页面上看到的内容。
2.5.1 盒子模型的各个部分
CSS中组成一个块级盒子需要:
Content box: 这个区域是用来显示内容，大小可以通过设置 width 和 height .
Padding box: 包围在内容区域外部的空白区域； 大小通过 padding 相关属性设置。
Border box: 边框盒包裹内容和内边距。大小通过 border 相关属性设置。
Margin box: 这是最外面的区域，是盒子和其他元素之间的空白区域。大小通过 margin 相关属
性设置。
2.5.2 标准盒子模型
在标准模型中，如果你给盒设置 width 和 height ，实际设置的是 content box。 padding 和 border
再加上设置的宽高一起决定整个盒子的大小。
2.5.3 盒子模型和内联盒子
以上所有方法均适用于块级盒子；有些属性也适合于内联盒子（宽和高对于内联盒子是不生效的）。
2.6 display
display 属性规定元素应该生成的框的类型,通过display属性可以很方便地实现块级元素和内联元素之间的互换。
display属性的值：
- block:元素呈现块元素特征，此元素前后会带有换行符
- inline:元素呈现行内元素特征，元素前后没有换行符
- inline-block：元素呈现行内并保持宽和高的属性，行内块元素
- none:元素不做呈现，不占网页空间。与visibility：hidden不同，visibility不显示但占用网页空
间。
2.7 背景样式
2.7.1 背景颜色
background-color 属性定义了CSS中任何元素的背景颜色。属性接受任何有效的 值 。背景色
扩展到元素的内容和内边距的下面。
元素的背景是元素的总大小，包括填充和边界（但不包括外边距）
| 值 | 描述 |
|---|---|
| color | 指定背景颜色。eg: #567895, black ,rgb(255,255,255), rgba(255,255,255,.5) ,hsl(h 色相 0 到 360, s 饱和度 0% 为灰色， 100% 全色, l 亮度 0% 为暗, 50% 为普通, 100% 为白) , hsla() |
| transparent | 指定背景颜色应该是透明的。这是默认 |
| inherit | 指定背景颜色，应该从父元素继承 |
2.7.2 背景图片
background-image 属性允许在元素的背景中显示图像.
默认情况下，大图不会缩小以适应方框，因此我们只能看到它的一个小角，而小图则是平铺以填充方
框。
2.7.2.1 控制背景平铺
background-repeat 属性用于控制图像的平铺行为。可用的值是:
no-repeat— 不重复。repeat-x—水平重复。repeat-y—垂直重复。repeat— 在两个方向重复。
2.7.2.2 调整背景图像的大小
background-size 属性，它可以设置长度或百分比值，来调整图像的大小以适应背景
你也可以使用关键字:
cover—浏览器将使图像足够大，使它完全覆盖了盒子区，同时仍然保持其高宽比。在这种情况
下，有些图像可能会跳出盒子外contain— 浏览器将使图像的大小适合盒子内。在这种情况下，如果图像的长宽比与盒子的长宽
比不同，则可能在图像的任何一边或顶部和底部出现间隙。
2.7.2.3 背景图像的定位
background-position 属性允许您选择背景图像显示在其应用到的盒子中的位置。它使用的坐标系
中，框的左上角是(0,0)，框沿着水平(x)和垂直(y)轴定位。
最常见的背景位置值有两个单独的值——一个水平值后面跟着一个垂直值
你可以使用像top 和 right 这样的关键字
background-position: top center;
或者使用 长度值, and 百分比：
background-position: 20px 10%;
你也可以混合使用关键字，长度值以及百分比:
background-position: top 20px;
2.8 溢出的内容
我们知道，CSS中万物皆盒，因此我们可以通过给 width 和 height 赋值的方式来约束盒子的尺寸。溢
出是在你往盒子里面塞太多东西的时候发生的，所以盒子里面的东西也不会老老实实待着。
<style>
.box {
border: 1px solid #333333;
width: 200px;
height: 80px;
}
</style>
<div class="box">这个盒子有高有宽。这意味着如果在指定的高度内显示的内容太多，就会出
现溢出的情况。如果溢出设置为隐藏，则任何溢出都将不可见。</div>
<p>此内容在方框之外。</p>
一个盒子，在块方向上已经受到 height 的限制。然后我们已经加了过多的内容，以至于盒子里面没有
空间容纳。内容正在从盒子里面溢出，并让自己把盒子下面的段落弄得一团糟。
为什么CSS默认会采取如此不整洁的方式，让内容这么凌乱地溢出出来呢？为何不把多余的内容隐藏起
来，或者让盒子变大呢？
只要有可能，CSS就不会隐藏你的内容，隐藏引起的数据损失通常会造成困扰。在CSS的术语里面，这
会导致一些内容消失，你的访客可能不会注意到这一点，如果消失的是表格上的提交按钮，没有人能填
完这个表格，这是很麻烦的事情！所以CSS反而会把它以可见的形式溢出出去。这样做的结果就是，你
会看到错误的CSS导致的一片混乱，或者最坏的情况也只是你的网站的访客会告诉你有些内容冒了出
来，你的网站需要修缮。
2.8.1 overflow属性
overflow 属性是你控制一个元素溢出的方式，它告诉浏览器你想怎样处理溢出。 overflow 的默认值
为 visible ，这就是我们的内容溢出的时候，我们在默认情况下看到它们的原因。
可选值：
| 值 | 描述 |
|---|---|
| visible | 默认值。内容不会被修剪，会呈现在元素框之外。 |
| hidden | 隐藏掉溢出。其余内容是不可见的。 |
| scroll | 显示滚动条，即使没有足够多引起溢出的内容 |
| auto | 如果内容需要被修剪，则浏览器会显示滚动条以便查看其余的内容。 |
2.8.1.1 文本溢出时变为...
overflow:hidden;
text-overflow:ellipsis;
二、心得体会
学习是一个引导的过程，学习是一个领悟的过程，复习以往的知识点，会有新的收获，新的理解；
近期评论