padding-使用必记
前言
说起了padding可谓是盒子模型中最常用的一个属性,你真的了解padding吗?那我请问您设置padding会影响盒子的宽度与高度吗?也许好多人会回答padding会影响到盒子的宽度与高度。在我看来,padding是不会影响盒子宽度与高度,padding会影响盒子宽度与高度的。前提是:
1、padding值暴走,一定会影响尺寸
2、width非auto,padding影响尺寸
3、width为auto 或者box-sizing为border-box,同时padding没有暴走,不影响尺寸
------来源于--张鑫旭笔记-----
一、padding值暴走,一定会影响尺寸
接下来我们来看一看
/**css代码*/
.padd{
width: 30px;
height: 30px;
margin: 0 auto;
padding: 60px;
background-color: red;
}
<!--
作者:java-script@qq.com
时间:2017-10-26
描述:html代码
-->
<div class="padd"> </div>
效果图:
没有padding值时候。
padding暴走
二、 width非auto,padding影响尺寸
定宽度的div,width不是auto则padding影响尺寸。
/**css代码*/
.padd{
width: 30px;
height: 30px;
margin: 0 auto;
padding: 10px;
background-color: red;
}
<!--
作者:java-script@qq.com
时间:2017-10-26
描述:html代码
-->
<div class="padd"> </div>
如图:
宽度为30px高度为30px,padding为10实际尺寸则为50px*50px
三、width为auto 或者box-sizing为border-box,同时padding没有暴走,不影响尺寸
先看看width为auto的时候。
/**css代码*/
html,body{
padding: 0;
margin: 0;
}
.contents{
margin: 0 auto;
width: 400px;
height: 300px;
background-color: #4B546C;
}
.body{
padding: 100px;
height: 300px;
background-color: #717FA5;
}
<!--
作者:java-script@qq.com
时间:2017-10-26
描述:html代码
-->
<div class="contents">
<div class="body">
小小坤--padding-使用必记
</div>
</div>
如图:
没有设置padding值
设置padding值
如果div父元素没有设置宽度高度,div设置padding值,width:auto,则不会影响尺寸。如果div父元素设置固定宽度高度,div设置padding则,父元素会受到高度影响。由于div没有设置宽度高度,它的宽度与父元素是相同的,高度也如此。
设置div的css box-sizing为border-box,是不会影响实际尺寸。如图
总结
通过上边的案例得到 padding值影响尺寸的前提是,宽度,与padding暴走与box-sizing为border-box三要素。只要记住了上边三要素。麻麻再也不要担心padding值引起宽度改变啦!!!
padding-使用必记的更多相关文章
- Delpher 必记-delphi环境安装
//Delpher 必记 环境: 安装包: 1.所有第三方控件包放在没有中文名的路径:如F:\DComp 安装包放在对应的版本的文件夹里面(实际中没有分类),然后看安装包的引用路径和输出路径,都要设定 ...
- Python字符串必记函数
Python字符串函数数不胜数,想要记完所有几乎不可能,下列几个是极为重要的一些函数,属于必记函数. 一.join 功能: 将字符串.元组.列表中的元素以指定的字符(分隔符)连接生成一个新的字符串 语 ...
- JavaScript中必记英语单词及含义
reflow[ri'flo]:回流,重构(通过css改变页面的结构,比如一行元素,其中一个元素的高改变了,那么其他元素的位置也都会改变) repaint['ripent]:重绘(只改变页面的样式,比如 ...
- Delphi基础必记-快捷键
快捷键: F12 代码窗口/窗体之间切换Ctrl + Shift + F 查找文件 Ctrl + Shift + G 为接口加入新的GUIDF4 运行到光标位置 F5 设置/取消断点 或用光标点击F7 ...
- Java IO流的回顾与梳理(必记必会必写)
- Java 集合框架必记框架图
- 【Python全栈-jQuery】jQuery基础知识
前端学习之jQuery 一. jQuery是什么? <1> jQuery由美国人John Resig创建,至今已吸引了来自世界各地的众多 javascript高手加入其team. < ...
- WebStorm
1,简介 WebStorm 10是一款强大的HTML5编辑工具,是 JetBrains 推出的一款商业的 JavaScript 开发工具.功能强大的前端专用IDE,拥有即时编辑(chrome).自动完 ...
- webstorm 常用快捷键
webstorm应该是目前最强的js编辑器了,结合sublime text可以很效率的开发项目.今天整理了一些webstorm比较实用的快捷键: Ctrl+/ 或 Ctrl+Shift+/ 注释(// ...
随机推荐
- java数据库编程之高级查询
第三章:高级查询(-) 3.1:修改表 3.1.1:修改表 语法: Alter table <旧表名> rename [ TO] <新表名>; 例子:Alter table ` ...
- Python实战之实现简单的登陆系统-作业
#!usr/bin/env Python3 # -*-coding:utf-8-*- #编写登陆接口 #输入用户名密码 #认证成功后显示欢迎信息 #输错三次后锁定 __author__="W ...
- webpack——devtool里的7种SourceMap模式
我们先来看看文档对这 7 种模式的解释: 模式 解释 eval 每个module会封装到 eval 里包裹起来执行,并且会在末尾追加注释 //@ sourceURL. source-map 生成一个S ...
- M-移动端的webapp页面布局教程和webapp实战分析
http://www.25xt.com/html5css3/8092.html 响应式设计 1 媒体查询 适用于不同固定宽度设计 媒体类型 : screen 屏幕 print 打印机 handheld ...
- hiveQL去重
去重: 以id进行分组,然后取出每组的第一个 ; 以id进行分组,按照create_time降序排序后,然后取出每组的第一个 ; 将去重后的数据重新存储 ; 去重之后与其他表join算匹配数 sele ...
- mac 环境下 Quantlib 使用Swig 转换到java
一.Mac安装boost方法:http://blog.csdn.net/xujiezhige/article/details/8230493 二.Swig,这里使用sudo install swig ...
- 【特效】hover效果之十字动画
效果预览:http://www.gbtags.com/gb/rtreplayerpreview-standalone/3101.htm html: <div class="wrap&q ...
- Prometheus 到底 NB 在哪里?- 每天5分钟玩转 Docker 容器技术(84)
本节讨论 Prometheus 的核心,多维数据模型.我们先来看一个例子. 比如要监控容器 webapp1 的内存使用情况,最传统和典型的方法是定义一个指标 container_memory_usag ...
- 容器与Docker简介(三)Docker相关术语——微软微服务电子书翻译系列
本节列出了在更加深入Docker之前应该熟悉的术语和定义. 有关详细的定义,请参阅Docker提供的术语表. 容器镜像(Container image):具有创建容器所需要的所有依赖和信息的包. 镜像 ...
- HTML form表单回车触发提交
<script type="text/javascript"> function submitByEnter() { if(event.key ...