css相关

发表于 | 分类于

盒模型

如上图所示，这是一个盒模型中含有的属性：

在W3C标准下：盒模型中的width属性只包含content;

在IE浏览器下：盒模型中的width = content + padding + border;

content-box: 让元素维持W3C的标准盒模型；

border-box: 让元素维持IE传统盒模型；（推荐使用这种模式）

运用实例如下：

See the Pen box-sizing by Shirley (@Four27) on CodePen.

水平垂直居中

水平居中

行内元素
1
2
3
4
5
6
7
8
9
10
11
12
<div class="first">
  <p class="inline">hello world</p>
</div>
.first {
  background: #FDF5A4;
  width: 150px;
  height: 150px;
}
.inline {
  text-align: center;
}
块级元素

1、独自占一行，有宽度和高度。

html:

1
<div class="box"></div>

css:

1
2
3
4
5
6
.box {
  width: 100px;
  height: 100px;
  background: #FDF5A4;
  margin: 0 auto;    
}

2、子元素有浮动

（1）

html

1
2
3
4
5
6
7
<div class="parent">
  <div class="first">
  </div>
  
  <div class="second">
  </div>
</div>

css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
.parent {
  width: -moz-fit-content;
  width: -webkit-fit-content;
  width: fit-content;
  margin: 0 auto;
}
.first {
  float: left;
  background: #FDF5A4;
  width: 150px;
  height: 150px;
  margin-right: 10px;
}
.second {
  float: left;
  background: #FDF5A4;
  width: 150px;
  height: 150px;
}

（2）

html

1
2
3
4
5
<ul class="parent">
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ul>

css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.parent {
	width: -moz-fit-content;
	width: -webkit-fit-content;
	width: fit-content;
	margin: 0 auto;
}
ul,li {
  list-style: none;
}
li {
  float: left;
  margin: 0 5px 0;
}

3、父容器子容器不清楚宽高

（1）老版flex布局

html

1
2
3
<div class='parent'>
  <div class='flex'></div>
</div>

css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.parent {
  display: -webkit-box;
  -webkit-box-orient: horizontal;   // 这里只考虑了chrom的兼容性，省略了其他浏览器的兼容性
  -webkit-box-pack: center;
  
  display: box;
  box-orient: horizontal;    // 设置主轴方向为水平
  box-pack: center;
}
.flex {
  width: 100px;
  height: 100px;
  border: 1px solid;
}

（2）新版本flex

html同上

css

1
2
3
4
5
6
7
8
9
10
.parent {
  display: flex;
  justify-content: center;
}
.flex {
  width: 100px;
  height: 100px;
  border: 1px solid;
}

4、使用css3中新增的transform属性

1
2
3
<div class="parent">
  <div class="son"></div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.parent {
  width: 200px;
  height: 200px;
  border: 1px solid;
  position: relative;
}
.son {
  width: 150px;
  height: 150px;
  background: pink;
  position: absolute;
  left: 50%;    // 相对于父元素的宽度的50%
  transform: translate(-50%,0)   // 自身宽度的50%
}

5、利用margin-left（原理与上面的方法一样）

1
2
3
4
5
6
7
8
.son {
  width: 150px;
  height: 150px;
  background: pink;
  position: absolute;
  left: 50%;
  margin-left: -75px;    // 为自身宽度的50%
}

6、使用绝对定位和margin:0 auto

1
2
3
4
5
6
7
8
9
10
11
.son{
    position:absolute;  /*设置绝对定位*/
    width:100px;        /*宽度固定*/
    height:100px;
    background:#abcdef;
    top:0;
    left:0;       /*设置top | left | right | bottom都等于0*/
    right:0;
    bottom:0;
    margin:0 auto;
}

垂直居中

单行文本
1
2
3
4
5
6
7
8
9
10
<div class="parent">
     <span>文本垂直居中</span>
</div>
.parent{
    width:400px;
    height:100px;
    background:red;
    line-height:100px;   /*line-height:属性值==元素的高度值*/
}
多行文本

（原理都是利用表格来实现）

（1）直接使用表格

html

1
2
3
4
5
6
7
8
9
10
<table>
  <tr>
    <td class="container">
      <p>父元素固定的个多行文本设置垂直居中</p>
	  <p>父元素固定的个多行文本设置垂直居中</p>
	  <p>父元素固定的个多行文本设置垂直居中</p>
	  <p>父元素固定的个多行文本设置垂直居中</p>
    </td>
  </tr>
</table>

css

1
2
3
4
.container {
  height: 300px;
  border: 1px solid;
}

