CSS布局总结

三、CSS布局

1、文档流

网页是一个多层的结构，一层摞着一层，通过CSS可以分别为每一层来设置样式。作为用户来讲就只能看到最顶上一层，这些层中，最底下的一层称为文档流。文档流是网页的基础，我们所创建的元素默认都是在文档流中进行排列， 对于我们来讲元素主要有两个状态：
在文档流中
不在文档流中（脱离文档流）

元素在文档流中的特点：
块元素：
块元素在页面中独占一行，自上向下垂直排列
默认宽度是父元素的全部即把父元素撑满
默认高度是被内容（子元素）撑开

行内元素：
行内元素不会独占页面内的一行，只占自身的大小
行内元素在页面中自左向右水平排列
如果一行之中不能容下，则元素会换到第二行继续自左向右排列
行内元素的默认宽度和高度都是被内容撑开

2、盒子模型

（1）盒子模型简介

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

• 内容区（content）

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

• 边框（border）

  边框属于盒子边缘，边框里面属于盒子内部，出了边框都是盒子外部，边框的大小会影响到盒子的大小，设置边框，至少需要设置三个样式：

  • 边框的宽度：border-width

    border-width如果不写的话浏览器也会默认设置宽度一般为3px的边框，border-width可以用来指定四个方向的边框的宽度，其属性值的情况为：
    四个值：上，右，下，左
    三个值：上，左右，下
    两个值：上下，左右
    一个值：上下左右

    除了border-width还有还一组属性来单独指定某一个边框的宽度：
    border-top-width
border-right-width
border-bottom-width
border-left-width

    border-width: 10px;
    border-width: 10px 20px 30px 40px;
    border-top-width: 30px;
    

  • 边框的颜色：border-color

    border-color也可以省略不写，如果省略则自动使用color的颜色，如果color没有指定，则默认为黑色。border-color后同样可以跟多个值，值的规则跟border-width相同， border-color同样可以使用border-xxx-color来为每一条变单独设置样式。

    border-color: brown;
    border-color: blue red green;
    border-bottom-color: blueviolet;
    

  • 边框的样式：border-style

    常用的样式值：
    solid:表示实线
    dotted:表示点状虚线
    dashed:虚线
    double:双线

    border-style的默认值是none，因此不可以省略
    border-style后同样可以跟多个值，值的规则跟border-width相同
    border-style同样可以使用border-xxx-style来为每一条变单独设置样式

    border-style: solid;
    border-style: solid double;
    border-left-style: dashed;
    

  以上写法比较复杂，开发中一般不这样写，而是使用border的简写属性，通过该属性可以同时设置边框所有的相关样式，并且没有顺序要求。除了border以外border-top、border-right、border-bottom、border-left同样可以这样简写。

  border: 10px red solid;
  /* 为盒子设置上左下边框 */
  border: 10px red solid;
  border-right: none;
  

• 内边距（padding）

  内边距表示内容区和边框之间的距离，一共有四个方向的内边距
  padding-top
padding-right
padding-bottom
padding-left
  内边距的设置会影响到盒子的大小，背景颜色会延伸到内边距上

  padding-top: 100px;
  padding-right: 100px;
  padding-bottom: 100px;
  padding-left: 100px;
  

  padding的简写也可以指定四个方向的内边距，规则和border-width一样

  padding: 10px 50px 100px 200px;
  

  一个盒子可见框的大小，由内容区，内边距和边框共同决定，所以在计算盒子大小时，需要将这三个区域加到一起计算

• 外边距（margin）

  外边距不会影响盒子可见框的大小，但是外边距会影响到盒子的位置，盒子实际的占用空间大小发生改变。一共有四个方向的外边距：

  margin-top：上外边距，设置一个正值，元素会向下移动
  margin-right：默认情况下设置margin-right没有任何作用
  margin-bottom：下外边距，设置一个正值，其他元素向下移动
  margin-left：左外边距，设置一个正值，元素向右移动

  margin也可以设置负值，如果是负值则元素会向相反的方向移动

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

  margin-top: 100px;
  margin-bottom: 100px;
  margin-left: 100px;
  

  margin同样可以设置四个方向的外边框，规则和padding一样

（2）盒子模型布局

• 水平方向的布局

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

  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)=父元素内容区域

  .outer{
    width: 800px;
    height: 200px;
    border: 10px red solid;
  }
  .inner{
    width: 200px;
    height: 200px;
    margin-left: auto;
    margin-right: auto;
    background-color: #bbffaa;
  }
  
    
  
  
  

  此例中等式表示为：0+0+0+200+0+0+0=800显然等式不能成立。由于浏览器默认以上等式必须成立，如果不成立，则称为过度约束，会对等式自动调整，调整过程为：

  • 没有auto的情况
    如果这7个值中没有auto，则浏览器会自动调整margin-right值以使等式成立，即使自己设定了margin-right的值，浏览器依然会根据情况调整，即上述等式变为：0+0+0+200+0+0+600=800

  • 有auto的情况

    这七个值中有三个值可以设置为auto，分别为width、margin-left、margin-right
    auto的意思是不去人为设定值，由浏览器自己调整。如果某个值为auto，则会自动调整值为auto的那个属性以使等式成立。

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

