Div宽度100%减去固定的像素数量 - 腾讯云开发者社区 - 腾讯云

开发者社区

文档建议反馈控制台

文章/答案/技术大牛

发布

关于Div的宽度与高度的100%设定

正像你所知道的那样，设置DIV大小的有两个属性width和height，以前在学习DIV每次给DIV设置100%宽度或高度时都很迷惑，不明确这个100%的宽度（高度）到底有多宽有多高？...这个100%是从哪里得到的从哪里继承的？今天我们的话题就是有关div高度100%的问题！...其实，要弄懂div宽度|width100%、div高度|height100%到底是怎么实现的，只需弄懂一个简单的问题就可以了，即100%的基数是谁，就是这个100%是相对于谁的width、height来说是...div的100%是从其上一级div的宽高继承来的，有一点很关键，就是要设置div100%显示，必须设置其上一级div的宽度或高度，否则无效。...，Html级元素默认宽度是100%，即整行；但是高度并不是100%，而仅仅是一行而已。

4.7K2 0

【CSS】使用固定定位实现顶部导航栏 ( 核心要点 | 固定定位元素居中设置 | 代码示例 )

, 下方的网页内容会被顶部导航栏覆盖 , 这里需要设置一个上外边距 , 上外边距值大于等于顶部导航栏的高度 ; /* 顶部的固定定位盒子高度 100px 由于其脱标会覆盖标准流元素...此处标准流盒子设置 100px 的外边距防止被顶部的固定定位盒子覆盖 */ margin-top: 55px; 由于设置绝对 / 固定定位 , 会将元素变为行内块元素 , 其宽度是内部子元素的宽度..., 如果要精确放置顶部导航栏的位置 , 顶部导航栏盒子必须设置宽度 , 这里选择设置其宽度为 100% ; /* 定位元素如果不设置宽度默认就是内部内容的宽度 */ /* 如果要设置盒子...50% 之后减去 150 居中设置 */ top: 50%; 然后 , 左侧广告栏高度为 300 像素 , 顶部在中线位置 , 向上移动 150 像素即可使真个广告栏居中设置 ; /* 设置垂直居中对齐...: 10px; /* 顶部的固定定位盒子高度 100px 由于其脱标会覆盖标准流元素此处标准流盒子设置 100px 的外边距防止被顶部的固定定位盒子覆盖 */ margin-top

3.7K5 0

您找到你想要的搜索结果了吗？

是的

没有找到

CSS入门指南-4：页面布局

固定宽度布局的大小不会随用户调整浏览器窗口大小而变化，一般是900到1100像素宽。...其中960像素是最常见的，因为这个宽度适合所有现代显示器，而且能够被16、12、10、8、6、5、4和3整除，不仅容易计算等宽分栏的数量，而且计算结果也能得到没有小数的像素数。...由于增加了内边距导致article的总宽度增加，导致右边的栏不能再与前两排并列在一起。有三种方法来预防改问题发生：从设定的元素宽度中减去添加的水平外边距、边框和内边距的宽度和。...重设宽度以抵消内边距和边框一个代代相传的解决方案是通过数学计算。CSS开发者需要用比他们实际想要的宽度小一点的宽度，需要减去内边距和边框的宽度。...总结这篇文章我们介绍了用浮动的有宽度的元素来创建多栏布局、如何让固定布局在页面上居中以及让它们在一定范围内可以伸缩。同时也了解了如何使用内部div在浮动元素中生成间距，而又不会改变布局的总宽度。

2.7K1 0

建议收藏！总结了 42 种前端常用布局方案

