CSS面试题---页面布局

1、常见的css布局单位

        像素px:页面布局的基础,一个像素表示终端屏幕所能显示的最小区域,可分为css像素(为开发者提供,在css中使用的一个抽象单位)和物理像素(只与设备的硬件密度有关,任何设备的物理像素都是固定的)

        百分比%:当浏览器的宽度或高度发生变化时,通过百分比单位可以使得浏览器中的组件的宽和高随着浏览器的变化而变化,从而实现响应式效果。一般而言,子元素的百分比相对于直接父元素。

        em和rem:是相对长度单位,em是相对父元素的字体大小倍数,rem是相对根元素的字体大小倍数。em是相对于当前对象内文本的字体尺寸。如果未设置当前行内字体尺寸,则相对于浏览器的默认字体尺寸(16px)。

        vw和vh:vw表示相对于视口的宽度,vh表示相对于视口的高度,wmin是vw和vh中的最小值,vmax是vw和vh中的最大值。

2、px、em、rem的使用场景

        三者的区别:

                px是固定像素,一旦设置了就无法因为适应页面大小而改变;

                em和rem是相对长度单位,其长度不是固定的,更适用于响应式布局;

                em是针对父元素,而rem是针对根元素设置。

        使用场景:

                对于分辨率影响不大的,且只需要适配少量设备的,使用px即可;

                对于需要适配大量设备的,选用rem即可。

3、两栏布局的实现

        两栏布局一般指左侧宽度固定,右侧宽度自适应。具体实现方式:

                a、浮动模式

.outer {height: 100px;
}
.left {float: left;width: 200px;background: tomato;
}
.right {margin-left: 200px;width: auto;background: gold;
}

        b、浮动+BFC模式

.left{width: 100px;height: 200px;background: red;float: left;}.right{height: 300px;background: blue;overflow: hidden;}

        c、flex布局

.outer {display: flex;height: 100px;
}
.left {width: 200px;background: tomato;
}
.right {flex: 1;background: gold;
}

        d、绝对定位一

.outer {position: relative;height: 100px;
}
.left {position: absolute;width: 200px;height: 100px;background: tomato;
}
.right {margin-left: 200px;background: gold;
}

        e、绝对定位二

.outer {position: relative;height: 100px;
}
.left {width: 200px;background: tomato;
}
.right {position: absolute;top: 0;right: 0;bottom: 0;left: 200px;background: gold;
}

4、水平垂直居中

        a、绝对定位+transform

.parent {position: relative;
}.child {position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);
}

        b、绝对定位+margin auto

.parent {position: relative;
}.child {position: absolute;top: 0;bottom: 0;left: 0;right: 0;margin: auto;
}

        c、绝对定位+margin负值

.parent {position: relative;
}.child {position: absolute;top: 50%;left: 50%;margin-top: -50px;     /* 自身 height 的一半 */margin-left: -50px;    /* 自身 width 的一半 */
}

        d、flex布局

.parent {display: flex;justify-content:center;align-items:center;
}

 5、如何根据设计稿进行移动端适配

        适配不同像素密度,使用media媒体查询,选用不同精度的图片,以确保不失真;

        适配不同屏幕大小,按照设计稿比例还原;

        让页面自适应展示,使用em、rem、vw、vh等相对单位。

6、简述flex布局

        flex布局是CSS3新增的一种布局方式,可以通过将一个元素的display属性值设置为flex从而使它成为一个flex容器,它的所有子元素都会成为它的项目。一个容器默认有两条轴:一个是水平的主轴,一个是与主轴垂直的交叉轴。可以使用flex-direction来指定主轴的方向。可以使用justify-content来指定元素在主轴上的排列方式,使用align-items来指定元素在交叉轴上的排列方式。还可以使用flex-wrap来规定当一行排列不下时的换行方式。对于容器中的项目,可以使用order属性来指定项目的排列顺序,还可以使用flex-grow来指定当排列空间有剩余的时候,项目的放大比例,还可以使用flex-shrink来指定当排列空间不足时,项目的缩小比例。