• 垂直方向的布局

  • 默认情况下父元素高度被内容撑开
    子元素是在父元素的内容区中排列的，如果子元素的大小超过了父元素，则子元素会从父元素中溢出。使用overflow属性来设置父元素如何处理溢出的子元素
    overflow可选值：
    visible: 默认值，子元素会从父元素中溢出，在父元素外的位置显示
    hidden: 溢出内容会被裁剪不显示
    scroll: 生成两个滚动条，通过滚动条来查看完整的内容
    auto: 根据需要自动生成滚动条
    overflow-x与overflow-y：单独生成x与y方向的滚动条

  • 垂直外边距的重叠（折叠）

    相邻的垂直方向外边距会发生重叠现象

    • 兄弟元素：
      兄弟元素之间的相邻垂直外边距会取两者之间的较大值（两者都是正值时）
      特殊情况：
      如果相邻的外边距一正一负，则取两者的和
      如果相邻的外边距都是负值，则取两者中绝对值较大的
      兄弟元素之间的外边距的重叠对于开发是有利的，所以我们不需要进行处理

    • 父子元素
      父子元素间相邻外边距，子元素会传递给父元素（仅上外边距，左外边距不会传递）
      父子外边距的折叠会影响到页面的布局，必须要进行处理

      .box3{
        width: 200px;
        height: 200px;
        background-color: cadetblue;
      }
      .box4{
        width: 100px;
        height: 100px;
        background-color: chartreuse;
        margin-top: 100px;
        margin-left: 100px;
      }
      
        
      
      
      

      在此例中虽然没有对父元素box3设置上外边距，但是子元素box4的外边距会传递给父元素使得box3拥有了一个大小为100px的上外边距。想要取消这种外边距的传递最简单的方法就是给父元素添加一个overflow:hidden;即可。

（3）行内元素的盒子模型

行内元素不支持宽度和高度
行内元素可以设置padding，但是垂直方向的padding不会影响页面布局
行内元素可以设置border，但是垂直方向的border不会影响页面布局
行内元素可以设置margin，但是垂直方向的margin不会影响网页布局

.box1{
  width: 200px;
  height: 200px;
  background-color: chartreuse;
}
.s1{
  background-color: cornflowerblue;
  padding: 100px;
  border: 10px solid red;
}
a{
  background-color: rosybrown;
}
我是span

超链接

display用来设置元素显示的类型，可选值：
inline：将元素设置为行内元素
block：将元素设置为块元素
inline-block：将元素设置为块元素，行内块，既可以设置宽度又不会独占一行
table：将元素设置为一个表格
none：元素不再页面中显示（包括其所占的区域都删除）

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

（4）默认样式

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

*{
  margin: 0;
  padding: 0;
}

（5）盒子的尺寸

默认情况下，盒子可见框的大小是由内容区，内边距和边框共同决定的
box-sizing用来设置盒子尺寸的计算方式（设置width和height的作用），可选值：
content-box:默认值，宽度和高度用来设置内容区大小
border-box：宽度和高度用来设置整个盒子可见框的大小
width和height指的是内容区和内边距和边框的总大小

box-sizing: border-box;

3、轮廓和圆角

（1）轮廓

outline用来设置元素的轮廓线，用法和border一样，轮廓和边框的不同点在于轮廓不会影响到可见框的大小

outline: 10px solid red;

border-shadow用来设置元素的阴影效果
第一个值：水平偏移量，设置阴影的水平位置，正值向右移动，负值向左移动
第二个值：垂直偏移量，设置阴影的垂直偏移量，正值向下移动，负值向上移动
第三个值：阴影的模糊半径，值越大阴影越大
第四个值：阴影的颜色，通常用rgba来设置

box-shadow: 10px 10px 30px rgba(0, 0, 0, .9);

（2）圆角

border-radius用来设置圆角
border-redius可以跟四个值来指定四个角的圆角
四个值：左上 右上 右下 左下
三个值：左上 右上/左下 右下
两个值：左上/右下 右上/左下
一个值：四个角

border-radius: 10px 20px 30px 40px;

可以为一个角设置两个值，第一个是水平方向把半径，第二个值是垂直方向的半径

border-radius: 10px/40px;

将元素设置为圆形

border-radius: 50%;

border-radius同样可以单独为四个角设置样式
border-top-left-radius
border-top-right-radius
border-bottom-left-radius
border-bottom-right-radius

border-top-left-radius: 30px;
border-bottom-right-radius: 20px 50px;