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] MCMC (Markov Chain Monte Carlo)

    不错的文章:LDA-math-MCMC 和 Gibbs Sampling 可作为精进MCMC抽样方法的学习材料. 简单概率分布的模拟 Box-Muller变换原理详解 本质上来说,计算机只能生产符合均 ...

  2. [LeetCode] 295. Find Median from Data Stream 找出数据流的中位数

    Median is the middle value in an ordered integer list. If the size of the list is even, there is no ...

  3. Eclipse安装Properties Editor插件

    安装步骤 1.打开eclispe编辑器help-->install new soft 2.输入软件地址 name:properties editor Location:http://proped ...

  4. mysql查询之 用户行程的取消率,人流量高峰时段

    1.用户行程的取消率 Trips 表中存所有出租车的行程信息.每段行程有唯一键 Id,Client_Id 和 Driver_Id 是 Users 表中 Users_Id 的外键.Status 是枚举类 ...

  5. python爬虫3之去哪儿网

    学习任务 获取去哪儿网的出发地列表 获取旅游景点列表 获取景点产品列表 存储数据 1 获取出发地站点 (1)访问touch.qunar.com (2)按F12,单击自由行,在自由行页面点击搜索框 (3 ...

  6. (CSDN迁移) Java路径获取

    package unit02; /** * * @time 2014年9月18日 下午10:29:48 * @porject ThinkingInJava * @author Kiwi */ publ ...

  7. LeetCode 223. 矩形面积(Rectangle Area)

    223. 矩形面积 223. Rectangle Area 题目描述 在二维平面上计算出两个由直线构成的矩形重叠后形成的总面积. 每个矩形由其左下顶点和右上顶点坐标表示,如图所示. LeetCode2 ...

  8. 【转帖】两种IO模式：Proactor与Reactor模式

    两种IO模式:Proactor与Reactor模式 https://www.cnblogs.com/pigerhan/p/3474217.html. 挺好的说明了epoll和IOCP的区别 在高性能的 ...

  9. Redhat7.6Linux版本下，在Oracle VM VirtualBox下hostonly下IP地址配置

    安装配置Linux的Redhat7.6教程见:https://www.cnblogs.com/xuzhaoyang/p/11264563.html 然后,配置完之后,我们开始配置IP地址,配置IP地址 ...

  10. SQL——BETWEEN操作符

    一.BETWEEN操作符的基本用法 BETWEEN操作符用于选取两个值范围内的值. 语法格式如下: SELECT 列名1,列名2... FROM 表名 WHERE 列名 BETWEEN 值1 AND ...