CSS 重点知识汇总
CSS 重点知识汇总
来啦，前面介绍了 JS重点知识 与 http重点知识，今天给大家带来了 css 重点知识，希望大家多多收藏点赞
目录
- CSS 权重及引入方式
- 标签全部作用
- 用CSS画三角形
- 元素水平垂直居中的方案
- 元素固定宽高
- 元素不固定宽高
- 元素种类的划分
- 盒子模型及其理解
- margin塌陷及合并问题
- 浮动模型及清除浮动的方法
- IFC与BFC
- 圣杯布局与双飞翼布局
圣杯布局
双飞翼布局 - Flex 布局
容器的属性
项目的属性 - px,em,rem的区别
- 媒体查询
- HTML5 新特性
- 理解 BFC
- Grid 布局
- 行内元素的间距怎么解决
- 伪类和伪元素有什么不同
1. CSS 权重及引入方式
CSS权重可以分为四个等级：
- 内联样式，如 style=xxx，权重为 1000
- id选择器，权值为 100
- class、伪类和属性选择器，如 .content, :hover, [attribute]，权值为 10
- 元素选择器和伪元素选择器，权值为 1
需要注意的是：通用选择器(*)，子选择器(>)和相邻同胞选择器(+)并不在这四个等级中，所以它们的权重都为 0。
权重大的选择器优先级也越高，相同权重的优先级又遵循后定义覆盖前面定义的情况。
伪类和伪元素：
一个 : 的为伪类: :hover,:focus,:first-of-type,:first-child
两个 :: 为伪元素::: before,::after
2. <a></a>标签全部作用
- 超链接
- 锚链接
- 打电话，发邮件
3. 用CSS画三角形
实现原理：
首先来看一下我们平时为一个盒子添加border的情况：
div {
width: 100px;
height:100px;
border: 4px solid blue;
} 效果如下：
这是我们平时使用 border 最常见的场景——往往只给border一个较小的宽度；然而这样的日常用***让我们对border的形成方式产生误解，即认为border是由四个矩形边框拼接而成的。
然而事实并不是如此。实际上，border是由三角形组合而成的。为了说明这个问题，我们可以增大border的宽度，并为他们设置不同的颜色：
div {
width: 100px;
height:100px;
border: 40px solid;
border-color: blue red yellow pink;
} 效果如下：
由此我们可以看出，border确实是由三角形组成的。那么我们把元素的内容尺寸设为0会发生什么呢？
div {
width:0;
height:0;
border: 40px solid;
border-color: blue red yellow pink;
} 效果如下：
这样我们就得到了四个三角形，如果想要其中一个，只需要把另外三个的颜色都设为 transparent:
div {
width:0;
height:0;
border: 40px solid;
border-color: transparent red transparent transparent;
} 效果如下：
不过其他隐藏的左边框依然占据着空间，因此我们可以把左边框的 border-width 设为 0 ：
div {
width:0;
height:0;
border-style: solid;
border-width: 40px 40px 40px 0;
border-color: transparent red transparent transparent;
} 4. 元素水平垂直居中的方案
1. 元素固定宽高
定位 + 负margin
.wrapper {
height: 900px;
background-color: gray;
position: relative;
}
.content {
width: 400px;
height: 400px;
background-color: red;
}
.content {
position: absolute;
/* top-left 相对于第一个 position 不为 static 的父元素的 height-width 定位 */
left: 50%;
top: 50%;
/* 相对于元素自己的 height-width 定位 */
margin-left: -200px;
margin-top: -200px;
}
<div class="wrapper">
<div class="content">
</div>
</div>
2. 元素不固定宽高
方案一：定位 + transform
.wrapper {
height: 900px;
background-color: gray;
position: relative;
}
.content {
background-color: red;
width: 400px;
height: 400px;
}
.content {
position: absolute;
left: 50%;
top: 50%;
/* 相对于元素的自身宽高进行平移 */
transform: translate(-50%, -50%);
} 方案二：定位 + margin:auto
.wrapper {
height: 900px;
background-color: gray;
position: relative;
}
.content {
background-color: red;
width: 300px;
height: 300px;
}
.content {
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
margin: auto;
} 方案三：display:flex
.wrapper {
height: 900px;
background-color: gray;
display: flex;
align-items: center;
justify-content: center;
}
.content {
background-color: red;
width: 300px;
height: 300px;
} 方案四：display:table-cell + vertical-align:middle 需要父元素固定宽高
.wrapper {
width: 900px;
height: 900px;
background-color: gray;
display: table-cell;
vertical-align: middle;
}
.content {
background-color: red;
width: 300px;
height: 300px;
margin: 0 auto;
} 对于display: tabel-cell的元素，height和padding同时设置会出现问题：
- 当padding与内容高度超过设置的高度时，元素的高度取决于padding和内容的高度，最初为元素设置的高度就不生效了；
- 当padding与内容的高度小于设置的高度时，元素的高度取决于设置的高度；
5. 元素种类的划分
CSS元素可分为行内元素，行内块级元素以及块级元素。
行内元素设置宽高无效，可以设置左右外边距，上下外边距无效。如：span，a，em，label，strong
行内块级元素可以设置宽高，可以设置外边距。如：img，input，video，audio
块级元素独占一行。如：div，p，ul，li，h1-h6，table，form
通过 display 可以更改元素的表现形式
5. 盒子模型及其理解
CSS盒模型包含了元素内容区域（content）、边框（border）、内边距（padding）、外边距（margin）。在标准盒模型中，元素的width和height属性为元素的content的宽高。但是在实践中发现，当我们想要一个固定宽高的盒子，并给元素增加padding之后，元素的实际宽高会变大，需要我们自己去手动修改height和width的值，很不方便。因此在 CSS3 中提供了 box-sizing 属性用来改变标准盒模型。
box-sizing: content-box：元素的height和width为元素content区域的宽高
box-sizing: border-box：元素的height和width为元素 content+padding+border的宽高，当设置padding或border时，内容content会自动缩小
box-sizing: inherit
6. margin塌陷及合并问题
margin塌陷：父子嵌套元素在垂直方向的margin,父子元素是结合在一起的,他们两个的margi会取其中最大的值.
如下所示：
.parent {
width: 300px;
height: 300px;
background-color: red;
margin-top: 100px;
}
.child {
background-color: blue;
width: 50px;
height: 50px;
}
<div class="parent">
<div class="child"></div>
</div> 当给子元素设置 margin-top: 150px 的时候，子元素会带着父元素往下移动50px。
正常情况下,父级元素应该相对浏览器进行定位,子级相对父级定位。但由于margin的塌陷,父级相对浏览器定位.而子级没有相对父级定位,子级相对父级,就像坍塌了一样。
解决方法：
- position:absolute/fixed
- float:left/right
- display:inline-block
- overflow:hidden
这四种方法都能触发BFC，但是使用的时候会带来不同的麻烦，需要根据具体情况解决 margin 塌陷。
margin合并：两个兄弟结构的元素在垂直方向上的 margin 是合并的
如下所示：
.div1 {
height: 200px;
margin: 20px 0;
background-color: red;
}
.div2 {
height: 100px;
margin: 10px 0;
background-color: blue;
}
<div class="div1"> </div>
<div class="div2"></div> div1 与 div2 的之间的 margin 取两者的最大值。
7. 浮动模型及清除浮动的方法
父元素添加 overflow:hidden
在父元素添加最后一个子元素，并设置 clear:both
<style> .parent p { clear:both } .left { float: left; height: 200px; width: 100px; background-color: red; } .right { float: right; height: 200px; width: 100px; background-color: blue; } </style> <body> <div class="parent"> <div class="left"></div> <div class="right"></div> <p></p> </div> </body>通过伪元素清除浮动
<style> .parent::after { content: ""; display: block; clear: both; } .left { float: left; height: 200px; width: 100px; background-color: red; } .right { float: right; height: 200px; width: 100px; background-color: blue; } </style> <body> <div class="parent"> <div class="left"></div> <div class="right"></div> </div> </body>通过BFC的方式清除浮动
- position:absolute/fixed，不为 static 或 relative
- float:left/right
- display:inline-block，table-cell
- overflow:hidden，scroll，不为 visible
8. IFC与BFC
9. 圣杯布局与双飞翼布局
圣杯布局与双飞翼布局是为了实现一个两侧固定宽度，中间自适应的三栏布局。两者需要遵循以下要点：
- 两侧固定宽度，中间自适应
- 中间部分在DOM结构上优先，以便先行渲染
- 允许三列中的任意一列成为最高列
- 只需要使用一个额外的 div 标签
核心是左边的 div margin-left:-100%。
除此之外，两者还可以用 flex 布局实现。
圣杯布局
<!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>
body {
min-width: 500px;
margin: 0;
padding: 0;
}
.container {
padding: 0 200px 0 150px;
overflow: hidden;
}
.center {
background-color: blue;
height: 800px;
width: 100%;
}
.left {
background-color: yellow;
width: 150px;
height: 200px;
margin-left: -100%;
position: relative;
left: -150px;
}
.right {
background-color: red;
width: 200px;
height: 200px;
margin-right: -200px;
}
.container > div {
float: left;
}
</style>
</head>
<body>
<div class="container">
<div class="center"></div>
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html> 圣杯布局的flex实现：
<!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>圣杯布局的flex实现</title>
<style>
*{
margin: 0;
padding: 0;
}
.container {
display: flex;
}
.center {
background-color: blue;
height: 800px;
flex: 1;
}
.left {
background-color: red;
height: 400px;
width: 200px;
order: -1;
}
.right {
background-color: yellow;
height: 400px;
width: 150px;
}
</style>
</head>
<body>
<div class="container">
<div class="center"></div>
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html> 双飞翼布局
<!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>双飞翼布局</title>
<style>
*{
margin: 0;
padding: 0;
}
body {
min-width: 500px;
}
.left {
background-color: red;
width: 150px;
height: 150px;
margin-left: -100%;
}
.right {
background-color: yellow;
width: 200px;
height: 150px;
margin-left: -200px;
}
.container {
width: 100%;
}
.center {
margin-left: 150px;
margin-right: 200px;
height: 300px;
background-color: blue;
}
.column {
float: left;
}
</style>
</head>
<body>
<div class="container column">
<div class="center"></div>
</div>
<div class="left column"></div>
<div class="right column"></div>
</body>
</html> 10. Flex 布局
flex 布局意为“弹性布局”，用来为盒模型提供最大的灵活性。任何一个元素都可以指定为 flex 布局。
注意，设为 flex 布局以后，子元素的 float、clear、vertical-align 属性将失效。
容器的属性
| 属性 | 描述 |
|---|---|
| flex-direction | 决定主轴的方向，即项目的排列方向。row | row-reverse | column | column-reverse，默认为 row |
| flex-wrap | 默认情况下项目都在一条轴线上，该属性定义，如果一行排不下，该如何换行。 wrap | nowrap | wrap-reverse |
| flex-flow | 是 flex-direction 和 flex-wrap 的简写形式，默认为 row nowrap |
| justify-content | 定义项目在主轴上的对齐方式：flex-start | flex-end | center | space-between | space-around |
| align-items | 定义项目在交叉轴上如何对齐：flex-start | flex-end| center | baseline | stretch |
| align-content | 定义了多根轴线的对齐方式。flex-start | flex-end | center | space-between | space-around | stretch; |
项目的属性
| 属性 | 描述 |
|---|---|
| order | 定义项目的排列顺序。默认为0，数值越小，排列越靠前。 |
| flex-grow | 定义项目的放大比例，默认为0，即如果存在剩余空间也不放大。 |
| flex-shrink | 定义项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。 |
| flex-basis | 定义在分配多余空间之前，项目占据的主轴空间。他可以设为跟width一样的属性值，则项目将占据固定空间。 |
| flex | 是flex-grow、flex-shrink、flex-basis的简写，默认值为 0 1 auto。 |
| align-self | 属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性。 |
11. px,em,rem的区别
px：像素px是相对于显示器屏幕分辨率而言的。
em：相对于当前父元素的字体大小
rem：rem相对于根元素设置字体大小
对于只需要适配少部分手机设备，且分辨率对页面影响不大的，使用px即可
对于需要适配各种移动设备，使用rem
12. 媒体查询
@media screen and (max-width: 300px) {
body {
background-color:lightblue;
}
} 13. HTML5 新特性
音频、视频、地理位置、localStorage、sessionStorage
14. 理解 BFC
15. Grid 布局
Flex 布局是轴线布局，只能指定”项目“针对轴线的位置，可以看作是一维布局。
Grid 布局则是将容器划分为 ”行“ 和 ”列“，产生单元格，然后指定项目所在的单元格，可以看作是二维布局。
16. 行内元素的间距怎么解决
- 行内元素写在一行，中间不留空格
- 父元素 font-size 设为 0
- 使用 float
17. 伪类和伪元素有什么不同
伪类用于当已有元素处于的某个状态时，为其添加对应的样式，这个状态是根据用户行为而动态变化的，比如说，当用户悬停在指定的元素时，我们可以用:hover来描述这个元素的状态。虽然它和普通的css类相似，可以为已有的元素添加样式，但是它只有处于dom树无法描述的状态下才能为元素添加样式，所以将其称为伪类。
伪元素不是 DOM 中的真实元素，但是存在于最终的渲染树中，可以为其添加样式，比如说，我们可以通过：before来在一个元素前增加一些文本。
#学习路径##前端#
投递菜鸟集团等公司10个岗位 >