首页
技术博客
PHP教程
数据库技术
前端开发
HTML5
Nginx
php论坛
新用户注册
|
会员登录
PHP教程
技术博客
编程问答
PNG素材
编程语言
前端技术
Android
PHP教程
HTML5教程
数据库
Linux技术
Nginx技术
PHP安全
WebSerer
职场攻略
JavaScript
开放平台
业界资讯
大话程序猿
登录
极速注册
取消
热门标签 | HotTags
chart
npm
jq
listview
layout
view
cookies
label
scroll
vue.js
requirejs
svg
checkbox
js
hover
overflow
textview
yarn
base64
react
console
上传
node.js
firefox
webkit
chart.js
scheme
dom
jquery
hybrid
build
icons
微信开发
css
json
iframe
dialog
正则
html
html5
firebug
v8
postman
css3
charts
javascript
vue
button
focus
bootstrap
chrome
当前位置:
开发笔记
>
前端
> 正文
CSS入门教程:计算CSS盒模型宽和高
作者:gfhhhgh_130 | 来源:互联网 | 2023-06-06 09:49
出处:当我们布局一个网页的时候,经常会遇到这样的一种情况,那就是最终网页成型的宽度或是高度会超出我们预先的计算,其实就就是所谓的CSS的盒模型造成的。#test{margin:10px;padding:10px;width:100px;height:100px
出处:当我们布局一个网页的时候,经常会遇到这样的一种情况,那就是最终网页成型的宽度或是高度会超出我们预先的计算,其实就就是所谓的CSS的盒模型造成的。
#test{margin:10px;padding:10px;width:100px;height:100px;}
如上一段的代码,很多时候我们会把它所占的位置计算成width:120px,height:120px,因为在正常的理解下,padding是内边距,应该是包括在width里面的,而margin是外边距,所以width=margin-left margin-right width,但是浏览器对于CSS盒模型的解释却并非如此,所以最终我们会发现布局出来的网页宽度与高度都会超出我们预期的计算,最后造成显示上的错位。
其实不然,对于test所占的位置的真正计算应该是width=margin-left margin-right padding-left padding-right width,也就是宽度真正所占的大小应该是内边距 外边距 宽度本身,也就是说test真正的大小应该是140px才对。高度的计算与宽度的计算是一样的。
而如果给test加上边框的话,这个宽度与高度的算法还应该加上边框的大小。
#test{margin:10px;padding:10px;border:5px;width:100px;height:100px;}
这里的test的宽度就应该是外边框 内边框 边框 宽度本身,所以test的width是 150px。
如下图所示,width与height真正所占的位置并不是它本身的那一小块,而应该是一直到最外面深蓝色的那个层为止。
css
算法
写下你的评论吧 !
吐个槽吧,看都看了
会员登录
|
用户注册
推荐阅读
jquery
CSS3选择器的使用方法详解,提高Web开发效率和精准度
本文详细介绍了CSS3新增的选择器方法,包括属性选择器的使用。通过CSS3选择器,可以提高Web开发的效率和精准度,使得查找元素更加方便和快捷。同时,本文还对属性选择器的各种用法进行了详细解释,并给出了相应的代码示例。通过学习本文,读者可以更好地掌握CSS3选择器的使用方法,提升自己的Web开发能力。 ...
[详细]
蜡笔小新 2023-12-14 14:37:52
jquery
JavaScript疑难杂症系列相称性推断的知识点详解
本文详细解析了JavaScript中相称性推断的知识点,包括严厉相称和宽松相称的区别,以及范例转换的规则。针对不同类型的范例值,如差别范例值、统一类的原始范例值和统一类的复合范例值,都给出了具体的比较方法。对于宽松相称的情况,也解释了原始范例值和对象之间的比较规则。通过本文的学习,读者可以更好地理解JavaScript中相称性推断的概念和应用。 ...
[详细]
蜡笔小新 2023-12-14 19:12:10
js
asp.net微信公众平台开发目录汇总陆续更新的相关内容
本文内容为asp.net微信公众平台开发的目录汇总,包括数据库设计、多层架构框架搭建和入口实现、微信消息封装及反射赋值、关注事件、用户记录、回复文本消息、图文消息、服务搭建(接入)、自定义菜单等。同时提供了示例代码和相关的后台管理功能。内容涵盖了多个方面,适合综合运用。 ...
[详细]
蜡笔小新 2023-12-14 22:40:22
label
阿里Treebased Deep Match(TDM) 学习笔记及技术发展回顾
本文介绍了阿里Treebased Deep Match(TDM)的学习笔记,同时回顾了工业界技术发展的几代演进。从基于统计的启发式规则方法到基于内积模型的向量检索方法,再到引入复杂深度学习模型的下一代匹配技术。文章详细解释了基于统计的启发式规则方法和基于内积模型的向量检索方法的原理和应用,并介绍了TDM的背景和优势。最后,文章提到了向量距离和基于向量聚类的索引结构对于加速匹配效率的作用。本文对于理解TDM的学习过程和了解匹配技术的发展具有重要意义。 ...
[详细]
蜡笔小新 2023-12-14 19:24:58
label
每天收获一点点Hadoop概述
一、Hadoop来历Hadoop的思想来源于Google在做搜索引擎的时候出现一个很大的问题就是这么多网页我如何才能以最快的速度来搜索到,由于这个问题Google发明 ...
[详细]
蜡笔小新 2023-12-14 18:58:01
console
JS进修笔记——闭包的运转机制和作用域
本文介绍了闭包的定义和运转机制,重点解释了闭包如何能够接触外部函数的作用域中的变量。通过词法作用域的查找规则,闭包可以访问外部函数的作用域。同时还提到了闭包的作用和影响。 ...
[详细]
蜡笔小新 2023-12-14 18:45:00
console
Linux服务器密码过期策略、登录次数限制、私钥登录等配置方法
本文介绍了在Linux服务器上进行密码过期策略、登录次数限制、私钥登录等配置的方法。通过修改配置文件中的参数,可以设置密码的有效期、最小间隔时间、最小长度,并在密码过期前进行提示。同时还介绍了如何进行公钥登录和修改默认账户用户名的操作。详细步骤和注意事项可参考本文内容。 ...
[详细]
蜡笔小新 2023-12-14 17:57:01
console
学习SLAM的女生,很酷
本文介绍了学习SLAM的女生的故事,她们选择SLAM作为研究方向,面临各种学习挑战,但坚持不懈,最终获得成功。文章鼓励未来想走科研道路的女生勇敢追求自己的梦想,同时提到了一位正在英国攻读硕士学位的女生与SLAM结缘的经历。 ...
[详细]
蜡笔小新 2023-12-14 17:55:18
js
【机器学习】生成式对抗网络模型综述
生成式对抗网络模型综述摘要生成式对抗网络模型(GAN)是基于深度学习的一种强大的生成模型,可以应用于计算机视觉、自然语言处理、半监督学习等重要领域。生成式对抗网络 ...
[详细]
蜡笔小新 2023-12-14 17:51:18
overflow
Android开发笔记:使用Picasso加载网络图片等比例缩放
在Android开发中,使用Picasso库可以实现对网络图片的等比例缩放。本文介绍了使用Picasso库进行图片缩放的方法,并提供了具体的代码实现。通过获取图片的宽高,计算目标宽度和高度,并创建新图实现等比例缩放。 ...
[详细]
蜡笔小新 2023-12-14 17:34:00
overflow
云原生边缘计算之KubeEdge简介及功能特点
本文介绍了云原生边缘计算中的KubeEdge系统,该系统是一个开源系统,用于将容器化应用程序编排功能扩展到Edge的主机。它基于Kubernetes构建,并为网络应用程序提供基础架构支持。同时,KubeEdge具有离线模式、基于Kubernetes的节点、群集、应用程序和设备管理、资源优化等特点。此外,KubeEdge还支持跨平台工作,在私有、公共和混合云中都可以运行。同时,KubeEdge还提供数据管理和数据分析管道引擎的支持。最后,本文还介绍了KubeEdge系统生成证书的方法。 ...
[详细]
蜡笔小新 2023-12-14 16:49:01
overflow
大数据就业前景及人才需求
近年来,大数据成为互联网世界的新宠儿,被列入阿里巴巴、谷歌等公司的战略规划中,也在政府报告中频繁提及。据《大数据人才报告》显示,目前全国大数据人才仅46万,未来3-5年将出现高达150万的人才缺口。根据领英报告,数据剖析人才供应指数最低,且跳槽速度最快。中国商业结合会数据剖析专业委员会统计显示,未来中国基础性数据剖析人才缺口将高达1400万。目前BAT企业中,60%以上的招聘职位都是针对大数据人才的。 ...
[详细]
蜡笔小新 2023-12-14 16:25:20
react
Android中高级面试必知必会,积累总结
本文介绍了Android中高级面试的必知必会内容,并总结了相关经验。文章指出,如今的Android市场对开发人员的要求更高,需要更专业的人才。同时,文章还给出了针对Android岗位的职责和要求,并提供了简历突出的建议。 ...
[详细]
蜡笔小新 2023-12-14 14:53:02
react
Java工具类库Hutool介绍及功能概述
本文介绍了Java工具类库Hutool,该工具包封装了对文件、流、加密解密、转码、正则、线程、XML等JDK方法的封装,并提供了各种Util工具类。同时,还介绍了Hutool的组件,包括动态代理、布隆过滤、缓存、定时任务等功能。该工具包可以简化Java代码,提高开发效率。 ...
[详细]
蜡笔小新 2023-12-14 14:29:36
console
C#生成随机数的三种方法及其问题分析
本文介绍了C#中生成随机数的三种方法,并分析了其中存在的问题。首先介绍了使用Random类生成随机数的默认方法,但在高并发情况下可能会出现重复的情况。接着通过循环生成了一系列随机数,进一步突显了这个问题。文章指出,随机数生成在任何编程语言中都是必备的功能,但Random类生成的随机数并不可靠。最后,提出了需要寻找其他可靠的随机数生成方法的建议。 ...
[详细]
蜡笔小新 2023-12-14 14:15:30
gfhhhgh_130
这个家伙很懒,什么也没留下!
Tags | 热门标签
chart
npm
jq
listview
layout
view
cookies
label
scroll
vue.js
requirejs
svg
checkbox
js
hover
overflow
textview
yarn
base64
react
console
上传
node.js
firefox
webkit
chart.js
scheme
dom
jquery
hybrid
RankList | 热门文章
1
从dubbo源码分析qosserver端口冲突问题
2
P4549 【模板】裴蜀定理
3
倒叙|降序_java怎么对数组中数据进行降序排序?
4
前端实现控制表格列的显示与隐藏以及拖拽列的顺序
5
对git分支如何应对紧急上线
6
vuecli3直接import umd规范的js报错,而通过npm安装则不会
7
什么是php标准库?
8
08Nginx日志切割脚本+定时任务自动切割日志
9
教你学日文
10
Stream流中flatMap的用法
11
simpleui 3.0 发布,以修改 bug 为主
12
mysql5.6 icp mrr bak_ICP、MRR、BKA等特性
13
声明chan时,设置大小的区别。
14
minikube 安装过程附带报错解决办法
15
【C语言】字符串常量与指针
PHP1.CN | 中国最专业的PHP中文社区 |
DevBox开发工具箱
|
json解析格式化
|
PHP资讯
|
PHP教程
|
数据库技术
|
服务器技术
|
前端开发技术
|
PHP框架
|
开发工具
|
在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved |
京公网安备 11010802041100号
|
京ICP备19059560号-4
| PHP1.CN 第一PHP社区 版权所有