搞定盒子模型

最新推荐文章于 2024-04-25 17:14:17 发布
最新推荐文章于 2024-04-25 17:14:17 发布
阅读量73 收藏
点赞数
分类专栏： 前端 文章标签： html css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36579455/article/details/115457004
版权

什么是盒子模型？

包含了元素内容（content）、内边距（padding）、边框（border）、外边距（margin）几个要素。

标准模型和怪异（IE）模型

CSS3新增属性box-sizing，可以设置模型类型

  • content-box， 则是标准模型；
  • border-box，则是IE模型（怪异模型）

两者区别
唯一的区别就是宽度和高度计算不同，

  • IE模型，它的元素宽度width=content + 2 padding + 2 border， 高度计算相同
  • 标注模型， 它的元素宽度width=content 高度计算相同
    在这里插入图片描述
不cong明的亚子
关注
专栏目录
前端css中盒子模型的各种属性
小蜗牛764号的博客
04-28 1203
本文讲解盒子模型的各种属性，大多数例子没有具体设置html的所有内容属性，只是针对某部分如何设值，或某个属性有什么参数，来进行一行代码的解释说明。聪明的读者肯定会自己创建个div盒子模型，然后自己设置好自己想调整的参数，创建符合自己的盒子模型。其实盒子模型还有关于布局的内容，本文没有写。因为布局可能涉及到弹性盒子模型flex，则笔者决定吧布局的内容放到弹性盒子模型中讲。部分内容可能还不够详细，如背景的样式的属性，多背景的内容本文便没有写等。本文主要是了解盒子模型的属性都有啥，常用属性的罗列一遍。
盒子模型大详解
rbh200812的博客
08-03 2336
盒子模型一文搞定！
CSS 盒子模型
鑫宇的博客
03-18 165
盒模型 1.内容区（content） 元素中的所有的子元素和文本内容都在内容区中排列 ,内容区的大小由width 和 height两个属性来设置: width 设置内容区的宽度 height设置内容区的高度 2. 边框（border） 边框属于盒子边缘，边框里边属于盒子内部，出了边框都是盒子的外部,边框的大小会影响到整个盒子的大小, 要设置边框，需要至少设置三个样式： ①边框的宽度 border-width 说明：
CSS盒子模型居中方法，从基础到源码统统帮你搞定
m0_60228930的博客
07-21 205
CSS 篇 link 与 @import 的区别 link 是 HTML 方式， @import 是CSS方式 link 最大限度支持并行下载， @import 过多嵌套导致串行下载，出现 FOUC (文档样式短暂失效) link 可以通过 rel="alternate stylesheet" 指定候选样式 浏览器对 link 支持早于 @import ，可以使用 @import 对老浏览器隐藏样式 @import 必须在样式规则之前，可以在css文件中引用其他文件 总体来说： link 优于 @impo
盒子模型总结
韩爽的博客
07-10 373
对比标准盒子模型中: 定义的width, 只包含content部分的宽度, 如果增加盒子的padding和border, 会增加盒子所占的整体宽度ie盒子模型中: 定义的width, 是包含content的跨度, 还有左右两侧的padding还有border兼容处理<!DOCTYPE html> <!--[if IE 8 ]> <html class="ie8" la...
Javaweb-CSS盒子模型
qq_45739810的博客
04-17 143
什么是盒子模型呢，举个栗子： 假设你写了俩正方形，一大一小，像酱紫 div { boder: 1px solid #bbffaa; } .div1 { width: 100px; height: 100px; } .div2 { width: 200px; height: 200px; } <d
php盒子模型是什么格式,CSS_css盒子模型图解，从上图可以看到标准 W3C 盒子 - phpStudy...
weixin_39724362的博客
03-29 72
css盒子模型图解从上图可以看到标准 W3C 盒子模型的范围包括 margin、border、padding、content，并且 content 部分不包含其他部分。从上图可以看到 IE 盒子模型的范围也包括 margin、border、padding、content，和标准 W3C 盒子模型不同的是：IE 盒子模型的 content 部分包含了 border 和 pading。例：一个盒子的 ...
css盒子模型基础知识
weixin_61111233的博客
04-13 345
一. CSS的发展简史 　　网页为什么要用div布局?CSS为什么会有盒模型?为什么会有CSS代码?为什么会有网页?为什么会有坑爹的多媒体设计?... ... 　　想知道为什么，这就得了解一点网页的发展历史了。下面请听我娓(zhuang)娓(zhuang)道(bi)来(xian)。
iOS转前端之盒子模型以及居中问题
kidd风的博客
07-07 1674
OK。第三篇来了，今天来聊聊CSS布局中的盒子模型和居中问题。好了，直接开始吧~ 前面介绍了一些HTML和CSS的基础知识，今天来说说CSS中的盒子模型和布局居中问题，这都是平时开发中经常遇到的问题。 盒子模型 ---网页上的每一个标签都是一个盒子，每个盒子都有四个属性。 内容（content） 盒子里装的东西，网页中通常是指文字和图片。
盒子模型常用到的样式有哪些？背景样式background怎么设置，绝对定位与相对定位的区别
weixin_45788388的博客
04-20 985
盒子模型常用到的样式有哪些？在布局样式中常常需要注意的小细节你发现没有？背景样式background应用详解，绝对定位与相对定位应用举例，在这里都能找到答案。
一文搞定机器学习中的“模型可解释性”
最新发布
风口IT猪的成长录
04-25 283
机器学习是最近许多科技进步的核心。随着计算机在围棋等游戏中击败专业人士，许多人开始询问，机器是否也能成为更好的司机，甚至更好的医生。如果⼀个机器学习模型运⾏良好，为什么我们仅仅信任该模型⽽忽略为什么做出特定的决策呢？诸如分类准确性之类的单⼀指标⽆法完整地描述⼤多数实际任务。当涉及到预测模型时，需要作出权衡：**你是只想知道预测是什么？**例如，客户流失的概率或某种药物对病⼈的疗效。**还是想知道为什么做出这样的预测？**这种情况下可能为了可解释性付出预测性能下降的代价。
利用js+css定位实现滑动盒子模型
weixin_46215920的博客
08-31 1115
利用js+css定位实现滑动盒子模型 今天要跟大家分享是利用js+css定位实现滑动盒子模型，其实这种滑动盒子模型是非常常见的，在很多网页中的banner或者是需要翻页的容器中经常会被用到。如下是最终的效果图： 如果你还没接触过这种有翻页动画的盒子，你也许会觉得很神奇，不知道该怎么实现。 下面再给你看一下真正的原理。 没错，其实就是这么简单！ 其实它就是先把所有的选项排成一排，然后放入一个容器中，接着就是利用css的相对定位，改变left的值，这样就实现了左右移动的效果，最后再把外层容器的overflo
html逻辑像素和实际像素,物理像素、逻辑像素、设备像素比、PPI、二倍图、css3盒子模型、布局视口、视觉视口、理想视口...
weixin_39721000的博客
06-04 735
1.1物理像素手机屏幕横向有828个点手机屏幕纵向上有1792个点同等大小屏幕下，点越多、图像显示越精细上面所说屏幕上一个个点就是物理像素(physical pixel)物理像素也叫设备像素(dp:device pixel)1.2逻辑像素pt: html css中的使用的单位像素px: 实际上指的是逻辑像素ptpx: photoshop测量中的但是实际上指的是物理像素, 物理像素即表示的是一个点,...
H5页面中判断微信小程序和微信浏览器环境
qq_36579455的博客
09-09 3417
方法一： 首先通过ua判断微信环境，然后使用getEnv判断是否为小程序（res.miniProgram为true）还是微信浏览器（res.miniProgram为false） wx.miniProgram.getEnv(res => res.miniProgram && ‘小程序环境’) 方法二： 嵌套在webview中，可以使用self !== top来判断是否为小程序 方法三： 当然前两种还是有缺陷，可以使用在h5链接上添加小程序的唯一标识（参数） 比如 previewer =
前端下载文件的两种方式post和get
qq_36579455的博客
02-01 2741
文章目录一、使用post二、使用get总结欢迎底下留言，一起学习进步！ 一、使用post // 生成excel export function GeneratExcel(data) { return request({ url: '/artifact/download_list/', method: 'post', data, responseType: 'blob' }) } GeneratExcel(this.deployList).then(res =&g
vue项目外挂配置文件（js 和 json）
qq_36579455的博客
11-02 2331
文章目录前言特别注意:一、外挂JS配置文件1. 创建config.js2. 导入config.js到index.html3. 使用config.js中的变量二、外挂json配置文件1.准备工作2. 配置vue.config.js3.读入数据总结 前言 前端开发过程中，会有很多关键性的、易改动的常量，例如：后台url、 第三方登录的url等其他第三方链接地址，它们都是很容易更改的常量。 要是我们把这些变量写死在代码中，所引发的问题就是，在线上，也就是生产环境中，当某个url发生了变化，那么前端就必须在代码中
Vue如何实现主题切换功能
qq_36579455的博客
09-24 2080
s fff
jquery打包到webpack项目
qq_36579455的博客
12-21 1384
入口文件 — index.js window.$ = require('jquery') webpack.config.js const webpack = require('webpack') module.exports = { ... plugins: [ ... new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery' }) ... ] ... } ...
姚云飞《彻底搞定C指针》修订版：深入解析与实践指南
《彻底搞定C指针》是由姚云飞先生撰写的权威教程，专为C/C++编程者设计，尤其针对对C指针概念困惑的初学者和有经验但仍需提升的开发者。该书在互联网上广受欢迎，因其深入浅出地讲解了C指针的原理、机制以及实践中的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

不cong明的亚子

鼓励和支持，是我每滴汗水的见证

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值