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 ...
随机推荐
- C#生成Guid的几种方式
1 var uuid = Guid.NewGuid().ToString(); // 9af7f46a-ea52-4aa3-b8c3-9fd484c2af12 2 var uuidN = Guid. ...
- 【Python开发】PyInstaller打包Python程序
PyInstaller是一个能将Python程序转换成单个可执行文件的程序, 操作系统支持Windows, Linux, Mac OS X, Solaris和AIX.并且很多包都支持开箱即用,不依赖环 ...
- Influx Sql系列教程八：query数据查询基本篇
前面几篇介绍了InfluxDB的添加,删除修改数据,接下来进入查询篇,掌握一定的SQL知识对于理解本篇博文有更好的帮助,下面在介绍查询的基础操作的同时,也会给出InfluxSql与SQL之间的一些差别 ...
- LVS的基础使用
LVS的基础使用 LVS的介绍 A:什么是LVS B:cluster(集群的概念) C:LVS的介绍 LVS的使用 A:ipvsadm命令的使用 ♣一:LVS的介绍 A:什么是lvs LVS的英文全称 ...
- 在ensp上配置Hybrid接口
Hybrid接口是华为特有的一种接口 Hybrid接口是既可以连接普通终端的接入链路,又可以连接交换机间的干道链路. 简单说就是Hybrid接口既能实现Access的功能又能实现Trunk接口的功能. ...
- Qt信号-槽原理剖析--（1）信号槽简介
唯有创造才是快乐.只有创造的生灵才是生灵.--罗曼·罗兰 信号槽是观察者模式的一种实现,特性如下: A.一个信号就是一个能够被观察的事件,或者至少是事件已经发生的一种通知: B.一个槽就是一个观察者, ...
- LeetCode 445. 两数相加 II(Add Two Numbers II)
445. 两数相加 II 445. Add Two Numbers II 题目描述 给定两个非空链表来代表两个非负整数.数字最高位位于链表开始位置.它们的每个节点只存储单个数字.将这两数相加会返回一个 ...
- kube-proxy运行机制分析【转载】
转自:http://blog.itpub.net/28624388/viewspace-2155433/ 1.Service在很多情况下只是一个概念,而真正将Service的作用实现的是kube-pr ...
- Jackson 动态Bean
为了解决json字符串有很多属性, 但是不必每个属性都映射到pojo的属性. @JsonProperty : 标记一个方法是一个属性的getter或setter方法, 也即把java属性和json域关 ...
- 神奇 指令 chattr
转自:https://www.cnblogs.com/ftl1012/p/chattr.html 常见命令参数 A:即Atime,告诉系统不要修改对这个文件的最后访问时间. S:即Sync,一旦应用程 ...