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 ...
随机推荐
- ddl语法
创建表: create table 表名 ( 字段1 varchar2(32) not null primary key, 字段2 date not null ) tablespace 表空间名 事务 ...
- docker+k8s基础篇四
Docker+K8s基础篇(四) pod控制器 A:pod控制器类型 ReplicaSet控制器 A:ReplicaSet控制器介绍 B:ReplicaSet控制器的使用 Deployment控制器 ...
- 通过LxRunOffline迁移Win10的Linux子系统
默认情况WSL装在系统盘(C:),重装系统怎么办?C盘空间不足怎么办?能修改WSL安装路径吗? 当然可以,使用LxRunOffline不仅能修改WSL安装路径,还能备份WSL.还原WSL…… 修改WS ...
- elementui禁用全选按钮
document.getElementsByClassName('el-checkbox__input')[0].classList.add('is-disabled') doc ...
- 百度小程序上传失败 ServerError:30010的原因
最近通过uniapp编译百度智能小程序后上传遇到了报错,错误码为30010. 原因很简单开发者工具和版本库产生了冲突. 两个解决方案,升级开发者工具,降低发布时的版本库 exit;
- Java找N个数中最小的K个数，PriorityQueue和Arrays.sort()两种实现方法
最近看到了 java.util.PriorityQueue.刚看到还没什么感觉,今天突然发现他可以用来找N个数中最小的K个数. 假设有如下 10 个整数. 5 2 0 1 4 8 6 9 7 3 怎么 ...
- C#在linux上运行实现
1 C#开发完了服务 2 部署到linux centos7上 3无法直接运行 解决方法 1 linux cenos7上安装mono 2 执行mono xxx.exe 即可 解决方法2 下载 anye ...
- promethus监控nginx
一.摘要 promethues监控nginx可选两个exporter,通过nginx_exporter主要是获取nginx-status中的内建的指标,nginx自身提供status信息,较为简单,p ...
- MES系统之设备管理的基础功能
设备是制造企业进行生产的主要物质技术基础,制造企业的生产率.产品质量.生产成本都与设备直接相关.因此,正确使用.定时保养.及时检修维护设备,并对设备的运行性能进行分析,使设备处于良好的状态,才能保证企 ...
- 【图解】cpu，内存，硬盘，指令的关系
1 程序员用高级语言编写程序. 2 经过编译 链接等形成机器语言的EXE文件. 3 EXE文件保持在磁盘的某个或多个扇区内 4 程序运行是在内存中生成EXE的副本 5 将指令读入cpu的寄存器 6 由 ...