学习前端的第五天的笔记记录

10）盒子模型
一、看透网页布局本质
1、先准备好相关的网页元素，网页元素基本都是盒子box
2、利用css设置好盒子样式，然后摆放到相应位置
3、往盒子里装内容

二、盒子模型组成
1、所谓盒子模型：就是把html页面中的布局元素看作是一个矩形盒子，也就是一个盛装内容的容器。
     css盒子模型本质上是一个盒子，封装周围的html元素，它包括：边框、外边距、内边距和实际内容
2、组成：border边框  +  content（内容）  +  padding（内边距）  +  margin（外边距）

三、边框border
border可以设置元素的边框。边框由三部分组成：边框宽度、边框样式、边框颜色
1、语法： border：border-width || border-style ||  border-color
      边框简写：  border：width  style  color；    （没有顺序）
      边框分开写：比如：  border-top：1px  solid  red；  /*只设定上边框，其余同理。也可以利用边框的层叠性*/
2、属性：border-width（定义边框粗细，单位是px）           border-style（边框的样式）                                 border-color（边框颜色）
【穿插别的知识：text-align是横向对齐方式，line-height是垂直对齐方式】

四、表格的细线边框——border-collapse
· 这个标签的属性控制浏览器绘制边框的方式，他控制相邻单元格的边框
   1、语法：border-collapse：collapse；
       · collapse是合并的意思                  · border-collapse：collapse；表示相邻边框合并在一起
   2、边框会影响盒子实际大小
· 边框会额外增加盒子的实际大小
   1、解决方案：· 测量盒子大小的时候，不量边框
                           · 如果测量的时候包含了边框，则需要盒子的width/height减去边框宽度

五、内边距——padding
1、属性：padding-left（左内边距）         padding-right（右内边距）
                padding-top（上内边距）         padding-bottom（下内边距）
2、四种赋值情况：  padding：5px；                                一个值，代表上下左右都有5像素内边距
                              padding：5px  10px；              两个值，代表上下内边距5px，左右内边距10px
                              padding：5px  10px  20px；               三个值，代表上，左右，下
                              padding：5px  10px  20px  30px；     四个值，代表上、右、下、左，顺时针 
【padding影响盒子的大小，也就是说，如果盒子已经有了宽度和高度，此时再指定内边距，会撑大盒子。如果盒子本身没有指定widyh/height属性，则此时padding不会撑开盒子大小】
解决方案：如果保持盒子跟效果图大小保持一致，则让width/heigth减去多出来的内边距大小即可
                比如，想要一个宽为200px，高为300px的盒子，内边距为10px，那么，在实际设定盒子的大小时，要设定盒子的宽为190px，高为290px

六、外边距——margin
· 用于控制盒子和盒子之间的距离
1、属性：margin-left（左外边距）                      margin-right（右外边距）
               margin-top（上外边距）                      margin-bottom（下外边距）
2、四种赋值情况：与上面padding的一致
· 外边距可以让块级盒子水平居中
1、条件： · 盒子必须指定了宽度                · 盒子左右边距都设置为auto
  eg.   .header { width：960px；margin：0  auto；}
2、另外三种写法：   · margin-left：auto；margin-right：auto；
                               · margin：auto；                                          · margin：0  auto；[最常用]
【注意：以上方法是让块级元素水平居中，行内或者行内块元素水平居中给其父元素添加 text-align：center  即可】
3、外边距合并：使用margin定义块级元素的垂直外边距时，可能会出现外边距合并
4、嵌套块元素垂直外边距塌陷
对于两个嵌套关系（父子关系）的块级元素，父元素有上外边距同时子元素也有上外边距，此时父元素会塌陷较大的外边距值
解决方案：· 可以为父元素定义上边框
                · 可以为父元素定义上内边框
                · 可以为父元素添加 overfiow：hidden
                · 还有其他方法，比如浮动、固定。绝对定位的盒子不会有塌陷问题

七、清除内外边框
网页元素很多都带有默认的内外边框，而且不同浏览器默认的也不一致。因此我们在布局前，首先要清除下网页元素的内外边框
1.语法： *{
                 padding：0；
                 margin：0；
               }
【注意：行内元素为了照顾兼容性，尽量只设置左右内外边框，不要设置上下内外边框，但是转换为块级和行内块级元素就可以了】
【注意：width：百分比；这里的百分比是指以父级作为分母，看设置的元素占父级的百分比】
【注意：我们做小竖线就  <em>|</em> 】

11)圆角边框——border-radius
1、语法：boeder-radius：length；
2、注意点：· 参数值可以为数值或者百分比的形式
                  · 如果是正方形，想设置为一个圆形，把数值改为高度或宽度的一半即可，或者直接写为50%
                  · 如果是一个矩形，设置为高度的一半就可以做椭圆
                  · 该属性是一个简写属性，可以跟四个值，分别代表左上角、右上角、左下角、右下角
                  · 分开写 border-top-left-radius、border-top-right-radius、border-bottom-left-radius、border-bottom-right-radius

12）盒子阴影——box-shadow
1、语法： box-shadow：h-shadow  v-shadow  blur  spread  color  inset；
2、属性：h-shadow        必须。水平阴影位置，允许负值。                                      eg.当我们鼠标经过盒子是就添加阴影
               v-shadow         必须。垂直阴影位置，允许负值。                                             div：hover{
               blur                  可选。模糊距离。                                                                                 box-shadow：10px  10px  10px  -4px  rgb(0，0，0，.3);
               spread              可选。阴影尺寸。                                                                    }
               color                可选。阴影颜色。
               inset                 可选。将外部阴影（outset）转换为内部阴影。
【注意：默认是外阴影（outset），但是不可以写这个单词，否则导致阴影无效。
             盒子阴影不占用空间，不会影响其他盒子的排列】

13)文字阴影——rext-shadow
1、语法：text-shadow：h-shadow  v-shadow  blur  color；
2、属性：h-shadow        必须。水平阴影位置，允许负值。
               v-shadow         必须。垂直阴影位置，允许负值。
               blur                  可选。模糊距离。
               color                可选。阴影颜色。