css面试题

vertical-align
默认情况下
图片在容器中没有紧紧沿着下边沿：
行内元素在容器内排列时要在基线上下排列（img为行内元素）
1.使基线位置位于盒子下边沿，将字体大小设为0
font-size：0；
2.将图片转为块元素
display：block;
3.使图片沿着文本的底线显示
vertical-align：bottom；

文本框与按钮无法对齐：
设置box-sizing：border-box；文本框默认内边距无法撑开盒子
1.给input元素设置属性vertical-align：top；使文本框和按钮对齐
2.给input元素设置浮动 float:left;

input标签和img标签底部未对齐:
（默认两个行内元素沿基线对齐）
给两个标签设置vertical-align：bottom； 底部对齐

文本框未与父元素顶部对齐：
给input元素设置vertical-align：top；紧贴父盒子顶部

元素居中排列

• 盒子在容器内垂直居中显示：

  1. 父元素padding, box-sizing:border-box
  2. 父元素padding + 子元素margin, box-sizing:border-box
     3）position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);

• 文本在盒子中垂直居中显示
  1）使行高等于容器高度 （单行文本，不适用于多行文本）
  height:100px;
  line-height:100px;
  2）给元素设置沿中线显示
  vertical-align：middle；
  3）给父元素添加伪元素，使伪元素沿中线显示
  div::after{
  content:" ";
  dispaly:inline-block;
  vertical-align:middle;
  }
  4）（未知高度）多行文本垂直居中设置上下的padding值一样即可

• 一个盒子在容器中水平居中显示

  1. margin: 0 auto; （给盒子本身添加，盒子有固定宽度）
  2. 定位 margin-left:50%; left:-50px; position:relative;
     3）position:absolute; left:50%; margin-left:-盒子宽度的一半；（子盒子宽度一定）
     4）position:absolute; left:50%; transform:translateX(-50%); (父盒子，子盒子宽度会变化）
     5）伸缩盒布局 display:flex; flex-direction:row; justify-content:center;

• 一个文本在块元素进行水平居中
  text-align:center；（给父元素添加）（同样适用于span，a ，input，image标签）

• 如何垂直居中一个浮动元素？
  1）已知元素的高宽
  #div1{
  background-color:#6699FF;
  width:200px;
  height:200px;
  position: absolute; //父元素需要相对定位
  top: 50%;
  left: 50%;
  margin-top:-100px ; //二分之一的 height，width
  margin-left: -100px;
  }

  2）未知元素的高宽
  #div1{
  width: 200px;
  height: 200px;
  background-color: #6699FF;
  margin:auto;
  position: absolute; //父元素需要相对定位
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  }

• 垂直居中一个img元素（用更简便的方法。）
  line-height=height；不能使图片垂直居中

  vertical-align:middle对表格起作用，那么可以用div来模拟成为table，让vertical-align:middle属性起作用；
  display:table和display:table-cell的使用方法，前者必须设置在父元素上，后者必须设置在子元素上

  #container (img标签的容器 ){
  display:table-cell;
  text-align:center;
  vertical-align:middle;
  }

背景法：

img{
    width: 400px;
    height: 300px;
    border: 1px dashed #ccc;
    background: url(wgs.jpg) no-repeat center center;
}

显示与隐藏：

• display:none; 和 visibility:didden的区别:
  display:none;隐藏元素但不占有元素原来的空间；
  visibility:didden隐藏元素但元素仍占有原空间。

• 使用CSS隐藏HTML元素的常用方法

  1. visibility: hidden；是许多人在隐藏某个HTML元素时的首选。如页面中图片不见了，但是也没占原来图片的位置留下了一片空白区域。这个属性只是简单的隐藏某个元素，但是元素占用的空间任然存在。
     设置visibility: visible可以使隐藏的元素变为可见。

  2. 设置opacity: 0； 可以使一个元素变得完全透明，从而制作出和visibility: hidden一样的效果。opacity和visibility相比，其优势在于它可以被transition和animate（可以设置过渡和动画效果逐渐变化）。
     通常可以使用opacity属性来制作元素的淡入淡出效果。
     设置opacity:1；可以使透明元素变得可见。
     设置opacity:0~1；可以使元素变得半透明。

  3. position: absolute；
     最古老和最标准的做法是设置元素的绝对定位来隐藏元素。这种技术使元素脱离文档流，处于普通文档之上，并给它设置一个很大的left负值定位，使元素定位在可见区域之外。float和margin都不能影响到position: absolute的元素，因此它们可以很好的被隐藏起来。
     在制作一些元素的直线动画时，使用这种技术是最好的方法。
     要使元素再次变得可见，可以增大left的值，使元素出现在屏幕上。

  4. display: none； 元素会变得不可见，并且不会再占用文档的空间。
     display: none在制作手风琴效果时十分有用。
     将元素设置为display: block或其它值可以使元素再次可见。

  5. transform: scale(0); 使用scale属性来减少元素的尺寸直到它消失，但是不可见元素还是会占据原有空间。

  6. filter: blur(0); CSS3属性，将一个元素的模糊度设置为0，从而使这个元素“消失”在页面中

