学习资料：

尚硅谷前端HTML5视频_HTML & CSS 核心基础教程（103集实战教学，从入门到精通）

一、盒子

• CSS处理网页时，它认为每个元素都包含在一个不可见的盒子里
• 为什么要想象成盒子呢？因为如果把所有的元素都想象成盒子，那么我们对网页的布局就相当于摆放盒子了
• 我们只需要将相应的盒子摆放到网页中相应的位置即可完成网页的布局

盒子的组成部分：

• 内容区：content
• 内边距：padding
• 外框：border
• 外边距：margin

二、盒子模型

1 外框

• width/height：设置内容区的大小

• border-width：设置外框

• border-color：设置外框颜色

• border-style：设置外框样式

使用border-width可以分别设置四个外框的宽度：

• border-width:10px 20px 30px 40px
• 则顺时针将四个数值分配给边框，即上 右 下 左
• 如果三个值则给上 左右 下
• 如果两个值则给上下 左右
• 如果一个值则给四边

除了border-width，css还提供了四个border-xxx-width来专门设置四个边框，分别对应：

• top right bottom left

2 颜色设置规则同上

3 样式

border-style：

值：

• none：默认无
• solid：实线
• dotted：点
• dashed：虚线
• double：双线

3 外框样式：border

边框的简写样式，可以同时设置宽度、颜色、样式，没有顺序要求

border-xxx：可以分别对四个边框进行设置

单独去掉某个边的样式：border-xxx:none

4 内边距

• padding
• 一共有四个方向的边距：padding-xxx
• 元素的背景会延伸至内边框
• padding属性：
  • padding:10px 20px 30px 40px

5 外边距

• 不会影响可见框大小

• margin-xxx

• margin

• 由于页面中的元素都是靠左上摆放的，所以当我们设置上左外边距时，该元素位置会改变元；而设置下右外边距时，会影响其他元素的位置。

• 外边距也可以为负值，负值使得元素往反方向移动

• margin还可设置为auto，一般用于水平方向，实现元素的左右及居中对齐。经常将左右外元素设为auto实现水平居中

• 垂直外边距的重叠：

  • 在网页中，垂直方向的相邻的外边距会发生重叠
  • 所谓的外边距重叠是指兄弟元素之间的相邻边距会取最大值而不是求和
  • 如果父子元素的外边距相邻时，则子元素的外边框会设置给父元素

6 去除元素默认边距

• 浏览器为了在页面中没有样式时，也可以有个比较好的标签，所以为很多元素默认设置外边距

• 而它的这些默认样式，正常情况下不需要使用的

• 因此我们需要先去除默认边距：

  • *{margin:0; padding:0;}

三、内联元素的盒子

• 内联元素不能设置width和height

• 可以设置水平内间距

• 可以设置垂直方向的内边距，但不会影响页面的布局，不会影响自身和其他盒子的位置，即布局

边框

• 可以设置边框，但是垂直的边框不会影响页面布局

外边距

• 可以设置水平方向外边距
• 水平方向外边距不会重叠，会求和
• 内联元素不支持垂直方向外边距

display

• 规定元素被变成的类型

值：

• block

  • 将一个内联元素变成块元素

• inline

  • 将元素转换为内联元素

• inline-block

  • 将元素转换为行内块元素，既可以设置宽高，又会独占一行

• none

  • 隐藏元素，不占位置

visibility

• 可以用来设置元素的隐藏和显示的状态
• 值:
  • visible
    • 默认值，显示
  • hidden：隐藏，但仍占位置

overflow

子元素默认是存在于父元素的内容区，子元素的大小可以等于父元素的大小

当子元素大小超过父元素的内容区，则超过的大小会在父元素以外的位置显示，超出的部分称为溢出的内容

父元素默认将溢出内容显示在外边

通过overflow可以设置父元素如何处理溢出部分的显示

• 值
  • visible：默认值，不处理，溢出部分在父元素外侧显示
  • hidden：溢出部分不显示
  • sroll：溢出部分可以手动拖动轮动条显示
    • 该属性不论属性是否溢出，都会给父元素添加水平和垂直方向的滚动条
  • auto：自动判断是否溢出，溢出则添加滚动条，不溢出则不添加滚动条比较智能

