• clientWidth：元素可见区域的宽度  clientWidth=padding+width-滚动条
  • scrollWidth：元素实际内容的宽度 scrollWidth=padding+width（元素实际的内容）
  • offsetWidth：元素可见区域的宽度+边框 offsetWidth=border+width+padding

代码设置

textarea{
    border: 5px solid red;
    width: 200px;
    height: 200px;
    padding: 5px;
}
在内容没有超出可视区域的时候
        clientWidth=5+200+5
        scrollWidth=5+200+5
        offsetWidth=5+5+200+5+5

在内容超出可视区域的时候
        clientWidth=5+200+5
        scrollWidth=5+实际宽度+5
        offsetWidth=5+5+200+5+5

在练习中遇见的问题

   没有在文档最上面加<!DOCTYPE html>

textarea被浏览器设置成默认属性  有box-sizing:border-box属性，宽高被固定  padding和border都被包含在width里了



												


											
关于clientWidth scrollWidth offsetWidth的理解的更多相关文章
	

    
								
  1. DOM元素尺寸和位置(clientwidth ,scrollwidth , offsetwidth.......)
		
    [1] slientWidth 和 sclientHeight slientWidth:获取的是可视宽度 slientHeight:获取的是可视高度 <html> <head> ...
    
		
    2. 
						
  2. JS 获取浏览器窗口大小clientWidth、offsetWidth、scrollWidth
		
    常用: JS 获取浏览器窗口大小   // 获取窗口宽度 if (windows.innerWidth) winWidth = windows.innerWidth; else if ((docume ...
    
		
    3. 
						
  3. 四种浏览器对 clientHeight、offsetHeight、scrollHeight、clientWidth、offsetWidth 和 scrollWidth 的解释差异
		
    网页可见区域宽:document.body.clientWidth 网页可见区域高:document.body.clientHeight 网页可见区域宽:document.body.offsetWid ...
    
		
    4. 
						
  4. scrollWidth,clientWidth与offsetWidth的区别
		
    scrollWidth  是对象的实际内容的宽,不包边线宽度,会随对象中内容的多少改变(内容多了可能会改变对象的实际宽度). clientWidth  是对象可见的宽度,不包滚动条等边线,会随窗口的显 ...
    
		
    5. 
						
  5. js中clientWidth, scrollWidth, innerWidth, outerWidth,offsetWidth的区别
		
    js中clientWidth, scrollWidth, innerWidth, outerWidth,offsetWidth的属性汇总,测试浏览器:ie7~ie11.chrome 和 firefox ...
    
		
    6. 
						
  6. offsetWidth clientWidth scrollWidth 的区别
		
    了解 offsetWidth clientWidth scrollWidth 的区别 最近需要清除区分开元素的width,height及相应的坐标等,当前这篇用来区分offsetWidth clien ...
    
		
    7. 
						
  7. 【clientX，offsetX，screenX】  【scrollWidth，clientWidth，offsetWidth】的区别
		
    一.深刻认识clientX,offsetX,screenX 概念(来源于网络): clientX 设置或获取鼠标指针位置相对于当前窗口的 x 坐标,其中客户区域不包括窗口自身的控件和滚动条. clie ...
    
		
    8. 
						
  8. clientWidth、offsetWidth等介绍
		
    网页可见区域宽:document.body.clientWidth网页可见区域高:document.body.clientHeight网页可见区域宽:document.body.offsetWidth ...
    
		
    9. 
						
  9. clientHeight & clientWidth & offsetHeight & offsetWidth & outerWidth & innerWidth & outerWidth & outerHeight
		
    clientHeight & clientWidth & offsetHeight & offsetWidth MDN https://developer.mozilla.or ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. silverlight中 Storyboard(动画)的使用，实现球的上下循环移动，左右移动，及旋转功能
			
    话说,总结应该是个收获的心情,可现在的自己似乎没感觉到哪个喜悦的心情,说明自己做得还不够好,现在还是把一些做好的东西总结下.“总结”是学习,工作中必须的,不能偷这个懒 o(╯□╰)o 实现上下循环移动 ...
    
			
    2. 
						
  2. Android线程之Looper
			
    之前已经为大家奉献了关于Handler和Message的使用,本篇我们来了解一下Handler内部的具体使用,本篇主要探讨Looper的在处理Handler的消息机制中起的重要作用,我们知道我们在子线 ...
    
			
    3. 
						
  3. iis https 客户端证书
			
    1.自建根证书 makecert -r -pe -n "CN=WebSSLTestRoot" -b 12/22/2013 -e 12/23/2024 -ss root -sr lo ...
    
			
    4. 
						
  4. vc++用ADO方式连接oracle问题
			
    今天装了个oracle客户端,准备写个访问远程oracle的程序.用的是vs2010,采用ADO的连接方法连接oracle,结果运行的时候总是报下面的错: 从提示可以看出是没有找到OraOLEDBup ...
    
			
    5. 
						
  5. annotation-config vs component-scan – Spring Core--转
			
    原文地址:http://techidiocy.com/annotation-config-vs-component-scan-spring-core/ <context:annotation-c ...
    
			
    6. 
						
  6. [转载]TFS与Project、Excel同步
			
    我们还可以使用Microsoft Excel和Microsoft Project来连接到TFS,方法如下: 通过Microsoft Excel连接到TFS,在安装了Team Explorer后,Mic ...
    
			
    7. 
						
  7. Ruby FFI 入门教程
			
    FFI是一个可以让用户使用Ruby调用C代码的gem.如果你需要执行一些系统底层调用,或者做一些高性能运算的话,FFI是一个很不错的选择. 1. 安装 执行gem install ffi即可.非常标准 ...
    
			
    8. 
						
  8. Django快速开发之投票系统
			
    https://docs.djangoproject.com/en/1.8/intro/tutorial01/ 参考官网文档,创建投票系统. ================ Windows  7/1 ...
    
			
    9. 
						
  9. Wee – 为现代 Web 开发打造的 CSS 脚手架
			
    Wee 包含许多开发人员在搭建响应的,互动的网站和应用程序时需要的组件.正如它的名字一样,Wee 是一个微小.移动优先的 CSS 复位框架.Wee 组织在一个简单的.可扩展的层次结构,拥有一致的样式和 ...
    
			
    10. 
						
  10. Elasticsearch聚合 之 DateRange日期范围聚合
			
    相比于range聚合,date range就是范围可以由时间来指定. 例如: { "aggs":{ "range":{ "date_range&quo ...
    
			
    11.