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. UE4的内存模型

    转自:https://blog.csdn.net/noahzuo/article/details/73565259 UObject和FUObjectItem UE4运行的基本单位是UObjet,然而U ...

  2. 10分钟弄懂Raft算法

    分布式系统在极大提高可用性.容错性的同时,带来了一致性问题(CAP理论).Raft算法能够解决分布式系统环境下的一致性问题. 我们熟悉的ETCD注册中心就采用了这个算法:你现在看的这篇微信公众号文章, ...

  3. PHP 死锁问题分析

    背景:对于死锁的问题,人们往往想到出现一些关于访问很缓慢,有白页现象,要是测试环境(我就真实遇到测试环境有本文谈及一样的问题)你也就重启一下PHP的php-fpm进程发现又好了,隔一段时间又出类似的问 ...

  4. Qt去掉treeview项的焦点虚线

    项目做到后期,进行局部美化的时候发现了问题,在treeview框选择状态下会有虚线. 其实,不仅是treeview,tableview,listview,乃至button在有焦点的情况下,都会出现虚线 ...

  5. Python2.7+virtualenv+CUDA 10.0版的pytorch v1.3.0 +运行人群计数crowdcount-mcnn网络

    Python2.7$ python2 -m virtualenv pytorchenv$ source pytorchenv/bin/activate $ pip install ipython py ...

  6. [Oracle] - 查看数据库中每个表占用空间大小，及进行表压缩

    查询用户创建的表 select * from user_tab_comments; -- 查询本用户的表,视图等. select * from user_col_comments; -- 查询本用户的 ...

  7. C语言单链表简单实现(简单程序复杂化）

    PS: goto还是很好玩的. #include <stdio.h> #include <stdlib.h> typedef struct _node{ int value; ...

  8. ListModelSerializer模块

    ListModelSerializer模块 一 .自定义反序列化字段 # 一些只参与反序列化的字段,但是不是与数据库关联的 # 在序列化类中规定,并在校验字段时从校验的参数字典中剔除 class Pu ...

  9. JSOI2019 Round2

    JSOI的题质量很高-- 精准预测(2-SAT.拓扑排序.bitset) 不难发现两个条件都可以用经典的2-SAT连边方式连边,考虑如何加入时间的限制.对于第\(x\)个人在\(t\)时刻的状态是生/ ...

  10. go语言学习---使用os.Args获取简单参数（命令行解析）

    实例1: //main package main import ( "fmt" "os" ) func main() { fmt.Println(os.Args ...