css遇到的小知识点

CSS布局技巧：calc与vh单位使用详解

最新推荐文章于 2023-09-30 22:10:15 发布

原创最新推荐文章于 2023-09-30 22:10:15 发布 · 99 阅读

0 ·

CC 4.0 BY-SA版权

css 专栏收录该内容

3 篇文章

订阅专栏

文章目录

// calc 计算
width: calc(100% - 100px);

// vh单位 视口高度
height: 100vh; // 100vh是视口高度的100%

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

叶子_zq

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

【人机交互期末复习】HTML、CSS与JavaScript核心知识点及布局技巧总结：简答题汇总与解析

05-18

主要包括清除浮动的方法、盒子模型的属性及其解析方式、各类列表的应用场景、引入CSS样式的异同、背景属性的使用、CSS3动画的实现方式及其属性详解、2D变形的方式、基础知识点汇总以及三者在页面中的作用。这些知识...

a标签有小手状和无小手状css的属性介绍

09-24

在网页设计中，a标签（锚标签）是HTML文档中一个非常重要的元素，它用于创建一个超链接，链接到其他页面或当前页面的某个...由于文档中存在扫描或OCR技术错误，导致部分文字识别不准确，但是这并不影响理解主要知识点。

参与评论您还未登录，请先登录后发表或查看评论

CSS3 使用 calc() 计算高度 vh px

热门推荐

Ranx的博客

09-28

13万+

1、px 像素，我们在网页布局中一般都是用px。 2、百分比百分比一般宽泛的讲是相对于父元素，自适应网页布局越来越多，百分比也经常用到了。 3、Viewport viewport：可视窗口，也就是浏览器。 vw Viewport宽度， 1vw 等于viewport宽度的1% vh Viewport

height: calc(100vh - 100px)；

fury的博客

09-30

4512

因此，这段代码的意思是将元素的高度设置为视窗高度减去100像素。这样，元素的高度会根据视窗大小自动调整，并且保留一定的空间（100像素）在顶部或底部。其中，vh是视窗的高度单位，表示相对于视窗高度的百分比，1vh等于视窗高度的1%。而px则是像素单位，表示具体的像素数值。这段代码是用来设置元素的高度。它使用了CSS的calc()函数来计算高度值，公式为100vh - 100px。

CSS中calc()方法以及vh、vw单位

m0_56063262的博客

02-23

2461

使用“+”、“-”、“*” 和 “/”四则运算；也可以混合使用各种单位进行计算，如“height: calc(100vh - 44px - 49px)”错误写法： "height: calc(12%+5em)"“ * ”和 “ / ”可以没有空格。举个直观的例子，让大家感受说人话。+”和“-”计算的时候要加空格。expression是表达式。

CSS样式小结

Tessa_zzl的博客

08-14

343

CSS样式小结首行缩进：em-字符单位 text-indent:20px; text-indent:2em; 阴影： *20px：水平阴影的位置 *10px：垂直阴影的位置 8px：模糊距离 5px：阴影的尺寸 outset/inset：外阴影/内阴影 box-shadow: 20px 10px 8px 5px #888888 inset; 文字超出盒子长度，后面显示… width:200...

calc(100vh - 10px) calc(100vw - 10px) calc(100% - 10px) 简单说明

Asa的专栏

12-05

3万+

在讲calc之前先说一下 vh vw： vw 相对于视口的宽度。视口被均分为100单位的vw vh 相对于视口的高度。视口被均分为100单位的vh vmax 相对于视口的宽度或高度中较大的那个。其中最大的那个被均分为100单位的vmax vmin 相对于视口的宽度或高度中较小的那个。其

CSS知识点总结

m0_60560321的博客

08-13

2825

CSS学习期间记录的部分知识点总结

css基础知识点总结

J120_G的博客

04-03

1284

#css#初级#基本知识点

html-css-js学习过程中的知识点.zip

11-23

在HTML、CSS和JavaScript学习的过程中，掌握一系列的关键知识点对于成为前端开发人员至关重要。这些技术是网页开发的三大基石，它们共同构成了现代网络应用的基础。在深入学习这些技术时，我们会遇到一些核心概念和...

jquery/css需要记录的小知识（持续补充）

01-08

