css

[深入18] CSS-interview

2021-08-28  本文已影响0人  woow_wu7

导航

[深入01] 执行上下文
[深入02] 原型链
[深入03] 继承
[深入04] 事件循环
[深入05] 柯里化 偏函数 函数记忆
[深入06] 隐式转换 和 运算符
[深入07] 浏览器缓存机制（http缓存机制）
[深入08] 前端安全
[深入09] 深浅拷贝
[深入10] Debounce Throttle
[深入11] 前端路由
[深入12] 前端模块化
[深入13] 观察者模式 发布订阅模式 双向数据绑定
[深入14] canvas
[深入15] webSocket
[深入16] webpack
[深入17] http 和 https
[深入18] CSS-interview
[深入19] 手写Promise
[深入20] 手写函数

[react] Hooks

[部署01] Nginx
[部署02] Docker 部署vue项目
[部署03] gitlab-CI

[源码-webpack01-前置知识] AST抽象语法树
[源码-webpack02-前置知识] Tapable
[源码-webpack03] 手写webpack - compiler简单编译流程
[源码] Redux React-Redux01
[源码] axios
[源码] vuex
[源码-vue01] data响应式 和 初始化渲染
[源码-vue02] computed 响应式 - 初始化，访问，更新过程

前置知识

一些单词

sticky：粘性
triangle：三角形
rectangle：矩形
alternate：轮流的
orient：方向，朝向

vh 和 vw

sticky-footer (三种方法)

sticky-footer效果：是在内容不足一屏时，footer固定在底部，内容超出一屏时，在内容最底部

(1) margin 和 padding 组合

方法1
- margin pading组合
- 适用于 footer固定的情况，兼容性较好

- footer
  - margin-top: -50px;
  - 因为内容区设置了
    - min-height: 100%；在内容不足时候，沾满整个网页
    - padding-bottom: 50px; 主要是为了防止footer往上移动到可视区域底部后，内容区的内容被footer遮挡
    - footer的margin-top的负值则是往上移动，正好和padding-bottom区域重合
- content 
  - min-height：100%，保证内容不全时，沾满整个网页
  - 注意：min-height: 100%是根据父元素计算的，和父元素高度一样，所以content-wrap的所有外层元素都要设置height: 100%
- 注意清掉所有默认样式的padding和margin


- 代码
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      padding: 0;
      margin: 0;
    }
    html, body {
      height: 100%;
    }
    .wrap {
      height: 100%;
    }
    .content {
      min-height: 100%; // 内容不足占满整个内容空间
      padding-bottom: 60px; // 避免content被footer覆盖而看不到内容
      box-sizing: border-box; // width,height包括content,padding,border
      background: blueviolet;
    }
    .footer {
      margin-top: -60px; // 当content内容不足，占满屏幕后，margin-top则让footer显示在底部
      height: 60px;
      background: red;
    }
  </style>
</head>
<body>
  <div class="wrap">
    <div class="content">
      <div>content <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></div>
      <!-- <div>content <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></div>
      <div>content <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></div> -->
    </div>
    <div class="footer">footer</div>
  </div>
</body>
</html>

(2) flex布局

2. flex布局

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      padding: 0;
      margin: 0;
    }
    html, body {
      height: 100%;
    }
    .wrap {
      /* height: 100%; */
      min-height: 100%;
      display: flex;
      flex-direction: column;
    }
    .content {
      /* min-height: 100%; */
      flex: 1;
      /*
      padding-bottom: 60px;
      box-sizing: border-box;
      */
      background: yellow;
    }
    .footer {
      /* margin-top: -60px; */
      height: 60px;
      background: blue;
    }
  </style>
</head>
<body>
  // 在最层元素上设置 min-height: 100% 内容不住沾满空间
  // 在最层元素上设置flex作为容器，注意flex-direction: column竖直方向为主轴
  // 让content项目的flex: 1; 这样就能让cotent占满主轴的剩余空间，即除了footer以外的所有高度，主轴方向min-height: 100%
  <div class="wrap">
    <div class="content">
      <div>content <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></div>
      <div>content <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></div>
      <div>content <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></div>
    </div>
    <div class="footer">footer</div>
  </div>
</body>
</html>

(3) calc属性

方法三
- calc属性
- calculate: 计算