文档流

文档流：文档流处在网页的最底层，它表示的是一个页面中的位置

我们多创建的元素默认都处在文档流中

元素在文档流中的特点：-

• 块元素
  • 块元素在文档流中会独占一行，块元素会自上而下排列
  • 块元素在文档流转的默认宽度为父元素的100%，即默认为auto
  • 块元素在文档中的高度默认被严肃撑开
• 内联元素
  • 内联元素在文档流中只占自身的大小，会自左向右排列
  • 一行显示不足可换行显示
  • 内联元素的宽度和高度都被内容撑开
• 当元素的高度或宽度的值为auto时，此时指定的内边距不会影响可见框的大小，而是会自动修改宽度和高度，以适应内边距

浮动

• float

• 脱离文档流，不受文档流对元素位置的限定

• 值

  • none：默认排列
  • left：向左侧浮动
  • right：向右侧浮动

• 当一个元素设置浮动后（float值为非none），元素会立即浮动，不再占原有位置，原来位于下面的元素会飘上去。

• 元素飘动以后，会尽量向陀的左上或右上漂浮，直到遇到父元素的边框

• 如果浮动元素上边是一个没有浮动的块元素，则浮动不会超过块元素的界限

• 浮动的元素不会超过它的兄弟元素，最多最多一边齐

• 浮动的元素不会盖住文字，文字自动环绕在浮动元素的周围，所以通过浮动设置文字环绕图片的效果

• 在文档流中，子元素的宽度默认占父元素的全部，当元素设置浮动以后，会完全脱离文档流，宽度和宽度都被内容撑开。

• 内联元素脱离文档流，会变成块元素

四、高度坍塌

• 当子元素脱离文档流后，子元素无法撑起父元素，导致父元素的高度塌陷
• 则父元素下的所有元素则会顶上去，影响页面的布局，在开发中要避免高度坍塌

解决高度塌陷问题

• 根据w3c标准，在页面中元素都有一个隐含的属性叫做Block Formatting Context，简称BFC，该属性可以设置打开会关闭，默认是关闭的

• 当开启元素的BGC后，元素会有以下的特性：

  • 父元素的垂直外边距不会和子元素重叠
  • 开启BFC的元素不会被浮动所覆盖
  • 开启BFC的元素可以包含浮动的子元素

• 如何开启元素的BFC：

  • 设置元素浮动

    • 虽然可以撑开父元素，但会导致父元素的宽度丢失，跟随子元素
    • 而且也会导致下边的元素上移，不能解决问题

  • 设置元素的绝对定位

  • 设置元素的inline-block

    • 同样父元素宽度丢失

  • 将元素的overflow设置为一个非visible的值 -- auto和hidden都可以，推荐使用hidden

    • 开启了BFC，且父元素宽度不丢失

在IE6及以下的浏览器并不支持BFC，但可以通过开启hasLayout来解决，使用zoom=1开启hasLayout。

• zoom表示放大的意思，后面跟着一个数值，写几就将元素放大几倍

• zoom=1表示不放大，但是通过这个样式开启了hasLayout

• zoom只在IE里支持，其他浏览器不支持

五、清除浮动

• 清除由于其他元素的浮动对当前元素的位置产生的影响

• clear

• 值：

  • none：默认值，不清除
  • left：清除左侧浮动产生的影响
  • right：清除右侧浮动产生的影响
  • both：清除对该元素影响最大的元素浮动所产生的影响

• 清除之后，元素回到原来的位置

• 解决高度塌陷的第二种方法：

  • 直接在高度塌陷的父元素的最后添加一个空白的div
  • 由于这个div并没有浮动，所以他是可以撑开父元素的高度
  • 然后对其进清除浮动，这样可以通过这个空白div来撑开父元素的高度
  • 副作用：添加一个多余的div结构

• 解决高度塌陷的第三种方法：

  .clearfix:after{
      content="";
      display:block;
      clear:both;}
  

  • 通过css来给元素的末尾添加一个空白块元素。这种方式是最好的。

  • 在需要解决高度坍塌的元素的class增加一个clearfix即可，非常方便。