一、使用border为盒子添加边框

盒子模型的边框就是围绕着内容及补白的线，这条线你可以设置它的粗细、样式和颜色(边框三个属性)。

1、border-style（边框样式）常见样式有：

dashed（虚线）、 dotted（点线）、 solid（实线）。

2、border-color（边框颜色）中的颜色可设置为十六进制颜色：

border-color:#888;　　//前面的井号不要忘掉。

3、border-width（边框宽度）中的宽度也可以设置为：

thin、medium、thick（但不是很常用），最常还是用像素（px）。

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>边框</title>

    <style type="text/css">

    p{

        /*添加宽度为2像素、点状线、颜色为#ccc的边框*/

        border: 2px dotted red;

        /*

        为border代码的缩写形式，即：

        div{

            border-width: 2px;

            border-style: dotted;

            border-color: #ccc;

        }

        */

    }

    </style>

</head>

<body>

    <h1>从何而来？</h1>

    <p>我们常常过于仰望远方</p>

    <p>而忽略了脚下的路</p>

</body>

</html>运行结果：

运行结果：

二、使用border-bottom为盒子添加下边框

css 样式中允许只为一个方向的边框设置样式。

上、下、左、右边框的设置：

border-top:1px solid red;

border-bottom: 1px solid red;

border-left:1px solid red;

border-right:1px solid red;

<!DOCTYPE html>

<html>

<head>

   <meta charset="UTF-8">

    <title>边框</title>

    <style type="text/css">

    li {

        border-bottom: 1px dotted red;

    }

    </style>

</head>

<body>

    <ul>

        <li>从何而来？</li>

        <li>我们常常过于仰望远方</li>

        <li>而忽略了脚下的路</li>

    </ul>

</body>

</html>

运行结果：

三、使用padding为盒子设置内边距（填充）

元素内容与边框之间是可以设置距离的，称之为“内边距（填充）”。填充也可分为上、右、下、左(顺时针)。

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>填充</title>

    <style type="text/css">

    #box {

        width: 100px;

        height: 100px;

        padding: 10px;              /*设置内边距*/

        border: 2px solid red;      /*设置边框*/

    }

    </style>

</head>

<body>

    <div id="box">box</div>

</body>

</html>

运行结果：

四、使用margin为盒子设置外边距（边界）

元素与其它元素之间的距离可以使用边界（margin）来设置。边界也是可分为上、右、下、左（顺时针）。

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>边距</title>

    <style type="text/css">

    div {

        width: 50px;

        height: 50px;

        border: 1px solid red;

    }

    #box1{

        /*为box1元素 添加30像素的左边距*/

        margin-left: 30px;

    }

    </style>

</head>

<body>

    <div id="box1">box1</div>

    <div id="box2">box2</div>

</body>

</html>

运行结果：

总结一下：padding(内边距)和margin(外边距)的区别，padding在边框里，margin在边框外。

参考：https://www.w3school.com.cn