（2）利用display: table-cell，让标签元素以表格单元格形式呈现

html

1
2
3
4
5
<div class="container">
  <p>父元素固定的个多行文本设置垂直居中</p>
  <p>父元素固定的个多行文本设置垂直居中</p>
  <p>父元素固定的个多行文本设置垂直居中</p>
</div>

css

1
2
3
4
5
6
7
8
.container {
  border: 1px solid;
  display: table-cell;  /* 让标签元素以表格单元格形式呈现 */
  width: 300px;
  height: 300px;
  vertical-align: middle;
  text-align: center;
}

水平垂直居中

行内元素

（1）单行文本

html

1
2
3
<div class="container">
  <span>单行文本水平垂直居中</span>
</div>

css

1
2
3
4
5
6
7
8
9
.constainer {
  border: 1px solid;
  height: 150px;
  width: 250px;
  text-align: center;
  line-height: 150px;
  background: #639146;
  color: #fff;
}

（2）多行文本（直接使用table）

html

1
2
3
4
5
6
7
8
9
10
<table>
  <tr>
    <td class="container">
      <p>多行文本设置水平垂直居中</p>
      <p>多行文本设置水平垂直居中</p>
      <p>多行文本设置水平垂直居中</p>
      <p>多行文本设置水平垂直居中</p>
    </td>
  </tr>
</table>

css

1
2
3
4
5
6
7
8
.container {
  height: 250px;
  border: 1px solid #639146;
  width: 250px;
  text-align: center;
  background: #639146;
  color: #fff;
}

（3）多行文本（利用display: table-cell，让标签元素以表格单元格形式呈现）

html

1
2
3
4
5
<div class="container">
  <p>多行文本设置水平垂直居中</p>
  <p>多行文本设置水平垂直居中</p>
  <p>多行文本设置水平垂直居中</p>
</div>

css

1
2
3
4
5
6
7
8
9
10
.container {
  border: 1px solid #639146;
  display: table-cell;  /* 让标签元素以表格单元格形式呈现 */
  width: 250px;
  height: 250px;
  vertical-align: middle;
  text-align: center;
  background: #639146;
  color: #fff;
}
块元素

（1）flex新版

1
2
3
<div class="container">
  <div></div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.container {
  border: 1px solid #639146;
  width: 250px;
  height: 250px;
  background: #639146;
  display: flex;
  justify-content: center;
  align-items: center;
}
.container div{
  border: 1px solid #80C460;
  width: 100px;
  height: 100px;
  background: #80C460;
}

（2）flex老版

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.container {
  border: 1px solid #639146;
  width: 250px;
  height: 250px;
  background: #639146;
  
  display: -webkit-box;
  -webkit-box-pack: center;
  -webkit-box-align: center;
}
.container div{
  border: 1px solid #80C460;
  width: 100px;
  height: 100px;
  background: #80C460;
}

（3）table

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.container {
  border: 1px solid #639146;
  width: 250px;
  height: 250px;
  background: #639146;
  
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}
.container div{
  border: 1px solid #80C460;
  width: 100px;
  height: 100px;
  background: #80C460;
  
  display: inline-block;/margin: 0 auto;
}

（4） relative + absolute + top&left + transform

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.container {
  border: 1px solid #639146;
  width: 250px;
  height: 250px;
  background: #639146;
  
  position: relative;
}
.container div{
  border: 1px solid #80C460;
  width: 100px;
  height: 100px;
  background: #80C460;
  
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
}

（5）relative + absolute + top&left + margin

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.container {
  border: 1px solid #639146;
  width: 250px;
  height: 250px;
  background: #639146;
  
  position: relative;
}
.container div{
  border: 1px solid #80C460;
  width: 100px;
  height: 100px;
  background: #80C460;
  
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -50px 0 0 -50px;
}

（6）relative + absolute + top&left&right&bottom + margin

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
.container {
  border: 1px solid #639146;
  width: 250px;
  height: 250px;
  background: #639146;
  
  position: relative;
}
.container div{
  border: 1px solid #80C460;
  width: 100px;
  height: 100px;
  background: #80C460;
  
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}

position中的所有属性值

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div class="box" id="one">One</div>
<div class="box" id="two">Two</div>
<div class="box" id="three">Three</div>
<div class="box" id="four">Four</div>
.box { 
   display: inline-block; 
   background: red; 
   width: 100px; 
   height: 100px; 
   float: left; 
   margin: 20px; 
   color: white; 
}

static

