页面布局学习

页面学习三大核心：盒子模型、浮动、定位

1.1看透网页布局的本质

过程：

1.先准备好相关的网页元素，网页元素基本都是盒子Box。
2.利用 CSS 设置好盒子样式，然后摆放到相应位置,
3.往盒子里面装内容
网页布局的核心本质:就是利用 CSS摆盒子

1.2盒子模型（Box Modle）组成

边框：border 

内容：content

内边距：padding 内容与边框之间的距离

外边距：margin 盒子和盒子的距离

一.边框（border）

组成：宽度(粗细)、边框样式、边框颜色

语法：border：border-width（宽度）||   border-width （边框样式）||  border-color （边款颜色）

/* border-width 边框的粗细 一般情况下都用px */

            border-width: 5px

   /* border-width 边框的样式 solid 实线边框 */

    /* border-style: solid; */

     /* border-width 边框的样式 dashed 虚线边框 */

      /* border-style: dashed; */

      /* border-width 边框的样式  dotted 虚线边框 */

       border-style: dotted;

 /* border-color 边款的颜色 */

            border-color: pink;

边框的复合写法：

简写：border ：1px  solid  red;//没有先后顺序

边框分开写：

            border-top: 1px solid red;

            border-bottom: 1px solid blue;

            border-left: 1px solid blue;

            border-right: 1px solid blue;

写一个200*200盒子，设置上边框为红色，其余边框为蓝色（提示：注意层叠性）

            border: 1px solid blue;

            /* 层叠性 只是层叠了上边框 就近原则  下面的覆盖上面的 不能调转顺序 */

            border-top: 1px solid red;

表格的细线边框：

 border-collapse: collapse;//两个相邻边框放一起后表格的边框会加粗，因此使用collapse

            /* 合并相邻的边框 */

边框会影响盒子的实际大小

盒子加上边框后盒子会变大，影响使用

有两种方案解决:
1.测量盒子大小的时候,不量边框。
2.如果测量的时候包含了边框,则需要 width/height 减去边框宽度

二.内边框（padding）：内容与边框之间的距离

            padding-top: 20px;

            padding-left: 20px;

            padding-right: 20px;

            padding-bottom: 20px;

内边框的简写：

           /* 只有一个值，代表上下左右都有5像素内边距 */

            padding: 5px;

            /* 两个值，代表上下内边距是5像素，左右内边距是10像素 */

            padding: 5px 10px;

            /* 三个值，代表上内边距是5像素，左右内边距是10像素，下内边距是20像素*/

            padding: 5px 10px 20px;

            /* 四个值，代表上内边距是5像素，右内边距是10像素，下内边距是20像素，左内边距30像素 顺时针*/

            padding: 5px 10px 20px 30px；

内边框会影响盒子的实际大小

盒子加上内边框后盒子会变大，影响使用

解决办法：通过width/height减去多出来的内边距大小

如果盒子本身没有指定width/height属性，此时padding不会撑开盒子

三,外边距（margin）控制盒子和盒子的距离

跟padding差不多

块级元素的水平居中：

1.盒子必须设置宽度

2.盒子左右的外边距都设置为 auto。

.header{ width:960px; margin:0 auto;}

常见的写法，以下三种都可以:

margin-left: auto; margin-right auto;
margin: auto;
margin: 0 auto;

        /* 行内元素或者行内块元素水平居中给其父元素添加 text-align:center即可 */

外边距合并

清除内外边距

 *{

            margin: 0;

            padding: 0;

        }

注意：行内元素为了照顾兼容性，尽量只设置左右，不要设置上下，但是转化为块级或行块级元素