html和css面试题

Js_WEB

已于 2022-12-14 21:41:13 修改

阅读量167

点赞数

文章标签：面试 java 程序人生

于 2022-12-03 10:05:13 首次发布

本文链接：https://blog.csdn.net/String111111Name/article/details/126843529

版权

块级元素：

1. 独占一行（一行只能显示一个）

2. 宽度默认是父元素的宽度，高度默认由内容撑开

3. 可以设置宽高

代表的元素：div、p、h系列、ul、li、dl、dt、dd、form、header、nav、footer……

行内元素：

1. 一行可以显示多个

2. 宽度和高度默认由内容撑开

3. 不可以设置宽高

代表标签：a、span 、b、u、i、s、strong、ins、em、del……

行内块元素：

1. 一行可以显示多个

2. 可以设置宽高

代表标签：input、textarea、button、select……

特殊情况：img标签有行内块元素特点，但是Chrome调试工具中显示结果是inline

css优先级

css盒子模型

css定位

浮动与清楚浮动（解决塌陷问题）

float：left 表示就是左浮动，就是在父元素的上一层

浮动产生的问题：

父元素的高度塌陷，还会对后续元素也造成塌陷问题：

解决塌陷问题方法：

1.给父元素添加高度属性，只有解决父级同级元素塌陷，无法解决子集元素塌陷，这时可以使用第二种方式

2.给受影响的元素添加cleat：both 意识是无论是左浮动还是右浮动都可以清楚。

3.在父元素无法设置高度情况下，可以使overflow：hidden；和clear：both 同时在父元素中使用就解决塌陷，但是如果子集元素还存在塌陷问题，就在塌陷的元素上加clear：block就行。

绝对定位与相对定位还有固定定位

position：absolute；绝对定位（脱离文档流）

position：relative；相对定位（不脱离文档流）

position：fixed; 固定定位，不会随着页面的滚动而滚动（脱离文档流）

z-indax：50 数值谁的数值大谁就可以覆盖调比他小的值。

动画效果

动画是使元素从一个变成另一个效果的过程。

0%表示动画开始，100%表示动画结束，或者使用关键字from和to

px,em,rem,vw,vh的区

怎么理解语义化？

div水平垂直居中？

父div设置：display: flex; 子组件： margin: auto;

一个div水平垂直居中

绝对定位方法：

.box {
  postion: absolute;
  top: 50%;
  left:50%;
  width: 50px;
  height: 50px;
  transform: translate(-50%, -50%);
}
<body>
<div class="box"><div>
</body>

flex方法：

body {
    display: flex;
    justify-content: center;
    align-items: center;
}
.box {
  width: 50px;
  height: 50px;
}

<body>
<div class="box"><div>
</body>

绝对定位方法：

.z {
			width: 450px;
			height: 300px;
			background-color: rgb(153, 63, 63);
			/* 圆角效果 */
			border-radius: 30px;
			position: absolute;
			left: 0;
			top: 0;
			right: 0;
			bottom: 0;
			margin: auto;
		}
<div class="z"></div>

padding与margin有什么区别？

padding作用域自身，而margin作用域外部

VW与百分比区别？

百分比有继承关系，VW只和设备分辨率有关系。

如何让Google支持小字体？

考查的是支持比12px更小的字体

<style>
  p {
    font-size: 12px;
  }

  .font {
    transform: scale(0.8);
    -webkit-transform: scale(0.8);
  }
</style>

<body>
  <p class="normal">我是12px的文字</p>
  <p class="font">我是比12px更小的文字</p>

</body>