HTML+CSS高频面试题

已于 2024-07-16 10:51:41 修改
阅读量1.2k 收藏 7
点赞数 3
分类专栏： 前端面试 文章标签： html css 面试
于 2021-04-02 10:20:20 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/better_xing/article/details/115392444
版权

HTML+CSS

文章目录

1.页面引入样式 使用link和@import的区别?

-html使用link标签引入样式，而css使用@import引入样式。

  • 页面被加载时，link会同时被加载，而@import引用的样式会等到页面加载结束后加载。一个页面被加载时加载 一个页面加载后加载
  • link是html标签，因此没有兼容性，而@import只有IE5以上才能识别。一个没有兼容 一个有兼容
  • link方式样式的权重高于@import的。

2.简述一下你对HTML5语义化的理解

（1） 用正确的标签做正确的事情。
（2）让页面的内容结构化，便于对浏览器解析;
（3） 在没有样式 CSS 情况下也以一种文档格式显示，容易阅读;
（4） 有利于 SEO ;(搜索引擎优化)

3.块级元素、行内元素、行内块级元素的区别

块级元素（display：block）：div 、p、h1~h6、br、ul、ol、li、form、table、header、footer、main、nav、sector、arcitcle、

行内元素（display：inline）：a、span、small、strong、em、i、code、

行内块元素（display：inline-block）：img、input

区别：

  • 块级元素:元素独占一行,宽高内外边距皆可设置

  • 行内元素:相邻行内元素在一行上,一行多个;宽高直接设置无效,

  • 行内块元素:相邻行内块元素在一行上,一行多个.宽高内外边距皆可设置

  • 块级元素可以包含行内元素和块级元素，还可以容纳内联元素和其他元素；行内元素不能包含块级元素，只能容纳文本或者其他行内元素。

4.盒子水平垂直居中

记住后面两种

 //方案一:宽高确定,设置盒子外边距
//对于宽高确定,块级元素margin:0 auto ,行内元素或行内块元素text-align:center实现元素水平居中,line-height=height实现文本垂直居中
   <style> 
       div {
      position: absolute;
      width: 200px;
      height: 100px;
      top: 50%;
      left: 50%;
      margin: -50px 0 0 -100px;//margin-left:-50px,盒子与父级元素距离-50px,让盒子向左移动自身宽度的一半
      background-color: pink;
    }
    </style>
<body>
  <div>前端加油</div>
</body>

//方案二:宽高不确定,display:flex 
  <style> 
      body {
      /* body缺少高度，100%的高度是不起作用的，最好使用100vh来设置，这样就可以解决这个问题了 vh基于视窗的高度计算,1vh等于视窗高度的百分之一 */
      height: 100vh;
      /*父元素设置flex属性*/
      display: flex;
      /*水平主轴居中*/
      justify-content: center;
      /*垂直交叉轴居中*/
      align-items: center;
    }
    div {
      background: pink;
    }
    </style>
<body>
  <div>前端加油</div>
</body>


//方案三:宽高不确定,利用transform属性
  <style> 
       div {
   position: absolute;
      top: 50%;
      left: 50%;
      /* 没有宽高,里面的内容自动撑开盒子  */
      transform: translate(-50%, -50%);
      background-color: pink;
    }
    </style>
<body>
  <div>前端加油</div>
</body>

5.三栏式布局

不知道中间内容区域有多高的，但又想让该区域的高度恰好能放下中间内容区域，这个时候我们可以使用min-height

圣杯布局

圣杯布局(左耳、右耳、中间部分三者一体)

要求:三栏布局;中间宽度自适应,两边内容定宽。

好处：重要的内容放在文档流前面可以优先渲染

