padding设置和清除
padding设置和清除
标签(空格分隔): padding
padding介绍:
padding:就是内边距的意思,它是边框到内容之间的距离;
另外padding的区域是有背景颜色的。并且背景颜色和内容的颜色一样。也就是说background-color这个属性将填充所有的border以内的区域;
如下代码;观察一下padding
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>认识padding</title>
<style type="text/css">
.box{
width:300px;
height:300px;
/*padding:20px;*/
/*background-color: red;*/
}
</style>
</head>
<body>
<div class="box">
内容内容内容内容内容内容内容内容内容内容
</div>
</body>
</html>
![image.png-221.5kB][1]
修改padding看看如下的代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>认识padding</title>
<style type="text/css">
.box{
width:300px;
height:300px;
padding:20px;
/*background-color: red;*/
}
</style>
</head>
<body>
<div class="box">
内容内容内容内容内容内容内容内容内容内容
</div>
</body>
</html>
![image.png-351.2kB][2]
3.background-color的背景区域:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>认识padding</title>
<style type="text/css">
.box{
width:300px;
height:300px;
padding:20px;
background-color: red;
}
</style>
</head>
<body>
<div class="box">
内容内容内容内容内容内容内容内容内容内容
</div>
</body>
</html>
![image.png-177.2kB][3]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>认识padding</title>
<style type="text/css">
.box{
width:300px;
height:300px;
padding:20px;
background-color: red;
border:1px solid yellow;
}
</style>
</head>
<body>
<div class="box">
内容内容内容内容内容内容内容内容内容内容
</div>
</body>
</html>
![image.png-282.4kB][4]
padding 的设置:
padding有四个方向,所有我们能分别的描述4个方向的padding,方法有两种:1、写小属性,2、写综合属性,用空格隔开;
1.小属性的写法:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>认识padding</title>
<style type="text/css">
.box{
width:300px;
height:300px;
/*padding:20px;*/
background-color: red;
/*border:1px solid yellow;*/
/*小属性*/
padding-top: 30px;
padding-right: 30px;
padding-bottom:30px;
padding-left: 30px;
}
</style>
</head>
<body>
<div class="box">
内容内容内容内容内容内容内容内容内容内容
</div>
</body>
</html>
![image.png-247.8kB][5]
2.写综合属性:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>认识padding</title>
<style type="text/css">
.box{
width:300px;
height:300px;
/*padding:20px;*/
background-color: red;
/*border:1px solid yellow;*/
/*!*小属性*!*/
/*padding-top: 30px;*/
/*padding-right: 30px;*/
/*padding-bottom:30px;*/
/*padding-left: 30px;*/
/*综合属性*/
padding:20px 30px 40px 50px;
}
</style>
</head>
<body>
<div class="box">
内容内容内容内容内容内容内容内容内容内容
</div>
</body>
</html>
![image.png-220.5kB][6]
通过如图可以知道,我们的设置方向是:上右下左;
如果我们设置三个值的时候:上,左右,下
如果我们设置两个值的时候:上下左右;
如果我们设置1个值的时候:全部就是4个方向都是一样的;
一些标签默认有padding
比如ul标签,有默认的padding-left值。如图:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>padding</title>
</head>
<body>
<ul>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
</ul>
</body>
</html>
![image.png-237.2kB][7]
那么我们一般在做站的时候,是要清除页面标签中默认的padding和margin。以便于我们更好的去调整元素的位置。我们现在初学可以使用通配符选择器;
*{
padding:0;
margin:0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>padding</title>
<style type="text/css">
*{
padding:0;
margin: 0;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
</ul>
</body>
</html>
![image.png-209.1kB][8]
But,这种方法效率不高。
所以我们要使用并集选择器来选中页面中应有的标签(不用背,因为有人已经给咱们写好了这些清除默认的样式表,搜索一下reset.css,就可以找到很多,大家可以直接使用)
[1]: http://static.zybuluo.com/wangcherry123/gnspvhg1ptkepih1u55zq7d4/image.png
[2]: http://static.zybuluo.com/wangcherry123/l0d4hqa24yc1aplxm6zqo6z0/image.png
[3]: http://static.zybuluo.com/wangcherry123/wcqtq47ax6ito2pwi6wieqhz/image.png
[4]: http://static.zybuluo.com/wangcherry123/s1jabz4323i5lidt8e44fi5q/image.png
[5]: http://static.zybuluo.com/wangcherry123/2krwx29bv6stmo95gmgh12m7/image.png
[6]: http://static.zybuluo.com/wangcherry123/sk3er1069bbaovqyyiy831iz/image.png
[7]: http://static.zybuluo.com/wangcherry123/odeif267s96w0s3h975etrqg/image.png
[8]: http://static.zybuluo.com/wangcherry123/5mmlny6kz6rnatt36fn2fsbv/image.png
padding设置和清除的更多相关文章
- 关于js中两种定时器的设置及清除(转载)
1.JS中的定时器有两种: window.setTimeout([function],[interval]) 设置一个定时器,并且设定了一个等待的时间[interval],当到达时间后,执行对应的方法 ...
- Linux 设置定时清除buff/cache的脚本
Linux 设置定时清除buff/cache的脚本 查看内存缓存状态 [root@heyong ~]# free -m total used free shared buff/cache availa ...
- 在IE8中使用padding设置select控件文字垂直居中
在火狐.苹果.谷歌.欧鹏等主流浏览器中,select下拉表单的文字能够垂直居中,如图: 而在ie8中,select下拉表单的文字基本就是靠底部显示,如图: 那么,如何使得ie8下的select文字垂直 ...
- 关于js中两种定时器的设置及清除
1.JS中的定时器有两种: window.setTimeout([function],[interval]) 设置一个定时器,并且设定了一个等待的时间[interval],当到达时间后,执行对应的方法 ...
- springboot项目:登录 登录aop拦截 使用Redis与cookie 进行设置获取清除操作
登录.登出: 第一步:在pom文件中引入依赖 <dependency> <groupId>org.springframework.boot</groupId> &l ...
- angularjs定时任务的设置与清除
人们似乎常常将AngularJS中 的$timeOut() $interval()函数看做是一个内置的.无须在意的函数.但是,如果你忘记了$timeOut()$interval()的回调函数将会造成 ...
- CSS浮动设置与清除
float:设置浮动 浮动会使元素脱离普通文档流,使元素向左或向右移动,其周围的元素也会重新排布,在布局中非常有用. html: <p>以下是图片的浮动设置:</p> < ...
- GPIO——端口位设置/清除寄存器BSRR,端口位清除寄存器BRR
端口位设置/复位寄存器BSRR: 注:如果同时设置了BSy和BRy的对应位,BSy位起作用. 位31:16 BRy: 清除端口x的位y (y = 0…15) 这些位只能写入并只能以字(16 ...
- Linux 内存缓存占用过大,Centos7设置定时清除buff/cache的脚本
Linux系统buff/cache 中缓存数据占用内存过高,定时清理buff/cache ,释放系统内存 root权限创建脚本文件: touch cleanCache.sh && vi ...
随机推荐
- Windows 10 RS4 无法完全关闭Hyper-V导致Virtual Box 虚拟机无法启动
https://www.jianshu.com/p/2e3429d45aea 起因 因为需要使用Virtual Box做一些工作,卸载了Windows Docker.按照经验,关闭了Hyper-V. ...
- 基于Servlet的Echarts例子(2018-12-26更新)
引子 ECharts是百度出品的,一个使用 JavaScript 实现的开源可视化库.程序员在Web页面上引入并稍作配置就能做出漂亮的数据图表. 本篇文章简单介绍一下如何在JSP中使用Echarts, ...
- python列表中的所有值转换为字符串,以及列表拼接成一个字符串
>>> ls1 = ['a', 1, 'b', 2] >>> ls2 = [str(i) for i in ls1] >>> ls2 ['a', ...
- Ubuntu 12.04 LTS 查看网关地址方法汇总
来源:http://blog.csdn.net/duyiwuer2009/article/details/26263855 1. ip route show $ ip route show defau ...
- DES加密算法—实现(C语言)
http://www.iteye.com/topic/478024 DES(Data Encrypt Standard数据库加密标准)是迄今为止使用最广泛的加密体制. 初学信息安全的新生,一般都会被老 ...
- DCDC电源 TPS54525
电路图: 输入电压12V,输出电压5V.不接负载可以获得5V输出,接入负载后只有4mV,且PG为低. 预计原因:可能是上电瞬间电流过大,芯片过流保护. 解决方案:SS软启动引脚的电容C331加大至1u ...
- 使用shell解析脚本依赖关系,并自动补数
将脚本依赖关系放到表中 使用shell解析脚本依赖关系,递归的计算各个脚本. #!/bin/bash # dm 补数 basepath=$(cd ``; pwd) cd $basepath sourc ...
- 转载---JQuery 对 Select option 的操作
下拉框: <select id="selectID" > <option value="1">1</option& ...
- 【Python3学习】Python环境搭建
以前电脑上安装过一个python2的环境,这次由于项目跟其他团队人员对的时候,人家的是python3,因为python2也没怎么学,所以对里面还是很不了解的. 所以今天就重新开始python3的学习, ...
- 7.3.5 Tomcat堆溢出分析(1)
实战Java虚拟机:JVM故障诊断与性能优化>第7章分析Java堆,本章主要介绍了Java堆的分析方法.首先,介绍了几种常见的Java内存溢出现象及解决思路.其次,探讨了java.lang.St ...