7、响应式设计的概念及基本原理

        响应式网站设计是一个网站能够兼容多个终端,而不是为每一个终端做一个特定的版本。

        基本原理是通过media媒体查询,查询检测不同的设备屏幕尺寸处理。

        页面头部必须有meta声明的viewport。

<meta name="’viewport’" content="”width=device-width," initial-scale="1." maximum-scale="1,user-scalable=no”"/>

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

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

相关文章

xss.pwnfunction-Ligma

首先用jsFuckhttps://jsfuck.com/ [][(![][])[[]](![][])[![]![]](![][])[![]](!![][])[[]]][([][(![][])[[]](![][])[![]![]](![][])[![]](!![][])[[]]][])[![]![]![]](!![][][(![][])[[]](![][])[![]![]](![][])[![]](!![][])[[]]])[![][[]]]([][[]][])[![]](![][])[![]![]!…

设计模式之解释器模式(上)

解释器模式 1&#xff09;概述 1.定义 定义一个语言的文法&#xff0c;并且建立一个解释器来解释该语言中的句子&#xff0c;这里的“语言”是指使用规定格式和语法的代码。 2.结构图 3.角色 AbstractExpression&#xff08;抽象表达式&#xff09;&#xff1a;在抽象表达…

【uniapp】开发微信小程序 — 注意事项

底部导航栏 (tabBar) 图标的正确做法&#xff1a; 1、图片的标准尺寸为 81px * 81px&#xff0c;该尺寸在官方的文档中有明确的说明&#xff0c;可以参考微信小程序全局配置文档中对 iconPath 属性的说明。 2、为了保持良好的间距&#xff0c;图片的内容区域设置 60px* 比较好&…

xcode 打开一个项目一直在loading解决方案

背景 我复制了一个xcode项目到另一个文件夹&#xff0c;然后用xcode打开的时候就会一直loading&#xff0c;xcode的内存占用会一直飙升。 解决思路 搜索了网上是否有遇到类似的问题。 大部分是让删除各种缓存文件夹来解决&#xff0c;我都尝试了&#xff0c;但是没有效果。 …

java的封装

在Java中&#xff0c;封装是面向对象编程中的一种重要概念&#xff0c;它指的是将数据和方法打包在一个单一的单位&#xff08;类&#xff09;中&#xff0c;并对外部隐藏对象的内部细节。封装通过将类的成员变量声明为私有的&#xff0c;并提供公共的方法来访问和修改这些变量…

nacos分布式程序开发实例

1.通过windows docker desktop 完成 nacos 的安装/启动/配置 &#xff08;1&#xff09;先安装docker desktop docker-toolbox-windows-docker-for-windows-stable安装包下载_开源镜像站-阿里云 &#xff08;2&#xff09;配置docker 国内镜像源 Docker 镜像加速 | 菜鸟教程…

设计模式:责任链模式示例

责任链模式可以应用于多种场景&#xff0c;下面是几个不同场景的例子&#xff0c;每个例子都包括完整的代码。 示例1&#xff1a;日志处理系统 在日志处理系统中&#xff0c;日志消息可以根据其严重性&#xff08;错误、警告、信息&#xff09;被不同级别的日志处理器处理。 …

无尽加班何时休--状态模式

1.1 加班&#xff0c;又是加班&#xff01; 公司的项目很急&#xff0c;所以要求加班。经理把每个人每天的工作都排得满满的&#xff0c;说做完就可以回家&#xff0c;但是没有任何一个人可以在下班前完成的&#xff0c;基本都得加班&#xff0c;这就等于是自愿加班。我走时还有…

点击上传文件

一、页面样式&#xff1a; &#xff08;1&#xff09;点击前&#xff1a; &#xff08;2&#xff09;点击后&#xff1a; 设计&#xff1a;①自定义elementPlus图标&#xff1b;②使用Tooltip实现鼠标悬浮按钮上出现文字提示&#xff1b;③上传与更换的切换样式&#xff1b;…

【C++】类和对象①(什么是面向对象 | 类的定义 | 类的访问限定符及封装 | 类的作用域和实例化 | 类对象的存储方式 | this指针)

目录 前言 什么是面向对象&#xff1f; 类的定义 类的访问限定符及封装 访问限定符 封装 类的作用域 类的实例化 类对象的存储方式 this指针 结语 前言 最早的C版本&#xff08;C with classes&#xff09;中&#xff0c;最先加上的就是类的机制&#xff0c;它构成…

