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基础-外边框的更多相关文章

  1. HTML&CSS基础-内边框

    HTML&CSS基础-内边框  作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.HTML源代码 <!DOCTYPE html> <html> &l ...

  2. HTML 学习笔记 CSS样式（外边框 外边框合并）

    CSS外边距 围绕在元素边框的空白区域就是外边距  设置外边距会在元素外创建额外的空白 设置外边距的最简单的方法就是使用 margin 属性,这个属性接受任何长度单位.百分数值甚至负值. CSS ma ...

  3. （谷歌浏览器等）解决css中点击input输入框时出现外边框方法【outline:medium;】

    问题:在使用谷歌浏览器,360浏览器时,点击input输入框会出现带颜色的外边框,如下图所示:

  4. Bootstrap3基础 table-bordered/hover 表格加外边框和鼠标悬停对应行的背景色加深

      内容 参数   OS   Windows 10 x64   browser   Firefox 65.0.2   framework     Bootstrap 3.3.7   editor    ...

  5. css总结4：input 去掉外边框,placeholder的字体颜色、字号

    1 input 标签去除外边框: 在进行webAPP开发时,input外边框非常影响美观,去除外边框方法如下: <input style="border: 0px;outline:no ...

  6. CSS入门（css简介与样式汇总、CSS的使用方式和特征、CSS基础选择器和复杂选择器、边框阴影）

    一.CSS的作用 1.以统一的方式实现样式的定义 2.提高页面样式的可重用性和可维护性 3.实现了内容(HTML)和表示(CSS)的分离 HTML和CSS之间有什么关系? HTML:构建网页的结构 C ...

  7. HTML&CSS基础-边框简写属性

    HTML&CSS基础-边框简写属性 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.HTML源代码 <!DOCTYPE html> <html> ...

  8. JD . 简单的网站构成、引入图标、去除 图片间距／加粗／倾斜／下划线／蓝色外边框 禁止文本拖拽、文字居中、做logo、模拟鼠标 、不使用hover外部css样式实现hover鼠标悬停改变样式

    模拟京东案例准备: 截图(效果图PSD文件) 搭建项目环境     (结构样式行为分离)   HTML 核心文件     index.html CSS       控制样式 base.css(基础样式 ...

  9. css中的margin（外边框）、border（边框）、padding（填充）的区别

    Margin(外边距) - 清除边框外的区域,外边距是透明的. Border(边框) - 围绕在内边距和内容外的边框. Padding(内边距) - 清除内容周围的区域,内边距是透明的. Conten ...

随机推荐

  1. [Bayes] Concept Search and LDA

    重要的是通过实践更深入地了解贝叶斯思想,先浅浅地了解下LDA. 相关数学知识 LDA-math-MCMC 和 Gibbs Sampling LDA-math - 认识 Beta/Dirichlet 分 ...

  2. DEPICT实现基因优化（gene prioritization）、gene set富集分析（geneset enrichment）、组织富集分析（tissue enrichment）

    全基因组关联分析除了找到显著的关联位点,我们还可以做基因优化.geneset富集分析.组织富集分析,下面具体讲一讲怎么利用GWAS的summary数据做这个分析. summary数据就是关联分析的结果 ...

  3. charles安装和使用（转）

    转发链接:https://blog.csdn.net/zhangxiang_1102/article/details/77855548

  4. openstack 权限控制 （添加自定义角色）keystone等组件

    每一个平台.系统都会对于用户的权限进行严格的管理与控制. openstack是一个开源的项目,我们可以直接下载其源码,进行更改以达到我们的要求. 这里只是针对于用户的权限进行管理,以keystone: ...

  5. java有包名的调用没有包名的类，用反射

    没有包名,就是说在根目录,普通项目就是在src下,maven项目就是在src/java目录下 // 通过全类名,没有包名就直接是类名,有包名就要加上包名,比如:com.xiaostudy.TLStri ...

  6. .net webapi跨域 web.config配置

    <system.webServer> <httpProtocol> <customHeaders> <add name="Access-Contro ...

  7. LeetCode 704. 二分查找(Binary Search)

    704. 二分查找 704. Binary Search 题目描述 给定一个 n 个元素有序的(升序)整型数组 nums 和一个目标值 target,写一个函数搜索 nums 中的 target,如果 ...

  8. Mysql数据库索引IS NUll ，IS NOT NUll ，！= 是否走索引

    声明在前面 总结就是 不能单纯说 走和不走,需要看数据库版本,数据量等 ,希望不要引起大家的误会,也不要被标题党误导了. 1 数据库版本: 2 建表语句 CREATE TABLE s1 ( id IN ...

  9. [转帖]Chrome用户请尽快更新：谷歌发现两个严重的零日漏洞

    Chrome用户请尽快更新:谷歌发现两个严重的零日漏洞 https://news.cnblogs.com/n/647075/ 强烈建议:Chrome 用户请尽快升级浏览器!在谷歌今天发布的紧急补丁程序 ...

  10. Python安装-Pycharm+Anaconda

    1.初识Python Python是一门非常简单优雅的编程语言,可以用极少的代码就能实现强大的功能,而且学习起来十分简单,没有编程基础也可轻松入门.其功能强大,特别是第三方库的库的支持,使得开发方便十 ...