HTML/CSS

理论

如果全部使用div,span,li这些开发页面,有什么缺点
- 不利于搜索引擎优化，搜索引擎会爬取网页中的标签内容，使用恰当的标签可以提升网页排名
- 降低文档的语义性，对于使用屏幕阅读器的用户来说，不能清楚知道该内容的角色
样式优先级怎么计算，样式优先级计算策略
- 选择器的特殊性
  - 选择器的特殊性由选择器本身的组成确定，特殊性值表述为4个部分，如0,0,0,0
  - 内联声明的特殊性，加1,0,0,0
  - 对于选择器中给定的ID属性值，加0,1,0,0
  - 对于选择器中给定的各个类属性，属性选择，或伪类，加0,0,1,0
  - 对于选择器中的给定的各个元素和伪元素，加0,0,0,1
  - 通配符选择器的特殊性为0,0,0,0
  - 结合符(,)对选择器的特殊性没有一点贡献
  - 继承没有特殊性
例：div[id="test"] (0,0,1,1) 和 #test(0,1,0,0)
特殊性不进位，1,0,0,0大于所有以0开头的特殊性(比如0,1111,0,0)
如果多个规则与同一个元素匹配，而有些声明互相冲突时，特殊性越大的越占优势
- 重要声明
  - 有时某个声明比较重要，超过了其他声明，css2.1就称之为重要声明，并允许在这些声明的结束之前插入!important来标志
- 样式来源
  - 用户的重要声明
    - 用户通过浏览器导入的自定义样式中，包含的重要声明
  - 开发者的重要声明
  - 开发者的普通声明
  - 用户的普通声明
    - 用户通过浏览器导入的自定义样式
  - 用户代理的声明
    - 浏览器的默认样式
  - 优先级从上到下，依次降低
- 优先级计算方式
  - 先按来源排序
  - 再按选择器的特殊性排序
  - 再按样式的位置顺序（引入顺序或书写顺序，越靠后的优先级越高）
  - 优先级高的覆盖掉优先级低的样式

设置样式的方法有哪些

引入外部的样式表

    <link href="./style.css" rel="stylesheet" type="text/css" />

在文档内写嵌入样式

    <style>
    	body {
            margin: 0px;
        }	
    </style>

在标签属性上写内联样式

    <body style="margin: 0px;"></body>

display有哪些属性
- block: 块级元素，独占一行，宽度与父元素一致，可以设置宽高
- inline: 内联元素，宽度充裕时与其他元素共享一行，宽高由内容撑开，不可以设置宽高
- inline-block: 行内块，宽度充裕时与其他元素共享一行，可以设置宽高
- flex: 弹性布局
- inline-flex: 使容器变为行内块，项目自动换行
- grid：网格布局，资料：CSS Grid 网格布局教程
- none: 不显示在页面中，但元素仍在文档里
如何做主题(皮肤)切换
- 通过类
  - 将不同主题的样式，分别抽出来，用不同的类来分担
  - 然后通过切换类，来切换主题
- 通过变量
  - 对变化的样式使用CSS变量，切换样式时只需要修改变量的值即可，无需处处修改
css变量如何使用

    body{
        --pink: pink;	// 使用--进行声明变量(作用域从定义处到子元素)
        background: var(--pink); // 使用var使用变量
    }

元素层级关系,如何确定任意两个标签在屏幕上的谁层级更高

如图：

coding

两列瀑布流布局如何实现

元素如下

  <div class="photos" >
      <div class="photo" style="height: 103px">1</div>
      <div class="photo" style="height: 252px">2</div>
      <div class="photo" style="height: 214px">3</div>
      <div class="photo" style="height: 201px">4</div>
      <div class="photo" style="height: 162px">5</div>
      <div class="photo" style="height: 279px">6</div>
  </div>

使用 flex

  <style>
    .photos{
        width:420px;	// 可根据项目的固定宽度和间隔进行计算
        height: 700px;	// 当项目在高度上放不下时，会换另一列放置
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
    }
    .photo{
        display:block;
        margin:5px;
        object-fit:none;
        width: 200px;
        background-color: pink;
    }
  </style>

使用多列布局

  <style>
    .photos {
        width:410px;
        column-count: 2;
        column-gap: 10px;
    }
    .photo {
    	overflow: auto; // 防止项目被断开
    }
  </style>

如何实现表格斑马纹

  <style>
    table tr:nth-of-type(even) {
        background-color: pink;
    }
  </style>

<body>

    <table border="1" cellspacing="0" cellpadding="10px">
        <tr>
            <th>head1</th>
            <th>head2</th>
            <th>head3</th>

        </tr>
        <tr>
            <td>data1</td>
            <td>data2</td>
            <td>data3</td>
        </tr>
        <tr>
            <td>data1</td>
            <td>data2</td>
            <td>data3</td>
        </tr>
        <tr>
            <td>data1</td>
            <td>data2</td>
            <td>data3</td>
        </tr>
    </table>
</body>

实现一个圆从左右来回滚动100px的动画

  <style>
      .circle {
          animation: roll 1s infinite;
          width: 100px;
          height: 100px;
          border-radius: 50%;
          background-color: pink;
      }
      @keyframes roll {
          0% {
                transform: translateX(0px) rotateZ(0deg);	// 顺序有关系，因为矩阵相乘没有交换律
          }
          50% {
                transform: translateX(100px) rotateZ(360deg);
          }
          100% {
                transform: translateX(0px) rotateZ(0deg);
          }
      }
  </style>
  <body>
      <div class="circle">
          1
      </div>
  </body>

0131面试题——样式优先级、层级关系、瀑布流

HTML/CSS

理论

coding