【css】css面试题汇总

已于 2023-01-30 15:58:58 修改
阅读量328 收藏
点赞数 1
文章标签： css 前端 javascript
于 2022-07-18 13:37:40 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43726152/article/details/125833238
版权

杰伦发新专辑了，我也要开整了wu~！，不定时收集互联网各种css题目。

盒模型

盒模型的作用：规定了网页元素如何显示以及元素间的相互关系
盒模型的组成部分=content（内容区）+padding（填充区）+border（边框区）+margin（外边界区）
padding，margin复合写法：上右下左

案例：属性box-sizing与width自动控制content宽度

boxing-sizing：默认content-box
在这里插入图片描述
boxing-sizing：border-box
在这里插入图片描述

absolute 和 relative 定位

1.relative 定位 相对于 自身 定位

2.absolute 定位 相对于 最近的一层父级定位元素 定位

案例：西瓜皮

1.初始状态
在这里插入图片描述
2.设置relative，绿色部分相对自己移动了
在这里插入图片描述
3. 设置absolute，相对父级元素移动了
在这里插入图片描述
源代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>relative 和 absolute 定位</title>
    <style>
      body {
        /* margin: 50px; */
      }
      
      .relative {
        position: relative;
        top: 30px;
        left: 60px;
        width: 300px;
        height: 200px;
        background-color: rgb(35, 190, 40);
      }

      .absolute {
        /* position: absolute; */
        top: 30px;
        left: 60px;
        width: 200px;
        color: #fff;
        background-color: rgb(243, 119, 53);
      }
    </style>
  </head>
  <body>
    <div>瓜子</div>
    <div class="relative">
      <div class="absolute">我是西瓜的肉，没有熟</div>
    </div>
  </body>
</html>

Margin合并

在这里插入图片描述

margin负值

上/左为负值，都是本身向上/左移动
下/右为负值，本身不动，下/右方的元素向上/左移动

分类1

【margin-top】 负值 元素向上拖拽：
在这里插入图片描述

【margin-left】 负值 元素向左拖拽：
在这里插入图片描述

分类2

【margin-bottom】 负值 元素本身不变，下边元素上移
在这里插入图片描述

【margin-right】 负值 元素本身不变，右边元素左移
在这里插入图片描述

BFC

Block formatting context 块级格式化上下文，形成独立的渲染区域
内部元素的渲染不会影响外界。
常用场景：清除浮动造成的塌陷
形成 BFC 常见的条件:

  • 浮动元素 float 不是 none，使用left,right
  • 绝对定位元素 position 是 absolute 或 fixed
  • 块级元素 overflow 不是 visible，使用hidden
  • flex 元素
  • inline-block 元素

案例1 图片浮动造成父元素塌陷

before：
在这里插入图片描述

container塌陷的原因是，img浮动了，所以现在的高度由p标签决定，使用overflow:hidden形成了BFC解决这个问题，保证container内部img的浮动不会影响到整个文档流。
after：
after
还有一个问题，p标签的宽度跨过了img标签的位置，同样也用bfc解决
在这里插入图片描述
在这里插入图片描述

最终代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>掌握 BFC</title>
  <style>
    .container {
      background-color: #ccc;
    }

    .container img {
      float: left;
      width: 300px;
    }

    .bfc {
      overflow: hidden;
    }
  </style>
</head>
<body>
  <h1>理解BFC</h1>
  <div class="container bfc">
    <img src="./imgs/avatar.png" />
    <p class="bfc">不是说好开始学习的吗...</p>
  </div>
</body>
</html>

圣杯布局

圣杯布局的特点：

  1. 两侧内容宽度固定，中间内容宽度自适应
  2. 三栏布局，中间一栏最先加载、渲染出来（主要内容）
    在这里插入图片描述

接下来会分步骤给出圣杯的样式是如何写成的：

1.初始布局：
在这里插入图片描述
2.给center，left，right设置浮动
在这里插入图片描述
3.对footer消除浮动的影响
在这里插入图片描述4.给content设置内边距
在这里插入图片描述
5.把left移动到center的最左边，方法是设置margin-left:-100%;
在这里插入图片描述
6. 把left移动至padding-left 300的空白处，填补好了空白。
在这里插入图片描述
7.把right放好位置，方法：设置margin-right:-200px;脱离文档流后盒子不再挤到下面去。
在这里插入图片描述

初始代码:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>实现圣杯布局</title>
  <style>
    body {
      min-width: 500px;
    }

    div {
      text-align: center;
    }

    #header {
      background-color: #f7d1af;
    }

    #content {

    }

    #content #center {
      background-color: rgb(92, 219, 107);
      width: 100%;

    }

    #content #left {
      background-color: rgb(142, 232, 215);
      width: 300px;
    }

    #content #right {
      background-color: rgb(253, 180, 180);
      width: 200px;
    }

    #content .column {
      
    }

    #footer {
      background-color: #f7d1af;

    }
  </style>
</head>
<body>
  <h1>实现圣杯布局</h1>
  <div id="header">Header</div>
  <div id="content">
    <div id="center" class="column">Center</div>
    <div id="left" class="column">Left</div>
    <div id="right" class="column">Right</div>
  </div>
  <div id="footer">Footer</div>
