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 ...
随机推荐
- WebAPI.请求(Request)的参数(Parameter)里包含特殊字符(#等)的正确处理方式 从客户端xx中检测到有潜在危险的Request.Form值
事故现场 报错"从客户端 中检测到有潜在危险的Request.Form值" //后台代码 namespace Test { [RoutePrefix("TestClass ...
- Python爬虫笔记技术篇
目录 前言 requests出现中文乱码 使用代理 BeautifulSoup的使用 Selenium的使用 基础使用 Selenium获取网页动态数据赋值给BeautifulSoup Seleniu ...
- Xcode UI界面调试神器-injectionIII
App Store搜索injectionIII下载即可,免费的哟. 打开injectionIII,运行即可. - (BOOL)application:(UIApplication *)applicat ...
- 超好用的K8s诊断工具：kubectl-debug
在K8s环境部署应用后,经常遇到需要进入pod进行排错.除了查看pod logs和describe方式之外,传统的解决方式是在业务pod基础镜像中提前安装好procps.net-tools.tcpdu ...
- 关于while read line使用read -p失效问题
while stdin 原来默认是/dev/tty,被重定向到管道或文件后,如果你还想读屏幕(/dev/tty),那就单独执行某个命令时在显式的将stdin再指向 /dev/tty #!/bin/ba ...
- Ubuntu查看与结束任务进程
1.打开终端 2.敲 ps -ef 查出进程的编号(就是PID那列) 3.输入 kill PID 即可(如果PID是123456,则kill 123456) 例如: 我想把splash关闭,直接输 ...
- 「模拟赛20191019」C 推式子+贪心+树状数组
题目描述 给定一棵\(n\)个点的有根树,根节点编号为\(1\),点有点权. 定义\(d(v)\)表示\(v\)到\(1\)的路径上的边数. 定义\(f(v,u)\)在\(v<u\)且\(v\) ...
- 【转帖】从 Oracle 到 PostgreSQL ，某保险公司迁移实践 技术实践
从 Oracle 到 PostgreSQL ,某保险公司迁移实践 http://www.itpub.net/2019/11/08/4108/ 信泰人寿保险股份有限公司 摘要:去O一直是金融保险行业永恒 ...
- python实现查找最长公共子序列
#!/usr/bin/python # -*- coding: UTF-8 -*- worlds = ['fosh','fort','vista','fish','hish','hello','ohd ...
- Asp.net Core CORS 跨域
本文主要介绍在Asp.net Core采用CORS方式解决跨域 关于跨域的原理介绍可参考Asp.net Web API 解决跨域详解 1 在Startup添加允许跨域的策略 services.AddC ...