默认值，没有定位，元素出现在正常的流中。此时top、right、bottom、left、z-index属性无效。

1
2
3
4
5
#three { 
   position: static; 
   top: 20px; 
   left: 20px; 
}

absolute

绝对定位的元素使用left、top这些属性，是相对于其最接近的一个具有定位属性（即不为static定位）的父元素进行绝对定位，如果没有这样的元素就相对于body。

1
2
3
4
5
#three { 
   position: absolute; 
   top: 20px; 
   left: 20px; 
}

relative

相对定位，元素先放置在未添加定位时的位置，再在不改变页面布局的前提下调整元素位置。

1
2
3
4
5
6
#two {
  position: relative;
  top: 20px;
  left: 20px;
  background: blue;
}

fixed

固定定位，不为元素预留空间，而是通过指定元素相对于屏幕视口（viewport）的位置来指定元素的位置。元素的位置在屏幕滚动时不会改变。

1
2
3
4
5
6
#two {
  position: fixed;
  top: 20px;
  left: 20px;
  background: blue;
}

sticky

粘性定位时相对定位与固定定位的混合，元素在跨越阈值前为相对定位，之后为固定定位。

实现左边定宽右边自适应效果

html

1
2
3
4
<div class="container">
  <div class="left">left</div>
  <div class="right">right</div>
</div>

main/css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  color: #fff;
  font-size: 18px;
}
.container {
  width: 90%;
  height: 300px;
  margin: 50px auot 0;
  text-align: center;
}
.left {
  width: 180px;
  height: 300px;
  background: #639146;
  line-height: 300px;
}
.right {
  height: 300px;
  background: #80C460;
  line-height: 300px;
}

（1）左边浮动，右边设置margin值

1
2
3
4
5
6
7
.left {
  float: left;
}
.right: {
  margin-left: 180px;   // 该值等于左边元素的宽度
}

（2）左右均浮动，右边用calc计算宽度

1
2
3
4
5
6
7
8
.left {
  float: left;
}
.right {
  float: right;
  width: calc(100% - 180px);  // 180px等于左边元素宽度
}

（3）左边position:absolute，右边设置padding/margin

1
2
3
4
5
6
7
.left {
  position: absolute;   // 设置absolute后文件流中不保留left空位
}
.right {
  padding-left/margin-left: 180px;
}

（4）父级元素：flex，右边子元素：flex:1

1
2
3
4
5
6
7
.container {
  display: flex;
}
.right {
  flex: 1;
}

（5）父级元素：table，两个子集：table-cell

1
2
3
4
5
6
.container {
  display: table;
}
.left, .right {
  display: table-cell
}

（6）利用grid

1
2
3
4
.container {
  display: grid;
  grid-template-columns: 180px auto;
}

上述实现的效果图如下：

See the Pen qVmZBw by Shirley (@Four27) on CodePen.

三列布局

即两边固定，中间自适应的布局方式：

html

1
2
3
4
5
<div class="container">
  <div class="left">left</div>
  <div class="right">right</div>
  <div class="main">main</div>   // 注意main放置的位置再left和right之后
</div>

css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  color: #fff;
  font-size: 18px;
}
.container {
  width: 90%;
  height: 300px;
}
.left {
  width: 180px;
  height: 300px;
  background: #639146;
  line-height: 300px;
  text-align: center;
}
.main {
  height: 300px;
  background: #80C460;
  text-align: center;
  line-height: 300px;
}
.right {
  width: 180px;
  height: 300px;
  background: #639146;
  line-height: 300px;
  text-align: center;
}

（1）流体布局

1
2
3
4
5
6
7
8
9
10
.left {
  float: left;
}
.right {
  float: right;
}
.main {
  margin-left: 200px;    // left元素宽度180px + 间隔20px
  margin-right: 200px;    // right元素宽度180px + 间隔20px
}

缺点：主要内容无法最先加载，当内容过多会影响用户体验。

（2）BFC三栏布局

1
2
3
4
5
6
7
8
9
.left {
  float: left;
}
.right {
  float: right;
}
.main {
  overflow: hidden;
}

缺点：主要内容无法最先加载，当内容过多会影响用户体验。

（3）绝对定位布局

实现了优先加载主要内容

html

1
2
3
4
5
<div class="container">
  <div class="main">main</div>
  <div class="left">left</div>
  <div class="right">right</div>
</div>

css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.main {
  margin-left: 200px;
  margin-right: 200px;
}
.left {
  position: absolute;
  top: 0;
  left: 0;
}
.right {
  position: absolute;
  top: 0;
  right: 0;
}

