CSS前端面试

文章目录

    • rem、em、vh、px各自代表的含义?
    • 盒模型
    • poison 定位属性
    • flex属性
    • 让元素水平垂直居中
    • 页面适配的方法有哪些

rem、em、vh、px各自代表的含义?

px:绝对单位,页面按精确像素展示
em:相对单位,基准点为父节点字体的大小,如果自身定义了font-size按自身来计算,整个页面内1em不是一个固定的值
rem:相对单位,可理解为root em, 相对根节点html的字体大小来计算
vh、vw:主要用于页面视口大小布局,在页面布局上更加方便简单

盒模型

盒模型由内而外分别是:width+height(html元素);padding(内边距);border(边框);margin(外边距)。
盒模型分为:
怪异盒模型(IE盒模型)
使用属性:

box-sizing:border-box;//怪异盒模型
//width + height = html + border + padding

标准盒模型

box-sizing:context-box;//标准盒模型
//width + height = width + height 

弹性盒模型(flex)

display:flex;

poison 定位属性

相对定位 (position:relative;)
相较于原来的位置。相对定位会保留原来的位置,【不脱离文档流】。

绝对定位 (position:absolute;)
不保留原来的位置,【脱离文档流】。绝对定位若父级没有设置相对定位,则默认会以浏览器为基准变化,若父级设置了相对定位,则以父级为基准变化。

固定定位 (position:fixed;)
会一直固定在某个不位置,不随滚动条滚动而改变。【脱离文档流】

粘性定位 (position:sticky;)
会随着滚动条滚动,【脱离文档流】

flex属性

flex属性是 flex-growflex-shrinkflex-basis三个属性的缩写。

flex-grow: 定义元素的的放大比例

默认为0;即使存在剩余空间,也不会被放大
所有元素flex-grow都为1,等分所有空间,自动放大
当某个元素flex-grow为n,占的空间是flex-grow为1的n倍

我们通常将flex:1用作自适应布局,即flex:1 == flex-grow:1

flex-shrink: 定义元素的缩小比例

默认为1,即 如果空间不足,该元素将缩小;
所有元素的flex-shrink都为1:当空间不足时,缩小的比例相同;
flex-shrink为0:空间不足时,该元素不会缩小;
当某个元素flex-grow为n,空间不足时缩小的比例是flex-shrink为1的n倍。

flex-basis: 定义在分配多余空间之前,元素占的主轴空间(main size),浏览器根据此属性计算主轴是否有多余空间。相当于设置初始值。

默认值为auto,即元素原本大小;
设置后元素将占据固定空间。(如flex-basis:100px;)

让元素水平垂直居中

1、定位 + margin
给父级设置相对定位。给子级设置绝对定位,并且给子级的top bottom left right 都设置为0,margin设置为auto。

2、定位 + margin负值
给父级设置相对定位。给子级设置绝对定位,并且给子级的top bottom 设置为50%,margin-left设置为子元素width的一半,margin-top设置为子元素height的一半。

以上两种方法都需要固定宽高,以下是几种不需要固定宽高的方法


3、定位 + transform
给父级设置相对定位。给子级设置绝对定位,并且给子级的top bottom 设置为50%,transform设置为translate(-50%,-50%)。

4、table布局
给父级设置display:table-cell;vertical-align:midlle;text-align:center;给子级设置display:inline-block;这样可以使所有为行内块元素的子级都可以水平垂直居中

5、flex布局
给父级设置display:flex;align-items:center;justify-content:center;

6、grid布局
给父级设置display:grid;align-items:center;justify-content:center;

页面适配的方法有哪些

1、根据不同根据不同的分辨率,加载不同的CSS样式文件

// 分辨率大于等于1680,大部分为1920的范围情况下,调用此css
if(window.screen.width >= 1680){document.write('<link rel="stylesheet" href="css/index_1920.css">');
}

2、媒体查询

