盒子模型

包括——边距，边框，填充，和实际内容

  • Margin(外边距) - 清除边框外的区域，外边距是透明的。
  • Border(边框) - 围绕在内边距和内容外的边框。
  • Padding(内边距) - 清除内容周围的区域，内边距是透明的。
  • Content(内容) - 盒子的内容，显示文本和图像。

 当指定一个CSS元素的宽度和高度属性时，只是设置内容区域的宽度和高度。要知道，完全大小的元素，还必须添加填充，边框和边距

下面的例子中的元素的总宽度为300px：

div {
　　 background-color: lightgrey;

    width: 300px;

    border: 25px solid green;

    padding: 25px;

    margin: 25px;

}

共450px

<style>

div.ex

{

width:220px;

padding:10px;

border:5px solid gray;

margin:0px;

}

</style>

</head>

<body>

<img src="250x250px.gif" width="250" height="250" />

<div class="ex">上面的图片是250 px宽。

这个元素的总宽度也是250 px。</div>

</body>

即：

最终元素的总宽度计算公式是这样的：

总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距

元素的总高度最终计算公式是这样的：

总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距

 边框

边框样式—— border-style

边框宽度

边框颜色

各边的样式

轮廓

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

可指定样式、颜色、宽度

 margin外边距

定义元素周围空间

padding填充

定义元素边框与元素内容之间的空间，即上下左右的内边距

CSS3——盒子模型 border(边框) 轮廓(outline)属性 margin外边距 padding填充的更多相关文章

  1. 边框(Border) 和 轮廓(Outline) 属性

    border 复合属性.设置对象边框的特性. 标签定义及使用说明 如果上述值缺少一个没有关系,例如border:#FF0000;是允许的. 默认值: not specified 继承: no Java ...

  2. css盒子模型、边框border、外边距margin、填充padding、轮廓outline

    盒子模型:盒子默认的宽度为容器的宽度,也可以自省设定宽度,高度根据内容适应,也可以自行设定高度.min-height设定最小高度 一个盒子包括外边距.边框.内边距和实际内容 Margin(外边距):清 ...

  3. {前端CSS} 语法 Css的几种引入方式 css选择器 选择器的优先级 CSS属性相关 背景属性 边框 CSS盒子模型 清除浮动 overflow溢出属性　　定位（position）z-index

    前端CSS CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素,给HTML设置样式,让它更加美观. 当浏览器读到一个样式表,它就会按照这个样式表来对文 ...

  4. css3盒子模型中的box-sizing属性的使用_box sizing常用的3种属性

    box-sizing属性用来定义元素的width和height所表示的区域,该属性一般有三种值:content-box.border-box.inherit.其中inherit表示box-sizing ...

  5. CSS自学笔记（10）:CSS3盒子模型

    CSS3为CSS技术的升级版本.最新版本. 就CSS而言,它是一个模块,是一个庞大而又复杂的模块,但是在CSS3中,将这一个庞大的模块分解为一个个容易理解的同时又很精简的小模块,同时CSS3中又添加了 ...

  6. CSS3盒子模型

    web前端必须了解的CSS3盒子模型 1.需要了解的属性以及属性值 display:box或者display:inline-box box-orient:horizontal | vertical ( ...

  7. CSS3盒子模型(中)

    在CSS盒子模型(上)讲到了盒子模型的边框,内外边距,外边距合并等知识,接下来要总结的是盒子模型的布局常用到的一些CSS属性,比如:float.position等知识. 盒子模型布局稳定性 开始学习盒 ...

  8. CSS3 —— 盒子模型

    盒子模型 主要的属性就5个:width.height.padding.border.margin.如下:  width和height:内容的宽度.高度(不是盒子的宽度.高度). padding:内边距 ...

  9. CSS -- 盒子模型之边框、内边距、外边距

    一.使用border为盒子添加边框 盒子模型的边框就是围绕着内容及补白的线,这条线你可以设置它的粗细.样式和颜色(边框三个属性). 1.border-style(边框样式)常见样式有: dashed( ...

随机推荐

  1. final修饰符—不可变

    final 修饰符 修饰类 不可以有子类 修饰变量 变量一旦获得初始值就不可改变,不能被重新赋值 成员变量:初始值必须有程序员显式设置,系统不会对其隐式初始化 类变量:静态初始化块 | 声明该类变量时 ...

  2. 2019牛客暑期多校训练营（第一场） B Integration （数学）

    链接:https://ac.nowcoder.com/acm/contest/881/B 来源:牛客网 Integration 时间限制:C/C++ 2秒,其他语言4秒 空间限制:C/C++ 5242 ...

  3. 502 bad gateway nginx 的错误的解决方案

    总结 一般是php问题居多,也需要调整相应的nginx参数,最后也可能是mysql假死 nginx问题 查看日志中的报错error.log一般设置路径/usr/local/nginx/logs/ngi ...

  4. vue项目history模式下微信分享相关问题

    import wx from '@/utils/wx' import { shareApi } from '@/api' // 微信验证 export function requireConfig() ...

  5. PL/SQL（Procedure Language & Structured Query Language）

    目前的PL/SQL包括两部分,一部分是数据库引擎部分:另一部分是可嵌入到许多产品(如C语言,JAVA语言等)工具中的独立引擎.可以将这两部分称为:数据库PL/SQL和工具PL/SQL. PL/SQL中 ...

  6. Python 函数Ⅲ

    默认参数 调用函数时,默认参数的值如果没有传入,则被认为是默认值.下例会打印默认的age,如果age没有被传入: 以上实例输出结果: 不定长参数 你可能需要一个函数能处理比当初声明时更多的参数.这些参 ...

  7. vue-router的路由

    路由和组件是有区别的:组件一般是在同一个页面的不同模块,但是路由是直接切换到另一个页面,之前的页面销毁. App.vue中的router-view会渲染顶级路由匹配到的组件.组件内部嵌套的router ...

  8. python3.5-tensorflow-keras 安装

    cpu centos FROM centos:7 MAINTAINER yon RUN yum -y install make wget \ && wget -O /etc/yum.r ...

  9. 通过 PHP 生成 XML

    如需使用 PHP 在服务器上生成 XML 响应,请使用下面的代码: <?php header("Content-type:text/xml"); echo "< ...

  10. luoguP1514 引水入城 x

    P1514 引水入城 题目描述 在一个遥远的国度,一侧是风景秀美的湖泊,另一侧则是漫无边际的沙漠.该国的行政区划十分特殊,刚好构成一个N 行M 列的矩形,如上图所示,其中每个格子都代表一座城市,每座城 ...