<!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>Document</title>
   <style>
     * {
       margin: 0;
       padding: 0;
     }
     .content {
       min-height: calc(100vh - 30px) // 参数是表达式，可以使用 + - * /
     }
     .footer {
       height: 30px;
       background: black;
       color: white;
     }
   </style>
 </head>
 <body>
  <div class="content">
    content <br><br><br><br>
    content <br><br><br><br>
    content <br><br><br><br>
  </div>
  <div class="footer">
    footer
  </div>
 </body>
 </html>

清除浮动

BFC

清除浮动的方法 - 解决父元素高度塌陷

(1) overflow: hidden

(2) 伪元素 ( ::before ) ( ::after )

(3) 给浮动元素的父元素插入一个子元素，比如span,在设置clear属性，display要为block

(4) 把浮动元素的父元素也设置浮动，从而触发BFC (重复了，但是容易忘记写上把)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .father {
      background: yellow;
      padding: 30px;
      position: relative;
      /* float: left; */
      /* position: absolute; */
      /* overflow: hidden; */
      /* display: inline-block; */
    }
    .father::before {
      content: '.';
      height: 100PX;
      width: 100PX;
      position: absolute;
      top: 0;
      left: 0;
      display: block;
      background: greenyellow;
      clear: both;
    }
    .brother {
      height: 200px;
      width: 200px;
    }
    .child {
      height: 200px;
      width: 200px;
      background: red;
      float: left;
    }
  </style>
</head>
<body>
  <div class="father">
    <div class="child">child</div>
    <div class="brother"></div>
  </div>
</body>
</html>

css选择器

元素选择器

选择器 名称 描述
* 通配符选择器 选择所有元素
E 元素选择器 选择指定元素
#idName id选择器 选择id属性等于idName的元素
.className 类选择器 选择class属性等于className的元素

关系选择器

选择器 名称 描述
E>F 子选择器 子选择器只能选中子元素，不能选中孙子元素，孙孙子元素
E F 后代选择器 除了能选择子元素外，还能选中孙子元素，孙孙子元素
E+F 相邻选择器 相邻选择器只能选中符合条件的相邻的兄弟元素， ( E元素之后的相邻的F元素 )
E~F 兄弟选择器 兄弟选择器会选中符合条件的所有兄弟元素，不强调相邻 ( E元素之后的所有兄弟F元素 )

属性选择器

选择器 描述
E[att] 选择具有att属性的E元素
E[att="val"] 选择att属性值为val的E元素
E[att~="val"] 选择具有att属性且属性值其中一个等于val的E元素（包含只有一个值且该值等于val的情况）
E[att^="val"] 选择具有att属性且属性值为以val开头的字符串的E元素
E[att$="val"] 选择具有att属性且属性值为以val结尾的字符串的E元素
E[att*="val"] 选择具有att属性且属性值为包含val的字符串的E元素

E[att|="val"] 选择具有att属性且属性值为以val开头并用连接符-分隔的字符串的E元素，如果属性值仅为val，也将被选择

伪类选择器

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div[class~="xy"] div[class$="2"]{ 
    // ------------------------------------- 属性选择器，后代选择器
    // div[class~="xy"] -------------------- div属性是class,并且class的值其中一个是xy的div,即(father)
    // div[class~="xy"] div[class$="2"] ---- 后代选择器，包括子元素，孙子元素，孙孙子元素
    // div[class$="2"] --------------------- div的class属性的值以2结尾的div被选中，即（child2，children2）
      border: 2px solid red;
      margin: 10px;
    }
    div[class="child4"]+div {
    // ------------------------------------- 相邻选择器，(区分兄弟选择器)
      background: blue;
    }
  </style>
</head>
<body>
  <div class="father xy">
    <div class="child1">
      <div class="children1">children1</div>
      <div class="children2">children2</div>
    </div>
    <div class="child2">child2</div>
    <div class="child3">child3</div>
    <div class="child4">child4</div>
    <div class="child5">child5</div>
  </div>
</body>
</html>

选择器优先级

伪类和伪元素

伪类

伪元素

伪类和伪元素

1.
伪类：和class一样，是一个类，表示一些动态状态 --------------------------------- 伪类是一个类，一个冒号:
伪元素：是一个元素，不在dom文档树中，( 当前元素的子元素 ) ---------------------- 伪元素是一个元素，两个冒号::