: 300px; width: 300px; background: #e599f7; } 其 HTML 结构也是固定的，就是一个父级，其宽度继承了的宽度，还有一个子级，这里是固定的300px...; /* 宽度减去左列的宽度 */ width: calc(100% - 200px); } 2. float+margin-left完成左列定宽右列自适应步骤如下：左边列开启浮动通过外边距的方式使该容器的左边有左边列容器的宽度的外边距...> div class="content">内容div> div> 左列容器开启左浮动右列容器开启右浮动使中间自适应的宽度为父级容器减去两个定宽的列实现CSS代码如下： .left...使中间自适应的宽度为父级容器减去两个定宽的列 */ width: calc(100%-400px); } .right { /* 2....使中间自适应的宽度为父级容器减去两个定宽的列 */ width: calc(100%-400px); /* 3.

4.8K3 0

建议收藏！总结了42种前端常用布局方案

: 300px; width: 300px; background: #e599f7; } 其 HTML 结构也是固定的，就是一个父级，其宽度继承了的宽度，还有一个子级，这里是固定的300px...; /* 宽度减去左列的宽度 */ width: calc(100% - 200px); } 2. float+margin-left完成左列定宽右列自适应步骤如下：左边列开启浮动通过外边距的方式使该容器的左边有左边列容器的宽度的外边距...> div class="content">内容div> div> 左列容器开启左浮动右列容器开启右浮动使中间自适应的宽度为父级容器减去两个定宽的列实现CSS代码如下： .left...使中间自适应的宽度为父级容器减去两个定宽的列 */ width: calc(100%-400px); } .right { /* 2....使中间自适应的宽度为父级容器减去两个定宽的列 */ width: calc(100%-400px); /* 3.

4.8K3 0

实战 HTML & CSS：如何快速搭建一个响应式博客首页