透明度：

• rgba（）
  rgba() 函数使用红®、绿(G)、蓝(B)、透明度(A)的叠加来生成各式各样的颜色。
  红色（red）0 到 255 间的整数，代表颜色中的红色成分。。
  绿色（green）0 到 255 间的整数，代表颜色中的绿色成分。
  蓝色（blue）0 到 255 间的整数，代表颜色中的蓝色成分。
  透明度（alpha）取值 0~1 之间， 代表透明度(完全透明 ~ 完全不透明）。

• opacity
  opacity：value；从 0.0 （完全透明）到 1.0（完全不透明）
  opacity：inherit；应该从父元素继承 opacity 属性的值。

• rgba和opacity的区别：
  rgba()和opacity都能实现透明效果，但最大的不同是opacity作用于元素，以及元素内的所有内容的透明度；
  而rgba()只作用于元素的颜色或其背景色。（设置rgba透明的元素的子元素不会继承透明效果！）

长度单位：
长度的相对单位：
px: 长度单位，表示一个像素点
em: 相对长度单位，相对于当前元素的文字大小
rem: 相对长度单位，相对根元素（html）上声明的字体大小

响应式布局：
响应式布局是为了网页能够兼容不同的终端

• 如何实现响应式布局
  1）百分比布局：利用对属性设置百分比来适配不同屏幕，注意这里的百分比是相对于父元素； 能够设置的属性有width，、height、padding、margin，其他属性比如border、 font-size不能用百分比来设置的，由于没办法对font-size进行百分比设置，所以用的最多就是对图片和大块布局进行百分比设置。
  2）使用媒体查询 (CSS3@media 查询)：利用媒体查询设置不同分辨率下的css样式，来适配不同屏幕。
  媒体查询相对于百分比布局，可以对布局进行更细致的调整，但需要在每个分辨率下面都写一套css样式。
  该布局的话适用于简单的网页，可以使移动端和pc端使用一套网址。从而节约成本。
  @media 判断媒体类型（屏幕类型）

   @media screen and (min-width:900px) and (max-width:1200px) {
   /* 当屏幕满足上述条件，执行该代码块内部的css*/
   .container {
     background-color: pink;
   }
  

  }

  3）rem 响应式布局：
  rem：相对于根元素(即html元素)font-size（默认为16px）计算值的倍数。
  如 html的font-size为100px；那么2rem就为200px。
  通俗的来讲的话rem就是通过JavaScript来获取页面的宽度，从而动态的计算rem。这样就会使不同分辨率下展现出相同的效果。
  4）vw 响应式布局：
  vm，vh响应式布局通俗来讲就是有一点类似百分比布局 将页面的宽和高分别分为100份 1vm就是为宽度的百分之一，同理1vh及为高度的百分之一。手机端用的最多就是这个方法，能保持不同屏幕下元素显示效果一致。

http协议：
http协议是超文本传输协议，常用于BS架构中，为数据在网络串数字规定协议。
请求报文：包含请求行，请求头，请求体。浏览器会将前端请求封装成请求报文发送给后端。
响应报文：包含响应行，响应头，响应体。服务器接收到前端发来的请求，会将响应内容封装成一个响应报文，浏览器会对响应报文进行解析，进而显示出来。

http协议是超文本传输协议，是客户端和服务器端进行交互的时候需要遵守的网络协议。
http协议中有请求报文和响应报文，请求报文中有请求行，请求头和请求体，响应报文中有响应行，响应头和响应体。
如果在浏览器中是以get方式向服务器发起的http请求，则请求参数以查询字符串形式携带在url后。
如果在浏览器中是以post方式向服务器发起的http请求，则请求参数携带在请求体中。

简述从在浏览器打开一个网页到网页加载完毕中间发生了什么事情？
浏览器输入url地址-> 浏览器根据url封装为请求报文->请求报文发送到服务器端->服务器端对请求报文进行解析获取path,参数等信息->服务器端进行资源的查询->服务器端将前端需要的资源封装为响应报文-> 浏览器接收响应报文->浏览器进行解析

首先客户端浏览器发起http请求，然后服务器接收到请求，给出一个页面，浏览器接收到响应的html页面后，首先加载html页面，然后解析html代码，发现有外部css或者js引入后，开始加载外部css或者js，然后解析外部css或者js，最终将css与html代码绑定生成DOM树，然后渲染到浏览器中。

link和@import：
Link 属于 html 标签，而@import 是 CSS 中提供的 在页面加载的时候，link 会同时被加载，而@import 引用的 CSS 会在页面加载完成后才会加 载引用的 CSS @import 只有在 ie5 以上才可以被识别，而 link 是 html 标签，不存在浏览器兼容性问题 Link 引入样式的权重大于@import 的引用（@import 是将引用的样式导入到当前的页面中）

图片格式：

• 图片格式有哪些？
  png-8，png-24，jpeg，gif，svg，Webp。
  Webp：谷歌（google）开发的一种旨在加快图片加载速度的图片格式。 图片压缩体积大约只有 JPEG 的 2/3，并能节省大量的服务器带宽资源和数据空间。Facebook Ebay 等知名网站已经开始测试并使用 WebP 格式。 在质量相同的情况下，WebP 格式图像的体积要比 JPEG 格式图像小 40%。

==src 与 href ==：

• 简述一下 src 与 href 的区别。
  src 用于替换当前元素，href 用于在当前文档和引用资源之间确立联系。 src 是 source 的缩写，指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在 位置；在请求 src 资源时会将其指向的资源下载并应用到文档内，例如 js 脚本，img 图片 和 frame 等元素。 当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行 完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内。这也是为什么将 js 脚本放在底部而不是头部。 href 是 Hypertext Reference 的缩写，指向网络资源所在位置，建立和当前元素（锚点） 或当前文档（链接）之间的链接，如果我们在文档中添加 那么浏览器会识别该文档为 css 文件，就会并行下载资源并且不会停止对当前文档的处理。 这也是为什么建议使用 link 方式来加载 css，而不是使用@import 方式。

盒子外边距合并：

• 和并结果遵循下列计算规则：
  1. 两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。
  2. 两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值。
  3. 两个外边距一正一负时，折叠结果是两者的相加的和。

用css画三角形

实际案例中下拉菜单中的三角形，可以通过使用正方形进行旋转，再将正方形进行定位实现三角效果

position:absolute;
top:-50px;
left：50%；
margin-left：-50px;
height：100px;
width:100px;
tranform:rotate(45deg);

实现规则的等腰直角三角形：利用盒子边框
1.设置一个盒子
2.给盒子设置四种不同颜色的边框
3.给盒子宽高设为0，保留边框
4.根据想要的三角形效果，将其中几个边框的颜色设置透明（transparent）

div {
            width: 100px;
            height:100px;
            border-top: 100px solid red;
            border-right: 100px solid green ;
            border-bottom: 100px solid blue;
            border-left: 100px solid yellow;
        }

div {
            width: 0px;
            height:0px;
            border: 100px solid transparent;
            border-bottom: 100px solid blue;
            }

实现钝角和锐角三角形：通过改变边框的粗细实现调整三角形的形态

div {
            width: 0px;
            height:0px;
            border-top: 100px solid transparent;
            border-right: 100px solid transparent;
            border-bottom: 200px solid blue;
            border-left: 0px solid transparent;
        }

箭头三角形
设置两个伪类，前一个伪类覆盖至另一个了伪类，留出一些线出来就好：

html:
<div class="arrow">文字文字</div>
CSS:
div {
       position: relative; 
    }
    .arrow:after,.arrow:before {
    	content: "";
        width: 0;
        height: 0;
        border: 10px solid transparent;
        border-left-color: orange;
        position: absolute;
        
    }
   .arrow:before{
    top: 0;
   left: 70px;//根据实际情况调整
   border-left-color: white;
   } 

SEO（搜索引擎优化）
作用：让网站在搜索引擎上的排名更加靠前
提升SEO的常用方法：
1.竞价排名
2.将网页设置为HTML后缀
3.标签语义化，在合适的位置使用合适的标签

SEO三大标签：
title：网页标题标签
description：网页描述标签
keywords：网页关键词标签

有语义的布局标签：
在H5中新增了一些有语义的布局标签，可以增强网页的语义化
header：网页头部
nav：网页导航
footer：网页底部
aside：网页侧边栏
section：网页区块
article：网页文章
以上标签与div类似，但是语义化更强

ico图标设置

css中属性的书写顺序：
1.布局属性：display , position , float , clear , visibility , overflow
2.盒子模型+背景：width , heigth , margin , padding , border , background
3.文本内容属性：color , font , text-decoration , text-align , line-height
4.点缀属性：cursor , border-radius , text-shadow , box-shadow
一个选择器中类选择器的个数不要太多

页面骨架

<!DOCTYPE html>
<html lang="zh-CN">
<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>
    <meta name="description" content=" ">
    <meta name="keywords" content=" ">
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/index.css">
</head>
<body>
    
</body>
</html>

logo模块通常使用h1标签

伪元素为行内元素，设置宽高时需要转换为块元素

渐变背景
多个颜色逐渐变化的视觉效果
一般用于设置盒子的背景
background-image：linear-gradient（颜色1，颜色2）

实现元素横向布局：
设置display：inline-block；
设置浮动float；
设置伸缩盒布局：display：flex；

**伪元素选择器::after **有哪些常见用法
1.清除浮动

div::after {
content: ’ ';
dispaly:block;
clear:both;
}