2. 
伪类一个冒号，伪元素两个冒号


3.常见的伪类和伪元素
伪类：
:hover 
:active 
:focus  ------------- 设置输入框的样式，比如改变背景颜色
:visited 
:link 
:firsh-child .....
伪元素： 
::before 
::after
::first-letter  ------------ 选取指定选择器得首字母
::first-line --------------- 选取指定选择器得首行
::selection ---------------- 匹配用户选取得部分，比如选取文字得背景颜色等
::placeholder -------------- 设置placeholder的样式


4.总结：
- 伪类是一个类，定义的是状态:hover，:active，:focus，:visited，:link，:first-child，:last-child等等
- 伪元素是元素的子元素，不在DOM树中，无法用js获取
- 伪元素是行内元素，设置宽高无效，当可以是指display:block改变

实例：
1. 伪元素动画
- 当设置position: absolute后，元素的的display会变成 ----  display:inline-block
- float和position都会改变 display
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<style>
.pseudo {
  height: 150px;
  width: 300px;
  background: rgb(3, 173, 185);
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  position: relative; // ---- 作为绝对定位的定位点
}
.pseudo::after { ------------ 伪元素是当前元素的子元素
  content: ''; -------------- 必须设置内容，这里内容为空
  position: absolute; ------- 绝对定位会改变display 为 inline-block
  left: 50%; // ------------- 绝对定位把left和right都设置为50%，即宽度被压缩成一点，在居中位置
  right: 50%;
  bottom: 0;
  height: 2px;
  background: rgb(255, 230, 0);
  transition: all .3s; // --- 定义transition，状态改变变化时触发
}
.pseudo:hover::after { // ---- 注意给伪元素::after添加伪类:hover的写法是：  ( .pseudo:hover::after )
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  background: rgb(255, 230, 0);
  left: 0; // ---------------- hover时展开，状态触发transition
  right: 0;
}
.pseudo::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 2px;
  background: rgb(255, 0, 0);
  top: 50%;
  bottom: 50%;
  transition: all .3s;
}
.pseudo:hover::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 2px;
  background: rgb(255, 0, 0);
  top: 0;
  bottom: 0;
}
</style>
<body>
  <div class="pseudo">伪类和伪元素</div>
</body>
</html>
image

冲击波动效

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .button {
      margin: 200px;;
      width: 100px;
      height: 40px;
      background: black;
      border-radius: 30px;
      text-align: center;
      line-height: 40px;
      color: white;
      position: relative;
    }
    .button::before {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%); // --------------------- 居中
      width: 200px;
      height: 200px;
      opacity: 0;
      background: white;
      border-radius: 50%;
      z-index: 9999;
      transition: all .5s; // ---------------------------------- 0.5s过度动画
    }
    .button:active::before { // -------------------------------- 伪类:active => 点击改变状态
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%); 
      width: 0;
      height: 0;
      opacity: 1;
      background: white;
      border-radius: 50%;
      z-index: 9999;
      transition-duration: 0s; 
      // ------------------------------------------------------ active时持续时间为0，瞬间改变到active时的状态
      // ------------------------------------------------------ 即瞬间透明度1到0；大小从200到0
      // ------------------------------------------------------ 点击完成时，则执行.5秒的过度动画
      
      // --------------------------- 触发时的状态，用transition-duration: 0s; 立即结束掉，原始状态 --> 目标状态
    }
  </style>
</head>
<body>
  <div class="button">button</div>
</body>
</html>
image

css画三角形

css画三角形

1.宽高都设置为0，border的四边用不同颜色区分，将出现四个三角形
2.为什么会出现4个三角形，因为四个border相互遮挡了
3.#b是向上的三角形
  - 三角形底边长度是border的两倍 ( border-left+border-right的长度 )
  - 三角形高都就是border-bottom的值，所以改变border-bottom就能得到高度不同的三角形
4.其他方向的三角形同理


5. 实例
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .triangle { // --------------------------------- 三角形，把div宽高都设置为0；四个border就是四个三角形
      width: 0;
      height: 0;
      border: 100px solid transparent; // ----------- 四个边设置为透明，用底边覆盖后，就显示向上的三角形，其他方向同理
      border-bottom: 100px solid red; //------------- 向上三角形的底边=left+right的长度，高就是bottom的长度
    }
    .rectangle {
      width: 200px;
      height: 200px;
      background: blue;
    }
  </style>
