CSS盒模型笔记

作者: Stevenqqq | 来源:发表于2017-02-25 14:13 被阅读9次

1.

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

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

外边距是该元素与相邻元素之间的距离。

如果给元素定义边框属性,边框将出现在内边距和外边距之间。

3.

4.

5.transparent 为透明色,与其底部相同.

背景色可以穿透内边距.

表单的边框通常改为 0;

border:0 none;//兼容所有浏览器

6.margin:0 auto 可以水平居中.

7.行内元素没有上下margin和padding.

8.当上下相邻的两个块元素相遇时,如果上面的元素有下外边距margin-bottom,下面的元素有上外边距margin-top,则他们之间的垂直间距不是margin-bottom与margin-top之和,而是两者中的较大者。这种现象被称为相邻块元素垂直外边距的合并(也称外边距塌陷)。

9.对于两个嵌套关系的块元素,如果父元素没有上内边距及边框,则父元素的上外边距会与子元素的上外边距发生合并,合并后的外边距为两者中的较大者,即使父元素的上外边距为0,也会发生合并。

如果希望外边距不合并,可以为父元素定义1像素的上边框或上内边距。

相关文章

  • 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 盒模型的基本概念、 盒模型类型,...

  • CSS盒模型笔记

    1. 2. 网页就是多个盒子嵌套排列的结果。 内边距出现在内容区域的周围,当给元素添加背景色或背景图像时,该元素的...

  • CSS盒模型笔记

    css中盒子模型是重要的概念之一,页面中所有元素都可以看做为一个矩形盒子,这个盒子包含元素的内容、内边距、边框和外...

  • 1.CSS盒模型

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

网友评论

    本文标题:CSS盒模型笔记

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