; /* 导航栏的宽度设置为100%，以充满整个屏幕宽度 */ } 效果预览核心内容模块样式这块的样式会复杂点，涉及盒模型的内容居中、嵌套盒模型的布局、位置固定等等。.../* 背景颜色 */ width: 100%; /* 宽度为100% */ border-radius: 10px; /* 圆角边框，半径为10像素 */ } .item {...; /* 图片高度为80% */ } 最终效果最后删除调试时，增加的div 背景色，为文章内容模块和广告栏增加边框阴影，完成最终样式： .items { width: 100%; /* 宽度为...width: 100%; /* 导航栏的宽度设置为100%，以充满整个屏幕宽度 */ } nav a { color: black; /* 导航栏内链接的颜色设置为黑色.../* 在上下各留出50像素的空白，并在左右居中 */ margin: 50px auto; } .items { width: 100%; /* 宽度为

1.1K1 0

【CSS】课程网站头部制作 ③ ( 搜索栏表单测量 | 搜索栏表单代码编写 | 代码示例 )

, 测量 361 像素 , 减去 1 像素边框 ; 使用吸管工具 , 吸取边框的颜色值 , 为 #00a4ff ; 3、文本输入框表单提示文本测量使用横排文字工具 , 点击表单中的...像素的内边距 ; 注意 : 设置内边距会拉长盒子 , 盒子的尺寸要减去内边距 ; 二、搜索栏表单代码编写 ---- 1、HTML 标签结构搜索栏的盒子模型如下 : div class="header w"> 的 logo 标题 --> div class="logo"> 宽度为 360 像素, 但是左侧有 20 像素内边距变为 340 像素 */ width: 340px; /* 高度 38 像素但是盒子大小 42 像素 , 设置 40 加上 2 像素边框正好充满...* 宽度为 360 像素, 但是左侧有 20 像素内边距变为 340 像素 */ width: 340px; /* 高度 38 像素但是盒子大小 42 像素 , 设置 40 加上 2 像素边框正好充满

2.3K3 0

【CSS】课程网站网页底部开发 ( 网页底部盒子模型测量及样式 | 代码示例 )

*/ margin: 20px 0 15px 0; } 按钮宽高 120x36 像素左右上下各有 1 像素边框 , 各减去 2 像素最终内存尺寸为 118x34 像素 , 文本 16.../* 按钮宽高 120x36 像素左右上下各有 1 像素边框各减去 2 像素最终内存尺寸为 118x34 像素 */ width: 118px; height: 34px;...*/ .links dl { float: left; /* 距离左侧 100 像素 */ margin-left: 100px; } /* 列表项标题样式 */ .links dt {..., 方便与右侧的按钮进行排列 */ float: left; /* 宽度为 360 像素, 但是左侧有 20 像素内边距变为 340 像素 */ width: 340px; /* 高度 38 像素...*/ box-shadow: 2px 2px 2px rgba(0, 0, 0, .3); } /* 图片自适应图片宽度 = 盒子宽度 */ .box-bd li img { width: 100%

5K3 0

【Web前端】在 CSS 中调整大小

即使没有指定任何宽度或高度，图片会显示其实际尺寸。二、设置具体的尺寸 CSS 允许我们设置元素的具体尺寸，通过使用固定单位（如像素、点等）来精确控制元素的宽度和高度。...="fixed-size-box">固定尺寸div> .fixed-size-box 的宽度和高度被设置为固定的像素值，这确保了元素在所有屏幕和视口尺寸下保持一致的尺寸...class="box">最小最大宽度div> .box 的宽度设置为 100%，但最大宽度为 600px，最小宽度为 300px。...; /* 视口宽度的 100% */ height: 100vh; /* 视口高度的 100% */ background-color: #34495e;...class="full-screen"> 视口单位 div> .full-screen 元素的宽度和高度都设置为视口的 100%。

1.2K1 0

前端常用布局方案总结

设置该元素的偏移量，值为50% 减去宽度/高度的一半。...右边列宽度为父级 100%减去左列的宽度。...使中间自适应的宽度为父级容器减去两个定宽的列。...左右两列脱离文档流，并通过偏移的方式到达自己的区域； (2). 使中间自适应的宽度为父级容器减去两个定宽的列； (3). 通过外边距将容器往内缩小。...; /* 设置每个元素为行内块级元素，每个元素占 24.6% 的宽度 */ width: 24.6%; /* 因为行内块级元素有一些类似于边距的几个像素，导致各占25会超出容器

3K3 0

【CSS】深入探讨 CSS 的 `calc()` 函数

典型应用场景5.1 响应式布局动态计算宽度、高度，结合百分比与固定像素。....容器宽度自适应减固定边距.container { width: calc(100% - 40px); /* 100% 减去固定左右边距 40px */ margin: 0 20px;}php85 Bytes...© 菜鸟-创作你的创作这样无论屏幕大小变化，容器宽度都能自适应，且保持左右边距固定。...绝对定位元素水平居中.modal { position: absolute; width: 400px; left: calc(50% - 200px); /* 50%减去宽度的一半，实现水平居中...高度自适应，减去顶部导航栏高度.main-content { height: calc(100vh - 60px); /* 视口高度减去导航栏固定高度 */ overflow: auto;}php85

920 0

08-移动端开发教程-移动端适配方案

Rem的取值： 1rem = 100px 或者 1rem = 1/10 * 理想视口的宽度 chrome浏览器字体小于12px（会被重置为12px) 固定设计稿的宽度开发+根据设备动态适配缩放开发直接按照设计稿编写固定尺寸元素...id="header"> div> 2.2 弹性盒子+高度固定布局 logo下面一行的左右两个盒子，高度不变，宽度虽然有变化，但是左右两个盒子都基本上靠在两侧，可以用浮动实现，也可以用弹性盒子实现...> 某些场景下也需要固定像素的布局，比如：头像一般会用固定的宽高进行排版。...以上假设设计图是640像素。然后在640像素的设备上，1rem = 100px方便计算盒子的尺寸，可以直接口算。...比如：头像在不同设备上一般都会设置固定像素的大小宽度可能超过50%的盒子尽量用百分比或者弹性盒子布局高度和宽度需要同时根据屏幕自动缩放的时候，推荐使用rem布局 5.

3.2K6 0

08-移动端开发教程-移动端适配方案

