使用columns简单实现瀑布流、分栏、自适应布局和响应式布局、媒体查询、单位（px em rem）的区别、VW与VH介绍、vw/vh和百分比%的区别、怪异盒子模型——移动端入门知识点

2024-04-13 01:08
文章标签 知识点 入门 布局 查询 模型 em 区别 响应 移动 适应 盒子 rem 怪异 百分比 columns px vh 瀑布 分栏 vw

本文主要是介绍使用columns简单实现瀑布流、分栏、自适应布局和响应式布局、媒体查询、单位（px em rem）的区别、VW与VH介绍、vw/vh和百分比%的区别、怪异盒子模型——移动端入门知识点，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

目录

一、分栏

使用columns简单实现瀑布流

二、自适应布局和响应式布局

三、媒体查询

四、单位（px em rem）

 em与rem的区别

VW与VH介绍

vw/vh和百分比%的区别:

 五、盒子模型 

一、分栏

1、列宽度

语法：column-width

column-width: 200px;/* 栏宽 列宽 */

2、列数

语法：column-count

column-count: 4;/*栏数 列数 */

3、列间距

语法：column-gap

 column-gap: 20px; /* 列间距 */

4、列样式（边框）

语法：column-rule

column-rule: 1px dotted pink;

5、缩写

语法：columns : column-width值     column-count值;

简单理解：

column-count：数值（列数）
随浏览器大小，列数保持固定数值，宽度自适应
column-width: 数值+单位 （列宽）
随浏览器大小，宽度保持固定数值，列数自适应
columns ：列宽 列数
（浏览器大小 >= 列宽 * 列数） 按列数算，随浏览器大小，列数保持固定数值，宽度自适应
（浏览器大小 < 列宽 * 列数 ） 按宽度算，随浏览器大小，宽度保持固定数值，列数自适应
column-gap：数值+单位（列间距）（gap：沟）
column-rule: 样式
1px solid red
缩写时先写宽度，再写列数，宽度和列数之间用空格隔开。

使用columns简单实现瀑布流

<!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><style>*{margin: 0;}.box{/* 列数与间距 */columns: 200px 4;/* column-count: 3; *//* column-width: 200px; */column-gap: 0px;/* column-rule: 10px solid red; */}.box .item1{width: 200px;height: 300px;background-color: rgb(52, 131, 206);}.box .item2{width: 200px;height: 100px;background-color: rgb(91, 88, 240);}.box .item3{width: 200px;height: 150px;background-color: rgb(88, 211, 239);}</style>
</head>
<body><div class="box"><div class="item2"></div><div class="item1"></div><div class="item3"></div><div class="item2"></div><div class="item3"></div><div class="item1"></div><div class="item2"></div><div class="item1"></div><div class="item3"></div><div class="item1"></div><div class="item3"></div><div class="item1"></div><div class="item2"></div><div class="item1"></div><div class="item2"></div><div class="item1"></div><div class="item2"></div><div class="item3"></div><div class="item1"></div><div class="item3"></div><div class="item2"></div><div class="item3"></div><div class="item1"></div></div>
</body>
</html>

二、自适应布局和响应式布局

1、自适应布局

  • 自适应布局是网页内容根据设备的不同而进行适应；
  • 通过检测视口分辨率，来判断当前访问的设备是pc端、平板还是手机，从而请求服务层，返回不同的页面；
  • 需要根据不同使用场景开发多套界面。

2、响应式布局

  • 响应式布局是网页的布局针对屏幕大小的尺寸而进行响应；
  • 通过检测视口分辨率，针对不同客户端在客户端做代码处理，来展现不同的布局和内容；
  • 只需要开发一套界面即可适用于所有尺寸及终端

区别：

1、自适应布局：是通过检测视口分辨率来判断当前访问的设备屏幕大小，从而请求服务层返回不同的页面。
响应式布局：是通过检测视口分辨率针对不同客户端在客户端做代码处理，来展现不同的布局和内容。
2、自适应布局需要开发多套界面，而响应式布局只需要开发一套界面就可以了
3、自适应对页面做的屏幕适配是在一定范围：比如pc端一般要大于1024像素，手机端要小于768像素，而响应式布局是一套页面全部适应。
4、自适应布局如果屏幕太小会发生内容过于拥挤，响应式布局可以自动识别屏幕宽度并作出相应的调整页面设计。

三、媒体查询


1、定义

