HTML&CSS基础-外边框
HTML&CSS基础-外边框
作者：尹正杰
版权声明：原创作品，谢绝转载！否则将追究法律责任。
一.HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>外边距</title>
<style type="text/css">
.box1{
width: 200px;
height: 200px;
background-color: red;
/**
* 定义内边距
*/
border: 10px solid yellow;
/**
* 定义外边距
* 外边距指的是当前盒子与其它盒子之间的距离,他不会影响可见狂的大小，而是会影响到盒子的位置。
* 盒子有四个方向的外边距:
* margin-top:
* 设置box1上的外边距，盒子上边框和其它盒子的距离
* margin-bottom:
* 设置box1下外边距。
* margin-left:
* 设置box1左外边距。
* margin-right:
* 设置box1右外边距。
*
* 由于页面中的元素都是靠左靠上摆放的，所以要注意以下两点:
* 当我们设置上和左外边距时，会导致盒子自身的位置发生改变;
* 当我们设置下和右边距时，会改变其它盒子的位置
*
* 外边距也可以指定一个负值，如果外边距设置的时负值，则元素会向反方向移动
*
* margin还可以设置auto，auto一般只设置给水平方向的margin
* 如果只指定左外边距或者右外边距的margin为auto则会将外边距设置为最大值;
* 垂直方向外边距如果设置auto，则外边距默认就是0;
* 如果将left和right同时设置为auto，则会将两侧的外边距设置为相同的值,就可以使元素自动在父元素中居中;
* 所以我们经常讲左右外边距设置为auto以使子元素在父元素水平居中
*
* 外边距同样可以使用简写属性margin,规则和padding一样：
* 可以同时设置四个方向的外边距，分别表示，上，右，下，左这四个外边距的值(顺时针方向);
* 可以同时设置三个值，分别表示上，左右，下这四个外边距的值
* 可以同时设置两个值，分别表示上下，左右这四个外边距的值
* 也可以设置一个值，表示上下左右的外边距都一样
*
*/
margin-top: 50px;
margin-bottom: 50px;
margin-left: 50px;
margin-right: 50px;
} .box2{
width: 200px;
height: 200px;
background-color: deeppink;
margin-left: auto;
margin-bottom: -100px;
} .box3{
width: 200px;
height:200px;
background-color: blue;
margin-left: auto;
margin-right: auto;
} .box4{
width: 200px;
height: 100px;
background-color: #FFFF00;
margin: 10px 20px 30px 40px;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
</body>
</html>
二.浏览器打开以上代码渲染结果
HTML&CSS基础-外边框的更多相关文章
- HTML&CSS基础-内边框
HTML&CSS基础-内边框 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.HTML源代码 <!DOCTYPE html> <html> &l ...
- HTML 学习笔记 CSS样式（外边框 外边框合并）
CSS外边距 围绕在元素边框的空白区域就是外边距 设置外边距会在元素外创建额外的空白 设置外边距的最简单的方法就是使用 margin 属性,这个属性接受任何长度单位.百分数值甚至负值. CSS ma ...
- （谷歌浏览器等）解决css中点击input输入框时出现外边框方法【outline:medium;】
问题:在使用谷歌浏览器,360浏览器时,点击input输入框会出现带颜色的外边框,如下图所示:
- Bootstrap3基础 table-bordered/hover 表格加外边框和鼠标悬停对应行的背景色加深
内容 参数 OS Windows 10 x64 browser Firefox 65.0.2 framework Bootstrap 3.3.7 editor ...
- css总结4：input 去掉外边框,placeholder的字体颜色、字号
1 input 标签去除外边框: 在进行webAPP开发时,input外边框非常影响美观,去除外边框方法如下: <input style="border: 0px;outline:no ...
- CSS入门（css简介与样式汇总、CSS的使用方式和特征、CSS基础选择器和复杂选择器、边框阴影）
一.CSS的作用 1.以统一的方式实现样式的定义 2.提高页面样式的可重用性和可维护性 3.实现了内容(HTML)和表示(CSS)的分离 HTML和CSS之间有什么关系? HTML:构建网页的结构 C ...
- HTML&CSS基础-边框简写属性
HTML&CSS基础-边框简写属性 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.HTML源代码 <!DOCTYPE html> <html> ...
- JD . 简单的网站构成、引入图标、去除 图片间距／加粗／倾斜／下划线／蓝色外边框 禁止文本拖拽、文字居中、做logo、模拟鼠标 、不使用hover外部css样式实现hover鼠标悬停改变样式
模拟京东案例准备: 截图(效果图PSD文件) 搭建项目环境 (结构样式行为分离) HTML 核心文件 index.html CSS 控制样式 base.css(基础样式 ...
- css中的margin（外边框）、border（边框）、padding（填充）的区别
Margin(外边距) - 清除边框外的区域,外边距是透明的. Border(边框) - 围绕在内边距和内容外的边框. Padding(内边距) - 清除内容周围的区域,内边距是透明的. Conten ...
随机推荐
- Please enable using preview .net core sdks
工具=>选项=>环境=>预览功能=>使用.net core sdk的预览
- Shell流程控制语句if
(1).if语句 语法格式: if 判断条件 ; then 命令 fi 或 if 判断条件 then 命令 fi if语句流程图: 实例:判断命令是否执行成功,成功则输出语句This is ok. [ ...
- Swift编码总结5
1.UIWindow属性: 1>.- (void)becomeKeyWindow; // override point for sub ...
- linux : 各个发行版中修改python27默认编码为utf-8
该方法可解决robot报错:'ascii' codec can't encode character u'\xf1' in position 16: ordinal not in range(128 ...
- 使用office365 world2016发布编辑备份你的博客
开门见山. 如果你曾使用过live writer或者world 2013及之前版本发布过博客,那么请直接异步到最后的tips来查找你可能遇到的问题. 在office365中找到博客模板 打 ...
- .Net Core控制台应用程序使用依赖注入、配置文件等
.Net Core作为一门新语言,资料实在是太少了,并且国内学习的人也不多,虽然性能还行也跨平台了但是生态圈不发展起来也不行 刚出来的时候用 .Net Core + Dapper + Mysql 弄了 ...
- 关于while read line使用read -p失效问题
while stdin 原来默认是/dev/tty,被重定向到管道或文件后,如果你还想读屏幕(/dev/tty),那就单独执行某个命令时在显式的将stdin再指向 /dev/tty #!/bin/ba ...
- Docker中安装mysql
1.docker 中下载 mysql docker pull mysql 2.启动 docker run -itd --name mysql -p 3306:3306 -e MYSQL_ROOT_PA ...
- 最新 物易云通java校招面经 （含整理过的面试题大全）
从6月到10月,经过4个月努力和坚持,自己有幸拿到了网易雷火.京东.去哪儿.物易云通等10家互联网公司的校招Offer,因为某些自身原因最终选择了物易云通.6.7月主要是做系统复习.项目复盘.Leet ...
- redis使用bit做只有两种情况的“状态“统计（如是否在线的用户统计）
1 记录在线用户数(活跃用户)? 比如redis中键a的value数据的二进制码是 0110 0110 0001 它总共有12位,在redis的位操作中,二进制中的第几位称为offset. 我们可以这 ...