【CSS】常用知识点

1、不正交主要表现在两点

1. 各属性之间互相影响

• margin 与 border
• 小园点 与 display
• position: absolute V.S. display: inline

2. 各元素之间互相影响

• position: fixed V.S. transform
• float 影响 inline 元素

2、CSS 3 Generator

3、文字溢出省略

单行

    white-space: nowrap;
    text-overflow: ellipsis;
    overflow:hidden;
1
2
3

多行

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

4、文本对齐

 <span>姓名span>
 <br>
 <span>联系方式span>
1
2
3

    span{
      border: 1px solid green;
      display: inline-block;
      text-align: justify;
      line-height: 20px;
      width: 5em;
    }
    span::after{
      content: '';
      display: inline-block;
      width: 100%;
    }
1
2
3
4
5
6
7
8
9
10
11
12

5、文字垂直居中

    line-height: 20px;
    padding: 8px 0;
1
2

      display: flex;
      justify-content: center;
      align-items: center;
1
2
3

6、一比一的div

div{
  border: 1px solid red;
  padding-top: 100%;
}
1
2
3
4

7、堆叠上下文

堆叠顺序

1. z-index: -
2. background
3. border
4. 块级
5. 浮动
6. 内联
7. z-index: 0
8. z-index: +
   如果是兄弟元素重叠，那么后面的盖在前面的身上。

下面触发新的堆叠作用域

• 根元素 (HTML)
• z-index 值不为"auto"的 绝对/相对定位，
• 一个 z-index 值不为"auto”的flex 项目(flex item)，即：父元素 display: flex | inline-flex.
• opacity 属性值小于1的元素
• transform 属性值不为"none"的元素，
• mix-blend-mode 属性值不为"normal的元素，
• filter值不为"none"的元素，
• perspective值不为"none"的元素
• isolation 属性被设置为 “isolate"的元素
• position: fixed
• 在will-change 中指定了任意 CSS 属性，即便你没有直接指定这些属性的值
• webkit-overtilow-scrolling 属性被设置 "touch"的元素

8、icon 的各种做法

1. img 做法
   标签
2. background 做法
   background: red url(./xxx.png) no-repeat 0 0;
   background-image: url(./xxx.png);
3. font 做法
   第一步：拷贝项目下面生成的 @font-face

@font-face {
  font-family: 'iconfont';
  src: url('iconfont.ttf?t=1660807256345') format('truetype');
}
1
2
3
4

第二步：定义使用 iconfont 的样式

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
1
2
3
4
5
6
7

第三步：挑选相应图标并获取字体编码，应用于页面

<span class="iconfont">3span>
1

4. CSS Icon
   https://cssicon.space/#/icon/focus

9、静态服务器

npm i -g http-server
http-server -c-1

10、布局套路

原则

• 不到万不得已，不要写死width 和height
• 尽量用高级语法，如 calc、flex
• 如果是IE，就全部写死

口诀

1. float

• 儿子全加float: left ( right)
• 老子加.clearfix

2. flex

• 老子加 display: flex
• 老子加justify-content: space-between;

如果宽度不够，可以用 margin: 0-4px;

.clearfix::after{
content:''
display:block;
clear: both;
}
.clearfix{
zoom:1:
}
1
2
3
4
5
6
7
8

.p{
  width: 400px;
  height: 200px;
  background-color: red; 
}
.c {
  float:left;
  box-sizing: border-box;
  width: 100px;
  height: 100px;
  background-color: green;
  border: 1px solid blue;
} 

.p{
  width: 400px;
  height: 200px;
  background-color: red; 
  display: flex;
  flex-wrap: wrap;
}
.c {
  box-sizing: border-box;
  width: 100px;
  height: 100px;
  background-color: green;
  border: 1px solid blue;
}
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

11、BFC

CSS规范中对BFC的描述

块格式化上下文
浮动，绝对定位元素,非块盒的块容器(例如,inline-blocks, table-cells和table-captions ) 和’overflow’不为’visible’的块盒会为它们的内容建立一个新的块格式化上下文
在一个块格式化上下文中,盒在竖直方向一个接一个地放置,从包含块的顶部开始。两个兄弟盒之间的竖直距离由’margin’属性决定。同一个块格式化上下文中的相邻块级盒之间的竖直margin会合并
在一个块格式化上下文中,每个盒的left外边( left outer edge )挨着包含块的left边(对于从右向左的格式化,right边挨着)。即使存在浮动(尽管一个盒的行盒可能会因为浮动收缩),这也成立。除非该盒建立了一个新的块格式化上下文(这种情况下,该盒自身可能会因为浮动变窄)标记为已完成

MDN 对BFC的描述

一个块格式化上下文(block formatting context)是Web页面的可视化CSS渲染出的一部分。它是块级盒布局出现的区域,也是浮动层元素进行交互的区域。
一个块格式化上下文由以下之一创建:
根元素或其它包含它的元素
浮动元素(元素的float 不是none)
绝对定位元素(元素具有position 为 absolute 或 fixed)
内联块(元素具有 display: inline-block)
表格单元格(元素具有 display: table-cell , HTML表格单元格默认属性)
表格标题(元素具有display: table-caption, HTML表格标题默认属性)
具有overflow 且值不是visible 的块元素
display: flow-root
column-span: all 应当总是会创建一个新的格式化上下文,即便具有 column-span: all的元素并不被包裹在一个多列容器中。
一个块格式化上下文包括创建它的元素内部所有内容,除了被包含于创建新的块级格式化上下文的后代元素内的元素。

块格式化上下文对于定位(参见float)与清除浮动(参见clear)很重要。定位和清除浮动的样式规则只适用于处于同一块格式化上下文内的元素。浮动不会影响其它块格式化上下文中元素的布局,并且清除浮动只能清除同一块格式化上下文中在它前面的元素的浮动。

BFC/堆叠上下文特点：
1.它没有定义
2.它只有特性/功能功能

1、父子之间，用BFC包住浮动元素。
2、兄弟之间划清界限，用float + div做左右自适应布局

12、REM

  <script>
    var pageWidth = window.innerWidth;
    document.write('')
  script>
<body>
<div class='p'>
 <div class='c'>40%div>
 <div class='c'>40%div>
 <div class='c'>40%div>
 <div class='c'>40%div>
div>
body>
1
2
3
4
5
6
7
8
9
10
11
12

*{
  margin: 0;
  padding: 0;
}
body{
  font-size: 16px;
}
.c{
  background-color: green;
  float: left;
  width: 0.4rem;
  height: 0.4rem;
  margin: 0.05rem 0.05rem;
  text-align: center;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15