使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。
@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的。
当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。

 
<style>/* 默认样式 */.box {width: 60px;height: 60px;background-color: rgb(0, 0, 0);}/* 屏幕浏览器宽度小于等于500px时显示下方样式 */
(最大值) @media screen and (max-width:500px) {.box {width: 200px;height: 200px;background-color: red;}}/* 屏幕浏览器宽度大于等于600px时显示下方样式 */
(最小值) @media screen and (min-width:600px) {.box {width: 150px;height: 150px;background-color: pink;}}</style><body><div class="box"></div></body>

（最大值max-width),要从大往小写；

（最小值min-width)则要从小往大写。

四、单位（px em rem）

https://blog.csdn.net/sunhuaqiang1/article/details/114965211https://blog.csdn.net/sunhuaqiang1/article/details/114965211

1、px

  •  px（Pixel) 像素,是相对于显示器屏幕分辨率而言的。
  • px是一个绝对长度单位，绝对长度单位是一个固定的值，它反应一个真实的物理尺寸。
  • 绝对长度单位视输出介质而定，不依赖于环境（显示器、分辨率、操作系统等）。

 em与rem的区别

em 一个文字的倍数，继承父级元素的字体大小(受当前字号的影响)

rem 一个文字的倍数，继承根目录的字体大小（受跟标签HTML的影响）

2、em

相对长度单位指定了一个长度相对于另一个长度的属性，对于不同的设备相对长度更适用。em它是描述相对于应用在当前元素的字体尺寸，所以它也是相对长度单位。
相对于元素的字体大小（font-size）（2em 表示当前字体大小的 2 倍）
一般浏览器字体大小默认为16px，则2em == 32px；

3、rem

 rem（font size of the root element）是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位。看到rem大家一定会想起em单位，em（font size of the element）是指相对于父元素的字体大小的单位。它们之间其实很相似，只不过一个计算的规则是依赖根元素一个是依赖父元素计算。

优点：如响应性、可伸缩性、改进的阅读体验以及在定义组件时更大的灵活性。

VW与VH介绍

理论：

vw也是一个单位，并且也是一个相对单位：
vw -> view width 
vh -> view height相对单位：表示把屏幕自动分成了100vw宽和100vh高。vw / vh : 把屏幕分为100份，1vw等于屏幕宽的1%。
这里的100份，它是适用于各种分辨率下的，不管是宽375px的设备，还是414px的都是一样的效果。
假设屏幕是375px -> 100vw -> 1vw == 3.75px
假设屏幕是414px -> 100vw -> 1vw == 4.14px在实际操作中我们一般都会选择iphone6的设备，它的宽度就是375px的，于是我们可以进行一个简单的计算
1vw == 3.75px ? -> 多少个vw == 100px -> 26.666667vw -> 100px

结论：

给html根标记标签添加以下公式就可自行转换：

html {font-size: calc(100vw / 750 * 100)
}
/*注意除号与乘号左右要加空格,此处移动端大小为750，若为其他数值则直接更改便可 */

vw/vh和百分比%的区别:

vw/vh:相对于视图窗口的宽高

百分比%:百分比相对于父元素宽高

 五、盒子模型 


盒子模型：标准盒子模型和IE盒子模型（怪异盒子模型）

标准盒子模型的大小：box-sizing: content-box;（默认值）

                                   width+padding+border;

而IE盒子模型的大小：box-sizing: border-box;

                                    width-padding-border;（整体数值不变其他值增加时内容减小）

这篇关于使用columns简单实现瀑布流、分栏、自适应布局和响应式布局、媒体查询、单位（px em rem）的区别、VW与VH介绍、vw/vh和百分比%的区别、怪异盒子模型——移动端入门知识点的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/898741。

相关文章

HarmonyOS学习(七)——UI（五）常用布局总结

HarmonyOS学习(七)——UI（五）常用布局总结

自适应布局 1.1、线性布局（LinearLayout） 通过线性容器Row和Column实现线性布局。Column容器内的子组件按照垂直方向排列，Row组件中的子组件按照水平方向排列。 属性说明space通过space参数设置主轴上子组件的间距，达到各子组件在排列上的等间距效果alignItems设置子组件在交叉轴上的对齐方式，且在各类尺寸屏幕上表现一致，其中交叉轴为垂直时，取值为Vert
阅读更多...
Spring Security 从入门到进阶系列教程

Spring Security 从入门到进阶系列教程

Spring Security 入门系列 《保护 Web 应用的安全》 《Spring-Security-入门（一）：登录与退出》 《Spring-Security-入门（二）：基于数据库验证》 《Spring-Security-入门（三）：密码加密》 《Spring-Security-入门（四）：自定义-Filter》 《Spring-Security-入门（五）：在 Sprin
阅读更多...
大模型研发全揭秘：客服工单数据标注的完整攻略

