CSS基础-7 盒子模型大小
在盒子模型当中,有些元素是影响盒子大小的。
首先border就会影响盒子的大小。
其次padding也会影响盒子的大小。
例子:
.one {
width:100px;
height:100px;
background:pink;
}
我们设置了一个盒子,大小宽和高都为100px;
然后我们增加以下代码
padding:0px 10px;
border:1px solid blue;
当我们增加了内边距和边框以后,盒子本身宽度就变成了122px。
我们以宽度为例
盒子最后的大小=我们设置的盒子大小+左右的内边距+所有边框
为了不影响我们最后盒子的大小(显示效果)我们只能在原来设置的盒子大小上减去内边距和边框的大小。结果我们设置的盒子大小就变成了
.one {
width:78px;
height:100px;
background:pink;
}
虽然这样在显示上看起来没有什么变化
但是如果我们设置的盒子大小内部有内容的话肯定会有影响。
例子如下:
现在我们正常的盒子大小如下
.one {
width:100px;
height:100px;
background:pink;
}
<div class="one">
我爱北京天安
</div>
效果如下图:
文字正好和div的宽度一致
按照我们刚才的盒子大小的说法,我们增加了padding,
.one {
width:80px;
height:100px;
background:pink;
padding:0px 10px;
}
为了不影响最后的显示效果,我们在原来的盒子大小上减去内边距。
.one {
width:80px;
height:100px;
background:pink;
}
<div class="one">
我爱北京天安
</div>
效果图如下:
虽然盒子大小没有变,但是里边的内容却发生了变化。
最新文章
- 自定义JsonResult解决 序列化类型 System.Data.Entity.DynamicProxies 的对象时检测到循环引用
- JS获取屏幕,浏览器,网页高度宽度
- Scrum 的相关概念
- Python 时间 日期常见操作
- 简直喝血!H.265要被专利费活活玩死
- PySide 简易教程<;三>;-------动手写起来
- Linux的cat、more、less的区别
- Linux 系统之Systemd
- 445port入侵详细解释
- Vmware Tools is currently being installed on your system(转)
- 连接SQL SERVER数据库实例出错
- BBS论坛(三十二)
- TortoiseGit安装使用简单教程
- Mac在Finder中显示隐藏文件
- git版本管理规范
- vscode + gradle 创建 java 项目 - java language server无法启动
- trunc()用法和add_months()
- bootstrap modal插件弹出窗口如何限制最大高度,并且在内容过多时可以滚动显示
- C# 获取当前IIS请求地址
- Druid.io SQL乱码问题
热门文章
- ES安装简记
- 【Matlab】abs不支持复整数
- 基于Web的质量和测试度量指标
- Log4j 被曝核弹级漏洞,开发者炸锅了!
- JavaXML解析的四种方法(连载)
- pipeline配置java项目
- 报表(Project)
- CF1579A Casimir&#39;s String Solitaire 题解
- java 编程基础 反射方式获取泛型的类型Fileld.getGenericType() 或Method.getGenericParameterTypes(); (ParameterizedType) ;getActualTypeArguments()
- SpringBoot整合quartz框架启动定时任务报错:the given trigger will never fire.