从零开始学_JavaScript_系列(六)——CSS的padding、margin、border属性超详细解释(图文)...
结论请看最后的图片
关于定义:
margin:层的边框以外留的空白
background-color:背景颜色
background-image:背景图片
padding:层的边框到层的内容之间的空白
border:边框
content:内容
关于四个方向:
先上图:
测试:(有些结论是验证后copy现有的,因为纯测试不可能推出必然结果)
①首先定义三个:body为背景,one为测试块,another为对比块
body
{
background-color:#000;
}
.one
{
position:absolute;
background-color:#333; /*黑色背景*/
width:200px;
height:200px;
text-align:center;
font-size:50px;
}
.another
{
position:absolute;
top:250px;
background-color:#999;
width:200px;
height:200px;
text-align:center;
font-size:50px;
}
效果:
②向测试块追加属性margin(控制块级元素之间的距离):
margin:200px;
效果为:
说明:
<1>margin本身是透明的(背景还是黑色);
<2> margin:200px;是向四个方向追加200px,相当于上下、左右各增加400px;
<3>单纯追加margin-top:200px; 将导致原有块往下移动200px距离;
假如删除两个块的: position:absolute; 将导致当前块和之后的块都移动相对位置。
变化前:
变化后:
<4>margin-left:200px 不会使得后面的块占用之前块的位置(因为相当于前块width增加200px)
③向块内追加padding属性:(控制块级元素内部)
padding:200px;追加后:
<1>说明padding分为四个方向。200相当于每边追加200px
padding-right:200px; 追加后:
<1>说明padding不影响块内文字原有布局(文字还在原来位置)。
④关于border:
语法:
border: 粗细 样式 颜色;
关于样式:
· none: 无样式
· hidden: 除了同表格的边框发生冲突的时候,其它同none
· dotted: 点划线
· dashed: 虚线
· solid: 实线
· double: 双线,两条线加上中间的空白等于border-width的取值
· groove: 槽状
· ridge: 脊状,和groove相反
· inset: 凹陷
· outset:凸出,和inset相反
追加border:100px groove red;
效果说明:
<1>border的第一个参数同样指每个边增加的数值。
<2>第二个参数是样式(更多样式参考上面);
<3>第三个参数是颜色(也可以写为#000这种形式);
⑤border和padding的双重追加
padding-right:200px;
border:50px double #fff;
效果说明:
①border在padding外侧(二者没有重叠部分);
⑥border、padding、margin三者同时追加:
padding-right:200px;
border:50px double #fff;
margin-bottom:100px;
效果:
效果说明:
①margin在border的更外面。
总结:
①最外面是margin:
不能染色(透明的),属于块间元素(控制块和块的距离);可以选择宽度,可以只影响某一个方位。
②次外面是border:
可以染色(同时也受背景图片/背景颜色的影响),可以选择样式,可以选择宽度,可以只在某一个方位应用如:border-left:50pxdouble #fff;
③再次是padding:
可以染色(根据background-color),受背景图片的影响,可以选择宽度,可以只影响某一个方位。不影响最内层的文字。
④最内层是content:
文本内容区,受width、height、背景图片、背景颜色等影响。
如图:
从零开始学_JavaScript_系列(六)——CSS的padding、margin、border属性超详细解释(图文)...相关推荐
- 图解CSS的padding,margin,border属性
图解CSS的padding,margin,border属性(详细介绍及举例说明) 图解CSS的padding,margin,border属性 W3C 组织建议把所有网页上的对像都放在一个盒(box)中 ...
- 从零开始学_JavaScript_系列(六)——CSS的padding、margin、border属性超详细解释(图文)
结论请看最后的图片 关于定义: margin:层的边框以外留的空白 background-color:背景颜色 background-image:背景图片 padding:层的边框到层的内容之间的空白 ...
- 从零开始学_JavaScript_系列(14)——dojo(7)(饼图,BorderContainer,hashchange,弹窗)...
5/5更新.BorderContainer自适应在本地时正常使用的方法,请查看原文代码之前那一段话 (60)创建一个饼形图 比较简单的标签声明法:(只需要修改数据即可) ①首先,加载dojo文件和样式 ...
- 从零开始学_JavaScript_系列(16)——CSSlt;3gt;(文本、对齐、圆角、盒模型、背景)...
注意,有些CSS属性对于低版本浏览器(典型的就是IE),可能不支持,所以在面向低版本浏览器的时候需要注意的说. 关于CSS属性的兼容性检测的网站:http://caniuse.com/ 部分图片来自网 ...
- CSS中的margin、border、padding区别 CSS padding margin border属性详解
图解CSS padding.margin.border属性 W3C组织建议把所有网页上的对像都放在一个盒(box)中,设计师可以通过创建定义来控制这个盒的属性,这些对像包括段落.列表.标题.图片以及层 ...
- CENTOS 7 踢用户_从零学ELK系列(三):Centos安装Docker(超详细图文教程)
CSDN博客地址(关注,点赞) 人工智能推荐 GitHub(Star,Fork,Watch) [前言] 为了更加真实的模拟生产部署环境,不仅需要Linux环境支持,而且ELK需要在不同的机器上部署:再 ...
- 从零学ELK系列(三):Centos安装Docker(超详细图文教程)
[前言] 为了更加真实的模拟生产部署环境,不仅需要Linux环境支持,而且ELK需要在不同的机器上部署:再重新装几台虚拟机?本地资源不支持,于是乎想到了Docker:今天在上次的Linux系统(< ...
- 从零学ELK系列(四):Docker安装Elasticsearch(超详细图文教程)
[前言] 为了更加真实的模拟生产部署环境,在上次的Docker环境中(<Centos安装Docker(超详细图文教程)>)中安装了Elasticsearch把步骤记录下来,一是方便自己以后 ...
- 从零学ELK系列(七):Centos安装Filebeat(超详细图文教程)
[前言] 为了更加真实的模拟生产部署环境,在上次的Docker环境中(<Docker安装Logstash(超详细图文教程)>)中安装了Logstash,本次我们将安装日志收集组件---Fi ...
最新文章
- f5 2017.09.03故障
- 团队-石头剪刀布-模块测试过程
- C++(17)--详解const
- yum只下载软件不安装的两种方法
- 2020 CSDN 博客之星投票已开启,请大家为我投票,多谢啦
- 别样的唐诗宋词汇——基于Python的量化分析挖掘尝试
- 图论基础(Tarjan与拓扑排序)
- php中session销毁,PHP中session变量的销毁
- 单片机破 解和防 护建议
- 前端页面预览word_html页面在线预览word
- php经典实例博客管理,PHP经典项目案例-(一)博客管理系统2
- 微信小程序中使用地图
- TSP问题解决:模拟退火、贪心法、爬山法,Python实现
- dva 底层框架构建
- MyBatis学习(二)--利用MyBatis实现CRUD操作
- c语言十七:动态内存申请
- mall4j的小程序商城(java)
- 镜像css3,利用css动画属性rotate来实现镜像翻转_WEB前端开发
- crypto-初识RSA(xctf)
- 手机修改服务器端口,3389端口怎么修改 3389端口修改方法参考
热门文章
- python 程序bug解决方案
- 动态执行sql语句用法
- VS2010~2015番茄助手VA_X 2073 重新安装时遇到问题The security key for this program currently stored on your system
- C++_类和对象_C++继承_继承的方式_公共继承_保护继承_私有继承---C++语言工作笔记062
- MyCat分布式数据库集群架构工作笔记0020---高可用_单表存储千万级_海量存储_水平分表ER表
- STM32工作笔记0034---蜂鸣器实验-M3
- Android异常总结---ActivityManager: Warning: Activity not started, its current task has been brought to
- 【转贴】gdb中的信号(signal)相关调试技巧
- eclisep安装反编译插件jadClipse
- 随想录(kgdb的基本原理)