css知识点

发表于 | 分类于


Flex布局

弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。容器存在两根轴：水平主轴(main axis)和垂直交叉轴(crosss axis)

默认情况

flex-direction: row; flex-wrap: nowrap; flex-item子元素沿水平主轴由左向右排列，nowrap的意思是让子元素排一行，假如宽度不够的时候全部子元素缩小。

1
2
3
4
5
<div class="flex-container" style="display: flex;">
  <p class="flex-item">我是第一个项目</p>
  <p class="flex-item">我是第二个项目</p>
  <p class="flex-item">我是第三个项目</p>
</div>
容器属性

1、flex-direction: 改变主轴

1
2
flex-direction: row | row-reverse | column | column-reverse;
// row(默认)沿水平主轴由左向右排列、row-reverse沿水平主轴由右向左排列、column沿垂直主轴右上到下和column-reverse。

2、flex-wrap: 是否让子元素一行显示

1
2
flex-wrap: nowrap | wrap | wrap-reverse;
// nowrap(默认)不换行，让项目一行展示；wrap：宽度不够换行展示；wrap-reverse：换行且反向展示。

3、flex-flow：将flex-direction和flex-wrap一起设置

1
flex-flow: <flex-direction> || <flex-wrap>;

4、justify-content: 项目在主轴上的对齐方式（看flex-direction的设置）

1
2
3
4
5
6
7
8
9
justify-content: flex-start | flex-end | center | space-between | space-around;
// flex-start：在主轴上由左或者上开始排列。flex-end：在主轴上由右或者下开始排列。
// center：在主轴上居中排列。space-between：在主轴上左右两端或者上下两端开始排列。
// space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

<div class="flex-container" style="width: 100%; height: 300px; display: flex; flex-direction: column; justify-content: center;">
  <p class="flex-item">我是第一个项目</p>
  <p class="flex-item">我是第二个项目</p>
</div>

5、align-items: 项目在非主轴上的对齐方式

1
2
3
align-items: flex-start | flex-end | center | baseline | stretch;
// baseline: 文字在水平一条线上
// stretch: 让项目在非主轴上撑满

项目属性

1、order: 项目在主轴上的排列顺序。数值越小，排列越靠前，默认为0。

1
order: <integer>

2、flex-grow：项目的放大比例，默认为0，即如果存在剩余空间，也不放大。

1
flex-grow: <number>;

3、flex-shrink：项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。

1
flex-shrink: <number>;

响应式布局

视口

移动前端中常说的 viewport （视口）就是浏览器中用于呈现网页的区域。手机端与 PC 端视口存在差异，电脑端的视口宽度等于分辨率，而移动端的视口宽度跟分辨率没有关系,iOS, Android 基本都将这个视口分辨率设置为 980px。乔布斯设置成980px因为是绝大多数 PC 网页的版心宽度。不过网页基本会缩放，页面缩放后文字会变得非常小，用户需要手动放大缩小才能看清楚，体验非常差。

1
2
3
4
5
6
7
// 解决方案：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
width=device-width   视口为设备宽度（就是人设置的一个宽度）//不设置的话默认为980px
initial-scale=1.0    初始化的视口大小是1.0倍
maximum-scale=1.0    最大的倍数是1.0倍
user-scalable=0      不允许缩放视口
// 这个视口的标签告诉浏览器怎么渲染网页。在这里，标签想表达的意思是：按照设备的宽度（device-width）来渲染网页内容。
约束后的视口

手机厂商会设置约束视口，宽度大概在320~480 之间。能够保证我们的文字比如 16px，在自己的这个视口下清晰、大小刚刚合适。

流式布局

百分比布局也叫作流式布局、弹性盒布局。百分比能够设置的属性是 width、height、padding、margin。其他属性比如 border、font-size 不能用百分比设置的。

1
2
3
4
5
如果用百分比写 width，那么指的是父元素 width 的百分之多少。
如果用百分比写 height，那么指的是父元素 height 的百分之多少。
如果用百分比写 padding，那么指的是父元素 width 的百分之多少，无论是水平的 padding 还是竖直的 padding。
如果用百分比写 margin，那么指的是父元素 width 的百分之多少，无论是水平的 margin 还是竖直的 margin。
不能用百分比写 border 的宽度
媒体查询

我们在媒体查询外面写的第一条规则，是“基本的”样式，它适用于任何设备。在此基础上，我们再为不同视口、不同能力的设备，渐进增加不同的视觉效果和功能。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
body {
    background-color: grey;
 }
@media screen and (min-width:1200px){
    body{
        background-color: pink;
	}
}
 @media screen and (min-width:700px) and (max-width:1200px){
    body{
	background-color: blue;
	}
}
@media screen and (max-width:700px){
    body{
	background-color: orange;
        }
}
rem响应式布局

一般不要给元素设置具体的宽度,但是对于一些小图标可以设定具体宽度值
高度值可以设置固定值,设计稿有多大,我们就严格写多大
所有设置的固定值都用 REM 做单位

1
2
// 实现方式
// 设计稿一般宽为750px，我们设定初始的HTML的font-size: 100px，我们除以100转为rem，实际浏览器渲染的时候，我们根据实际宽度，比如苹果6/7/8实际宽度为375px，那实际设置的HTML的font-size: 实际宽度/750*100px，元素根据HTML的font-size乘以rem，就是实际缩小后的宽度。

BFC

什么是BFC