方法1：flex布局  优先记住
<!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>flex实现圣杯布局</title>
    <style>
      .container {
        width: 100%;
        display: flex; /* 父容器设置flex布局 */
      }
      .middle,
      .left,
      .right {
        min-height: 150px;
      }
      .middle {
        background-color: red;
        flex: 1; /* 占据全部剩余空间 */
      }
      .left {
        background-color: green;
        width: 200px;
      }
      .right {
        background-color: blue;
        width: 200px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <!-- 中间栏优先渲染 -->
      <div class="left">左边栏</div>
      <div class="middle">中间栏</div>
      <div class="right">右边栏</div>
    </div>
  </body>
</html>

在这里插入图片描述

方法2:
原理：利用相对定位、浮动、负边距布局，而不添加额外标签
中间列的宽度设为100%是为了让它和container的宽度保持一致。我们看到宽度设为100%，使得这种布局集中到了一块。
由于中间列占据了所有可用空间，左右两列只得在它下面。
float元素会依次一行自动排开，宽度不够时就会换行，而container占据了所有内容，left和right就会换行，同理 当margin-left 为父元素的-100%时 行数不够，就会上移动一行
  <style> 
  .container {
      height: 100%;
      padding: 0 200px;
    }
    .left,
    .right {
      width: 200px;
      min-height: 200px;
      background-color: blue;
    }
    .right {
      background-color: red;
    }
    .center {
      /* 父盒子container的宽度 */
      width: 100%;
      min-height: 400px;
      background-color: pink;
    }
    .left,
    .center,
    .right {
      float: left;
    }
    .left {
      /* margin-left设置百分比是相对于父元素宽度的，这个宽度是不包括padding在内的*/
      margin-left: -100%;
      /* 相对于自己的位置移动 */
      position: relative;
      left: -200px;
    }
    .right {
      margin-right: -200px;
    }
  </style>
<body>
   <div class="container">
    <div class="center"></div>
    <div class="left"></div>
    <div class="right"></div>
   </div>
</body>

在这里插入图片描述
在这里插入图片描述

双飞翼布局

双飞翼布局（一个人+两翅膀），是圣杯布局的一种改良

原理：主体元素上设置左右边距，预留两翼位置。

方法1: flex布局
 <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

    <style>
      .container {
        display: flex;
          //最左最右靠边，中间间距相等
        justify-content: space-between;
        width: 100%;
      }
      .left .center .right {
        min-height: 200px;
      }
      .left {
      //flex的三个参数
      //flex-grow为0 :存在剩余空间也不放大 flex-shrink为0:空间不足该项目不缩小  flex-basis为200px:项目为200px
        flex: 0 0 200px;
        background-color: blue;
      }
      .center {
        flex: 1;
        background-color: red;
      }
      .right {
        flex: 0 0 200px;
        background-color: green;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="left">左</div>
      <div class="center">中</div>
      <div class="right">右</div>
    </div>
  </body>
</html>


方法2:左右两栏使用浮动和负边距归位置

  <style> 
    .left,
    .container,
    .right {
      float: left;
    }
    .container {
      width: 100%;
    }
    .container .center {
      margin: 0 200px;
      min-height: 400px;
      background-color: pink;
    }
    .left,
    .right {
      width: 200px;
      min-height: 200px;
      background-color: blue;
    }
    .right {
      background-color: red;
    }
    .left {
      margin-left: -100%;
    }
    .right {
      margin-left: -200px;
    }
  </style>
<body>
  <div class="container">
    <div class="center"></div>
  </div>
  <div class="left"></div>
  <div class="right"></div>
</body>

方法3:定位
  <style> 
    .container {
      position: relative;
      height: 100%;
    }
    .center {
      margin: 0 200px;
      min-height: 400px;
      background-color: pink;
    }
    .left,
    .right {
      position: absolute;
      top: 0;
      width: 200px;
      min-height: 200px;
      background-color: blue;
    }
    .left {
      left: 0;
    }
    .right {
      right: 0;
    }
   </style>
<body>
   <div class="container">
    <div class="left"></div>
    <div class="center"></div>
    <div class="right"></div>
   </div>
</body>
品字布局
	<div class="box">
			<div class="div1">1</div>
		</div>
		<div class="box1">
			<div class="div2">2</div>
			<div class="div3">3</div>
		</div>
	</head>
	<body>
		<style>
			.box {
				width: 600px;
				height: 200x;
				display: flex;
				justify-content: center;
				align-items: center;
			}
			.box1 {
				width: 600px;
				height: 200px;
				display: flex;
				justify-content: center;
				align-items: center;
			}
			.div1,
			.div2,
			.div3 {
				width: 300px;
				height: 200px;
				background-color: red;
			}
			.div2 {
				background-color: blue;
			}
			.div3 {
				background-color: green;
			}
		</style>
两栏布局
<div class="wrap">
	<div class="left">left</div>
	<div class="right">right</div>
</div>
		body,
		div {
			padding: 0;
			margin: 0;
		}
		.wrap {
			display: flex;
		}
		.left,
		.right {
			height: 200px;
		}
		.left {
			width: 200px;
			background-color: skyblue;
		}
		.right {
			flex: 1;
			background-color: greenyellow;
		}
瀑布流布局 
	<title>Document</title>
	<div class="masonry">
		<div class="column">
			<div class="item">
				<div class="item__content"></div>
			</div>
			<div class="item">
				<div class="item__content"></div>
			</div>
		</div>
		<div class="column">
			<div class="item">
				<div class="item__content"></div>
			</div>
		</div>
		<div class="column">
			<div class="item">
				<div class="item__content"></div>
			</div>
			<div class="item">
				<div class="item__content"></div>
			</div>
			<div class="item">
				<div class="item__content"></div>
			</div>
		</div>
	</div>
</head>
<body>
	<style>
		.masonry {
		    display: flex;
		    flex-direction: row;
		}
		.column {
		    display: flex;
		    flex-direction: column;
		    width: calc(100%/3);
		}
	</style>
实现三角形
	.triangle {
		width: 0;
		height: 0;
		/* border : border-width border-style  border-color */
		/* solid实线边框  transparent边框颜色透明*/
		border: 50px solid transparent;
		/* 向上三角形*/
		border-bottom-color: pink;
		/* 向下三角形		border-top-color: pink;*/
	}

在这里插入图片描述

6.Flex布局

Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。

原理:通过给父盒子添加flex属性，来控制子盒子的位置和排列方式

以下6个属性设置在父容器上：

  • flex-direction设置主轴的方向容器

    • 默认存在两根轴：水平方向的主轴（main axis）和垂直方向的交叉轴（cross axis）
    • 默认主轴方向就是x轴方向，水平向右,默认侧轴方向就是y轴方向，水平向下
    • flex-direction: row(从左到右) | row-reverse(从右到左) | column(从上到下) | column-reverse(从下到上);

  • flex-wrap设置子元素是否换行

    nowrap(默认值,不换行)

    wrap(换行，第一行在上方)

    wrap-reverse：换行，第一行在下方

  • flex-flow复合属性，相当于同时设置了flex-direction和flex-wrap

  • justify-content设置主轴上的子元素排列方式

    • flex-start(从头部开始如果主轴是x轴，则从左到右)
    • flex-end(从尾部开始排列)
    • center（如果主轴是x轴则水平居中)
    • space-between(最左最右靠边，中间间距相等)
    • space-around(每个项目的左右撑开距离相等)

  • align-items设置侧轴上的子元素排列方式（单行）

    • flex-start(默认值从上到下)
    • flex-end(从下到上)
    • center (垂直居中)
    • streth(拉伸)

  • align-content设置侧轴上的子元素的排列方式（多行）

    • flex-start(默认值在侧轴的头部开始排列)
    • flex-end(在侧轴的尾部开始排列)
    • center(在侧轴中间显示)
    • space-between(子项在侧轴先分布在两头，再平分剩余空间)
    • space-around(子项平分剩余空间)
    • stretch(设置子项元素高度平分父元素高度);

    img

以下6个属性设置在子项目上：

  • order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。

  • flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。

  • flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。

  • flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。

  • flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto , 后两个属性可选。

    子项目分配剩余空间，用flex来表示占多少份数，默认为0, 表示子项不占份数。flex ：1 即为 flex-grow ：1 flex-shrink：1 flex-basis:0% 。flex-basis:0%意味着在分配剩余空间前，该项的起始尺寸是其内容大小的0%，通常可以理解为它的起始大小为0。

  • align-self控制子项自己在侧轴的排列方式,允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch

7.CSS优先级计算

  • !importent: 无穷
  • 行内样式：1000
  • id选择器： 100
  • 类/属性/伪类选择器：10
  • 标签/伪元素选择器：1
    属性选择器 a[href]

元素选择器：选择指定类型的元素。
示例：p 选择所有 <p> 标签。

类选择器：选择具有指定类名的元素。
示例：.my-class 选择所有具有 my-class 类的元素。

ID 选择器：选择具有指定 ID 的元素。
示例：#my-id 选择具有 my-id ID 的元素。

后代选择器：选择指定元素的后代元素。
示例：div p 选择所有 <div> 元素内的 <p> 元素。

子选择器：选择指定元素的直接子元素。子选择器只会选择父元素的直接子元素，不会选择更深层级的后代元素
示例：ul > li 选择所有 <ul> 元素下的直接子级<li>元素。

相邻兄弟选择器：选择与指定元素同级且紧接在其后的元素。
示例：h1 + p 选择紧跟在 <h1> 元素后的<p>元素。

伪类选择器：选择具有特定状态或位置的元素。
示例：:hover 选择鼠标悬停在上面的元素。
伪类选择器:
链接伪类选择器用于链接的伪类选择器。a的伪类标签有🅰️link、a:visited、a:hover、a:active，a:link未访问的链接，a:visited已访问的链接 ，a:hover鼠标移动到链接上，a:active选定的链接（当我们点击别松开鼠标，显示的状态）
结构伪类选择器：根据文档结构来选择。
li:first-child：第一个li。
li:last-child：最后一个li。
li:nth-child(n):n代表的就是第几个li，n=4的话就是第四个li
li:nth-child(odd)：排在奇数的li。
li:nth-child(even)：排在偶数的li。

伪元素选择器:
p:before 在每个<p>元素的内部之前插入内容。
p:after 在每个<p>元素内部之后插入内容。

伪类和伪元素的区别是 伪元素创造了新的元素，伪类向某些选择器添加特殊的效果

8.盒模型

盒模型有两种,IE怪异盒模型和标准盒模型；

盒模型是由 内容(content)、内边距(padding)、边框(border)、外边距(margin) 组成的。

标准盒模型的宽高是指的 content 区宽高；
IE怪异盒模型的宽高是指的 content+padding+border 的宽高。

在这里插入图片描述
在这里插入图片描述

设置盒模型

标准盒模型：box-sizing: content-box;

怪异盒模型：box-sizing: border-box;

9.BFC

BFC译为块级格式化上下文，最大的作用是：在页面上有一个独立隔离容器。容器内的元素和容器外的元素布局不会相互影响

产生条件：float不为none(取消浮动)；position为fixed和absolute；display为inline-block，flex；overflow不为visible (overflow规定当内容溢出元素框时发生的事情。visible内容不会被修剪，会呈现在元素框之外)

作用:
1.解决上外边距重叠，重叠的两个盒子都开启BFC;
2.解决浮动引起高度塌陷；容器盒子开启BFC；
3.解决文字环绕图片；将文字容器开启BFC

10.margin重叠

使用margin定义块元素的垂直外边距时，可能会出现外边距的合并。

主要有两种情况：1.相邻块元素垂直外边距的合并 2.嵌套块元素垂直外边距的塌陷

相邻块元素垂直外边距的合并
在这里插入图片描述

当上下相邻的两个块元素（兄弟关系）相遇时，如果上面的元素有下外边距margin-bottom，下面的元素有上外边距margin-top，则他们之间的垂直间距不是margin-bottom与margin-top之和。取两个值中的较大者这种现象被称为相邻块元素垂直外边距的合井。

解决方案：尽量只给一个盒子添加margin值。

嵌套块元素垂直外边距的塌陷

在这里插入图片描述

对于两个嵌套关系（父子关系）的块元素，父元素有上外边距同时子元素也有上外边距，此时父元素会塌陷较大的外边距值。

  • 父元素没有border以及padding-top，则父元素的margin-top会和子元素的margin-top重叠
  • 解决办法：给父元素设置border或者padding-top；给父元素添加overflow:hidden

11.HTML5和CSS3有哪些新特性

HTML5新增有：

  • 语义化更好的内容元素，比如 article、footer、header、nav、section;
  • 音频视频 audio video 元素;
  • 本地存储 localStorage sessionStorage
  • 动画 canvas;
  • Web Workers 多线程解决方案
    CSS3新增有:
  • 媒体查询（可以查询设备的物理像素然后进行自适应操作）
  • 2D、3D转换
  • 新增选择器 属性 伪元素 结构伪类
  • 动画animition transition过渡，transform转换 包括 translate 移动,scale缩放,rotate旋转
  • 怪异盒子模型 box-sizing: border-box;t 盒子阴影 box-shadow
  • 新增边框属性 如border-radius：圆角

12.清除浮动的几种方式

清除浮动的本质是清除浮动元素脱离标准流造成的影响

清除方法：

方法一:利用BFC给父级添加overflow:hidden

    .fahter{
        width: 400px;
        border: 1px solid deeppink;
        overflow: hidden;
    }

方法二:使用伪元素清除浮动

<div class="container clearfix">
    <div class="wrap">aaa</div>
</div>
.clearfix:after{
    clear:both;				/*清除浮动*/
    content:"";				/*设置内容为空*/
    height:0;				/*高度为0*/
    display:block;			/*将文本转为块级元素*/
    visibility:hidden;		/*将元素隐藏*/
}
.clearfix{
    zoom:1;					/*为了兼容IE*/
}

13.script标签中defer和async都表示了什么?

script标签会阻塞页面的加载 若引用外部js，可能出现空白页问题，defer和async属性解决这个问题

defer：脚本延迟属性，直到HTML文档已经全部被解析之后再执行

<script src="d.js" defer></script>

async：异步加载属性，表示立即下载脚本，但不妨碍页面的其他操作

<script src="b.js" async></script>

14.doctype标签和meta标签

  • <!DOCTYPE > 文档类型声明标签

  • <!DOCTYPE html>
    告诉浏览器使用哪种HTML版本来显示网页(这个是html5)

  • meta

    <meta>元素可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。

    <meta>标签位于文档的头部，不包含任何内容。

    <meta>标签的属性定义了与文档相关联的名称/值对。

    <meta>提供的信息是用户不可见的

15.display: none, visibility: hidden, opacity: 0 的区别

可以使得用户看不见页面上的元素
display:none，隐藏之后不会占位置，不会被子元素继承，不会触发绑定的事件
visibility:hidden 隐藏后会占据位置 会被子元素继承 不会触发绑定的事件
opacity:0，隐藏后会占据位置 会被子元素继承 会触发绑定的事件
是否占据空间

display:none，隐藏之后不占位置；visibility:hidden、opacity:0，隐藏后任然占据位置。

子元素是否继承

display:none—不会被子元素继承，父元素都不存在了，子元素也不会显示出。

visibility:hidden—会被子元素继承，通过设置子元素visibility:visible来显示子元素。

opacity:0—会被子元素继承，但是不能设置子元素opacity:0来重新显示。

事件绑定

display:none 的元素都已经不再页面存在了，因此无法触发它绑定的事件。

visibility:hidden 不会触发它上面绑定的事件。

opacity: 0元素上面绑定的事件是可以触发的。

16. 自适应布局和响应式布局

标准流：是标签按照规定好默认方式排列
网页布局 :标准文档流(padding + margin + 负margin+ 浮动float + 定位 ) flex布局 媒体查询+rem适配布局 响应式布局
自适应布局:使网页自适应的显示在不同大小终端设备上,它需要开发多套界面来适应不同的终端

响应式布局:使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同设备的目的。

17.CSS选择器分类

  • 标签选择
  • id 选择器 : #ID
  • 类 选择器: .class
  • 伪类选择器: a:hover
  • 通配符选择 : *
  • 后代选择 （div a）
  • 子代选择 （div > p）
  • 相邻选择 （div + p）
  • 属性选择器
  • 伪元素选择器 ::before{}（现在很多都是：）

18.请说明px,em,rem,vw,vh等单位的特性,rem 和em 的区别

  • px:像素
  • em:页面转换为像素大小取决于父元素的字体大小
  • rem:页面转换为像素大小取决于根元素的字体大小
补充内容
- vw:视窗宽度的百分比（1vw 代表视窗的宽度为 1%）100vw是总宽度
- vh:视窗高度的百分比,100vh是总高度

rem是根据根元素的font-size变化，而em是根据父级的font-size变化

rem：相对于根元素html的font-size，假如html为font-size：12px，那么，在其当中的div设置为font-size：2rem,就是当中的div为24px

em：相对于父元素计算，假如某个p元素为font-size:12px,在它内部有个span标签，设置font-size：2em,那么，这时候的span字体大小为：12*2=24px

19.前端动画怎么做?

  • animation动画
  • transition过渡动画

​ 控制过渡的时间,使用过渡的属性/效果曲线/延时,要求元素的状态必须有变化

  • JS原生DOM位置
  • canvas动画

20.position定位属性和相关的关系

1、static（静态定位）：默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。

2、fixed（固定定位）：生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。可通过z-index进行层次分级。

3、relative（相对定位）：相对于元素在文档中的初始位置定位，通过top,bottom,left,right的设置相对于其正常（原先本身）位置进行定位。可通过z-index进行层次分级。

4、absolute（绝对定位）：相对于元素最近的已定位的祖先元素定位 脱离标准流
，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。可通过z-index进行层次分级。
5.position: sticky; 粘性定位 基于用户的滚动位置来定位。用来实现吸顶效果

position: absolute
绝对定位：是相对于元素最近的已定位的祖先元素

position: relative
相对定位：相对于元素在文档中的初始位置

21.sass预处理器

Sass就是css的预处理器，Scss是Sass3版本中引入的新语法特性
使用$符号去声明一个变量,不存在全局变量的概念
变量镶嵌在字符串,需要写在#{}之中
@import引入外部文件
如果需要导入 SCSS 文件，但又不希望将其编译为 CSS，只需要在文件名前添加下划线，这样会告诉 Sass 不要编译这些文件，但导入语句中却不需要添加下划线。
sass和less的区别

定义变量的符号不同，sass使用$，less是用@，
变量的作用域不同，sass只作用于全局，less定义在哪里就作用在哪里

22.多行元素的文本省略号

文字一行显示

.t-ellipsis {
  overflow: hidden;
  //文本不换行
  white-space: nowrap;
  text-overflow: ellipsis;
}

文字两行显示

.t-ellipsis-2 {
overflow : hidden;
text-overflow: ellipsis;
line-clamp: 2;
display: box;
box-orient: vertical
}

23.css三大特性

层叠性、继承性、优先级
层叠性:同一选择器给设置相同的样式，此时一个样式就会覆盖（层叠）另一个冲突的样式
样式冲突，遵循的原则是就近原则，哪个样式离结构近，就执行哪个样式样式不冲突，不会层叠
继承性 :子标签会继承父标签的某些样式，如文本颜色和字号。
可以继承的：font-size color
不能继承的：border padding margin width height
优先级:当同一个元素指定多个选择器，就会有优先级的产生。
选择器相同，则执行层叠性 选择器不同，则根据选择器权重执行

24.CSS Modules

CSS Modules解决了命名冲突和全局样式污染问题
局部作用域：CSS的规则都是全局的，任何一个组件的样式规则，都对整个页面有效。产生局部作用域的唯一方法，就是使用一个独一无二的class的名字，不会与其他选择器重名。这就是 CSS Modules 的做法。
全局规则：CSS Modules 允许使用:global(.className)的语法，声明一个全局规则。

import React from 'react';
import style from './App.css';

export default () => {
  return (
    <h1 className={style.title}>
      Hello World
    </h1>
  );
};

// App.css
.title {
  color: red;
}

构建工具会将类名style.title编译成一个哈希字符串。
<h1 class="_3zyde4l1yATCOkgn-DBWEL">
  Hello World
</h1>

App.css也会同时被编译。
._3zyde4l1yATCOkgn-DBWEL {
  color: red;
}
前端More
关注
专栏目录
HTML + CSS 面试题
sssnanPl的博客
05-06 188
HTML 如何理解HTML语义化？ HTML语义化就是让HTML元素有自己的含义，作用： 增加代码可读性，让人更容易读懂。 有利于SEO，提高权重。 在没有CSS样式时，页面能呈现出更好地内容结构。 script 标签 defer 和 async 的区别 script：会阻碍HTML解析，只有发送请求获取JS代码并执行完脚本才会解析HTML。 script async：解析 HTML 过程中进行JS代码脚本的异步获取，完成之后立马执行，有可能会阻断 HTML 的解析。 script defer：完全不会
HTML5 + CSS3 高频面试题合集
蜗牛的博客
11-22 1557
html5 css3 高频面试题合集❗ ❗ ❗
html、CSS面试题（高频）
蒋宗正的博客
01-23 541
前言 写在前面，这里采用题目和答案分开的方式，方便测验自己对题目的 HTML 题目 1有哪些浏览器，内核分别是什么？ 2quirks模式是什么？和standards模式有什么区别 3盒模型和怪异盒模型 4 答案 IE浏览器 trident 火狐浏览器 gecko 谷歌浏览器 blink Safari浏览器 webkit ...
HTML&&css面试题
weixin_30613433的博客
11-27 324
HTML&css相关问题 1.XHTML和HTML有什么区别 HTML是一种基本的WEB网页设计语言，XHTML是一个基于XMl的置标语言 最主要的不同 XHTML元素必须被正确地嵌套。 XHTML元素必须被关闭 标签名必须用小写字母 XHTMl文档必须拥有根元素 2.什么是语义化的HTML？ 直观的认识标签对于搜索引擎的抓取有好处，用正确的标签做正确的事情！ HTML语义化就是让页...
前端（HTML+CSS）高频面试题（1）
qq_41038412的博客
12-08 220
前端（HTML+CSS）入门高频面试题 HTML： 1.简述<!doctype>的作用？ 答： 帮助浏览器正确地显示网页 <!DOCTYPE>声明叫做文件类型定义(DTD)，声明的作用是为了告诉浏览器该文件的类型。让浏览器解析知道应该用哪个规范来解析文档。 <!DOCTYPE>声明必须在HTML文档的第一行，这并不是一个HTML标签。 2.常见的浏览器及其内核？ 答： pc端： chrome(谷歌) firebox(火狐) opero(欧朋) IE(微软)
HTML&&CSS高频面试题
weixin_43715578的博客
07-28 159
flex-basis是用来初始化子盒子的宽度的，设置子盒子的基准宽度，当它与width属性共同存在时，width属性不生效。flex-grow是用来增大盒子的，当父盒子的宽度大于子盒子的宽度时，父盒子的剩余空间可以通过该属性设置子盒子增大的占比。​区别标准盒模型的盒子实际大小为盒子的width，height加上padding，margin和border。flex-shrik是用来缩小盒子的，当子盒子的宽度大于父盒子的宽度，使用该属性可以设置子盒子缩小的比例。绝对单位，页面按精确像素展示。...
HTML+CSS+CSS3高频面试题_88题.pdf_前端面试题
09-01
【HTML+CSS+CSS3高频面试题_88题.pdf_前端面试题】这份文档主要涵盖了HTML、CSS和CSS3的常见面试问题，涉及到前端开发的基础知识和最新特性。以下是根据文档部分内容提炼出的关键知识点： 1. **HTML `<img>` 标签的...
新版前端高频面试题笔记+课件+源码（HTML+CSS+JavaScript）
最新发布
04-24
本视频主打内容最全最新，包括大前端基础与高频面试题，打造一站式知识长龙 服务，适合有前端基础的同学学习。 课程需知： 课程面向的同学是：有前端基础的同学。 课程内容： —.HTML5面试题 1.如何理解HTML5结构...
HTML+CSS面试题总结（附答案+视频讲解）
xm1037782843的博客
06-25 2766
前端面试题总结 面试题总结 html+css面试题 元素隐藏、盒子垂直居中
前端CSS高频面试题附答案（2023）
weixin_43558117的博客
05-05 398
前端高频面试题及答案CSS篇（2023）
HTML CSS面试题
ghj13513114242的博客
08-04 222
绝对定位就是元素相对于第一个非静态定位（static）的父级元素进行定位，如果找不到符合条件的父级元素则会相对与浏览器窗口来进行定位。static 是 position 属性的默认值，表示没有定位，使用静态定位的元素会按照元素正常的位置显示，并且不会受到 top、bottom、left、right 和 z-index 属性的影响。固定定位就是将元素相对于浏览器窗口进行定位，使用固定定位的元素不会因为浏览器窗口的滚动而移动，就像是固定在了页面上一样，我们经常在网页上看到的返回顶部按钮就是使用固定定位实现的。.
前端高频面试题 CSS篇
weixin_34391445的博客
06-14 175
通过从网上看到的面经，总结的一些高频的前端CSS面试题，有很多不会，于是找资料，并通过代码实现，自己提供了一些参考答案。 目录 1.怎样会产生浮动？ 2.如何清除浮动？ 3.盒子模型，以及IE和其他浏览器的却别？ 4.CSS3新特性有哪些？ 5.em 和 rem 的区别？ 6.重排和重绘？ 7.行元素和块...
03.HTML && CSS
weixin_51911435的博客
07-13 205
html&css
HTML+CSS 面试题
温情
07-03 237
1. 讲讲重排和重绘 重排(回流) 当dom的变化影响了元素的几何信息(元素的位置和尺寸大小)，浏览器需要重新计算元素的几何信息，将元素渲染到正确的位置，简单来说就是重新排列元素，这就是重排, 也叫作回流。 每个页面至少进行一次回流，就是在页面第一次加载的时候 触发重排的操作 元素位置改变 改变窗口大小 改变字体大小 添加/删除 dom元素 计算 offsetWidth 和 offsetHeight margin border 的改变 重绘 当元素的外观发生改变，但没有影响到页面的布局，重新把元素
HTML+CSS面试题
qq_44886882的博客
07-18 761
HTML+CSS面试题总结
html＋css面试题
fdsal的博客
04-28 532
HTML部分 1、你做的页面在哪里浏览器测试过吗？这些浏览器的内核分别是什么？ IE：trident内核 Firefox：gecko内核 Safari：webkit内核 Opera：以前是presto内核，Opera现已改用GoogleChrome的Blink内核。 Chrome：Blink（基于webkit，Google与OperaSoftware共同开发） ２、行内元素、块元素和行内块元素都有什么？区别是什么？ HTML可以将元素分类方式分为行内元素、块状元素和行内块状元素三种。三者可以互相转换，使用d
html+css面试题
高山景行，一尘不染
11-25 493
1、请写出至少5个HTML块元素标签 div p ul li table h1 h2 h3 ... h6 form 等 2、请写出至少5个HTML行内元素标签 span a i label img input button textarea select 等 3、请写出table标签下面会包含哪些标签元素 tr th td thead tbody ...
css高频面试题
一个前端开发者
08-22 518
1.1-flex 1.2-flex+margin 1.3-定位+transform 1.4-定位+margin 02-盒模型 盒模型主要分为4部分：内容、外边距、内边距Css3盒子模型可以通过box-sizing来改变默认就是content-box，也就是默认标准盒模型，标准盒模型width设置了内容的宽，所以盒子实际宽度加上padding和border 以上示例代码盒子最终宽高就是：140 * 140通过设置box-sizing: border-box;盒模型为ie盒模型，也称怪异盒模型，设置wi
css面试题整理 简书
lms1231的博客
07-11 410
1.display:none与visibility：hidden的区别？ display：none不显示对应的元素，在文档布局中不再分配空间（回流+重绘） visibility：hidden隐藏对应元素，在文档布局中仍保留原来的空间（重绘） 2.position跟display、overflow、float这些特性相互叠加后会怎么样？ display属性规定元素应该生成的框的类型；position属性规定元素的定位类型；float属性是一种布局方式，定义元素在哪个方向浮动。 类似于优先级...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值