</head>
<body>
  <div class="triangle"></div>
  <div class="rectangle"></div>
</body>
</html>
image

visibility:hidden 和 display:node 的区别

display: inline-block存在间隙的原因和解决办法

  1. 父元素设置font-size=0;然后再在各个子元素中设置自己需要的大小(因为是字符，所以font-size可以改变字符的大小)
  2. 各个标签之间不要换行，而是仅仅贴合在一起<div>1</div><div>2</div>
image

@media媒体查询

(1) @media语法

@media mediatype and|not|only (media feature) {
    CSS-Code;
}


1.媒体类型
mediatype：媒体类型
- screen：电脑，平板，手机
- print：打印机
- all：所有设备


2.媒体特性
media feature：媒体特性
- 每条媒体特性表达式都必须用括号括起来。


3. 逻辑操作符
- and
    - and运算符用于将多个媒体功能组合到一个媒体查询中
    - 要求每个链接功能都返回true才能使查询为true // --------------------------- 要都为tru才会为true
    - 它还用于将媒体功能与媒体类型结合在一起。
- not
- only


4.代码
@media screen and (max-width: 300px) { // ----- 文档宽度小于 300 像素则修改背景颜色(background-color)
    body {
        background-color:lightblue;
    }
}


@media only screen and (min-width: 640px) and (max-width: 1136px) {
    // 表示( 媒体类型仅仅是screen ) 并且 ( 设备宽度在 640px-1136px之间 ) 就会命中
}


@media screen and (max-width: 680px), screen and (orientation: landscape) and (max-width: 750px) {
    aside {
        display: none;
    }
    // 表示 ( 屏幕宽小于680px ) 或者 ( 屏幕宽小于750px并且横屏 ) 时触发
    // 逗号 ， 就是或者的意思
}

在link标签中使用媒体查询

<link rel="stylesheet" media="screen and (max-width: 600px)" href="small.css" />

<link 
  rel="stylesheet"
  media="screen and (min-width:600px) and (max-width:900px)"
  href="style.css"
  type="text/css" 
/>
表示：屏幕宽度大于600px并且小于900px时，使用style.css文件

在css中使用媒体查询

        @media only screen and (max-width: 765px) {
            .media {
                background: red;
            }
        }
        @media only screen and (min-width: 1200px) {
            .media {
                background: yellow;
            }
        }
        @media only screen and (min-width: 766px) and (max-width: 1199px) {
            .media {
                background: blueviolet;
            }
        }

表示：屏幕宽度
（1）小于765px，背景色red
（2）大于1200px,背景色yellow
（3）在766px-1199px之间，背景色blueviolet

em

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .father {
      font-size: 20px;
    }
    .child {
      font-size: 5em;  // ----------- 当em是font-size的单位时，1em表示的是父元素的font-size的大小 ( 100px )
      width: 5em; // ---------------- 当em是其他属性的单位时，表示的是自身font-size的大小 ( 100 * 5 = 500px )
      height: 5em;
      background: red;
    }
  </style>
</head>
<body>
  <div class="father">
    <div>father</div>
    <div class="child">child</div>
  </div>
</body>
</html>
image

rem

css像素，物理像素，倍屏(像素比)

rem布局

  1. 动态设置html的font-size大小
  2. 将px和rem做适当的比例换算（比如让1px=1rem）
  3. font-size的大小可以继承，为了避免设置html的font-size影响后代的font-size，不要在body上重新设置font-size
设计稿：750px为基准的前提下


1. 动态设置html的font-size大小
2. 将px和rem做适当的比例换算（比如让1px=1rem）
3. font-size的大小可以继承，为了避免设置html的font-size影响后代的font-size，不要在body上重新设置font-size



1和2. 
动态设置html的font-size大小 ----------- (可以用js实现，也可以用css的calc方法实现)
(1) js
document.documetElement.style.fontSize = document.documetElement.client / 750 + 'px'
- 即一个等式：设备实际宽度deviceWidth / 设计稿宽度750 = 某个元素的实际宽度x / 某个元素的设计稿宽度designWidth
- 得出结果：x = deviceWidth/750 * designWidth
- 最终结果：x = 1rem * designWidth = designWidth rem
(2) css-calc()
.html {
    font-size: calc(100vw / 750);
}