大模型研发全揭秘：客服工单数据标注的完整攻略

在人工智能（AI）领域，数据标注是模型训练过程中至关重要的一步。无论你是新手还是有经验的从业者，掌握数据标注的技术细节和常见问题的解决方案都能为你的AI项目增添不少价值。在电信运营商的客服系统中，工单数据是客户问题和解决方案的重要记录。通过对这些工单数据进行有效标注，不仅能够帮助提升客服自动化系统的智能化水平，还能优化客户服务流程，提高客户满意度。本文将详细介绍如何在电信运营商客服工单的背景下进行
阅读更多...
基本知识点

基本知识点

1、c++的输入加上ios::sync_with_stdio(false);  等价于 c的输入，读取速度会加快（但是在字符串的题里面和容易出现问题） 2、lower_bound()和upper_bound() iterator lower_bound( const key_type &key ): 返回一个迭代器，指向键值>= key的第一个元素。 iterator upper_bou
阅读更多...
Andrej Karpathy最新采访：认知核心模型10亿参数就够了，AI会打破教育不公的僵局

Andrej Karpathy最新采访：认知核心模型10亿参数就够了，AI会打破教育不公的僵局

夕小瑶科技说 原创  作者 | 海野 AI圈子的红人，AI大神Andrej Karpathy，曾是OpenAI联合创始人之一，特斯拉AI总监。上一次的动态是官宣创办一家名为 Eureka Labs 的人工智能+教育公司 ，宣布将长期致力于AI原生教育。 近日，Andrej Karpathy接受了No Priors（投资博客）的采访，与硅谷知名投资人 Sara Guo 和 Elad G
阅读更多...
活用c4d官方开发文档查询代码

活用c4d官方开发文档查询代码

当你问AI助手比如豆包，如何用python禁止掉xpresso标签时候，它会提示到 这时候要用到两个东西。https://developers.maxon.net/论坛搜索和开发文档 比如这里我就在官方找到正确的id描述 然后我就把参数标签换过来
阅读更多...
Retrieval-based-Voice-Conversion-WebUI模型构建指南

Retrieval-based-Voice-Conversion-WebUI模型构建指南

一、模型介绍 Retrieval-based-Voice-Conversion-WebUI（简称 RVC）模型是一个基于 VITS（Variational Inference with adversarial learning for end-to-end Text-to-Speech）的简单易用的语音转换框架。 具有以下特点 简单易用：RVC 模型通过简单易用的网页界面，使得用户无需深入了
阅读更多...
透彻！驯服大型语言模型（LLMs）的五种方法，及具体方法选择思路

透彻！驯服大型语言模型（LLMs）的五种方法，及具体方法选择思路

引言 随着时间的发展，大型语言模型不再停留在演示阶段而是逐步面向生产系统的应用，随着人们期望的不断增加，目标也发生了巨大的变化。在短短的几个月的时间里，人们对大模型的认识已经从对其zero-shot能力感到惊讶，转变为考虑改进模型质量、提高模型可用性。 「大语言模型(LLMs)其实就是利用高容量的模型架构（例如Transformer）对海量的、多种多样的数据分布进行建模得到，它包含了大量的先验
阅读更多...
图神经网络模型介绍（1）

图神经网络模型介绍（1）

我们将图神经网络分为基于谱域的模型和基于空域的模型，并按照发展顺序详解每个类别中的重要模型。 1.1基于谱域的图神经网络         谱域上的图卷积在图学习迈向深度学习的发展历程中起到了关键的作用。本节主要介绍三个具有代表性的谱域图神经网络：谱图卷积网络、切比雪夫网络和图卷积网络。 （1）谱图卷积网络 卷积定理：函数卷积的傅里叶变换是函数傅里叶变换的乘积，即F{f*g}
阅读更多...
秋招最新大模型算法面试，熬夜都要肝完它

秋招最新大模型算法面试，熬夜都要肝完它

💥大家在面试大模型LLM这个板块的时候，不知道面试完会不会复盘、总结，做笔记的习惯，这份大模型算法岗面试八股笔记也帮助不少人拿到过offer ✨对于面试大模型算法工程师会有一定的帮助，都附有完整答案，熬夜也要看完，祝大家一臂之力 这份《大模型算法工程师面试题》已经上传CSDN，还有完整版的大模型 AI 学习资料，朋友们如果需要可以微信扫描下方CSDN官方认证二维码免费领取【保证100%免费
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2