Web前端自学记录（三）（Layout布局）

Layout布局基础

1.文档流

文档流（normal flow）

网页是一个多层结构，一层压一层，通过CSS可以为每一层设置样式，作为用户只能看到最顶上的一层
这些层中最底下的一层称为文档流，是网页的基础，我们所创建的元素默认都是在文档流中进行排列

对于我们来说元素主要有两个状态：在文档流中
			                 不在文档流中，脱离文档流

元素在文档流中的特点

块元素
   块元素会在页面中独占一行
   默认宽度是父元素的宽度
   默认高度是被内容（子元素）撑开的高度
行内元素
   行内元素不会独占一行。只占自身的大小
   行内元素在页面中自左向右水平排列，如果一行中不能容纳下所有的行内元素，会自动换到第二行继续自左向右排列
   行内元素的默认宽度和高度都是被内容撑开的宽度和高度

2.盒子模型

盒子模型（box model）

CSS将页面中的所有元素设置成一个矩形的盒子
将元素设置为矩形的盒子后，对页面的布局变成将不同的盒子摆放到不同的位置
每一个盒子都由以下几个部分组成：
            内容区(content)
            内边距(padding)
            边框(border)
            外边距(margin)

内容区(content)

元素中所有的子元素和文本内容都在内容区排列
内容区的大小由width和height两个属性设置

边框(border)：盒子的边缘

边框的大小会影响整个盒子的大小，要设置边框，至少设置三个样式
边框的宽度 border-width
边框的颜色 border-color
边框的样式 border-style

border-width

默认值：一般是3个像素
border-width可以用来指定四个方向的边框的宽度
值的情况
     四个值：上 右 下 左
     三个值：上 左右 下
     两个值：上下 左右
     一个值：上下左右
 除了border-width还有一组border-xxx-width
 xxx：top bottom left right
 用来单独指定某一个边的宽度

border-color

与border-width用法类似

border-style

border-style 指定边框的样式
  solid 表示实线
  dotted 点状虚线
  dashed 虚线
  double 双线

border-style的默认值的none，表示没有边框

border简写属性，通过该属性可以设置边框的所有相关样式，并且没有顺序要求

border:10px solid red;

内边距(padding):内容区和边框之间的距离

一共有四个方向的内边距
   padding-top
   padding-right
   padding-bottom
   padding-left
   规则与border-width相同
   内边距的设置会影响盒子的大小,背景颜色会延申到内边距上

一个盒子的可见框大小，由内容区，内边距，边框共同决定。计算大小时进行相加

外边距(margin)

外边距不会影响盒子可见框的大小,但是外边距会影响盒子的位置

一共有四个方向的外边距
	margin-top:上外边距，设置一个正值，元素会向下移动
    margin-right：默认情况下设置margin-right不会产生任何效果
    margin-bottom：下外边距，设置一个正值，其下边元素会向下移动
    margin-left：左外边距，设置一个正值，元素会向右移动
    margin也可以设置负值，元素会向相反方向移动

元素在页面中是按照自左向右顺序排列的
所以默认情况下如果我们设置的左和上外边距则会移动元素自身
而设置下和右外边距则会移动其他元素

margin的简写属性：margin可以同时设置四个方向的外边距，用法和padding一样
margin会影响到盒子实际占用空间

3.水平方向的布局

元素的水平方向的布局：元素在其父元素中水平方向的位置由以下几个属性共同决定

margin-left
border-left
padding-left
width
padding-right
border-right
margin-right

一个元素在其父元素中，水平布局必须要满足以下等式

margin-left+border-left+padding-left+width+padding-right+border-right+margin-right
=其父元素内容区的宽度（必须满足）

如果相加结果等式不成立，则成为过渡约束，浏览器会自动调整

调整情况：
如果这七个值中，没有为auto的情况，则浏览器会自动调整margin-right
这七个值中有三个值可以设定为auto
width
margin-left
margin-right
如果某个值为auto，则会自动调整为auto的那个值以使等式成立

如果将一个宽度和一个外边距设置为auto，则宽度会调整到最大，设置为auto的外边距会自动为0
如果将三个值都设置为auto，则宽度最大，外边距为0
如果将两个外边距设置为auto，则会将两个外边距设置为相同的值
所以经常利用这个特点来使一个元素在其父元素中水平居中

4.垂直方向的布局

默认情况下父元素的高度被内容撑开，子元素是在父元素中内容区排列的
如果子元素的大小超过的父元素，则子元素会从父元素中溢出

使用 overflow 属性来设置父元素如何处理溢出的子元素
可选值：
	visible 默认值 子元素会从父元素中溢出，在父元素外部的位置显示
    hidden 溢出的内容将会被裁剪不会显示
    scroll 生成两个滚动条，通过滚动条来查看完整的内容
    auto 根据需要生成滚动条

    overflow x 单独处理水平方向
    overflow y 单独处理垂直方向

5.外边距的折叠

垂直外边距的折叠

相邻的垂直方向外边距会发生折叠现象
  兄弟元素：
       兄弟元素间的相邻垂直外边距会取两者之间的较大值(两者都是正值)
       特殊情况：
           如果相邻的外边距一正一负，则取两者的和
           如果相邻的外边距都是负值，则取绝对值较大的
           
       兄弟元素之间外边距的折叠，对开发是有利的
       
  父子元素：
       父子元素间的相邻外边距，子元素的会传递给父元素(上外边距)
       父子外边距的折叠会影响页面的布局，必须要进行处理

6.行内元素的盒模型

行内元素不支持设置宽度和高度

行内元素可以设置padding，但是垂直方向的padding不会影响页面的布局
行内元素可以设置border，垂直方向的border不会影响页面的布局
行内元素可以设置margin，垂直方向的margin不会影响页面的布局

display 用来设置元素显示的类型

可选值：
     inline 将元素设置为行内元素
     block 将元素设置为块元素
     inline-block 将元素设置为行内块元素
     行内块：既可以设置宽度和高度，并且不会独占一行
     table 将元素设置为一个表格
     none 元素不在页面中显示

visibility 用来设置元素显示的状态

可选值：
      visible 默认值，元素在页面中正常显示
      hidden 元素在页面中隐藏，不显示，但是依然占据页面的位置

7.浏览器的默认样式

默认样式：

通常情况，浏览器都会为元素设置一些默认样式
         默认样式的存在会影响页面的布局
         通常情况下编写网页时必须要去除浏览器的默认样式(PC端的页面)

重置样式表：专门对浏览器的样式进行重置

reset.css 直接去除的浏览器的默认样式
normallize.css 对默认样式进行了统一

8.盒子的大小

默认情况下，盒子可见框大小由内容区、内边距和边框共同决定
box-sizing 用来设置盒子尺寸的计算方式（设置width和height的作用）

可选值：
    content-box 默认值，宽度和高度用来设置内容区的大小
    border-box 宽度和高度用来设置整个盒子可见框的大小

9.轮廓和圆角

box-shadow用来设置元素的阴影效果，阴影不会影响页面布局

第一个值 水平偏移量
第二个值 垂直偏移量
第三个值 阴影的模糊半径
第四个值 阴影的颜色

outline用来设置元素的轮廓线，用法和border一样

轮廓和边框不同的是不会影响到可见框的大小

border-radius 用来设置圆角 圆角设置圆的半径大小

可以分别指定四个角的圆角
    四个值 左上 右上 右下 左下
    三个值 左上 右上/左下 右下
    两个值 左上/右下 右上/左下

后续会持续更新