HTML、CSS篇

_yile
93 阅读5分钟

HTML篇

1、语义化

用正确的标签做正确的事
结构清晰，可读性强有利于开发和维护
对机器友好有利于SEO
常见语义化标签：header、nav、main、section、aside、footer等

2、script标签中defer和async的区别

<script> 立即执行，阻塞后续文档加载
<script defer> 并行加载，解析完所有文档元素后执行
<script async> 并行加载，加载完立刻执行，执行完再加载文档

CSS篇

1、选择器优先级

内联  1000
id选择器  100
类选择器、属性选择器、伪类选择器（li：last-child）  10
标签选择器、伪元素选择器（li：after）  1
其余为 0

！important最高
优先级相同以最后出现的样式为准
内联 > 内部 > 外部

2、常见隐藏元素的方法

dispaly: none;   元素不在页面中，不占据位置，不会触发事件
visibility: hidden;   在页面中，占据位置，不会触发事件
opcity: 0;   在页面中，占据位置，会触发事件
z-index:   负值; 通过其他元素来实现隐藏
transform: scale(0, 0)；   将元素缩放为0，在页面中，占据位置，不触发事件

3、link和@import区别（外部引入css）

link是XHTML标签，除了加载css之外还可以定义RSS等其他事物；@import只能加载css。
link是XHTML标签，没有兼容问题；@import低版本浏览器不支持。
link引入css时在页面加载时同时加载；@import需要等页面完全载入之后加载。
link支持使用js控制去改变样式；@import不支持。

4、伪类和伪元素

伪类：给选择器添加特殊的效果，不会产生新的元素
如：div：hover { color: red }

伪元素：在内容前后插入额外的元素或样式
如：div::after { content: 'something' }

5、盒模型

盒模型由四部分组成：content、margin、padding、border
标准盒模型的width和height只包含了content
IE盒模型（怪异盒模型）的width和height包含了content、border、padding
可以通过box-sizing来改变盒模型
标准模型：box-sizing：content-box
IE模型：box-sizing：border-box

6、css3新特性

各种css选择器。eg：属性选择器
伪类、伪元素
border-radius
flex布局
grid布局
text-shadow
text-decoration
gradient
transform等

7、px、%、em、rem、vh、vw

px是基本单位，绝对单位（其他的都是相对单位）
% 相对于父元素的宽度比例
em相当于当前元素的font-size
rem相当于根元素的font-size
vw屏幕宽度的1%
vh屏幕高度的1%
vmin vmax 上面vw和vh中的最小值和最大值

8、实现水平垂直居中方式

-   利用定位+margin:auto
-   利用定位+margin:负值
-   利用定位+transform
-   table布局
-   flex布局
-   grid布局

9、三栏布局

-   两边使用 float，中间使用 margin
-   两边使用 absolute，中间使用 margin
-   两边使用 float 和负 margin
-   display: table 实现
-   flex实现
-   grid网格布局

10、文本超出处理

单行：
overflow: hidden;
text-overflow: ellipsis;
white-space: no-wrap;

多行：
css方式：
-webkit-line-clamp: 2;
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;

定位+伪元素：

    .demo {
        position: relative;
        line-height: 20px;
        height: 40px;
        overflow: hidden;
    }
    .demo::after {
        content: "...";
        position: absolute;
        bottom: 0;
        right: 0;
        padding: 0 20px 0 10px;
    }

11、清除浮动

- 给父元素设置高度
- 给父元素设置成bfc
- 父元素后面添加一个空的div，设置成clear：both
- 给父元素添加clearfix类名，设成块级元素
.clearfix:after {
    display: block;
    content: ‘’;
    height: 0
    clear: both;
}

.clearfix {
    zoom: 1; // 兼容ie6
}

12、BFC（Block Format Context）块级格式化上下文

- 特点：内部元素无论如何改动，都不会影响其他元素的位置 
- 触发BFC的条件： 
    * 根节点<html> 
    * float: left/right 
    * overflow: auto/scroll/hidden 
    * display:inline-block/table/table-row/table-cell 
    * display: flex/grid 
    * position: fixed/absolute

Flex布局

flex核心属性：

  • flex-direction：设置主轴方向。可选值有row（默认值，从左到右）、row-reverse（从右到左）、column（从上到下）、column-reverse（从下到上）。
  • justify-content：设置主轴上的对齐方式。可选值有flex-start（默认值，起始位置）、flex-end（结束位置）、center（居中）、space-between（平均分布）、space-around（平均分布，两边留白）。
  • align-items：设置交叉轴上的对齐方式。可选值有flex-start（默认值，起始位置）、flex-end（结束位置）、center（居中）、baseline（基线对齐）、stretch（填充）。
  • align-content：当有多行时，设置行与行之间的对齐方式。
  • flex：是flex-grow（放大倍数）、flex-shrink（缩小倍数）、flex-basis（占据主轴空间比例）的简写。

Flex布局适用于多种场景，如单栏布局、两栏布局、三栏布局等。它也可以用于创建复杂的布局，如响应式网格布局、多级导航栏等

解释flex:1为什么能占满剩余空间

flex:1是一个复合属性，是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。

  • flex-grow:定义项目的放大比例，默认值为0，即如果有剩余空间，也不放大。当设置为1时，该项目将与其他设置为1 的Flex项目按比例分配剩余空间。

  • flex-shrink :定义项目的缩小比例，默认值为1，即如果空间不足，该项目将缩小。当所有项目的flex-shrink 都设置为1时，它们将等比例缩小。

  • flex-basis :定义在分配多余空间之前，项目占据的主轴空间。默认值为auto，即项目的本来大小。当设置为0时，它将在分配多余空间之前不占据任何空间。

当使用 flex:1时，flex-basis的默认值 auto 意味着项目将首先占据其主尺寸(通常是宽度或高度)，然后剩余的空间将根据flex-grow的值进行分配。

avatar
文章
阅读
粉丝