一、使用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. mysql基础测试题

    mysql基础测试题:https://www.cnblogs.com/wupeiqi/articles/5729934.html 如何创建表? 就这样类推?如何提取我们想要的元素呢? 综合提取呢?

  2. Mybatis-08-动态SQL

    动态SQL 什么是动态SQL? 根据不同的条件生成不同的SQL语句. if choose(where,otherwise) trim(where,set) foreach 搭建环境 create ta ...

  3. POJ2806 Square

    题目描述 给定\(2*1\)和\(2 * 2\)两种规格的地砖,请问\(2 * n\)的地面总共有多少种方法? 下面是铺满\(2*17\)的地面的示意图. 输入输出格式 输入 多组数据,每组数据包括1 ...

  4. Istio Routing 实践掌握virtualservice/gateway/destinationrule/AB版本发布/金丝雀发布

    原文 在学习像 Istio 这样的新技术时,看一下示例应用程序总是一个好主意. Istio repo 有一些示例应用程序,但它们似乎有各种不足. 文档中的 BookInfo 是一个很好的示例. 但是, ...

  5. python爬虫用drony转发进行抓包转发

    转载至https://www.cnblogs.com/lulianqi/p/11380794.html#l_2 实际操作步骤(Android) 笔者这里直接使用上面提到第3种方法(方法1在对于手机AP ...

  6. CVE-2020-15778 OpenSSH命令注入漏洞复现

    一.漏洞概要 OpenSSH 8.3p1及之前版本中的scp允许在scp.c远程功能中注入命令,攻击者可利用该漏洞执行任意命令.目前绝大多数linux系统受影响. 参考链接:https://githu ...

  7. Kafka Producer源码解析一：整体架构

    一.Producer整体架构 Kafka Producer端的架构整体也是一个生产者-消费者模式 Producer线程调用send时,只是将数据序列化后放入对应TopicPartition的Deque ...

  8. 洛谷T90444 密码 题解

    [问题描述] 假发通过了不懈的努力,得到了将军家门锁的密码(一串小写英文字母).但是假发被十四和猩猩他们盯上了,所以假发需要把密码传递出去.因为假发不想十四他们发现几松门前贴的小纸条就是将军家的密码, ...

  9. 如何寻找决策最优解？熵权TOPSIS助你科学决策

    熵权topsis是一种融合了熵值法与TOPSIS法的综合评价方法.熵值法是一种客观赋值法,可以减少主观赋值带来的偏差:而topsis法是一种常见的多目标决策分析方法,适用于多方案.多对象的对比研究,从 ...

  10. Three.js学习1_快速入门

    快速上手, 搭建第一个3D场景 最重要的一步, 先下载three.js, 引入网页中 <script src="./three.js"></script> ...