</body>
</html>

最终代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    body {
      min-width: 500px;
    }

    div {
      text-align: center;
    }

    #header {
      background-color: #f7d1af;
    }

    #content {
      padding: 0 200px 0 300px;
    }

    #content #center {
      background-color: rgb(92, 219, 107);
      width: 100%;

    }

    #content #left {
      background-color: rgb(142, 232, 215);
      width: 300px;
      margin: 0 0 0 -100%;
      position: relative;
      right: 300px
    }

    #content #right {
      background-color: rgb(253, 180, 180);
      width: 200px;
      margin: 0 -200px 0 0 ;
    }

    #content .column {
      float: left;
    }

    #footer {
      background-color: #f7d1af;
      clear: both;
    }
  </style>
</head>
<body>
  <div id="header">Header</div>
  <div id="content">
    <div id="center" class="column">Center</div>
    <div id="left" class="column">Left</div>
    <div id="right" class="column">Right</div>
  </div>
  <div id="footer">Footer</div>
</body>
</html>

双飞翼布局

1.初始布局
在这里插入图片描述

2.设置中间内容的空白部分
在这里插入图片描述
3.将left盒子移动到左边的空白区域
在这里插入图片描述
4.将right盒子移动到右边的空白区域
在这里插入图片描述
5.双飞翼布局与圣杯布局的区别：
5.1空白部分双飞翼是center里的子盒子的margin撑开的，而圣杯布局是center本身padding撑开的
在这里插入图片描述
5.2 双飞翼的right移动到合适的位置是通过margin-left负值，而圣杯布局的right是通过margin-right负值，他们为什么会不同，也是跟5.1一个是margin一个是padding有关。
初始代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>实现双飞翼布局</title>
    <style>
      body {
        min-width: 500px;
      }

      div {
        text-align: center;
      }

      #main {
        background-color: rgb(154, 246, 211);
        width: 100%;
      }

      #main #main-wrapper {
        background-color: rgb(154, 160, 246);
      }

      #left {
        background-color: rgb(177, 210, 225);
        width: 100px;
      }

      #right {
        background-color: rgb(246, 214, 217);
        width: 50px;
      }

      .column {
      }
    </style>
  </head>
  <body>
    <h1>双飞翼</h1>
    <div id="main" class="column">
      <div id="main-wrapper">Main</div>
    </div>
    <div id="left" class="column">Left</div>
    <div id="right" class="column">Right</div>
  </body>
</html>

最终代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>实现双飞翼布局</title>
    <style>
      body {
        min-width: 500px;
      }

      div {
        text-align: center;
      }

      #main {
        background-color: rgb(154, 246, 211);
        width: 100%;
      }

      #main #main-wrapper {
        margin: 0 50px 0 100px;
        background-color: rgb(154, 160, 246);
      }

      #left {
        background-color: rgb(177, 210, 225);
        width: 100px;
        margin: 0 0 0 -100%;
      }

      #right {
        background-color: rgb(246, 214, 217);
        width: 50px;
      }

      .column {
        float: left
      }
    </style>
  </head>
  <body>
    <h1>双飞翼</h1>
    <div id="main" class="column">
      <div id="main-wrapper">Main</div>
    </div>
    <div id="left" class="column">Left</div>
    <div id="right" class="column">Right</div>
  </body>
</html>

flex布局

父级容器相关

flex-direction 主轴方向 水平方向、垂直方向
justify-content 主轴上的对齐方式 开始对齐、结束对齐、居中对齐、两端对齐
align-items 交叉轴上的对齐方式 开始对齐、结束对齐、居中对齐
flex-wrap 是否换行

子元素相关

align-self 子元素在交叉轴上的对齐方式 开始对齐、结束对齐、居中对齐
可以覆盖 align-items 属性
浏览器检查里的flex我们点开就可以看到哦
在这里插入图片描述

在这里插入图片描述

案例：绘制一个色子

1.初始样式
在这里插入图片描述
2. 3个点横向排布
在这里插入图片描述
3. 设置第二个放置垂直方向中间
在这里插入图片描述

4.设置第三个放在垂直最末
在这里插入图片描述

水平居中

  • 行内 inline 元素 text-align: center;

  • 块级 block 元素 margin: 0 auto;

  • absolute 定位元素 left: 50% + margin-left 负值（宽度一半），如果不确定宽度用 transform: translateX(-50%);代替

  • 在这里插入图片描述

垂直居中

  • 行内 inline 元素 line-height 的值 等于 height 的值

  • absolute 定位元素 top: 50% + margin-top 负值
    transform: translate(-50%, -50%)
    top, left, bottom, right = 0 + margin: auto （方式最佳，没有兼容性问题）

展示一下定位元素这3种情况：
1.top: 50% + margin-top 负值
在这里插入图片描述

2.transform: translate(-50%, -50%)
在这里插入图片描述

3.top, left, bottom, right = 0 + margin: auto （方式最佳，没有兼容性问题）
在这里插入图片描述

