[补充知识 2.0] 结构伪类选择器 盒子水平垂直居中方法 字体图标 页面可修改

周杰论
106 阅读1分钟

1.结构伪类选择器,选择li里面的第几个a 以及如果不选择最后一个Li

除了最后一个li都加上又外边距20pxnot(:last-child)

ul li:not(:last-child){
margin-right:20px
}

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .box li:first-child a {
        /* 这才能找到百度 */
        color: red;
      }

      /* 找到搜狐 */
      .box li::first-child a:first-child(1) {
        color: red;
      }
    </style>
  </head>
  <body>
    <div class="box1">
      <ul>
        <li>
          <a href="#">百度</a>
          <a href="#">搜狐</a>
        </li>
        <li><a href="#">淘宝</a></li>
        <li><a href="#">京东</a></li>
      </ul>
    </div>
  </body>
</html>

2.盒子水平垂直居中的几种方法!!!

  • 1行内元素:tac+line-height
  • 2行内快元素: img input 文字 :vertical-algin:middle;这个属性就是针对行内和行内块的

3.面试题 盒子居中目前为止已学的解决方法

  • 第一种 tac + line-height 块级就转行内快给verticla-align
  • 第二种 定位 子觉父相 top:50% , left:50% ,margin-top-left:-子盒子自身的一半
  • 第三种 定位 top-left-right-bottom:0, margin:auto; 如果不想居中就是去掉哪个方向
  • 第四种 伸缩盒子 justify-content:center, align-item:center;
  • 第五种 定位 transifrom:translate(-50%,-50%);

4.字体图标

1.@font-face定义一个字体
2.font-family:“iconfont” 定义字体的名称
3.其他的iconfont.eot ttf svg woff 什么的都是格式 ,支持的浏览器

5.verticla-align:可以给具体的数值

verticla-align:-1px;来控制移动

6.页面随意修改

document.designMode=‘on’

7.页面变灰色

filter:sc

avatar
文章
阅读
粉丝