/* 大屏幕 */
@media (min-width:1200px) {.container:{width:1000px;}
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/23860.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

MySQL 的事件调度器

MySQL 的事件调度器可以通过以下方式进行管理&#xff1a; 1】查看事件调度器的状态 SHOW VARIABLES LIKE event_scheduler;2】启用/禁用事件调度器 SET GLOBAL event_scheduler ON;SET GLOBAL event_scheduler OFF; 注意&#xff1a;启用/禁用事件调度器需要具有 SUPE…

RabbitMQ(二) - RabbitMQ与消息发布确认与返回、消费确认

RabbitMQ消息确认 SpringBoot与RabbitMQ整合后&#xff0c;对RabbitClient的“确认”进行了封装、使用方式与RabbitMQ官网不一致&#xff1b; 消息发布确认 生产者给交换机发送消息后、若是不管了&#xff0c;则会出现消息丢失&#xff1b; 解决方案1&#xff1a; 交换机接受…

Spring源码之XML文件中Bean标签的解析1

读取XML文件&#xff0c;创建对象 xml文件里包含Bean的信息&#xff0c;为了避免多次IO&#xff0c;需要一次性读取xml文件中所有bean信息&#xff0c;加入到Spring工厂。 读取配置文件 new ClassPathResource("applicationContext.xml")ClassPathResource是Sprin…

10倍提升效率,号称取代Elasticsearch?

[Manticore Search](https://github.com/manticoresoftware/manticoresearch/) 是一个使用 C 开发的高性能搜索引擎&#xff0c;创建于 2017 年&#xff0c;其前身是 Sphinx Search 。Manticore Search 充分利用了 Sphinx&#xff0c;显着改进了它的功能&#xff0c;修复了数百…

Charles抓包工具使用(一)(macOS)

Fiddler抓包 | 竟然有这些骚操作&#xff0c;太神奇了&#xff1f; Fiddler响应拦截数据篡改&#xff0c;实现特殊场景深度测试&#xff08;一&#xff09; 利用Fiddler抓包调试工具&#xff0c;实现mock数据特殊场景深度测试&#xff08;二&#xff09; 利用Fiddler抓包调试工…

Linux下TCP网络服务器与客户端通信程序入门

文章目录 目标服务器与客户端通信流程TCP服务器代码TCP客户端代码 目标 实现客户端连接服务器&#xff0c;通过终端窗口发送信息给服务器端&#xff0c;服务器接收到信息后对信息数据进行回传&#xff0c;客户端读取回传信息并返回。 服务器与客户端通信流程 TCP服务器代码 …

etcd

文章目录 etcd单机安装设置键值对watch操作读取键过往版本的值压缩修订版本lease租约&#xff08;过期机制&#xff09;授予租约撤销租约keepAlive续约获取租约信息 事务基于etcd实现分布式锁原生实现官方 concurrency 包实现 服务注册与发现Go 操作 Etcd 参考 etcd etcd 是一…

02|Oracle学习(数据类型、DDL)

1. 数据类型&#xff1a; 通常为&#xff1a;字符型、数值型、日期型以及大字段型大字段型&#xff1a;存放大数据及文件。 存储大数据时&#xff0c;基本上blob就能满足。 2. DDL&#xff08;数据库定义语言&#xff09; 主要包括对数据库对象的创建、删除及修改的操作。…

2.文件的逻辑结构

第四章 文件管理 2.文件的逻辑结构 顺序文件采用顺序存储则意味着各个逻辑上相邻的记录在物理上也是相邻的存储的。所以如果第0号记录的逻辑地址为0的话&#xff0c;则i号记录的逻辑为i *L。 特别的如果这个定长记录的顺序文件采用串结构&#xff0c;也就是这些记录的顺序和他…

go 结构体 - 值类型、引用类型 - 结构体转json类型 - 指针类型的种类 - 结构体方法 - 继承 - 多态(interface接口) - 练习

目录 一、结构体 1、python 与 go面向对象的实现&#xff1a; 2、初用GO中的结构体&#xff1a;&#xff08;实例化一个值类型的数据&#xff08;结构体&#xff09;&#xff09; 输出结果不同的三种方式 3、实例化一个引用类型的数据&#xff08;结构体&#xff09; 4、…

使用vscode+ssh免密远程Linux

使用vscodessh免密远程Linux 使用 SSH 密钥对&#xff1a;使用 SSH Agent&#xff1a;ssh-agent的使用场景 使用 SSH 密钥对&#xff1a; 确保你的本地机器上已经生成了 SSH 密钥对。如果没有&#xff0c;请使用以下命令生成密钥对&#xff1a; ssh-keygen -t rsa这将在 ~/.ssh…

Tomcat添加第三方jar包、如何在IDEA中启动部署Web模板

前言:公司最近维护老项目,是最原始的web项目,servlet和jsp结合的web项目,启动的时候配置了好几遍, 都起不来,很折磨人,这个文档比较全配置一遍准备工作 首先 拉取代码: git clone xxx.git ,如需要别的操作,自行baidu 也可以在idea中拉取第一步File ->Project Structure->…

Redis两种持久化方案RDB持久化和AOF持久化

Redis持久化 Redis有两种持久化方案&#xff1a; RDB持久化AOF持久化 1.1.RDB持久化 RDB全称Redis Database Backup file&#xff08;Redis数据备份文件&#xff09;&#xff0c;也被叫做Redis数据快照。简单来说就是把内存中的所有数据都记录到磁盘中。当Redis实例故障重启…

VSCode插件Todo Tree的使用

在VSCode中安装插件Todo Tree。按下快捷键ctrlshiftP&#xff0c;输入setting.jspn&#xff0c;选择相应的配置范围&#xff0c;我们选择的是用户配置 Open User Settings(JSON)&#xff0c;将以下代码插入其中。 //todo-tree 标签配置从这里开始 标签兼容大小写字母(很好的功…

html2canvas以及new QRCode生成带有二维码的海报的问题

全局定义new QRCode var posterQrCode new QRCode(document.getElementById("qrcode"), {// text: data,width: 82,height: 82,correctLevel: 3 // 解决二维码识别不高的问题}); 取消修改的时候给posterQrCode传值posterQrCode.makeCode(data);解决二维码海报弹框出…

Spring Boot 集成Seata

Seata的集成方式有&#xff1a; 1. Seata-All 2. Seata-Spring-Boot-Starter 3. Spring-Cloud-Starter-Seata 本案例使用Seata-Spring-Boot-Starter演示&#xff1a; 第一步&#xff1a;下载Seata 第二步&#xff1a;为了更好看到效果&#xff0c;我们将Seata的数据存储改…

linuxARM裸机学习笔记(2)----汇编LED灯实验

MX6ULL 的 IO IO的复用功能 这里的只使用了低五位&#xff0c;用来配置io口&#xff0c;其中bit0~bit3(MUX_MODE)就是设置 GPIO1_IO00 的复用功能的&#xff0c;GPIO1_IO00 一共可以复用为 9种功能 IO&#xff0c;分别对应 ALT0~ALT8。每种对应了不同的功能 io的属性配置 HY…

SolidWorks 3D Interconnect介绍

目前市面上有的三维设计软件有很多&#xff0c;如UG、Pro/E、CATIA等&#xff0c;而且每个三维设计软件都会生成自己文件格式。由于产品设计的原因&#xff0c;我们避免不了的会需要去使用不同三维设计软件的文件&#xff0c;这对于工程师来说其实是一件比较麻烦的事。 为什么…

代码随想录第38天 | 动态规划理论基础、509. 斐波那契数、70. 爬楼梯、746. 使用最小花费爬楼梯

动态规划理论基础 如果某一问题有很多重叠子问题&#xff0c;使用动态规划是最有效的。所以动态规划中每一个状态一定是由上一个状态推导出来的。 动态规划解题步骤&#xff1a; 确定dp数组&#xff08;dp table&#xff09;以及下标的含义确定递推公式dp数组如何初始化确定…

[腾讯云Cloud Studio实战训练营]基于Cloud Studio完成图书管理系统

[腾讯云Cloud Studio实战训练营]基于Cloud Studio完成图书管理系统 ⭐前言&#x1f31c;Cloud Studio产品介绍1.登录2.创建工作空间3.工作空间界面简介4.环境的使用 ⭐实验实操&#x1f31c;Cloud Studio实现图书管理系统1.实验目的 2. 实验过程2.实验环境3.源码讲解3.1添加数据…