3. body
body {
    font-size: 16px; // 浏览器默认字体大小是 16px
}

rem布局 - 实例1 - 手动

rem布局：
- 原理：rem是根据html的font-size的大小来计算元素的大小，1rem = html的font-size的大小
- 方法：用js或者css的calc()动态设置html的font-size的大小

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    html {  
      /* font-size: calc(100vw / 750); */
      // -------------------------------- 用css的calc()动态设置html的font-size
      // -------------------------------- 注意单位vw，vw表示视口的宽度，即浏览器的视口总宽度是100vw
      // ------ calc(100vw / 750)表示把浏览器宽度分成750份，设计稿基于750px设计
      // ------ 1rem = calc(100vw / 750)
      // ------ 根据公式：设备实际宽度deviceWidth / 设计稿宽度750 = 某个元素的实际宽度x / 某个元素的设计稿宽度designWidth
      // ------ 如果：设计稿上有一个 div=100px
      // ------ 开发：div=100rem 就是该div在屏幕中实际的大小
      
    }
    body {
      font-size: 16px; // -------------- 重设font-size避免继承html的font-size影响后代元素
    }
    .father {
      width: 100rem; // ---------------- 1：1的关系
      height: 100rem;
      background: goldenrod;
      font-size: 50rem;
    }
  </style>
</head>
<body>
  <div class="father">father</div>
  <script>
    document.documentElement.style.fontSize = (document.documentElement.clientWidth / 750) + 'px';
  </script>
</body>
</html>

rem布局 - 实例2 - 如何直接写px达到实际是rem单位的效果，即在开发时还是使用px为单位

(1) 
// 定义 px 转化为 rem 的函数
@function px2rem ($px) {
    @return $px + rem; // ----------- 按照上面的设置，px和rem其实就是1：1的关系了
}
.demo {
    width: px2rem(100);
    height: px2rem(100);
}






(2) 插件
postcss-pxtorem
地址：https://github.com/cuth/postcss-pxtorem

如果是基于webpack的项目，则可以新建postcss.config.js文件

-------------- app.vue -------------- 
* {
  margin: 0;
  padding: 0;
}
html {
  font-size: calc(100vw / 750);
}

--------------- postcss.config.js ---------------
--------------- 也可以在vue.config.js中配置 ---------------
module.exports = {
  plugins: {
    'autoprefixer': {------------------ 解决浏览器前缀的兼容性
      browsers: ['Android >= 4.0', 'iOS >= 7']
    },
    'postcss-pxtorem': { // ------------ 自动转换，注意该插件只是将px转成rem，还是要动态设置html的font-size大小
        rootValue: 1, // 基数，即1px = 1rem
        unitPrecision: 5,
        propList: ['*'],
        selectorBlackList: [],
        replace: true,
        mediaQuery: false,
        minPixelValue: 0,
        exclude: /node_modules/i
    }
  }
}


--------------- ue.config.js ---------------
module.exports = {
  lintOnSave: true,
  css: {
      loaderOptions: {
          postcss: {
              plugins: [
                  require('postcss-pxtorem')({
                      rootValue : 1, // 换算的基数
                      selectorBlackList  : ['weui','mu'], // 忽略转换正则匹配项
                      propList   : ['*'],
                  }),
              ]
          }
      }
  },
}

animation

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    @keyframes go { // -------------------------------------------------- @keyframes
      from {
        left: 0;
      }
      to {
        left: 100px;
      }
    }
    .father {
      width: 200px;
      height: 200px;
      background: red;
      position:relative;
      animation: go 1s ease-in-out 2s infinite alternate; // ------------- animation
    }
  </style>
</head>
<body>
  <div class="father">father</div>
</body>
</html>

