前端面试-CSS

爱困的猫cat
134 阅读2分钟

1 盒子居中对齐

水平居中对齐：div{margin:0 auto;}

上下左右居中对齐： 前提是html,body的width和height都为100%

  body{display: flex;}
  div{margin: auto;}

完整代码

<!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>
  </head>
  <body>
    <div></div>
  </body>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    html,
    body {
      width: 100%;
      height: 100%;
    }
    body {
      display: flex;
    }
    div {
      margin: auto;
      width: 200px;
      height: 200px;
      background-color: red;
    }
  </style>
</html>

    ps:文字居中对齐 
    line-height: 200px;//行高与盒子高度一致
    text-align: center;

2 padding和margin有什么不同？

    作用对象不同，padding内边距，是作用于自身的，
    margin外边距，作用于外部对象

3 vw和百分比有什么不同？

    百分比有继承关系，继承父级；
    vw只和设备的宽度有关系（vw:1vw 等于视口宽度的1%）

例子： 当父盒子的宽为100%时，vw和百分比都为50时是相同长度的 image.png 当父盒子宽为50%时，vw基于设备宽，仍为屏幕的一半。而百分比基于父元素，为父元素的50%，父元素宽为屏幕的50%，则此使为屏幕的25%

image.png

<!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>
 </head>
 <style>
   * {
     padding: 0;
     margin: 0;
   }
   .parent {
     /*width: 100%;*/
     width: 50%;
     height: 100px;
     /* background-color: rgb(196, 86, 86); */
   }
   .child1 {
     width: 50%;
     height: 50px;
     background-color: rgb(214, 179, 179);
   }
   .child2 {
     width: 50vw;
     height: 50px;
     background-color: rgb(179, 191, 214);
   }
 </style>
 <body>
   <div class="parent">
     <div class="child1"></div>
     <div class="child2"></div>
   </div>
 </body>
</html>

4 行内与块级元素

行内元素

不换行，设置长宽无效，大小由内容决定，一行可以有多个
对margin仅设置左右方向有效，上下无效；padding设置上下左右都有效，即会撑大空间

<b>标签规定粗体文本
<a>标签可以是超链接或锚
<img>标签创建的是被引用图像的占位空间
<span>
<button>按钮
<input>一个简单的 HTML 表单,包含两个文本输入框和一个提交按钮
<label>标签为 input 元素定义标注
<select>select 元素是一种表单控件，可用于在表单中接受用户输入,

块级元素

独占一行，可设置长宽
margin和padding的上下左右均对其有效

<div>文档分区
<form>表单
<h1>, <h2>,<h3>, <h4>, <h5>, <h6>标题级别 1-6
<ol>有序列表
<p>行
<table>表格
<ul>无序列表
<video> HTML5视频。

image.png

<!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>
  </head>
  <style>
    .p1 {
      height: 50px;
      background-color: rgb(241, 100, 100);
    }
    span {
      height: 50px;
      background-color: rgb(77, 132, 101);
    }
  </style>
  <body>
    <div class="p">
      <div class="p1">块级元素</div>
    </div>
    <div>
      <span> 行内元素 </span>
    </div>
  </body>
</html>

5 如何让谷歌浏览器支持小字体

谷歌最小支持的字体为12px

使用缩放，缩放为原来的多少倍：transform:scale(0.5)

-webkit-transform: scale(0.5);

avatar
文章
阅读
粉丝