CSS布局总结1

Posted 2020-11-10 zhongblog

简述

对于CSS的学习来说，布局和定位可以说使最关键的一部分，也是最基础的部分，布局和定位方面在学习的时候应该要系统，要自己总结一遍，如果只是草草的过一遍，就直接开始做demo，会遇到很多坑，反而得不偿失。因此我写下这篇博客，读者如果发现问题，望不吝赐教。

一 盒模型

在讲布局和定位之前，先总结一下盒子模型。盒模型是布局定位的基础。
盒模型由以下四个部分组成

• 内容区
• 内边距
• 边框
• 外边距

注意：背景应用于由内容和内边距、边框组成的区域。即图中浅色区域。
代码：

background-image: url(images/background.gif);  

在 CSS 中，width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。

假设框的每个边上有 10 个像素的外边距和 5 个像素的内边距。如果希望这个元素框达到 100 个像素，就需要将内容的宽度设置为 70 像素，如下图：

#box {
  width: 70px;
  margin: 10px;
  padding: 5px;
}

二 块元素和内联元素

流是浏览器在页面上摆放html元素所用的方法，浏览器从HTML文件最上面开始，从上到下沿着元素流逐个显示遇到的各个元素。
每个块元素独占一行，或者说块元素之间会有一个换行。
内联元素则会在水平方向上挨着，随着浏览器或内容区大小自适应换行。

并排叠加问题

并排放置两个内联元素时，元素都会有外边距，如果左边元素外边距为10px，右边元素外边距为20px，那么两个元素之间就有30px的空间。

浏览器上下放置两个块元素时，它会把他们共同的外边距折叠在一起，折叠的外边距高度就是最大的外边距高度。

浮动元素

指定一个标识，指定宽度。注意所有的浮动元素必须要有宽度。

    #id{   
         width: 200px;
         float: right;
   }

clear属性可以解决浮动元素重叠的问题。

三 布局

流体布局

采用div实现，内容区会扩充到整个浏览器的窗口。可采用主内容固定，侧边栏浮动，即可填满整个界面。

冻结布局

顾名思义就是内容区不会自适应浏览器视窗，无论浏览器窗口大小形状怎么变化，内容区大小都不变，若视窗小于内容区的大小，那么有一部分内容将无法被看见。

    #content {
             width：200px;
             padding-top: 5px;
             padding-bottom: 5px;
             background-color: #675747;
   }  

凝胶布局

凝胶介于流体和冻结之间，为内容区增加div，属性如下，可实现居中，内容不会像流体布局那样扩充到整个浏览器的视窗，确定了宽度后，拉大浏览器的界面，内容区会居中，左右两边会出现空白

    width: 800px;
    margin-left: auto;
    margin-right: auto;

CSS表格显示

用table布局和其他布局一样有优缺点，table多用于数据承载，或者用于简单的页面布局，但代码冗余多，不好调整结构，不容易改变布局。css对表格的控制也不是很好。而且对性能也有很大影响。所以布局最好不用table，有多行多列的数据需要显示的时候可以用来当容器。相关CSS 代码如下：

    #Container {
            display:   table;
            border-spacing:  10px      /*为单元格增加10px的边框间距*/
    }

    #tableRow {
            display:  table-row;        /*指定行*/
    }

    #main {
            display:  table-cell;  
            vertical-align: top;     /*确保表格两个单元格中的所有内容相对于单元格上边对其(而不是中间或下边对齐)*/
    }

    #sidebar {
            display:  table-cell;
             vertical-align:  top;
    }