的取值： 1rem = 100px 或者 1rem = 1/10 * 理想视口的宽度 chrome浏览器字体小于12px（会被重置为12px) 固定设计稿的宽度开发+根据设备动态适配缩放开发直接按照设计稿编写固定尺寸元素...id="header"> div> 2.2 弹性盒子+高度固定布局 logo下面一行的左右两个盒子，高度不变，宽度虽然有变化，但是左右两个盒子都基本上靠在两侧，可以用浮动实现，也可以用弹性盒子实现...> 某些场景下也需要固定像素的布局，比如：头像一般会用固定的宽高进行排版。...以上假设设计图是640像素。然后在640像素的设备上，1rem = 100px方便计算盒子的尺寸，可以直接口算。...比如：头像在不同设备上一般都会设置固定像素的大小宽度可能超过50%的盒子尽量用百分比或者弹性盒子布局高度和宽度需要同时根据屏幕自动缩放的时候，推荐使用rem布局 5.

3.8K10 0

移动端开发的几点建议

在页面建立一个刚好铺满全屏的 div 元素，然后获取它的宽高，这个宽高就是该设备的真实开发尺寸。....test-div { position: fixed; left: 0; top: 0; width: 100vw; height: 100vh; background...理由如下： vw vh 换算方便 1vw = 屏幕 1% 的宽度 1vh = 屏幕 1% 的高度兼容性好无论是在网页还是在小程序，只要支持 css 就能完美兼容。...固定高度使用 px 像边框或者分隔线等“固定”高度的，可以使用 px。兼容多端建议使用 px 如果你的网站要兼容多端，例如手机、pad、甚至 pc。...设备状态栏如果 app 在移动设备上不需要全屏展示，那么在 chrome 上模拟设备大小时要减去设备状态栏的高度。当然，这一般都不会有什么问题，只是为了多加一条建议。

1.1K2 0

css div高度设置100%如何生效！

div { width: 100%; /* 这是多余的 */ height: 100%; /* 这是无效的 */ background: url(bg.jpg); } 然后他发现这个...例如，一个 div>元素里面有一张 vertical-align 为 bottom 同时高度为 192 像素的图片，此时，该div>高度就是 192 像素，假设此时插入一个子元素，高度设为 100%...但是，父元素 height 值是 auto，岂不是现在高度要从原来的 192 像素变成 384 像素，然后 height:100%的子元素高度又要变成 384 像素，父元素高度又双倍……死循环了！...例如，在下面这个例子中，父元素采用“最大宽度”，然后有一个 inline-block 子元素宽度 100%： div class="box"> 的时候，子元素的 width:100%并没有渲染，宽度就是图片加文字内容的宽度；等渲染到文字这个子元素的时候，父元素宽度已经固定，此时的 width:100%就是已经固定好的父元素的宽度

6.9K0 0

【移动端网页布局】流式布局案例 ④ ( Banner 栏制作 | 固定定位 | 标准流 | 百分比宽度设置 )

: hidden; /* 搜索栏宽度充满全屏 */ width: 100%; /* 搜索栏的高度为 44 像素 */ height: 44px; /* 搜索栏最小宽度...320 像素浏览器拉倒最小该布局的宽度不低于 320 像素 */ min-width: 320px; /* 搜索栏最大宽度 640 像素浏览器拉到最大该布局最大 640 像素...div> div> 对应的 css 样式为 : .slider img { /* 设置 Banner 栏大图宽度尺寸为 100% */ width: 100%; } 设置了...= 设备宽度 */ width: 100%; /* 最小宽度 320 像素 */ min-width: 320px; /* 最大宽度 640 像素 */ max-width...: hidden; /* 搜索栏宽度充满全屏 */ width: 100%; /* 搜索栏的高度为 44 像素 */ height: 44px; /* 搜索栏最小宽度

2.3K2 0

【CSS】绝对定位元素设置水平垂直居中 ( 绝对定位元素居中设置 - 先偏移 50% 再回退子元素一半尺寸 | 绝对定位居中设置 )

: auto; 样式的方式令盒子水平居中 ; 举例说明 : 绝对定位的元素需要居中对齐的地方很多 , 如下图所示 , 右侧的固定定位按钮 , 需要在浏览器中居中对齐 , 轮播图中的五个小圆点...的容器需要居中对齐 ; 二、绝对定位居中设置 ---- 1、设置固定尺寸使绝对定位元素水平 / 垂直居中最简单的方法就是使用标尺测量父容器的宽高 , 通过设置四个边的边偏移量 , 设置元素...水平 / 垂直居中 ; 2、先偏移50%再回退固定值父容器盒子如果尺寸发生了改变 , 使用上述固定边偏移的方式设置的居中就会出现问题 ; 先设置 50% 的宽度 / 高度偏移量 , 然后再往回退...; left: 50%; 然后 , 设置负数的左外边距 , 令子元素向左移动自身宽度的一半 , 需要提前测量子元素的宽度 ; margin-left: -100px; 三、绝对定位元素...*/ border: 1px solid #ccc; /* 上下设置 100 像素外边距水平居中 */ margin: 100px auto; /* 子元素与 */ padding

