一、使用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. P6087 [JSOI2015]送礼物 01分数规划+单调队列+ST表

    P6087 [JSOI2015]送礼物 01分数规划+单调队列+ST表 题目背景 \(JYY\) 和 \(CX\) 的结婚纪念日即将到来,\(JYY\) 来到萌萌开的礼品店选购纪念礼物. 萌萌的礼品店 ...

  2. Window C盘 占满原因之一

    最近一段时间,突然C盘 莫名奇妙的满了 ,也没有中毒. 最后查找是因为安装了SQL Reporting  的原因 C:\Program Files\Microsoft SQL Server Repor ...

  3. HTML基础-06

    网页背景 1.  设置背景颜色          background-color:#bfa; 设置背景图片               background-image:url(“./img/... ...

  4. 搭建vue开发环境的步骤,六步完成

    搭建vue开发环境的步骤,其实也挺简单的,之前这环境的配置也困扰着我一:在搭建vue的开发环境之前,一定一定要先下载node.js,vue的运行是要依赖于node的npm的管理工具来实现,下载地址:h ...

  5. 上手了RabbitMQ？再来看看它的交换机(Exchange)吧

    人生终将是场单人旅途,孤独之前是迷茫,孤独过后是成长. 楔子 本篇是消息队列RabbitMQ的第三弹. RabbitMQ的入门和RabbitMQ+SpringBoot的整合可以点此链接进去回顾,今天要 ...

  6. DFS【搜索1】

    DFS模板 void dfs(int depth)//depth表示当前的层数(或深度) { if(depth>n)//到达叶子节点,该路已走到尽头 return; for(int i=;i&l ...

  7. libview关于图片导入并显示

    1 程序框图->图形与声音->图形格式,选择“写入某个格式的图片”,然后在路径处创建输入控件,然后在“图片函数”中选择“绘制平面像素图”,在控件输出端“新图片”创建显示控件.打开前面板,在 ...

  8. RSA加密算法和SSH远程连接服务器

    服务器端与客户端的密钥系统不一样,称为非对称式密钥系统 RSA算法的基础是模运算x mod n,事实上: [(a mod n) + (b mod n)] mod n = (a+b) mod n [(a ...

  9. 2020重新出发，MySql基础，MySql数据库备份与恢复

    @ 目录 MySQL数据库备份与恢复 数据库为什么需要备份 MySQL备份类型 MySQL热备份及恢复 逻辑备份 mysqldump SELECT INTO-OUTFILE mydumper 裸文件备 ...

  10. e3mall商城的归纳总结1之项目的架构

    首先来谈谈e3mall商城,e3mall商城是黑马推出一个学习的项目,前身是淘淘商城.两个用的技术差不多.,但由于后期加了一些新技术,更名为e3mall商城.本商城为分布式商城,主要用到的技术使mav ...