各种height/width总结

最新推荐文章于 2021-12-22 11:31:13 发布
最新推荐文章于 2021-12-22 11:31:13 发布
阅读量194 收藏 1
点赞数
CC 4.0 BY-SA版权
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/shytong/p/5043573.html
本文深入探讨了网页滚动条与CSS盒模型之间的交互，通过JavaScript接口如clientHeight、scrollHeight等获取高度和宽度的细微区别，并提供计算滚动条宽度的方法。适合前端开发者学习。

CSS盒模型是比较复杂的，尤其是当页面中有滚动条时，仅仅通过css来操作高度宽度是不够的，幸运的是Javascript提供了不少这样的接口。Javascript中clientHeight / cliengWidth， scrollHeight /scrollWidth， offsetHeight / offsetWidth， height / width 都可以获取高度和宽度，但是他们有一些细微的差别：

  • offsetHeight / offsetWidth：文档整体区域包含滚动条和border，对于display:block的元素通过width/height + padding + border可以计算出来。
  • clientHeight / cliengWidth：可见区域包含padding，不包含border和滚动条，不能通过CSS样式计算出来，取决于滚动条的大小。
  • scrollHeight / scrollWidth：内容区域的大小，不包含border，包含不在可见区域内的隐藏部分，不能通过CSS样式计算出来。
  • height / width：不包含border和padding。

另外：滚动条的宽度可以通过如下方式计算：

scrollbarWidth = offsetWidth - clientWidth - getComputedStyle().borderLeftWidth - getComputedStyle().borderRightWidth

 

转载于:https://www.cnblogs.com/shytong/p/5043573.html

