盒子模型：盒子默认的宽度为容器的宽度，也可以自省设定宽度，高度根据内容适应，也可以自行设定高度。min-height设定最小高度

一个盒子包括外边距、边框、内边距和实际内容

Margin(外边距)：清除边框外的区域，外边距是透明的。

Border(边框)：围绕在内边距和外边距的边框。

Padding(内边距)：清除内容周围的区域，内边距是透明的。

Content(内容)：盒子的内容，显示文本和图像。

例如下面一个例子

<!DOCTYPE html>

<html>

······

    <style>

        div {

            background-color: lightgrey;

            width: 300px;

            border: 25px solid green;

            padding: 25px;

            margin: 25px;

            }

    </style>

······

    <h2>盒子模型演示</h2>

    <p>CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。</p>

    <div>这里是盒子内的实际内容，背景为灰色。有 25px 内间距，25px 外间距、25px 绿色边框。

    </div>

······

</html>

显示结果如下

上述的width实际是指content的width

因此整个盒子的宽度为width+外边距*2+边框*2+内边距*2

css边框border属性

1.边框样式border-style

默认值为none无边框

dotted: 定义一个点线边框

dashed: 定义一个虚线边框

solid: 定义实线边框

double: 定义两个边框，两个边框的宽度和 border-width 的值相同

2.边框宽度border-width，在使用border-width时必须同时指定边框样式

可以使用具体宽度值如2px，或者thick、middle(默认)、thin三个关键字指定

3.边框颜色border-color，在使用border-color时也必须同时指定边框样式

上述三种边框的属性可以集合在一起用border表示，顺序为width、sytle、color，例如border:5px solid red;

对于上述边框的三个属性，每一个属性又可以单独对上top、下bottom、左left、右right设置，也可以对上top、下bottom、左left、右right一次性设置上述三种属性

以颜色为例：border-top-color、border-bottom-color、border-left-color、border-right-color分别表示上边框、下边框、左边框、右边框的颜色

即border-color有1-4个属性值

border-color:red  表示所有边框为红色

border-color:red yellow 表示上下边框是红色、左右边框是黄色

border-color:red yellow green 表示上边框是红色，左右边框是黄色，下边框是绿色

border-color:red yellow green blue 表示上、右、下、左边框分别是红、黄、绿、蓝色

而border-top:2px solid pink表示一次性设置上边框的宽度为2px、实线边框、粉色

css外边距margin属性

margin有margin-top、margin-bottom、margin-left、margin-right四个属性，具体使用方式类似border

默认为0，auto表示浏览器自动计算，也可以使用px或者em表示

边界塌陷或重叠

对于同一级的盒子，上下边距默认为0，如果上和下同时设置margin-bottom和margin-top，则会取较大值显示，左右边距默认有一定的距离。

对于包含的盒子，如果上一级盒子没有border、padding、或者实际内容，那么下一级的盒子在设置margin时会一直向上级盒子寻找，直到找到某个包含border、padding、或者实际内容的盒子，然后以这个盒子为参照进行margin显示。

css填充padding属性

padding有padding-top、padding-bottom、padding-left、padding-right四个属性，具体使用方式类似border

默认为0，也可以使用px或者em表示

css轮廓outline属性

outline是绘制于元素周围的线，位于边框边缘的外围，可起到突出元素的作用

outline属性有outline-color、outline-style、outline-width三种，也可直接合在一起使用outline表示

例如p {width:300px;border:1px solid red;text-align:center;outline:green dotted thick;}，效果图如下