1像素物理边框

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    .one-px-border {
      height: 200px;
      width: 200px;
      position: relative;
    }
    .one-px-border::before { // ------------------------- 伪元素，当前元素的子元素，不在DOM中，提升效率
      content: ''; // ----------------------------------- 必须设置content
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 1px;
      background: red;
    }
    @media screen and (-webkit-min-device-pixel-ratio: 2) { // ---------------- 像素比是2，则缩放y方向的尺寸为0.5
      .one-px-border::before {
        transform: scaleY(0.5);
      }
    }
    @media screen and (-webkit-min-device-pixel-ratio: 3) {// ---------------- 像素比是3，则缩放y方向的尺寸为0.333
      .one-px-border::before {
        transform: scaleY(0.33333);
      }
    }
  </style>
</head>
<body>
  <div class="one-px-border"></div>
</body>
</html>
image

元素水平垂直居中

table-cell布局


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    .father {
      height: 300px;
      width: 300px;
      border: 1px solid black;
      display: table-cell; // ----------------------------- 父元素   display: table-cell
      vertical-align: middle; // -------------------------- 垂直居中 vertical-align: middle 
      text-align: center; // ------------------------------ 水平居中 text-align: center
      // 注意：
      // 1. 如果子元素的 ( 宽高已知 )，那么不需要( 父元素text-align: center )，而直接 ( 子元素margin: 0 auto );
      // 2. 如果子元素的 ( 宽高未知 )，( 父元素text-align: center )；并且子元素设置 ( display: inline-block; )
    }
    .child {
      // height: 100px;
      // width: 100px;
      background: red; 
      display: inline-block; 
      // --------------------------- 注意: 这里的display: inline-block是必须的，因为宽高未知
      // --------------------------- 宽高已知，就用margin: 0 auto;而且父元素也不需要text-align:center;
    }
  </style>
</head>
<body>
  <div class="father">
    <div class="child">child</div>
  </div>
</body>
</html>

table-cell布局 - 不知道子元素的宽高

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    .father {
      height: 300px;
      width: 300px;
      border: 1px solid black;
      display: table-cell;
      vertical-align: middle;
      text-align: center;
    }
    .child {
      background: red; 
      display: inline-block;
    }
  </style>
</head>
<body>
  <div class="father">
    <div class="child">child</div>
  </div>
</body>
</html>
image 
grid 布局实现水平垂直居中1 
---
.father {
  display: grid; // --------------------------------- display: grid;
  justify-items: center; // ------------------------- justify-items: center;
  align-items: center; // --------------------------- align-items: center;
}
.child {}

grid 布局实现水平垂直居中2
---
.father {
    display: grid;
}
.child {
    justify-self: center;
    align-self: center;
}

单行省略号 和 多行省略号

