CSS盒模型

作者: 南南121 | 来源:发表于2017-02-25 22:10 被阅读4次

CSS盒模型:

网页中所有的元素都是矩形的,可以看做是一个个盒子。

网页由多个盒子组成。

盒子:边框+内边距+内容区域+外边距组成。

网页就是多个盒子嵌套排列的结果。

内边距出现在内容区域的周围,当给元素加背景或背景图像时,该元素的背景色或背景图像也将出现在内边距中。

边框属性:

上边框:border-top

下边框:border-bottom

边框样式合写:例

border-top:宽度 样式 颜色

可以用一行CSS设置上下左右所有的边框的样式  border:10px dotted blue;

去图片边框的写法:border:0 none;

内边距属性:padding-top(上内边距  )  padding-right(右内边距) padding-bottom(下内边距)

padding-left(左内边距)  padding(上内边距)

结合起来写法:padding:上右下左。

外边距:margin属性用于设置外边距。

结合用法:(margin:上右下左)。

块级元素水平居中代码: margin:0 auto

外边距合并:

当两个块级元素,上面的块级元素拥有下外边距,下面的块级元素拥有上外边距,两个盒子上下的距离会取两个边距的最大值,而不是进行加和处理。

嵌套块元素垂直外边距的合并:

相关文章

  • 6.3盒模式

    盒模型 什么是CSS盒模型? CSS盒模型仅仅是一个形象的比喻, HTML中的标签都是盒模型 CSS盒模型指那些可...

  • 盒模型

    什么是CSS盒模型? CSS盒模型仅仅是一个形象的比喻, HTML中的标签都是盒模型 CSS盒模型指那些可以设置宽...

  • CSS盒模型

    CSS盒模型的认识 标准模型 和 IE模型 CSS盒模型包括content,padding,border,marg...

  • Css盒模型以及Bfc的应用场景

    CSS盒模型: 一 基本概念: 分为标准模型+IE模型。 二 标准盒模型和IE盒模型的区别。CSS如何设置这两种盒...

  • CSS 盒模型总结

    概念 CSS盒模型 包含:content padding border margin 类型 CSS盒模型分为 标准...

  • HTML/CSS 04-css盒模型

    css盒模型的组成部分,css margin,css padding,css盒子的实际大小 目录: 一、盒模型的组...

  • html+css 12

    开篇十二章 1、css布局模型 清楚了CSS 盒模型的基本概念、 盒模型类型,...

  • 1.CSS盒模型

    css盒模型 css中,Box Model叫盒子模型;盒模型规定了 元素内容(content)、内边距(paddi...

  • 前端知识点之谈一谈css盒模型、BFC

    知识点:--css 盒模型--标准模型和 IE 模型--BFC 谈一谈 css 盒模型、BFC 是面试中常见的问题...

  • CSS盒模型作业

    前言:本章主要讲CSS盒模型,CSS盒模型是CSS中most import 的一个概念,如果我们想学好CSS,那么...

网友评论

    本文标题:CSS盒模型

    本文链接:https://www.haomeiwen.com/subject/gpynwttx.html