（4）flex布局

html同上

css

1
2
3
4
5
6
7
8
9
10
11
12
13
.container {
  display: flex;
}
.main {
  flex-flow: 1;
}
.left {
  order: -1;    // order值越小排列越靠前，默认为0
  margin-right: 20px;    // 与main的间隔
}
.right {
  margin-left: 20px;    // 与main的间隔
}

（5）table布局

html

1
2
3
4
5
<div class="container">
  <div class="left">left</div>
  <div class="main">main</div>
  <div class="right">right</div>
</div>

css

1
2
3
4
5
6
7
8
9
.container {
  display: table;
}
.left {
  display: table-cell;
}
.right {
  display: table-cell;
}

上述布局效果如下：

See the Pen qVmZBw by Shirley (@Four27) on CodePen.

BFC详解

（可以结合分享的连接，这里的笔记是从哪里获取的）

BFC即块级格式化上下文，它是页面上的一个独立渲染区域。BFC里的子元素不会在布局上影响到外面的元素。

BFC布局规则

（1）BFC中的box会在垂直方向上，一个接一个地放置。

（2）BFC垂直方向上的距离由margin决定，属于同一个BFC的两个相邻的box垂直margin会发生重叠。

（3）计算BFC的高度时，浮动元素也参与计算。

（4）每个元素margin-box的左边与包含块border-box的左边相接触。

（5）BFC的区域不会与float-box重叠。

哪些元素生成BFC

  • 根元素
  • float不为none
  • position为inline-block，table-cell
  • overflow不为visible

BFC的作用

1、两栏布局：利用BFC的区域不会与float-box重叠来设置自适应栏；

2、清除浮动：利用BFC在计算高度时包含了浮动元素高度。将父元素设置为BFC：overflow:hidden；

3、消除上下margin重合的问题：利用BFC中两个元素垂直方向上的margin值会发生重叠这一特点，将元素分不到不同的BFC中。

清除浮动元素

为什么要清除浮动？

当存在浮动时：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
.container {
  width: 400px;
  border: 2px solid #000;
  padding: 5px;
  background: pink;
}
.left {
  width: 100px;
  height: 100px;
  background: #80C460;
  float: left;
}
.main {
  width: 100px;
  height: 100px;
  background: red;
  float: left;
}
.right {
  width: 100px;
  height: 100px;
  background: blue;
  float: left;
}
<div class="container">
  <div class="left"></div>
  <div class="main"></div>
  <div class="right"></div>
</div>

如上图所示：父元素存在塌陷，由于子元素的浮动，使得父元素的高变为0。高度和margin以及背景属性都失效了，但是padding值不会受影响。

清除css浮动

（1）添加新元素，应用clear:both

1
2
3
4
5
6
7
8
9
10
<div class="container">
  <div class="left"></div>
  <div class="main"></div>
  <div class="right"></div>
  <div class="clear"></div>
</div>
.clear {
  clear: both;
}

优点：代码少，简单，浏览器兼容性好。

缺点：需要添加大量无语义的html元素，代码不够优雅，后期不容易维护。

（2） 父元素定义overflow: auto;或者overflow:hidden

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div class="container">
  <div class="left"></div>
  <div class="main"></div>
  <div class="right"></div>
</div>
.container {
  width: 400px;
  border: 2px solid #000;
  padding: 5px;
  background: pink;
  overflow: auto;   // overflow:hidden
  zoom: 1;    // 用于兼容ie6
}

（3）使用css的:after伪元素

伪元素，代表元素之后最近的一个元素

1
2
3
4
5
6
7
8
9
10
11
.container:after {
  clear: both;       // 清楚浮动
  content: '';       // 想要添加的内容
  display: block;    // 将要添加的转化为块元素
  height: 0;
  visibility: hidden;   // 隐藏添加的内容
}
.container {
  zoom: 1;   // 为了支持IE6
}

用css画的基本图形

1
<div class="basic"></div>

圆形

1
2
3
4
5
6
7
8
.basic {
  width: 100px;
  height: 100px;
  background: #639263;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radias: 50%;
}

椭圆

1
2
3
4
5
6
7
8
.basic {
  width: 200px;
  height: 100px;
  background: #639263;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;    // 利用百分比来确定两个半径
  border-radias: 50%;
}

解释：这里的border-radius是定义的横竖方向上的半径。

等腰锐角三角形

1
2
3
4
5
6
.basic {
  width: 0;
  height: 0;
  border: 50px solid transparent;
  border-bottom: 
}

原理：

