居中、CSS三大特性和盒子模型

一、居中属性

      1.text-align:center

 1、让块状元素中的文本内容、行内元素、行内块元素相相对于块状元素的宽度水平居中

 2、不能让块状元素中的块元素水平居中

 3、行内元素设置此属性无效

      2.line-height:height的属性值

 1、让块状元素中的文本内容、行内元素、行内块元素相相对于块状元素的高度垂直居中

 2、不能让块状元素垂直居中

 3、行内元素设置此属性无效

二、CSS的三大特性

        1.层叠性

  相同的CSS属性，后边的样式覆盖前边的样式

   长江后浪推前浪，前浪死在沙滩上

   就近元素

         2.继承性

   1、后代元素都可以继承祖先元素的样式

   2、遵循亲代就近优先继承

   3、元素本身的样式是大于继承过来的样式

   4、宽高是不能继承的

        3.优先级

   1、同一个元素中：统配符选择器 < 标签选择器 < 类名选择器 < ID选择器 < style < !important

   2、权重性

         千位 百位 十位  个位

    标签  0    0    0    1

    类名  0    0    1    0

    id    0    1    0    0

    style 1    0    0    0

三、

        table布局的缺点是？
        答： a. 太深的嵌套，比如table>tr>td>h3，会导致搜索引擎读取困难，而且，最直接的损失就是大大增加了冗余代码量。
        b. 灵活性差，比如要将整个表格CSS设置border等属性，是不行的，得通过td
        c. 代码臃肿，当在table中套用table的时候，阅读代码会显得异常混乱
        d. 混乱的colspan与rowspan，用来布局时，频繁使用他们会造成整个文档顺序混乱。
        e. 不够语义，头部用header,底部用footer……

四、盒子模型之边框

1.边框属性：border 

        边框的尺寸:px

        边框的样式：实线solid  虚线dashed  点线dotted  双实线double

        边框的颜色：英文、十六进制、rgb

2.去掉边框 

      border-bottom: none;

3.去掉表格边框默认的距离 

      border-collapse: collapse;

4.

        1.网页布局的本质：拼接盒子的过程 -->

        2.盒子模型：边框、内边框、外边距 -->

        3.边框会影响盒子的尺寸

五、内外边距

1.padding

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

                   内边距会影响盒子的尺寸

2.       * {

             /* 清除所有元素默认的内外边距 */

              margin: 0;

              padding: 0;

            }

3.

        块状元素水平居中条件：

                  1、必须块状元素

                  2、必须设置宽度

4.margin

        元素与其他元素或者浏览之间的距离 

         外边距不会影响盒子尺寸

5.相邻块状元素的垂直外边距合并（塌陷）

      当上下相邻的两个块元素相遇时，如果上面的元素有下外边距margin-bottom，下面的元素有上外边距margin-top，

      则他们之间的垂直间距不是margin-bottom与margin-top之和，而是两者中的较大者

6.嵌套元素的垂直外边距合并

      对于两个嵌套关系的块元素，如果父元素没有上内边距及上边框，

      则父元素的上外边距会与子元素的上外边距发生合并，合并后的外边距为两者中的较大者，

      如何解决？

          1、添加上边框

          2、添加上内边距

          3、给父元素添加overflow:hidden属性