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. apicloud打包成apk

    前言:本文是打包vue项目,其他项目也是这样打包 页面的开发过程跟我们平时开发一样,利用vue把页面全部完成,最后进行npm run build将项目打包. 接下来就是apicloud打包的过程,首先 ...

  2. 【LeetCode算法-26】Remove Duplicates from Sorted Array

    LeetCode第26题 Given a sorted array nums, remove the duplicates in-place such that each element appear ...

  3. Linux下 PostgrelSQL 基本操作

    一.在默认配置条件下,本机访问PostgreSQL 切换到Linux用户postgres,然后执行psql: $ su - postgres Last login: Wed Mar 1 13:16:4 ...

  4. VS2010 C#添加水晶报表及设计

    添加并设计水晶报表. [1]在VS中添加水晶报表 右击项目-->添加-->组件-->Crystal Report,输入文件名称“CrystallistReport”,如下图所示: 此 ...

  5. FPGA的配置方式

    FPGA的配置方式 FPGA的配置方式有以下几种,JTAG,AS,PS,AP,FPP等几种. JTAG模式.JTAG模式下将.sof文件下载到FPGA内部的RAM内部进行运行,掉电程序丢失,主要用于前 ...

  6. 【LeetCode】下一个排列【找规律】

    实现获取下一个排列的函数,算法需要将给定数字序列重新排列成字典序中下一个更大的排列. 如果不存在下一个更大的排列,则将数字重新排列成最小的排列(即升序排列). 必须原地修改,只允许使用额外常数空间. ...

  7. TCP粘包和拆包的定义，产生的原因以及解决方案

    TCP粘包:指发送方发送的若干数据包在接收方接收时粘成一团,从接收缓冲区看,后一包数据的头紧接着前一包数据的尾 产生的原因: 1.发送方的原因:TCP默认使用Nagle算法,而Nagle算法主要做两件 ...

  8. windows10 ubuntu子系统运行docker出现的问题

    前一篇笔记记录了安装的过程及错误处理办法,但是在正式使用docker时,却又出现新的问题: “docker: Cannot connect to the Docker daemon at unix:/ ...

  9. [转帖]龙芯3A/3B3000通用处理器出货超30万 获得“中国芯”大奖

    龙芯3A/3B3000通用处理器出货超30万 获得“中国芯”大奖 http://www.eetop.cn/cpu_soc/6946247.html 2019.10 的新闻 出后量 30万 我们贡献了 ...

  10. [转帖]SpringBoot集成redisson分布式锁

    SpringBoot集成redisson分布式锁 https://www.cnblogs.com/yangzhilong/p/7605807.html 前几天同事刚让增加上这一块东西. 百度查一下 啥 ...