css中的boder其实是以等腰梯形的样式分布的：

1
2
3
4
5
6
7
8
.basic {
  width: 100px;     // 以W3C标准，border不包含在width中
  height: 100px;    
  border-top: 20px solid pink;
  border-left: 20px solid red;
  border-right: 20px solid blue;
  border-bottom: 20px solid #639263;
}

当某一边的border不存在时，它是这样的：

当将width和height均设为0时：

1
2
3
4
5
6
7
8
.basic {
  width: 0px;
  height: 0px;
  border-top: 50px solid pink;
  border-left: 50px solid red;
  border-right: 50px solid blue;
  border-bottom: 50px solid #639263;
}

等腰直角

1
2
3
4
5
6
.basic {
  width: 0px;
  height: 0px;
  border-top: 100px solid #639263;
  border-right: 100px solid transparent;
}

等腰梯形

1
2
3
4
5
6
.basic {
  width: 100px;
  height: 0px;
  border: 50px solid transparent;
  border-bottom: 100px solid #639263;
}

六角星

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.basic {
  width: 0px;
  height: 0px;
  position: relative;
  border: 50px solid transparent;
  border-bottom: 100px solid #639263;
}
.basic:after {
  width: 0px;
  height: 0px;
  position: absolute;
  border: 50px solid transparent;
  border-top: 100px solid #639263;
  content: '';
  top: 25px;
  left: -50px;
}

css选择器

（后面的知识点都是牛客网上css部分题的整理）

选择器类型

基础选择器：

1
2
3
4
*              #id
p              p#id
.class
p.class

组合选择器

1
2
3
4
a,b     // 多元素，同时匹配a和b
a>b     // b为a中的子元素
a b     // 匹配a后代中所有的b元素
a + b   // 匹配所有紧随a后的b元素

属性选择器

1
2
3
4
a[b]   // 匹配a中具有b属性的元素
a[class='b']   // 匹配a中class属性为b的元素，class可换成其他属性
a[class~='b']  // 当class中有多个值时
a[lang|='en']

伪类

1
2
3
4
5
6
7
8
9
10
11
12
a:first-child    // 父元素的第一个子元素
p:first-child {
  color: red;
}  // p不能变为.test这种选择器
a:link     // 未被点击的连接
a:visited  // 已被访问
a:hover    // 鼠标放在上面时
a:active   // 鼠标按下，但没有释放
a:focus    // 当前焦点
a:lang(no) // 匹配lang属性等于no的元素

伪元素

1
2
3
4
a:first-line     // a元素的第一行
a:first-letter   // a元素的第一个字母
a:before         // 在a元素之前插入生成的内容
a:after          // 在a元素之后插入生成的内容

优先级

（1）同类型，同级别的样式后者先于前者

（2）ID > 类样式 > 标签 > *

（3）内联样式 > ID选择器 > 伪类 > 属性选择器 > 类选择器 > 标签选择器 > 通用选择器(*)

（4）近的 > 远的 （内联样式 > 内嵌样式 > 外联样式）

内联样式：内嵌在元素中，span
内部样式：在页面中的样式，写在中的样式
外部样式：单独存在一个css文件中，通过link引入或import导入的样式

有一个例外，当外部样式置于内部样式之后时，外部样式优先级高于内部样式。

（5） !import权重最高，比inline style还要高。

常见display属性

1
2
3
4
5
6
7
display: none;    // 隐藏对象，与visibility:hidden相同
display: block;   // 将对象设为块级元素
display: inline   // 将对象设为内联元素
display: inline-block   // 指定对象为内联块元素，可以使元素既具有高度属性又具有同行属性
display: table    // 指定对象为块元素级表格
display: table-cell  // 指定对象为表格单元格
display: flex    // 伸缩盒模型

link和@import的区别

（1）link属于HTML标签，@import由css提供

（2）页面被加载时，link会自动加载。而@import引用的css会等到页面被夹在完之后再加载。

（3）link无兼容性问题。

（4）link样式的权重高于@import

为什么要初始化浏览器的样式

不同浏览器对有些标签的默认值是不同的，如果不初始化，会出现在不同浏览器上显示不同的情况。

最简单的初始化方法：

1
2
3
4
* {
  padding: 0;
  margin: 0;
}

对css中刻度的认识

1
2
3
em: 以父元素为基础计算倍数，如果父元素未设置，则以默认值16px为基础
rem: 以根元素（即html元素）为基础计算倍数，可以实现当屏幕分辨率变化时，改变字体整体的大小
他们都为相对长度