BFC: 块级格式化上下文 (Block Fromatting Context)。他提供了一个环境，在这个环境中的元素不会影响到其它环境中的布局。
如何创建BFC：浮动元素和绝对定位元素，非块级盒子的块级容器（例如 inline-block、table-cell、flex、table-caption、inline-flex），以及overflow值不为“visiable”的块级盒子，都会为他们的内容创建新的BFC（块级格式上下文）。
BFC是一个容器，用于管理块级元素。并规定了内如如何布局，与外面毫不相干。

BFC特性

1、BFC会阻止垂直外边距折叠

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// 按照BFC的定义，只有同属于一个BFC时，两个元素才有可能发生垂直margin的重叠，这个包括相邻元素或者嵌套元素，只要他们之间没有阻挡（比如边框、非空内容、padding等）就会发生margin重叠。
<div>
  <p>1</p>
  <p>2</p>
</div>

div{ background: #ddd; overflow: hidden; }
p{ margin: 20px; background:red; } // p会合并

// 解决方案
<div>
  <p>1</p>
  <div class="wrap">
    <p>2</p>
  </div>
</div>
.wrap{
  overflow:hidden;
} // 只需要在p外面包裹一层容器，并触发该容器生成一个BFC。那么两个P便不属于同一个BFC，就不会发生margin重叠了。

2、父子元素margin重叠

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<p>first p</p>
<div class="wrap">
  <h1>h1</h1>
</div>
<p>second p</p>

.wrap {
  background:yellow;
}
.wrap h1{
  height:20px;
  background:pink;
  margin:40px;
} // .wrap只有20px，并没有margin高度

// 解决方案
.wrap {
  background:yellow;
  overflow: hidden; // 转为BFC
}

3、清除浮动（另一种方法：伪元素clear：both;清除浮动）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div>
  <p></p>
  <p></p>
</div>
div{
  background: #ddd;
  overflow: hidden; // 由于容器内两个div元素浮动，脱离了文档流，父容器内容宽度为零（即发生高度塌陷）
}
p{
  width: 20px;
  height: 20px;
  border: 1px solid blue;
  float: left;
}

页面布局

常见的CSS布局
三栏布局

css实现省略号

单行省略号
1
2
3
overflow: hidden;
text-overflow:ellipsis; // 显示省略号来代表被修剪的文本
white-space: nowrap; // 规定不换行
实现多行省略

因使用了WebKit的CSS扩展属性，该方法适用于WebKit浏览器及移动端；

1
2
3
4
display: -webkit-box;
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;

字母自动换行

1
2
3
4
5
word-break: normal|break-all|keep-all;
// break-all: 允许在单词内换行。keep-all: 只能在半角空格或连字符处换行。

word-wrap: normal|break-word;
// break-word: 在长单词或 URL 地址内部进行换行。

伪类和伪元素

伪类

:focus, :hover, :actived, :visted, :first-child, :last-child, :first-of-type, :last-of-type, :nth-child(n), :nth-child(odd), :nth-child(even)等

易错题
1
2
3
4
5
6
7
8
9
10
<div>
  <span>我是span:first-child</span>
  <p>我不是p:first-child</p>
  <p>我是p:nth-child(3)</p>
  <p>我不是p:last-child</p>
  <span>我是span:last-child</span>
</div>
// p:first-child表示div的第一个元素是p标签，而不是div的第一个p标签
// p:first-of-type, p:last-of-type表示div的第一个p标签和最后一个p标签
所以上次p:first-child, p:last-child都不生效。要改成p:first-of-type, p:last-of-type
伪元素

::after, ::before, ::first-letter, ::first-line, ::selection, ::backdrop

水平垂直居中

行内元素水平居中
1
2
3
4
5
6
7
8
9
.parent{
  text-align: center;
  .child{
    display: inline; // 行内元素
    display: inline-block; // 行内块元素
    display: inline-table; // 内联表格
    display: inline-flex; // 内联块级弹性伸缩盒
  }
}
块级元素水平居中
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
// margin
.child{
  width: 100px;//确保该块级元素定宽
  margin:0 auto;
}
// table+margin
.child {
  display: table; // 这样元素的宽就是内容的宽
  margin: 0 auto;
}
// absolute+transform
.child {
  position:absolute;
  left:50%;
  transform:translateX(-50%);
}
.parent {
  position:relative;
}
// flex
.parent {
  display: flex;
  justify-content:center;
}
浮动元素水平居中
1
2
3
4
5
6
7
8
9
10
11
<div class="parent">
  <p>child</p>
</div>

.parent{
  display: flex;
  justify-content: center;
  p{
    float: left;
  }
}
绝对定位元素水平居中
1
2
3
4
5
6
7
8
9
10
11
12
13
// margin: 0 auto; left: 0; right: 0;
.parent{
  position:relative;
}
.child{
  position: absolute; /*绝对定位*/
  width: 200px;
  height:100px;
  background: yellow;
  margin: 0 auto; /*水平居中*/
  left: 0; /*此处不能省略，且为0*/
  right: 0;/*此处不能省略，且为0*/
}
垂直居中
1
2
3
4
5
6
7
8
9
10
11
12
// line-height + height
// flex + align-items
// table
.parent {
  display: table;
  height: 140px;
  border: 2px dashed #f69c55;
}
.child {
  display: table-cell;
  vertical-align: middle;
}
水平垂直居中
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
// margin+absolute
#container {
  position: relative;
  height:100px;//必须有个高度
}
#center {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;//注意此处的写法
}

// absolute + transform
#container {
  position: relative;
}
#center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

// flex布局
#container {//直接在父容器设置即可
  height: 100vh;//必须有高度
  display: flex;
  justify-content: center;
  align-items: center;
}