这一次,彻底看懂 CSS 盒模型(图文并茂)_css盒模型鸡蛋图-程序员宅基地

技术标签: css  python  html+css+js  定位  js  html  

首先,我们来了解一下css盒模型的基本概念:

CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:边距,边框,填充,和实际内容。盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。 分别两种盒型标准盒模型IE盒模

盒子大小

盒子的宽度 = 内容宽度 + 左填充 + 右填充 + 左边框 + 右边框 + 左边距 + 右边距
盒子的高度 = 内容高度 + 上填充 + 下填充 + 上边框 + 下边框 + 上边距 + 下边距

标准盒模型和IE盒模型区别

  • 标准盒模型:content=content

  • IE盒模型:content = width+padding+border

css如何设置这两种模型

  • 通过css中的box-sizing属性
  • 标准盒模型 :content-box
  • IE盒模型 : border-box

JS如何获取盒模型对应的宽和高

  • node.style.height/width
这种方式只能取到dom元素内嵌样式的宽和高,通过外联样式link引入和在style标签中设置的样式这两者都是获取不到node的宽和高的
   <div style="width:100px;height:50px" id="agoni">agoni</div>
   
   document.getElementById("agoni").style.width ="200px";
1、只能操作行内样式;
2、只包括内容区,不包括border和padding部分(只有content);
3、返回值带单位,返回值的数据类型是string。
  • node.currentStyle.width/height(只有ie支持)
这种方式是获取渲染后的结果,但只在旧版本的IE浏览器中支持,该特性是非标准的,尽量不要在生产环境中使用它。style、内联、外联样式均支付;返回值带单位,返回值的数据类型是string;可惜只有IE支持。
  • window.getComputedStyle(node).width/height
window.getComputedStyle()方法返回一个对象
返回值带单位,返回值的数据类型是string。

  • node.getBoundingClientRect().width/height
1、返回元素的大小及其 只相对于可视去窗口。包含 边框(border)内边距(padding)以及CSS设置的 宽度(width)
2、返回值不带单位,返回值的数据类型是number。

  • node.offsetWidth/offsetHeight
1、包含元素的边框(border)、内边距(padding)、滚动条(scrollbar)(如果存在的话)、以及CSS设置的宽度(width)和高度(height)的值。
2、返回值不带单位,返回值的数据类型是number;
3、还有offsetHeight/Width、offsetLeft/Top
4、offset 的方向值需要考虑到父级,如果父级是定位元素,那么子元素的offset值相对于父元素,如果父元素不是定位元素,那么子元素的offset值相对于可视区窗口。
学如逆水行舟,不进则退
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_42429718/article/details/104448450

智能推荐

ASA与PIX的区别-程序员宅基地

文章浏览阅读68次。很多年来,Cisco PIX一直都是Cisco确定的防火墙。但是在2005年5月,Cisco推出了一个新的产品——适应性安全产品(ASA,Adaptive Security Appliance)。不过,PIX还依旧可用。我已听到很多人在多次询问这两个产品线之间的差异到底是什么。让我们来看一看。Cisco PIX是什么?Cisco PIX是一种专用的硬件防火墙。所有版本..._pix asa区别

TensorFlow conv2d原理及实践-程序员宅基地

文章浏览阅读235次。tf.nn.conv2d(input, filter, strides, padding, use_cudnn_on_gpu=None, data_format=None, name=None)官方教程说明:给定四维的input和filtertensor,计算一个二维卷积Args:input: ATensor. type必须是以下几种类型之一:half,float32,..._conv2d原理 l

linux服务器初始化(防火墙、内核优化、时间同步、打开文件数)-程序员宅基地

文章浏览阅读83次。#!/bin/bashread -p 'enter the network segment for visiting the server:' ips# 关闭firewalld和selinuxsystemctl stop firewalldsystemctl disable firewalldsed -i 's\SELINUX=enforcing\SEL..._服务器是不是没做打开文件数优化

solr7集群 springboot_springboot整合solr-程序员宅基地

文章浏览阅读116次。一、本文将solr安装在linux上。首先先安装好jdk和tomcat。配置环境:jdk8,tomcat8.5,solr7.2.1.。二、复制Solr文件夹中的一些文件到apache-tomcat下:1)将 solr 压缩包中 solr\server\solr-webapp\文件夹下有个webapp文件夹,将之复制到tomcat\webapps\目录下,文件夹名改成solr(任意) ;cp -R ..._springboot solr7