单行省略号 和 多行省略号

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .content1 { // ------------------------------------------ 单行省略号
      background: yellow;
      width: 200px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .content2 { // ------------------------------------------ 多行省略号
      background: red;
      width: 100px;
      overflow: hidden;
      display: -webkit-box; // ------------------------------ display: -webkit-box
      -webkit-box-orient: vertical; // ---------------------- 方向
      -webkit-line-clamp: 2; //------------------------------ 行数
    }
  </style>
</head>
<body>
  <div class="content1">
    单行省略号
    单行省略号
    单行省略号
    单行省略号
    单行省略号
  </div>
  <div class="content2">多行省略号,多行省略号,多行省略号,多行省略号</div>
</body>
</html>
image

word-wrap 和 word-break 的区别

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .word-wrap {
      word-wrap: break-word;
      width: 120px;
      background: yellow;
      margin: 10px;
    }
    .word-break {
      word-break: break-all;
      width: 120px;
      background: red;
      margin: 10px;
    }
  </style>
</head>
<body>
  <div class="word-wrap">abcdefgh go home sdfasdfasdfadfasdfasdfadfafd</div>
  <div class="word-break">abcdefgh go home sdfasdfasdfadfasdfasdfadfafd</div>
</body>
</html>
image

block，inline，inline-block

常见的块级元素： div, form, table, p, pre, h1~h6, dl, ol, ul,li等；
常见的内联元素有 span, a, img, input, textarea, i,strong, em, lable, select, br 等


1. block
  - 块级元素，独占一行
  - block元素可以设置宽，高等属性
  - block可以设置margin，padding属性
  - 默认情况下，block元素的宽度自动填满其父元素的宽度

2. inline
  - 不独占一行，多个相邻行内元素排列在同一行，直到排不下才换行
  - inline元素设置width和height无效
  - inline元素设置margin，在水平方向有效，在垂直方向无效
  - inline元素设置padding对自身有效，但是在垂直方向上不能撑开父元素

3. inline-block
  - 同时具有block的特性可以设置宽度和高度属性，又具有line元素的不占一行的属性

双栏布局 - 左侧固定，右侧自适应

(1) 左侧固定，右侧自适应 - float布局
- 左侧flot: left; width = 200px;
- 右侧无需设置

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    html, body {
      width: 100%;
      height: 100%;
    }
    .container {
      width: 100%;
      height: 100%;
    }
    .left {
      background: red;
      height: 100%;
      float: left; // ------------------------ float: left
      width: 200px;
    }
    .right { // ------------------------------ 右侧 margin-left: 200px;
      margin-left: 200px; // ----------------- 这里必须设置的，不然在换行时会发生文字环绕
      background: yellow;
      height: 100%;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="left">left</div>
    <div class="right">right</div>
  </div>
</body>
</html>

(2)左侧固定，右侧自适应 - flex布局


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    html, body {
      width: 100%;
      height: 100%;
    }
    .container {
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: flex-start;
      align-items: flex-start;
    }
    .left {
      width: 200px;
      flex: 0 0 200px;
      background: red;
      height: 100%;
    }
    .right {
      flex: 1;
      background: yellow;
      height: 100%;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="left">left</div>
    <div class="right">right</div>
  </div>
</body>
</html>

(3) 绝对定位
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    html, body {
      width: 100%;
      height: 100%;
    }
    .container {
      width: 100%;
      height: 100%;
      position: relative;
    }
    .left {
      background: red;
      height: 100%;
      width: 200px;
      position: absolute;
    }
    .right {
      position: absolute;
      left: 200px;
      right: 0;
      background: yellow;
      height: 100%;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="left">left</div>
    <div class="right">right</div>
  </div>
</body>
</html>
image

三栏布局 - 圣杯布局

圣杯布局 - flex

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    html, body {
      width: 100%;
      height: 100%;
    }
    .container {
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: flex-start;
      align-items: flex-start;
    }
    .left {
      height: 100%;
      background: red;
      flex: 0 0 200px;
    }
    .center {
      height: 100%;
      background: blue;
      flex: 1;
    }
    .right {
      height: 100%;
      background: yellow;
      flex: 0 0 200px;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="left">left</div>
    <div class="center">center</div>
    <div class="right">right</div>
  </div>
</body>
</html>

圣杯布局 - 浮动


<div class="container">
    <div class="left"></div>
    <div class="right"></div>
    <div class="main"></div> ## main放最后
</div>

.left {
    float: left;
    width: 100px;
}
.right {
    width: 200px;
    float: right;
}
.main {
    margin-left: 120px;
    margin-right: 220px;
}
## 或者 触发bfc，BFC区域，不会与浮动元素重叠
.main {
    overflow: hidden;
}

position

盒模型

@import 和 link 的区别

资料

sticky-footer https://juejin.im/post/6844903827603210253
sticky-footer https://aotu.io/notes/2017/04/13/Sticky-footer/

BFC https://zhuanlan.zhihu.com/p/25321647
BFC https://juejin.im/entry/6844903456721862669
BFC https://www.w3ctrain.com/2016/03/28/float-secret/
BFC https://www.jianshu.com/p/7e04ed3f4bea
CSS选择器 https://juejin.im/entry/6844903460794531848
伪元素 伪类动画 (全) https://zhuanlan.zhihu.com/p/36502282
伪元素 伪类动画 https://www.haorooms.com/post/css_wl_wys
伪元素 伪类动画 https://segmentfault.com/a/1190000000484493
行内块级元素有间隙 https://juejin.im/post/6844903781570707469
媒体查询 https://zhuanlan.zhihu.com/p/26882107
rem布局：https://juejin.im/post/6844903671143088136
rem布局原理：https://juejin.im/entry/6844903506021728263
rem不不不巨巨巨：https://juejin.im/post/6844903935568789517#heading-0
rem https://juejin.im/post/6844903857454055438
rem可用：https://juejin.im/post/6844904021552005128#heading-0
两栏三栏布局：https://juejin.im/post/6844904087394205704

上一篇下一篇

猜你喜欢

热点阅读