CSS -- 盒子模型之边框、内边距、外边距的更多相关文章

  1. css盒子模型、边框border、外边距margin、填充padding、轮廓outline

    盒子模型:盒子默认的宽度为容器的宽度,也可以自省设定宽度,高度根据内容适应,也可以自行设定高度.min-height设定最小高度 一个盒子包括外边距.边框.内边距和实际内容 Margin(外边距):清 ...

  2. css盒模型。边框和内外边距

    css盒模型: 外边距 边框 内填充 内容 盒模型分为两种: 标准盒模型: 怪异盒模型(IE盒模型): 边框:border border: 10px solid blue;表示设置10像素蓝色实线条的 ...

  3. 0019 盒子模型（CSS重点）：边框、内外边距、布局稳定性、PS

    typora-copy-images-to: media 第01阶段.前端基础.盒子模型 盒子模型(CSS重点) css学习三大重点: css 盒子模型 . 浮动 . 定位 主题思路: 目标: 理解: ...

  4. css盒子模型之边框

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. css盒子模型之边框宽度，边框颜色与边框样式

    /* width和height只是设置盒子内容区的大小,而不是盒子的整个大小, 盒子可见框的大小由内容区,内边距和边框共同决定. */ .box1 { /* 设置内容区的宽度为400px */ wid ...

  6. 标准的CSS盒子模型？与低版本IE的盒子模型有什么不同的？

    CSS盒子模型:由四个属性组成的外边距(margin).内边距(padding).边界(border).内容区(width和height); 标准的CSS盒子模型和低端IE CSS盒子模型不同:宽高不 ...

  7. css盒子模型、垂直外边距合并

    css盒子模型由四部分组成:内容(content).填充(padding).边框(border).边距(margin),其中css样式中定义的width属性是定义内容区域的宽度,正常情况下,设置了内容 ...

  8. {前端CSS} 语法 Css的几种引入方式 css选择器 选择器的优先级 CSS属性相关 背景属性 边框 CSS盒子模型 清除浮动 overflow溢出属性　　定位（position）z-index

    前端CSS CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素,给HTML设置样式,让它更加美观. 当浏览器读到一个样式表,它就会按照这个样式表来对文 ...

  9. css样式之边框和内外边距

    1.css样式之边框:border 实心的边框: <!DOCTYPE html><html> <head> <meta http-equiv="co ...

随机推荐

  1. NodeJs nrm 和 nvm

    nrm 和 nvm nrm (npm registry manager)是npm的镜像源管理工具 nvm (node version manager)是nodejs的版本管理工具 nrm # nrm ...

  2. 解决用anaconda安装scrapy后，在使用scrapy时报错

    python版本为3.7 因为用anaconda安装scrapy非常方便,会自动下载所依赖的包, 所以就使用anaconda安装scrapy, 非常舒服,安装很成功 conda install scr ...

  3. My_Tomcat_Host 靶机

    1:扫描网段: 发现主机IP为192.168.1.203 2:nmap 扫描端口信息 发现8080端口开启了http服务  22ssh服务 3:尝试ssh连接是需要密码的,然后访问8080端口 4:发 ...

  4. 「MoreThanJava」Day 7：接口详解

    「MoreThanJava」 宣扬的是 「学习,不止 CODE」,本系列 Java 基础教程是自己在结合各方面的知识之后,对 Java 基础的一个总回顾,旨在 「帮助新朋友快速高质量的学习」. 当然 ...

  5. 【深度学习】：一门入门3D计算机视觉

    一.导论 目前深度学习已经在2D计算机视觉领域取得了非凡的成果,比如使用一张图像进行目标检测,语义分割,对视频当中的物体进行目标跟踪等任务都有非常不错的效果.传统的3D计算机视觉则是基于纯立体几何来实 ...

  6. CallStub相关

    CallStub相关 调用入口 share/vm/runtime/stubRoutines.hpp // Calls to Java SimonNote: 函数指针结合typedef类型定义 type ...

  7. STL函数库的应用第二弹——快排sort函数与结构体关键字排序

    时隔20多天,本蒟蒻终于记起了他的博客园密码!!! 废话不多说,今天主题:STL快排函数sort()与结构体关键字排序 Part 1:引入和导语 首先,我们需要知道,algorithm库里有一些奇怪的 ...

  8. .Net MVC5（.Net Framework 4.0+）多语言解决方案

    最近项目需要做多语言,原先是2种语言(中文/英文),现在又要加一种语言,成了3种.那么原来的方式肯定不适用了,只能升级解决方案. 原来的写法,使用三目表达式,按照当前全局变量的语言类型,返回不同的语言 ...

  9. 面试题-JavaSE语法

    1.Java 有没有 goto 语句? goto 是 Java 中的保留字,在目前版本的 Java 中没有使用.根据 James Gosling(Java 之父)编写的<The Java  Pr ...

  10. DataGrid添加进度条列

    DataGridColumn类型的继承树 DataGridColumn的派生类: 一般情况下DataGridBoundColumn和DataGridComboBoxColumn足以满足多数列的样式,如 ...