在java中已经规定数据类型是长整形为什么数字后面还要加一个"l"啊?前面不是有long吗?_java数字后面加l是什么意思-程序员宅基地

文章浏览阅读2.6k次,点赞2次,收藏5次。说到这就不得不谈java的内存体制,建议你好好研究下这个。example:long l1 = 10000000000L;实际上内存中l1只是一个long类型的变量,它存在于向stack(栈)中,数值并不在其中存放,它指向heap(堆)中另一块真正存放数值的内存,加L的目的就是为了让heap中也创建一块long类型所需要的内存,用来来放数值。所以说=前后两者其实是在不同的两块内存,只不过有..._java数字后面加l是什么意思

最完整的RocketMq部署程序,包括rocketmq-console部署和测试程序的介绍_rocketmq-console-test-程序员宅基地

文章浏览阅读4k次。文章目录1.RocketMq部署准备工作RocketMq程序的获取启动NameServer启动Broker查看log日志2.运维工具部署获取程序参数配置运行程序3.实际测试代码获取运行4.开始学习~1.RocketMq部署本文详细介绍了安装rocketMq 前后的方法和一些注意事项 ,设备为centos7,话不多说,begin。准备工作RocketMq程序的获取首先需要获取rocketM..._rocketmq-console-test

随便推点

20 个最重要的 DevOps 面试题-程序员宅基地

文章浏览阅读2.5k次。点击下方公众号「关注」和「星标」回复“1024”获取独家整理的学习资料!DevOps 代表开发和运营。这是一种新的软件开发形式,彻底改变了软件产品的开发和分发方式。DevOps方法论着眼于..._devops面试题

根据时间生成分配批次号-程序员宅基地

文章浏览阅读1.3k次。1 /** 2 * 根据当前时间生成分配批次号 3 * 4 * @return 5 */ 6 private String createBatchNo() { 7 // 批次号第一部分:时间 8 DateFormat dateFormat = new SimpleD..._java根据时间生成批注号

Nodejs之事件驱动+非阻塞io模型_了基于事件驱动和非阻塞 i/o 的模型-程序员宅基地

文章浏览阅读6.5k次,点赞2次,收藏8次。1什么是i/o? io input、output 输入输出,电脑的输入输出,例如音频录音表示声音输入、听音乐是声音的输出 网络上的传输全部是在传字符串,i/o在服务器上可以理解为读写操作。2什么是并发? 一个时间段中有几个程序都处于已启动运行到运行完毕之间。3异步i/o与事件驱动3.1什么是进程?进程是为运行当中的应用程序提供运行环境的一个运行当中的应用程序就会有一个进程与之相对应3_了基于事件驱动和非阻塞 i/o 的模型

tv端h5_H5在三端开发遇到的问题(TV/PC/MOBILE)-程序员宅基地

文章浏览阅读1.1k次。项目简介公司最近开发会员体系项目,前端利用H5技术嵌入三端开发页面,TV端原生技术是C++,PC端原生技术是JAVA。传值问题Javascript与安卓/IOS进行交互。原生把方法暴露给window。前端只需要下window对象调用方法,进行传值即可。notice:function(token,uuid){var pattern = new RegExp('iPhone|iPad', 'ig');..._电视端app可以用h5写吗

python下mqtt服务器的搭建_转 【MQTT】在Windows下搭建MQTT服务器-程序员宅基地

文章浏览阅读498次。MQTT简介MQ 遥测传输 (MQTT) 是轻量级基于代理的发布/订阅的消息传输协议,设计思想是开放、简单、轻量、易于实现。这些特点使它适用于受限环境。该协议的特点有:使用发布/订阅消息模式,提供一对多的消息发布,解除应用程序耦合。对负载内容屏蔽的消息传输。使用 TCP/IP 提供网络连接。小型传输,开销很小(固定长度的头部是 2 字节),协议交换最小化,以降低网络流量。使用 Last Will ..._python window环境搭建 mqtt服务端

win10安装python详细过程_win10怎么正确安装python-程序员宅基地

文章浏览阅读10w+次,点赞53次,收藏173次。关于python的安装一切语言皆为工具接下来咱们就开始吧一切语言皆为工具既然你决定安装它,那就已经告知自己要掌握这门工具,但是有一定你一定要铭记于心那就是:python 是个工具时刻想着如何用它解决你的问题【哪怕是一个简单的想法】接下来咱们就开始吧下载安装软件包登录官网 :https://www.python.org/downloads/release/python-373..._win10怎么正确安装python

推荐文章

热门文章

相关标签