4.4K4 0

关于DOM的基础操作

不会引起页面刷新 * 2）popstate事件监听url路径变化 * 注意：浏览器前进、后退改变url的时候会触发popstate事件， * javascript的history： go...fragment) ul.addEventListener('click', (e) => { console.log(e.target.dataset.index) }) 4.网址判断在输入框中如何判断输入的是一个正确的网址...像素,宽度根据屏幕自适应,居顶部展示 b)B区域固定宽度200像素,居左侧展示 c)C区域根据屏幕宽度自适应 d)D区域固定宽度200像素,居右侧展示 e)E区域高度80像素,宽度自适应,当整体内容不够满屏展示...="header-none">div> div class="left">leftdiv> div class="content" contenteditable="true">div>...div class="right">rightdiv> div class="footer">footerdiv>

5292 0

移动端适配动态rem方案

我们需要更换另外一种方案——整体能根据屏幕放大缩小，局部又能保持固定的尺寸。可以使用动态REM方案。 # 2 原理在使用单位控制页面元素大小时，可以使用固定单位px，也可以使用相对单位rem。...我们可以设置html的font-size 为 100*屏幕宽度/设计稿宽度在写CSS时设置 div 的宽度是 3.75rem （计算时用设计稿标注值除以100），边框宽度为1px 假设用户在逻辑像素宽度是...375px的设备上打开页面，则html的font-size是100*375/750 = 50px，div的宽度是3.75rem ，即187.5px 正好是屏幕宽度的一半。...假设用户在逻辑像素宽度是428px的设备上打开页面，则html的font-size是100*428/750 = 57.07px，div的宽度是3.75rem ，即214px 正好是屏幕宽度的一半。...为什么要用100来乘以屏幕宽度/设计稿宽度？其实100只是随便选取的一个值，我们也可以随便其他任意值比如50。

8971 0

前端面试实录CSS篇（最近一周）

创建自适应两栏布局：可以用来创建自适应两栏布局：左边的宽度固定，右边的宽度自适应。 9. 如何设置小于 12px 的字体？...，任何设备的物理像素都是固定的 • 像素px: 页面布局基础，分为css 像素和物理像素 • 百分比%: 实现响应式效果 • em和rem: 相对于 px 更具灵活性，它们都是相对长度单位，区别为，em...• 区别： • px: 固定像素，无法跟着页面大小而改变 • em: em 和 rem 相对长度单位，长度不是固定的，会跟着页面大小而改变，更适用于响应式布局 • em 相对于父元素来设置字体大小，而...两栏布局的实现 • 左边固定，右边自适应 • 利用浮动，将左边元素宽度设置为 200px，并且设置向左浮动。...height: 300px; background: blue; overflow: hidden; } • 利用 flex 布局，将左边元素设置为固定宽度 200px，将右边的元素设置为

3551 0

点击加载更多

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