单位rem和em的区别

  • px 绝对长度单位
  • em 相对长度单位，相对于父元素
  • rem 相对长度单位，相对于 html 根元素
  • 不仅仅限制于font-size单一属性 ，width，height也是可以用的。

案例 用rem，em控制文字大小

1.根元素设置好大小，之后那些以此为参照
在这里插入图片描述
2.rem效果在这里插入图片描述
3.em效果
在这里插入图片描述

清除浮动的多种方法

为什么会浮动塌陷？
元素设置浮动后，元素会脱离文档流，元素的父元素没有设置高度或者是auto自适应的话，元素的高度就不会被计算，父元素就塌了…

清除浮动三种方法
1.添加一个新的兄弟元素，加上 clear:both

2.把浮动的元素锁起来，bfc ，就是给父元素设置 overfolw:hidden / overflow:auto
或者父元素出去逮住小崽子，一起浮动 父元素设置 float
3.使用伪元素， 父亲添加 类class 添加伪元素 ：after （其实就是第一种的变体）

案例 58同城工作栏

1.初始代码
在这里插入图片描述
2. 第一种方法：添加一个新的兄弟元素，加上 clear:both
2.1 增加实体元素
我这个图里写的有问题，加了p标签那里是解决了塌陷问题，但是内容接在营业员屁股后面了，受到了浮动的影响。加了clear：both才消除浮动的影响。
在这里插入图片描述
2.2 相同原理制作伪元素
在这里插入图片描述
3.方法二：设置bfc，画一个范围，这个范围内不会被浮动影响
在这里插入图片描述

不使用border创建边框

那就使用box-shadow
box-shadow: x y 模糊半径 扩散半径 颜色（内阴影inset）
案例写法：
box-shadow: 0 0 0 5px # fcf876;

隐藏元素的几种方式，有什么区别？

display none visibility hidden opacity 0
在这里插入图片描述

子元素复原：如果父元素设置了visibility：hidden，子元素会受父元素影响不会显示出来，但如果给子元素设置visibility:visible就可以单独显示出来，display:none,opacity:0无法做到

伪类与伪元素

在这里插入图片描述
两者的比较
在这里插入图片描述

案例：为元素的某一部分指定样式

伪类：
在这里插入图片描述
伪元素：
在这里插入图片描述
特别注意，input后面不能跟::after的

自适应布局（适配）

自适应布局就是能忘了使网页自适应的显示在不同大小终端设备上的新网页设计方式及技术，需要开发多套界面来适应不的终端。
比如b站：
在这里插入图片描述

http://t.zoukankan.com/onesea-p-15512435.html
淘宝无限适配 + 布局单位使用rem
1.百分比
2.vm/vh
3.flexbox
4.media
5.rem

响应式布局

一个url能后兼容多个终端，而不是为了每一个终端做一个特定的版本。
比如bootrap官网：
在这里插入图片描述

1.根据终端大小隐藏布局

当屏幕过小时，一些元素会挤到第二排去。
在这里插入图片描述
用 @media only screen 解决该问题
在这里插入图片描述

  <style>
    *{margin:0;padding:0}
    ul {
      list-style: none;
    }
    ul li {
      display: inline-block;
      width: 260px;
      background: rgb(225, 181, 111);
    }
    @media only screen and (max-width: 1300px) {
      ul li:last-child {
        display: none;
      }
    }
    @media only screen and (max-width: 1010px) {
      ul li:nth-child(4) {
        display: none;
      }
    }
  </style>

</head>

<body>
  <ul>
    <li>首页</li>
    <li>案例</li>
    <li>课程</li>
    <li>就业</li>
    <li>关于</li>
  </ul>
</body>

2.根据不同的终端大小展示不同的图片

在这里插入图片描述

  <picture>
    <source srcset="1.png" media='(min-width: 1000px)'>
    <source srcset="2.png" media='(min-width: 700px)'>
    <img srcset="3.png">
  </picture>

布局方案

一、什么情况下采用响应式布局
1.数据不是特别多，用户量不是特别大，纯展示类的项目适合响应式布局
例如:公司的官网、专题页面
2.特别追求性能的项目，不太适合响应式，因为如果添加了很多的响应式就会造成加载速度变慢。
二、pc +移动端应该做什么样的布局方案
注意:访问量还可以或者比较大，类似于淘宝网。
pc是一套，会加入一点点响应式。
移动端是一套，会使用自适应的布局方式。
三、pc的设计图
ui: 1980
笔记本电脑: 1280
u1图的宽度和电脑的宽度不对应该怎么办?
1.把ui图进行等比缩放，缩放成和电脑一样的尺寸
2.换1980的电脑
四、移动端的设计图
宽度: 750
因为750设计图/2就是375，正好是iphone6的尺寸，我们要把iphone6的尺寸做为基准点。|

怎么让Chrome支持小于12px 的文字？

Chrome默认字体大小是: 16px
**每个浏览器默认字体大小可能都不一样
在这里插入图片描述

    div {
      font-size: 10px;
    }
    div span {
      display: inline-block;
      -webkit-transform: scale(0.8);
    }
	<div>
	   <span>你好鸭~~</span>
	 </div>
蟹黄汤包_
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值