不使用 Docker 构建 Triton 服务器并在 Google Colab 平台上部署 HuggingFace 模型

Build Triton server without docker and deploy HuggingFace models on Google Colab platform EnvironmentBuilding Triton serverDeploying HuggingFace models客户端推荐阅读参考 Environment 根据Triton 环境对应表 &#xff0c;Colab 环境缺少 tensorrt-8.6.1&#xff0…

ARM的CI-700和Arteris的NoC对比

ARM的CI-700和Arteris的NoC是两种不同的片上网络互连技术&#xff0c;它们都旨在提高SoC&#xff08;System on Chip&#xff09;的性能和效率&#xff0c;但具有不同的设计理念和应用场景。以下是对两者的详细对比&#xff1a; ARM的CI-700 AMBA 5 CHI互连&#xff1a;CI-70…

如何客观评价5G的现状?

前几天&#xff0c;在知乎上看到一个帖子&#xff0c;热度挺高&#xff1a; 看了一下帖子的回答&#xff0c;基本上都在骂5G。 作为通信行业从业者&#xff0c;我说说我自己的看法。大家姑且听听&#xff0c;一起交流一下。 我们目前所处的这个时代&#xff0c;有一个很大的特点…

【嵌入式Linux】第二部分 - 玩转驱动

本部分是嵌入式Linux教程的第二部分&#xff0c;驱动开发基础 这个部分的主要目的是带大家熟悉基础的驱动开发入门。 ARM嵌入式Linux学习路线 C语言部分&#xff08;核心&#xff09; C语言open()函数&#xff1a;打开文件函数 POSIX标准是什么&#xff1f; LinuxC语言使用…

VSCode 快捷键的使用

快捷键大全 通用 CtrlShiftP, F1 显示命令面板 CtrlP 快速打开&#xff0c;转到文件… CtrlShiftN 新窗口/实例 CtrlShiftW 关闭窗口/实例 Ctrl, 用户设置 CtrlK CtrlS 键盘快捷方式 基本编辑 CtrlX 剪切行&#xff08;空选择&#xff09; CtrlC 复制行&#xff08;空选择&…

Leetcode面试经典150_Q13罗马数字转整数

题目&#xff1a; 罗马数字包含以下七种字符: I&#xff0c; V&#xff0c; X&#xff0c; L&#xff0c;C&#xff0c;D 和 M。 字符 数值 I 1 V 5 X 10 L 50 C 100 D 500 M …

使用Node.js模拟执行JavaScript

使用Node.js模拟执行JavaScript 模拟执行的是JavaScript&#xff0c;而且依赖的是Node.js&#xff0c;为什么不直接用Node.js来尝试JavaScript的执行呢&#xff1f;其实是完全可行的。 准备工作 确保已经正确安装好了Node.js。安装流程可以在小蜜蜂AI网站获取。 模拟执行 …

CV2不同图像插值方式的区别

最近邻插值&#xff08;Nearest-neighbor interpolation&#xff0c;cv2.INTER_NEAREST&#xff09;&#xff1a; 基于最近的像素值进行插值。简单快速&#xff0c;但可能会产生锯齿状的边缘。通常用于图像放大时速度要求较高的情况。 双线性插值&#xff08;Bilinear interpol…

Day17_学点JavaEE_转发、重定向、Get、POST、乱码问题总结

1 转发 转发&#xff1a;一般查询了数据之后&#xff0c;转发到一个jsp页面进行展示 req.setAttribute("list", list); req.getRequestDispatcher("student_list.jsp").forward(req, resp);2 重定向 重定向&#xff1a;一般添加、删除、修改之后重定向到…

新能源汽车动力电池散热技术

为了进一步解决能源危机问题&#xff0c;我国大力提倡新能源的开发&#xff0c;其中以电力驱动的新型能源汽车&#xff0c;是我国大规模进入新能源应用的关键领域。新能源汽车是指使用非化石能源&#xff08;如电力、太阳能等&#xff09;作为动力源的汽车&#xff0c;其具有低…