自学前端第九天 : CSS标准盒子模型

标准盒子模型（CSS重点）

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

所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子，也就是一个盛装内容的容器。每个矩形都由元素的内容、内边距（padding）、边框（border）和外边距（margin）组成。

1.前提了解:

①为什么要一定提前清除CSS盒子样默认样式 * {margin: 0;padding: 0;}

因为浏览器是默认使用CSS的stylesheet样式表的,而这个样式表会提前设置很多样式的默认属性值:

②比如stylesheet样式表的margin样式默认都是为8px,这就会盒子和整个页面body父盒子 和 同级其他盒子之间导致产生不必要的间隔.

2.HTML网页盒子模型基本概念（CSS重点）

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

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

​ 每个矩形都由[元素的内容]原始块盒子、内边距（padding）、边框（border）和外边距（margin）组成。

3.简述自身盒子 和 padding 和 border 和 margin 区别?

​ (1)自身盒子宽高:一个块级元素,由宽width和高height组成.(只有块或者行内块元素才能设置!)

​ (2)盒子框border:当前自身盒子的边缘厚度(因为外皮也会有宽度,也会增大自己身盒子大小)

​ (3)内边距padding:当前自身盒子的内部文本[文本你可以圈起来看成一个文本框] 到 自身盒子边框的距离.

​ 0px时文字会紧贴自身盒子左上角的(1px开始就在文本和边框之间填充脂肪肌肉,因此会增大自身盒子原始大小)

​ (4)外边距margin:当前自身盒子 与 其他盒子(比如套着当前盒子的父级body大盒子和隔壁其他div同级盒子)的距离 ,0px时盒子会紧贴父盒子左上角的(1px开始四周推开其他盒子1px , 如果是-1px负数值则是反过来凑近1px)

4.盒子模型注意点:(网页盒子 > 自定义盒子)

​ ①盒子模型组成:= 原始自定义盒子 + 往外扩充一层内边距肌肉[padding] + 再扩充一层边框皮肤[border] + 外边距margin

​ ②盒子总宽/高度=原始盒子宽 + 左右两边border + 左右两边padding;(盒子总高度公式也一样照葫芦画瓢即可) , 因为padding和border和都会撑大自定义盒子块级元素大小.(margin不会!)

​ ③自定义盒子和边框border有颜色和样式设置,而padding和margin只设置距离.

​ ④ padding和margin内外边距可以使用具体的百分数来设定,但这个百分数是相对于上一级父级元素的宽度来决定的,即上左下右的padding和margin的百分数值都是根据父级元素的宽度取值的.

⑤行内元素如span也可以实现水平左右的padding和margin,但垂直下上的无效.

块元素上左下右的padding和margin都能实现

一.盒子模型（Box Model）

1.width 元素宽度

width用来给元素设置宽度 注意:

①width用来给元素设置宽度,宽度必须设置.不设置的话会独占整行超级大.

​ ②只有块(block)元素或者行内块(inline-block)元素才能够设置,

​ 行内元素不能设置width,因为自身没有width宽度,文本多长他就多长.

width: 100px;

2.height 元素宽度

①高度默认是根据内容来的,可以不写.(不写有利于和内容展开)

②height用来给元素设置高度 注意: 只有块(block)元素或者行内块(inline-block)元素才能够设置

height: 100px;

3.内容的宽度和高度

使用宽度属性width和高度属性height可以对盒子的大小进行控制。

width和height的属性值可以为不同单位的数值或相对于父元素的百分比%，实际工作中最常用的是像素值。

大多数浏览器，如Firefox、IE6及以上版本都采用了W3C规范，符合CSS规范的盒子模型的总宽度和总高度的计算原则是：

 /*外盒尺寸计算（元素空间尺寸）*/
 Element空间高度 = content height + padding + border + margin
 Element 空间宽度 = content width + padding + border + margin
 /*内盒尺寸计算（元素实际大小）*/
 Element Height = content height + padding + border （Height为内容高度）
 Element Width = content width + padding + border （Width为内容宽度）

注意：

1、宽度属性width和高度属性height仅适用于块级元素，对行内元素无效（ img 标签和 input除外）。
行内元素得转换为块级元素才行,或者去找父级元素设置宽高.

2、计算盒子模型的总高度时，还应考虑上下两个盒子垂直外边距合并的情况(两个盒子margin上下方向会合并)。

3、如果一个盒子会和父亲一样宽 占满父亲的宽度， 如果此盒子没有给定宽度 则padding 不会影响本盒子大小。(后面会讲padding应用2中,子盒子借用父盒子宽度没有自己给定宽度,则padding不会影响子盒子大小,反而会挤压自身内部文本.如果padding设置左右,则挤压文本向下直到变为竖排,设置四周或者挤压文本越来越小)

4.高度和宽度在inline-block下的文档流显示!!! (必须适应规则!!!)

(1)(块or行内块)宽度高度 设置 百分比% 是继承 父元素的 宽度高度 50% 就是 父元素总宽度的50%

(2)块元素默认高度 是根据内容来的 不是根据父元素高度来的,元素(块)宽度在自己没给定时,才是默认父元素宽,即100%

(3)行内宽度 默认是根据内容来的 行内元素也没法设置宽度高度 只能根据内容来

(4)图片标签 可以设置固定宽度 高度设置为auto (反过来也行,但是一般都是给高度auto), 图片标签大小会根据宽度来自适应等比例设置高度.否则图片可能会变形!!!

! ! !(5)例如:如果同一行有多个元素[比如行内块元素]的宽度相加 结果大于 父元素容器的宽度 在会放不下的,文档流会使其换行显示

比如:
下面的两个div段落变为行内块元素时,本应该同一行显示,但是却强制换行. 因为第二段的宽度已经超出父元素容器剩余的宽度了. (那么浏览器就会让他换行显示)
因此 如果是图片和图片 或者 图片和文段 或者文段和文段 都要注意组合元素的宽度和会不会大于父级元素
解决方法: ①如果是两段文段要变为行内块则设置好各自宽度,不要和起来大于父级行宽度.(不然行内块失效,还是分行显示)
②如果是图片和文字变为行内块则设置图片放好之后,要看父级元素宽度还剩多少 , 设置文段宽度等于剩余宽度
(因为文字宽度不设置默认就是父级元素的宽度),设置好以后就两段共同在一行显示.

改造之后: 给两段文字分别给予宽度, 两段文字宽度之和不能大于父级盒子宽度即可.

    .box {
      width: 800px;
      height: 300px;
      border: 1px solid red;
      margin: 0 auto;
    }

    .item1 {
      display: inline-block;
      width: 300px;
      
      backgr