一、使用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. Java学习书籍与社区

    编码规范:<阿里巴巴Java开发手册> 技术架构:<大型网站技术架构核心原理与案例分析>---李智慧 Spring架构与设计原理解析:<Spring技术内幕深入解析Spr ...

  2. SpringSecurity权限管理系统实战—五、整合SpringSecurity（下）

    系列目录 前言 上篇文章SpringSecurity整合了一半,这次把另一半整完,所以本篇的序号接着上一篇. 七.自定义用户信息 前面我们登录都是用的指定的用户名和密码或者是springsecurit ...

  3. 深入理解 Java 内存模型 JMM 与 volatile

    Java 内存模型(Java Memory Model,简称 JMM)是一种抽象的概念,并不真实存在,它描述的是一组规范或者规则,通过这种规范定义了程序中各个变量(包括实例字段.静态字段和构成数组对象 ...

  4. 【MySQL】记一次线上重大事故：二狗子竟然把线上数据库删了！！

    写在前面 估计二狗子这几天是大姨夫来了,心情很郁闷,情绪也很低落,工作的时候也有点心不在焉.让他发个版本,结果,一行命令下去把线上的数据库删了!你没听错:是删掉了线上的数据库!运营那边顿时炸了锅:怎么 ...

  5. Java之reflection(反射机制)——通过反射操作泛型，注解

    一.反射操作泛型(Generic) Java采用泛型擦除机制来引入泛型.Java中的泛型仅仅是给编译器Javac使用的,确保数据的安全性和免去强制类型转换的麻烦.但是编译一旦完成,所有和泛型有关的类型 ...

  6. Linux下启动、关闭SVN服务

    1.命令:ps -ef|grep svnserve,查看SVN是否允许,执行如下: 2.命令:svnserve -d -r /home/svn,启动SVN,/home/svn是SVN安装路径,执行如下 ...

  7. Log4Net + Log4Mongo 将日志记录到MongoDb中

    实现: 将日志保存在MongoDb中: 自定义日志字段: 日志按照日期拆分集合: 第一部分:将日志保存在MongoDb中 新建控制台程序Log4MongoDemo 通过NuGet安装Log4Net ( ...

  8. row_number()分页返回结果顺序不确定

    之前通过row_number()实现分页查询时: select top [PageSize] * from ( select row_number() over (order by id desc) ...

  9. android开发之edittext弹出输入框遮挡住文字。解决方法

    在ManiFest清单文件中修改被遮挡的类的EditText android:windowSoftInputMode="adjustPan|stateHidden"

  10. 2020年B2B外贸建站的终极教程

    本文目标:按照本建站教程的顺序操作,能够实现:基于全球份额最大的建站系统“wordpress”,从零搭建一个B2B外贸网站,且建站成本每年小于1000元(如果不计算自己投入的人力成本的话). 模板站点 ...