一、使用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. Vue 事件的$event参数=事件的值

    template <el-table :data="dataList"> <el-table-column label="id" prop=& ...

  2. noip复习——快速幂

    \(a ^ n \bmod p\) \(a, p, n \leq 10^9\) 最普通的二进制拆分 #define LL long long LL qpow(LL a, LL n, LL p) { L ...

  3. windows 下 安装 RabbitMQ

    RabbitMQ是一个在AMQP协议标准基础上完整的.可复用的企业消息系统.它遵循Mozilla Public License开源协议,采用 Erlang 实现的工业级的消息队列(MQ)服务器.它扮演 ...

  4. Docker: docker pull, wget, curl, git clone 等如何更快？

    1) Docker 配置 1.1) daemon.json 配置镜像 路径: /etc/docker/daemon.json 文档: Config Daemon registry-mirrors 设定 ...

  5. 在GitHub上删除仓库 or 项目，基操！！

    创建错误或者想要抛弃某个仓库or项目,点击选择项目,选择Setting页面,左侧方框Option页拉到底: 你就可以看到一个红色的危险域,called Danger Zone,这不禁让我想到了黑子篮球 ...

  6. linux 安装sftp

    1.定义sftp的数据目录 mkdir -p /data/sftp 2.将目录归到root用户,否则无法chroot chown root. -R /data/sftp/或者chown root:ro ...

  7. SparkStreaming简单例子（oldAPI）

    SparkStreaming简单例子 ◆ 构建第一个Streaming程序: (wordCount) ◆ Spark Streaming 程序最好以使用Maven或者sbt编译出来的独立应用的形式运行 ...

  8. Vue路由模块化的实现方法

    分享一个Vue路由模块化方法,简单实用,好用到飞起 路由模块化 1.router/index.js 配置路由 import Vue from 'vue' import VueRouter from ' ...

  9. idea 执行maven打包命令时，修改war包名称

  10. redis数据库基础篇

    一.Redis介绍 Redis 是一个高性能的key-value数据格式的内存缓存,NoSQL数据库.NOSQL:not only sql,泛指非关系型数据库.关系型数据库: (mysql, orac ...