css盒子模型、边框border、外边距margin、填充padding、轮廓outline的更多相关文章

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

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

  2. 前端 CSS 盒子模型 边框 border属性

    边框 border:边框的意思,描述盒子的边框 边框有三个要素: 粗细 线性样式 颜色 border: solid border特性 如果颜色不写,默认是黑色.如果粗细不写,不显示边框.如果只写线性样 ...

  3. Css盒模型属性详解（margin和padding）

    Css盒模型属性详解(margin和padding) 大家好,我是逆战班的一名学员,今天我来给大家分享一下关于盒模型的知识! 关于盒模型的属性详解及用法 盒模型基本属性有两个:padding和marg ...

  4. CSS.03 -- 浏览器行高、字体；盒子模型--边框、内边距、外边距

    如果此时你也在自学中,请使用 FireWorks CS6 进行切图测距等,百度一下吧~ Fireworks的基本使用 新建文件   ctrl+n 打开文件  ctrl+o 调出和隐藏标尺 ctrl+r ...

  5. 2 CSS盒子模型&边框&轮廓&外边距&填充&分组嵌套&尺寸&display与visibility

    盒子模型 Box  Model 所有HTML元素可以看做盒子,CSS模型本质上是一个盒子,封装周围的HTML元素 包括:边距,边框,填充和实际内容 盒子模型允许我们在其他元素和周围元素边框之间的空间放 ...

  6. css盒子模型的宽度不包括margin

    看到教程上和一些博客上盒子模型的宽度 = content + padding + margin + border,应该是不包括margin的 <!DOCTYPE html> <htm ...

  7. 认识W3C标准盒子模型，理解外边距叠加

    概述: 注:加粗斜体字是非常重要的概念,决定着你是不是能看懂那句话,所以不懂的请一定要搜索一下. 页面上的每个元素,都在一个矩形框里.   每个矩形框都是一个盒模型.   每个盒模型都由内容区域(co ...

  8. 边框(border)边距(margin)和间隙(padding)属性的区别

    边框属性(border):用来设定一个元素的边线.边距属性(margin):用来设置一个元素所占空间的边缘到相邻元素之间的距离.间隙属性(padding):用来设置元素内容到元素边界的距离.这三个属性 ...

  9. CSS 盒子模型（Box model）中的 padding 与 margin

    本文将讲述 HTML 和 CSS 的关键—盒子模型 (Box model) .理解 Box model 的关键便是 margin 和 padding 属性,而正确理解这两个属性也是学习用 CSS 布局 ...

  10. CSS盒子模型（Box Model）

    一.背景 作为CSS的重点,三大模块之一的盒子模型,这部分无论如何也要精通透彻.在任何一个网页当中,都有自己的布局方式,所谓网页布局方式就是如何把网页里面的文字.图片,很好的排版成美工设计的样式,这时 ...

随机推荐

  1. Laravel传值总结

    Laravel传值:with,view(),compact方法一:with public function index() { $title = '文章标题1'; return view('artic ...

  2. js模拟链表---双向链表

    双向链表: 每个元素,有一个 next(指向下一个元素)和一个prev(指向前一个元素) function dbLinkedList(){ var length=0; var head = null; ...

  3. iOS UI基础-7.0 UIScrollView

    概述 移动设备的屏幕大小是极其有限的,因此直接展示在用户眼前的内容也相当有限.当展示的内容较多,超出一个屏幕时,用户可通过滚动手势来查看屏幕以外的内容,普通的UIView不具备滚动功能,不能显示过多的 ...

  4. mac控制台快捷键

    ctrl+a //移到行首ctrl+e //移到行尾 ctrl+y // 插入最近删除的单词或语句ctrl+k //删除光标处到行尾部分ctrl+u //删除光标处到行首部分ctrl+w //删除光标 ...

  5. vue--监听属性完成大小写字母间的转换

    监听属性 watch侦听属性的作用是侦听某属性值的变化,从而做相应的操作,侦听属性是一个对象,它的键是要监听的对象或者变量,值一般是函数,当你侦听的元素发生变化时,需要执行的函数,这个函数有两个形参, ...

  6. sqlserver备份还原数据库时报占用错误

    .做项目时遇到这种情形:原来的test_dev数据库,想复制出test_ft供测试用.此时备份test_dev出test_backup文件,想直接还原成test_ft时会报占用错误. 还原数据库:Th ...

  7. 03-树3 Tree Traversals Again（25 分）

    题目 链接 分析 push是二叉树前序遍历的结果,pop是二叉树中序遍历的结果,所以这个题就是已知前序遍历和中序遍历,求后序遍历. AC代码 #include "bits/stdc++.h& ...

  8. 清华操作系统实验--80x86汇编基础

    前言 80x86架构里,因为历史原因字是16位的,因此在汇编指令中用后缀-b,-w,-l来表示操作数是字节 字 或是双字 C声明 Intel数据类型 汇编代码后缀 大小(字节) char 字节 b 1 ...

  9. 如何删除Sitecore CMS中的项目

    在此“如何”帖子中,我将介绍如何删除项目以及如何在Sitecore CMS中恢复已删除的项目. 删除项目 有多种方便的方法可以删除Sitecore中的项目. 从功能区 在内容树中选择您要删除的项目. ...

  10. linux环境下tab键自动缩进4个空格

    1. 进入 root 模式 su root 2. 编辑 /etc/vimrc 文件 root@localhost /home/xiluhua/tscripts $ vi /etc/vimrc 3. 文 ...