本文主要总结了一些关于jQuery和CSS使用过程中遇到的小知识点，这些知识点可以帮助开发者提高工作效率，解决日常开发中的问题。 1. **jQuery模拟select下拉框的选择事件并传参数**：在jQuery中，如果需要模拟...

编程知识点收藏，备用，已经保存部分知识点，也可以自行添加知识点

12-11

【编程知识点收藏】是一个个人定制化的知识管理系统，旨在帮助用户整理和学习编程相关的知识点。这个系统不仅包含了作者已经收集和整理的部分编程知识，同时也允许用户根据自己的需求添加新的知识点，形成了一个持续...

CSS3使用calc() 计算高度和宽度 vh px

陆柏熺

05-17

8566

Viewport viewport：可视窗口，也就是浏览器。 vw Viewport宽度， 1vw 等于viewport宽度的1% vh Viewport高度， 1vh 等于viewport高的的1% CSS3使用Calc calc()使用通用的数学运算规则，但是也提供更智能的功能： Viewport viewport：可视窗口，也就是浏览器。 vw Viewport宽度， 1vw 等于viewport宽度的1% vh Viewport高度， 1vh 等于viewport高的的1%...

代码7-1 过拟合及其抑制.ipynb

12-06

代码7-1 过拟合及其抑制.ipynb

基于Eclipse集成开发环境构建的面向STM32F4系列微控制器的FreeRTOS实时操作系统项目模板框架_嵌入式系统开发实时任务调度多线程管理硬件驱动适配内存优化配置.zip

12-06

基于Eclipse集成开发环境构建的面向STM32F4系列微控制器的FreeRTOS实时操作系统项目模板框架_嵌入式系统开发实时任务调度多线程管理硬件驱动适配内存优化配置

基于Nodejs与Express框架构建的具备完整用户认证与授权机制的RESTfulAPI服务项目_该项目核心功能包括用户注册登录JWT令牌签发与验证角色权限管理以及待办事.zip

最新发布

12-06

混合动力汽车(HEV)模型的Simscape模型（Matlab代码、Simulink仿真实现）

12-06

混合动力汽车(HEV)模型的Simscape模型（Matlab代码、Simulink仿真实现）内容概要：本文档介绍了一个混合动力汽车（HEV）的Simscape模型，该模型通过Matlab代码和Simulink仿真工具实现，旨在对混合动力汽车的动力系统进行建模与仿真分析。模型涵盖了发动机、电机、电池、传动系统等关键部件，能够模拟车辆在不同工况下的能量流动与控制策略，适用于动力系统设计、能耗优化及控制算法验证等研究方向。文档还提及该资源属于一个涵盖多个科研领域的MATLAB仿真资源包，涉及电力系统、机器学习、路径规划、信号处理等多个技术方向，配套提供网盘下载链接，便于用户获取完整资源。; 适合人群：具备Matlab/Simulink使用基础的高校研究生、科研人员及从事新能源汽车系统仿真的工程技术人员。; 使用场景及目标：①开展混合动力汽车能量管理策略的研究与仿真验证；②学习基于Simscape的物理系统建模方法；③作为教学案例用于车辆工程或自动化相关课程的实践环节；④与其他优化算法（如智能优化、强化学习）结合，实现控制策略的优化设计。; 阅读建议：建议使用者先熟悉Matlab/Simulink及Simscape基础操作，结合文档中的模型结构逐步理解各模块功能，可在此基础上修改参数或替换控制算法以满足具体研究需求，同时推荐访问提供的网盘链接获取完整代码与示例文件以便深入学习与调试。

Django 登录注册功能实现-样式优化

12-06

Django 登录注册功能实现-样式优化

基于云服务器CentOS721511操作系统进行基础环境配置与常用中间件部署的详细实践指南与故障排查手册_涵盖从基础系统使用到高级服务搭建的全过程包括JDK18运行环境.zip

12-06

CSS面试必备知识点完整总结

本资源是CSS面试知识点的总结，非常适合即将参加面试的前端开发者学习和参考。它涵盖了面试中可能会遇到的各类问题，帮助求职者全方位掌握CSS知识，提高面试成功率。 CSS知识点通常包括以下方面： 1. 基础选择器：...