1.css选择器
（1）简单选择器（元素，Id，类来选取元素，通配选择器）
（2）组合选择器（根据它们之间的特定关系来选取元素）
（3）伪类选择器（根据特定状态选取元素）
（4）伪元素选择器（选取元素的一部分并设置其样式）
（5）属性选择器（根据属性或属性值来选取元素）2.层叠顺序
当为某个 HTML 元素指定了多个样式时，会使用哪种样式呢？
页面中的所有样式将按照以下规则“层叠”为新的“虚拟”样式表，其中第一优先级最高：
（1）行内样式（在 HTML 元素中）
（2）外部和内部样式表（在 head 部分）
（3）浏览器默认样式
因此，行内样式具有最高优先级，并且将覆盖外部和内部样式以及浏览器默认样式。
3.定位元素position 属性
position 属性规定应用于元素的定位方法的类型，有五个不同的位置值：
（1）static：
HTML 元素默认情况下的定位方式为 static（静态）。静态定位的元素不受 top、bottom、left 和 right 属性的影响。
position: static;的元素不会以任何特殊方式定位；它始终根据页面的正常流进行定位：
（2）relative
相对定位，相对于元素自己的初始位置，不脱离文档流。也就是说元素框偏移某个距离，元素仍保持其未定位前的形状，它原本所占的空间仍保留。
设置相对定位的元素的top、right、bottom和left属性将导致其偏离其正常位置进行调整。不会对其余内容进行调整来适应元素留下的任何空间。
（3）fixed
position: fixed; 的元素是相对于视口定位的，这意味着即使滚动页面，它也始终位于同一位置。 top、right、bottom 和 left 属性用于定位此元素。
固定定位的元素不会在页面中通常应放置的位置上留出空隙。
（4）absolute
position: absolute; 的元素相对于最近的定位祖先元素进行定位（而不是相对于视口定位，如 fixed）。
然而，如果绝对定位的元素没有祖先，它将使用文档主体（body），并随页面滚动一起移动。
注意：“被定位的”元素是其位置除 static 以外的任何元素。
（5）sticky
position: sticky; 的元素根据用户的滚动位置进行定位。
粘性元素根据滚动位置在相对（relative）和固定（fixed）之间切换。起先它会被相对定位，直到在视口中遇到给定的偏移位置为止 -
然后将其“粘贴”在适当的位置（比如 position:fixed）。
4.浮动和清除
float 属性规定元素如何浮动。
clear 属性规定哪些元素可以在清除的元素旁边以及在哪一侧浮动。
clear 属性可设置以下值之一：
none - 允许两侧都有浮动元素。默认值
left - 左侧不允许浮动元素
right- 右侧不允许浮动元素
both - 左侧或右侧均不允许浮动元素
inherit - 元素继承其父级的 clear 值
使用 clear 属性的最常见用法是在元素上使用了 float 属性之后。
在清除浮动时，应该对清除与浮动进行匹配：如果某个元素浮动到左侧，则应清除左侧。您的浮动元素会继续浮动，但是被清除的元素将显示在其下方。
5.水平和垂直对齐
居中对齐元素
要使块元素（例如 <div> ）水平居中，请使用 margin: auto;。
设置元素的宽度将防止其延伸到容器的边缘。
然后，元素将占用指定的宽度，剩余空间将在两个外边距之间平均分配.
左和右对齐 - 使用 position
左和右对齐 - 使用 float
垂直对齐 - 使用 padding:
padding: 70px 0;
text-align: center;
垂直对齐 - 使用 line-height
垂直对齐 - 使用 position 和 transform
垂直对齐 - 使用 Flexbox:
display: flex;
justify-content: center;
align-items: center;
6.CSS 组合器
CSS 中有四种不同的组合器：
（1）后代选择器 (空格)：后代选择器匹配属于指定元素后代的所有元素。
（2）子选择器 (>)：子选择器匹配属于指定元素子元素的所有元素。
（3）相邻兄弟选择器 (+)
（4）通用兄弟选择器 (~)
7.伪类
什么是伪类？
伪类用于定义元素的特殊状态。
例如，它可以用于：
设置鼠标悬停在元素上时的样式
为已访问和未访问链接设置不同的样式
设置元素获得焦点时的样式
CSS - :first-child 伪类
:first-child 伪类与指定的元素匹配：该元素是另一个元素的第一个子元素。
常用的伪类：
（1）:first-child
（2）:first-type-of
（3）:visited
（4）:hover
（5）:active
（6）:nth-child(n)
（7）:link
8.伪元素
什么是伪元素？
CSS 伪元素用于设置元素指定部分的样式。
例如，它可用于：
设置元素的首字母、首行的样式
在元素的内容之前或之后插入内容
常见的伪元素:
（1）::first-letter
（2）::first-line
（3）::before
（4）::after
（5）::selection
9.三列布局
(1)浮动布局:
使用浮动实现三列布局的注意点是浮动元素需要写在内容元素之前，否则布局是混乱的。这种方式实现三列布局是优点是简单、兼容性好，但缺点是需要清除浮动，
否则父盒子的高度无法撑开，可能会导致其他页面元素的布局混乱。
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<style type="text/css">
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
border: 1px solid black;
background: yellow;
overflow: hidden; //清除浮动,使盒子成为BFC,处理浮动元素父盒子高度塌陷的问题
}
.left {
border: 1px solid black;
float: left;
width: 100px;
background: red;
}
.right {
border: 1px solid black;
float:right;
width:100px;
background: green;
}
.center{
margin: 0 100px;
}
</style>
</head>
<body>
<section class="container">
<article class="left"><br /><br /><br /></article>
<article class="right"><br /><br /><br /></article>
<article class="center"></article>
</section>
</body>
</html>
（2）绝对定位布局
使用绝对定位实现三列布局，实际上是和之前使用绝对定位实现双列布局同一个原理。
主要思路是，两边通过绝对定位定位到父盒子的左、右边框上，
再根据实际的需要设置两边盒子的宽度，高度是根据内容自适应的。
中间内容区通过定位属性左、右自适应宽度。
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<style type="text/css">
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.left {
border: 1px solid black;
position: absolute;
left: 0px;
background: red;
width: 100px;
}
.center {
border: 1px solid black;
position: absolute;
left: 100px;
right: 100px;
background: blue;
}
.right {
border: 1px solid black;
position: absolute;
right: 0px;
width: 100px;
background: green;
}
.container{
position: relative;
}
</style>
</head>
<body>
<section class="container">
<article class="left"><br /><br /></article>
<article class="center"><br /><br /><br /></article>
<article class="right"><br /><br /><br /><br /></article>
</section>
</body>
</html>
（3）flex布局
相比于浮动和定位，使用Flexbox布局实现三列布局要更好，
因为弹性容器的高度会根据最高的弹性项进行修正，
不会出现明显的台阶式效果。
Flexbox实现三列布局的特点为简单、使用、强大，核心思路为设置中间内容盒子的"flex: 1"属性，
让中间内容区的宽度自适应，独自占据弹性容器的全部剩余空间。
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<style type="text/css">
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.left {
border: 1px solid black;
width: 100px;
background: red;
}
.center {
border: 1px solid black;
flex:1;
background: blue;
}
.right {
border: 1px solid black;
width: 100px;
background:green;
}
.container{
display: flex;
}
</style>
</head>
<body>
<section class="container">
<article class="left"><br /><br /></article>
<article class="center"><br /><br /><br /></article>
<article class="right"><br /><br /><br /><br /></article>
</section>
</body>
</html>
（4）grid布局
使用grid网格布局实现三列布局，和之前所讲的gird实现双列布局是同样的思想，
只是把列数变为了3，高度依然不设置，通过容器项的内容高度自适应撑开整体高度。
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<style type="text/css">
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.left {
border: 1px solid black;
}
.center {
border: 1px solid black;
}
.right {
border: 1px solid black;
}
.container{
display: grid;
grid-template-columns: 100px auto 100px;
}
</style>
</head>
<body>
<section class="container">
<article class="left"><br /><br /><br /></article>
<article class="center"><br /><br /><br /></article>
<article class="right"><br /><br /><br /></article>
</section>
</body>
</html>
（5）圣杯布局
不像Flexbox或Grid布局可以控制元素显示的次序，圣杯布局是通过浮动元素和外边距属性实现三列布局，
但最重要的一点是，在文档中需要将优先渲染的内容写在最前方，但显示时看起来却好像是按照显示次序书写的一样。
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.container {
border: 1px solid black;
overflow: hidden;
padding: 0px 100px;
min-width: 100px;
}
.left {
background-color: red;
float: left;
width: 100px;
margin-left: -100%;
position: relative;
left: -100px;
}
.center {
background-color: blue;
float: left;
width: 100%;
}
.right {
background-color: green;
float: left;
width:100px;
margin-left: -100px;
position: relative;
left: 100px;
}
</style>
</head>
<body>
<section class="container">
<article class="center">center<br /><br /><br /></article>
<article class="left">left<br /><br /><br /></article>
<article class="right">right<br /><br /><br /></article>
</section>
</body>
</html>
（6）双飞翼布局
双飞翼布局是在圣杯布局上做了优化，解决了圣杯布局中布局发生错乱的问题。
核心思路是在圣杯布局的基础上，再在内容区添加一层新的盒子，
该盒子通过外边距将内容与两边的浮动元素分隔开，
实际上中心盒子是没有"padding"属性的。
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.container {
border: 1px solid black;
overflow: hidden;
}
.left {
background-color: red;
float:left;
margin-left: -100%;
width:100px;
}
.center{
width: 100%;
float:left;
background:yellow;
}
.main {
background-color: green;
margin: 0px 100px;
}
.right {
background-color: blue;
float:left;
width:100px;
margin-left: -100px;
}
</style>
</head>
<body>
<section class="container">
<article class="center">center<main class="main">main<br /><br /><br /></main></article>
<article class="left">left<br /><br /><br /></article>
<article class="right">right<br /><br /><br /></article>
</section>
</body>
</html>
10.行内元素和块级元素有什么区别
（1）默认情况下，行内元素不会以新的一行开始，而块级元素会新起一行。
（2）块级元素可以设置width,height属性，注意：块级元素即使设置了宽度，仍然是独占一行的。而行内元素设置width, height无效。
（3）块级元素可以设置margin 和 padding。
行内元素的水平方向的padding-left,padding-right,margin-left,margin-right 都产生边距效果，但是竖直方向的padding-top,padding-bottom,margin-top,margin-bottom都不会产生边距效果。（也就是水平方向有效，竖直方向无效）
（4）块级元素可以包含行内元素和块级元素。行内元素不能包含块级元素。
（5）设置居中。
行内元素想要设置水平居中，只需要text-align属性即可。 这里设置的text-align是设置在外层的div当中，评论区有提到，
因为上面讲了行内元素设置宽高是无效的，所以我们需要的居中其实是将块级元素当中的行内元素居中。
而块级元素想要设置水平居中，设置 margin 即可。
浙公网安备 33010602011771号