css成品模型,CSS系列-盒模型

1.块级元素(block-level)

常见的块元素有

~

、

、

、

• 、

1. 、
2. 等，其中
   标签是最典型的块元素。

   块级元素的特点：

   (1)总是从新行开始

   (2)高度，行高、外边距以及内边距都可以控制。

   (3)宽度默认是容器的100%

   (4)可以容纳内联元素和其他块元素。

   2.行内元素(inline-level)

   常见的行内元素有、、、、、、、、、等，

   其中标签最典型的行内元素。

   行内元素的特点：

   (1)和相邻行内元素在一行上。

   (2)高、宽无效，但水平方向的padding和margin可以设置，垂直方向的无效。

   (3)默认宽度就是它本身内容的宽度。

   (4)行内元素只能容纳文本或则其他行内元素。(a特殊)

   3.行内块元素(inline-block)

   在行内元素中有几个特殊的标签——、、

   ，可以对它们设置宽高和对齐属性，

   有些资料可能会称它们为行内块元素。

   行内块元素的特点：

   (1)和相邻行内元素(行内块)在一行上,但是之间会有空白缝隙。

   (2)默认宽度就是它本身内容的宽度。

   (3)高度，行高、外边距以及内边距都可以控制。

   4.CSS 三大特性

   层叠 继承  优先级()CSS权重) 是我们学习CSS 必须掌握的三个特性。

   5.css的盒模型

   其实，CSS就三个大模块：  盒子模型 、 浮动 、 定位，其余的都是细节。要求这三部分，无论如何也要学的非常精通。

   所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子，也就是一个盛装内容的容器。每个矩形都由元素的内容、

   内边距(padding)、边框(border)和外边距(margin)组成。

   看透网页布局的本质：把网页元素比如文字图片等等，放入盒子里面，然后利用CSS摆放盒子的过程，就是网页布局。

   每个盒子除了有自己大小和位置外，还影响着其他盒子的大小和位置。

   ### 外边距实现盒子居中

   1. 必须是块级元素。

   2. 盒子必须指定了宽度(width)

   然后就给**左右的外边距都设置为auto**，就可使块级元素水平居中。

   实际工作中常用这种方式进行网页布局，示例代码如下：

   .header{ width:960px; margin:0 auto;}

   清除元素的默认内外边距

   为了更方便地控制网页中的元素，制作网页时，可使用如下代码清除元素的默认内外边距：

   * {

   padding:0;         /* 清除内边距 */

   margin:0;          /* 清除外边距 */

   }

   注意：  行内元素是只有左右内外边距的，是没有上下内外边距的。

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

   对于两个嵌套关系的块元素，如果父元素没有上内边距及边框，则父元素的上外边距会与子元素的上外边距发生合并，

   合并后的外边距为两者中的较大者，即使父元素的上外边距为0，也会发生合并

   解决方案：

   1. 可以为父元素定义1像素的上边框或上内边距。

   2. 可以为父元素添加overflow:hidden。

   盒子模型布局稳定性

   开始学习盒子模型，同学们最大的困惑就是， 分不清内外边距的使用，什么情况下使用内边距，什么情况下使用外边距？

   答案是：  其实他们大部分情况下是可以混用的。  就是说，你用内边距也可以，用外边距也可以。 你觉得哪个方便，就用哪个。

   但是，总有一个最好用的吧，我们根据稳定性来分，建议如下：

   按照 优先使用  宽度 (width)  其次 使用内边距(padding)    再次  外边距(margin)。

   width >  padding  >   margin

   原因：

   1. margin 会有外边距合并 还有 ie6下面margin 加倍的bug(讨厌)所以最后使用。

   2. padding  会影响盒子大小， 需要进行加减计算(麻烦) 其次使用。

   3. width   没有问题(嗨皮)我们经常使用宽度剩余法 高度剩余法来做。(width可以搞定不用其他的)

   CSS3盒模型

   CSS3中可以通过box-sizing 来指定盒模型，即可指定为content-box、border-box，这样我们计算盒子大小的方式就发生了改变。

   可以分成两种情况：

   1、box-sizing: border-box  盒子大小为 width

   2、box-sizing: content-box  盒子大小为 width + padding + border

   div {

   width: 100px;

   height: 100px;

   background: skyblue;

   margin: 0 auto;

   border: 1px solid gray;

   默认的设置 如果我们添加了 border属性 该容器的大小会发生改变

   因为他要优先保证内部的内容所占区域 不变

   box-sizing  如果不设置 默认的值 就是

   content-box: 优先保证内容的大小 对盒子进行缩放;

   border-box: 让 盒子 优先保证自己所占区域的大小,对内容进行压缩;

   box-sizing: border-box;

   }

   标签：box,行内,盒子,模型,元素,内边,外边,系列,CSS

   来源： https://blog.csdn.net/qq_39823114/article/details/98438383