web前端入门到实战：CSS属性width和height
软件开发-前端开发-IT
09-18 2286
width 是定义元素内容区的宽度； height是定义元素在内容区的高度. 在内容区外面可以增加内边距（padding）、边框（border）和外边距（margin），这样的话就成了我们常说的盒子模型，后期内容中会给大家讲到这些， 在行内非替换元素会忽略width这个属性，也就是我们不定义这个元素的时候，默认值为auto，由内容将其撑开。 绝对单位 1. 像素px(pixels)，在web...
行内元素能否设置width,height,padding,margin
chq11106004389的博客
11-23 4061
1.直观体现在排列上. 行内元素在直线上水平排开,处于同一行. 块级元素在垂直方向上排列,各个块级元素单独占据一行. 2.包容性 一般会使用块级包含行内元素. 3.行内元素可以设置line-height,但盒子模型中的其余属性均无效(width/margin/padding)
各种高度汇总
12-19 221
各种高度相关的太多了，写在这里以备忘： 1、当前视窗的高度：document.body.clientHeight||document.documentElement.clientHeight;
CSS 最佳实践 + 套路（二） -- height width
CZBBhkrx的博客
01-27 387
文档流 文档内元素的流动方向 内联元素 ==> 从左向右依次流动，若 width 不足，则换行块级元素 ==> 从上到下依次流动，每个块级元素独占一行 脱离文档流 将会影响其祖先元素（块级元素）的 height 脱离文档流的三种方式： position: fixed 相对于窗口定位position: absolute 相对于定位包含框定位（position:
width/height新视界
大白兔
05-11 996
众所周知,width height是用来指定元素的宽度和高度的，可能我们平时用到具体的<length> 和<percentage> 比较多，那他们还有其他的值吗？如果我们根据内容的宽度来决定元素的宽度（随着内容自适应）该如何做呢？我们以最小或者最大的元素内的内容的宽度或者高度来决定元素的宽高该如何实现呢？ CSS3给我们提供了好方法，具体是什么方法呢？ 值 wid...
CSS基础属性:width/height
yiXin_Chen的博客
12-22 3118
1. width: 设置块元素的宽度. 值: 1) 像素大小, 单位px. 固定的大小 例: width: 100px; 2) 百分比大小, 单位%. 设置当前块元素占据父元素宽度的百分比 例: width: 80%; 3) 字符大小, 单位em. 1.5em表示以父元素的字符大小为基础的1.5倍 例: font-size: 2em; 4...
CSS中position属性的总结使用
u010816424的专栏
05-29 262
css中的定位
IE6不支持CSS中的min-width/height属性问题的解决方法
09-25
尤其是对于min-width和min-height属性的支持问题，一直是前端开发者在进行跨浏览器兼容性处理时遇到的一大难题。这两个CSS属性原本是用于设定元素的最小宽度和最小高度的，确保网页元素在内容较少时也能够保持一定的...
min-height和min-width两个最小高度和最小宽度兼容多浏览器版本
09-25
总结来说，为了在不同浏览器中实现`min-height`和`min-width`的兼容，我们需要理解各浏览器的差异，并运用特定的CSS hack和技巧。在开发过程中，应当始终进行跨浏览器测试，以确保样式在所有目标浏览器中都能正确...
HTML表格标记教程(41):表头的宽度和高度属性WIDTH、HEIGHT
12-04
因此，合理使用WIDTH和HEIGHT属性，并结合CSS媒体查询进行调整，是确保表格在各种环境下具有良好表现的关键。 总结来说，HTML的WIDTH和HEIGHT属性为开发者提供了对表格和表头单元格尺寸的精确控制，从而能够定制化...
css3下的width/height的一些”值“
胡世林的博客
06-05 563
有点忙里偷闲了。正好看到了css3里面width/height的自适应关键字，就学习了下（下面的例子基本是以width为例，百分比亚，数值这些要我再写一遍就过分了） fill-available 撑满可用高度， 当当前元素的display为inline-block的时候，可将元素的大小设置为可用的宽度； 当当前元素的dispaly为block的时候，你就当他不存在吧 fit-c...
网页各种高度
ZW_ei的博客
01-29 1034
document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ==> BODY对象高度 document.documentElement.clientWidth ==> 可见区域宽度 document.documentElement.clientHeight ==> 可见区域高度 网页可见区域宽： docu
关于height:100%的简单理解
lihuihui2016的博客
03-06 8235
要想高度百分比起作用，一般来说，要满足两个条件：其一，父标签有高度可寻，就是向上遍历父标签要找到一个定值高度（body，html另外讨论），如果中途有个height为auto或是没有设置height属性，则高度百分比不起作用；其二，标签本身的属性，如果inline属性的标签，如果没有浮动，zoom，或是绝对定位之类属性是不支持百分比高度的，block或inline-block属性可以说是高度百分比...
web开发中获取的各种高度和宽度
cloud_guo的博客
12-28 8865
前端开发中经常需要获取页面还有屏幕的高度和宽度进行计算,此文即介绍如何用 JavaScript 还有 jQuery 获取这些尺寸.1.简介一个页面显示在浏览器内,浏览器又放置在屏幕窗口内,所以由里向外便是 页面 , 浏览器 , 屏幕 三者. 展示图: 2.屏幕尺寸 screen.availHeight:屏幕可用高度 screen.availWidth:屏幕可用宽度 screen.Height:屏
min-height和min-width的用法总结
xi_2130的博客
12-04 2万+
给大美女讲解min-width，发现属性不是想的那样，装逼失败(ಥ_ಥ)已哭瞎， max-height，max-height这里我就不做探讨了，相信聪明的你如果理解了min-height，min-width，其他大家自会理解….1.min-heigh用法：设置一块区域的最小高度，额，似乎听起来有点晕，举个例子吧， <div class="test"> 我是一只小青蛙我是一只小
关于position：absolute使用的心得
qq_33204572的博客
03-29 464
关于position：absolute使用的小心得
JavaScript中的*top、*left、*width、*Height详解
淡忘~浅思
10-04 2440
html代码 1: <body> 2: <div class="father" id="father"> 3: <h3>这是父元素，屏幕分辨率是1366*768</h3> 4: <div class="son" id="son"> 5: <h3>这是子元素，祝大家国庆快乐 </h3> 6: <div class="grandson" id="grandson">
CSS | width、height中auto与100%与固定值有什么不同
热门推荐
Errorong的博客
07-08 2万+
由于多次在设置width及height处出错导致不显示，总结了一篇固定值与auto、100%的差别，前面举例对比部分有基础的同学可以略过直接看总结。总结：（1）width、height使用固定值是一定会显示的，但是除非是小型项目或是特殊情况，最好不要使用固定值。不利于响应式开发，当从移动端看页面就会非常不美观。（2）不设置width、height时默认为auto，当position不同时显示效果不...
CSS进阶（一）width & height
weixin_30642267的博客
10-11 149
禁用默认行为可以使拖动行为更加流畅，如a标签 块级元素不是指拥有display:block声明的元素 块级元素具有的换行特性，它们都可以使用clear来清除浮动带来的效果 display:inline-block实际上是两个容器，外在容器负责布局，内在容器负责大小 width深入 inline-block 浮动元素 绝对定位元素都有智能的包裹性 首选最小宽度 width设置为0时，图...
size(800, 600); background(200); boolean isFirstVersion = true; // 标记当前显示的版本 void setup() { surface.setTitle("鼠标点击切换表情"); } void draw() { background(200); // 灰色背景 int hairColor = color(200, 150, 80); // 黄棕色 int clothesColor = color(187, 255, 255); // 天蓝色衣服 if (isFirstVersion) { // 第一个版本的代码 fill(hairColor); noStroke(); ellipse(width/2, height/2 - 50, 200, 200); // 圆形头发 rectMode(CENTER); rect(width/2, height/2 + 50, 200, 200); // 长方形头发 // 绘制脸部 fill(255, 230, 210); // 肤色 ellipse(width/2, height/2, 150, 180); // 脸部椭圆 // 眼睛（保持不变） fill(255); // 眼白 ellipse(width/2 - 40, height/2 - 30, 25, 20); // 左眼白 ellipse(width/2 + 40, height/2 - 30, 25, 20); // 右眼白 fill(160, 80, 40); // 棕色虹膜 ellipse(width/2 - 40, height/2 - 30, 12, 10); // 左虹膜 ellipse(width/2 + 40, height/2 - 30, 12, 10); // 右虹膜 fill(0); // 黑色瞳孔 ellipse(width/2 - 40, height/2 - 30, 8, 8); // 左瞳孔 ellipse(width/2 + 40, height/2 - 30, 8, 8); // 右瞳孔 // 眉毛 strokeWeight(2); line(width/2 - 50, height/2 - 50, width/2 - 30, height/2 - 40); // 左眉 line(width/2 + 30, height/2 - 50, width/2 + 50, height/2 - 40); // 右眉 noStroke(); // 鼻子 fill(180, 140, 120); // 浅棕色 triangle( width/2, height/2 - 10, // 鼻尖Y坐标从-20改为-10（下移10像素） width/2 - 10, height/2, width/2 + 10, height/2 ); // 嘴巴（椭圆上半圆） fill(255, 180, 180); // 淡粉色 ellipseMode(CENTER); arc(width/2, height/2 + 20, 60, 30, 0, PI); // 上半圆（0到PI弧度） // 眉毛（黑色椭圆下半圆） fill(0); // 黑色 ellipseMode(CENTER); // 左眉毛：椭圆下半圆 arc(width/2 - 40, height/2 - 45, 30, 15, PI, TWO_PI); // 中心在左眼上方 // 右眉毛：椭圆下半圆 arc(width/2 + 40, height/2 - 45, 30, 15, PI, TWO_PI); // 对称位置 // 绘制衣服 fill(187,255,255); noStroke(); rectMode(CORNER); rect(width/2 - 60, height/2 + 80, 120, 150); // 衣服 } else { // 第二个版本的代码 // 绘制头发 fill(hairColor); noStroke(); ellipse(width/2, height/2 - 50, 200, 200); rectMode(CENTER); rect(width/2, height/2 + 50, 200, 200); // 绘制脸部 fill(255, 230, 210); ellipse(width/2, height/2, 150, 180); // 眼睛（增大黑色瞳孔） fill(255); // 眼白 ellipse(width/2 - 40, height/2 - 30, 30, 25); // 左眼白 ellipse(width/2 + 40, height/2 - 30, 30, 25); // 右眼白 fill(160, 80, 40); // 棕色虹膜 ellipse(width/2 - 40, height/2 - 30, 20, 18); ellipse(width/2 + 40, height/2 - 30, 20, 18); fill(0); // 黑色瞳孔 ellipse(width/2 - 40, height/2 - 30, 15, 15); ellipse(width/2 + 40, height/2 - 30, 15, 15); // 眉毛（保持不变） strokeWeight(2); line(width/2 - 50, height/2 - 50, width/2 - 30, height/2 - 40); line(width/2 + 30, height/2 - 50, width/2 + 50, height/2 - 40); noStroke(); // 鼻子 fill(180, 140, 120); triangle( width/2, height/2 - 10, width/2 - 10, height/2, width/2 + 10, height/2 ); // 嘴巴（椭圆） fill(255, 180, 180); ellipseMode(CENTER); ellipse(width/2, height/2 + 25, 60, 40); // 衣服 fill(clothesColor); rectMode(CORNER); rect(width/2 - 60, height/2 + 80, 120, 150); // 眉毛（黑色椭圆下半圆，微微抬起） fill(0); ellipseMode(CENTER); arc(width/2 - 40, height/2 - 50, 40, 12, PI, TWO_PI); arc(width/2 + 40, height/2 - 50, 40, 12, PI, TWO_PI); } } void mousePressed() { isFirstVersion =!isFirstVersion; } size(800, 600); background(200); // 灰色背景 int hairColor = color(200, 150, 80); // 黄棕色 // 绘制头发 fill(hairColor); noStroke(); ellipse(width/2, height/2 - 50, 200, 200); // 圆形头发 rectMode(CENTER); rect(width/2, height/2 + 50, 200, 200); // 长方形头发 // 绘制脸部 fill(255, 230, 210); // 肤色 ellipse(width/2, height/2, 150, 180); // 脸部椭圆 // ====================== // 眼睛（保持不变） // ====================== fill(255); // 眼白 ellipse(width/2 - 40, height/2 - 30, 25, 20); // 左眼白 ellipse(width/2 + 40, height/2 - 30, 25, 20); // 右眼白 fill(160, 80, 40); // 棕色虹膜 ellipse(width/2 - 40, height/2 - 30, 12, 10); // 左虹膜 ellipse(width/2 + 40, height/2 - 30, 12, 10); // 右虹膜 fill(0); // 黑色瞳孔 ellipse(width/2 - 40, height/2 - 30, 8, 8); // 左瞳孔 ellipse(width/2 + 40, height/2 - 30, 8, 8); // 右瞳孔 // 眉毛 strokeWeight(2); line(width/2 - 50, height/2 - 50, width/2 - 30, height/2 - 40); // 左眉 line(width/2 + 30, height/2 - 50, width/2 + 50, height/2 - 40); // 右眉 noStroke(); // ====================== fill(180, 140, 120); // 浅棕色 triangle( width/2, height/2 - 10, // 鼻尖Y坐标从-20改为-10（下移10像素） width/2 - 10, height/2, width/2 + 10, height/2 ); // ====================== // 嘴巴（椭圆上半圆） // ====================== fill(255, 180, 180); // 淡粉色 ellipseMode(CENTER); arc(width/2, height/2 + 20, 60, 30, 0, PI); // 上半圆（0到PI弧度） // ====================== // 眉毛（黑色椭圆下半圆） // ====================== fill(0); // 黑色 ellipseMode(CENTER); // 左眉毛：椭圆下半圆 arc(width/2 - 40, height/2 - 45, 30, 15, PI, TWO_PI); // 中心在左眼上方，宽30，高15 // 右眉毛：椭圆下半圆 arc(width/2 + 40, height/2 - 45, 30, 15, PI, TWO_PI); // 对称位置 // ====================== // 绘制衣服（覆盖部分脸部） // ====================== fill(187,255,255); noStroke(); rectMode(CORNER); rect( width/2 - 60, // 左边界：不变 height/2 + 80, // 上边界：从+60改为+80，向下移动20像素 120, // 宽度：120像素（比脸部窄） 150 // 高度：150像素 ); 当鼠标点击时，让这两个表情切换 帮我生成一段processing能用的代码
最新发布
06-02
比如，脸的位置在(width/2,height/2)，眼睛在左右两侧，嘴巴的位置在脸的下方。使用ellipse画脸和眼睛，用arc画嘴巴，根据状态改变arc的起始和结束角度。另外，颜色处理可能需要填充颜色，比如脸是黄色，眼睛是黑色...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值