网页设计（二）

六、XM6

/*选择器：标签选择器，类选择器，ID选择器*/

    text-align: center;   /*文本居中*/

    .ziti{/*类选择器*/
            }

#font{    /*id选择器*
            }

七、XM7

盒子模型：
        内容：content,
        内边距：padding
        边框 ：border
        外边框： margin

内部样式：

    *{     *:通配符,指所有的标签.初始化所有标签的外边距和外边
            }

/* padding: 50px 40px 30px 20p; 分别对应上 右 下 左顺时针方向 */
                 padding:50px 30px 10px ;/* 分别对应:上 左右 下 */
                /* padding:50px; 四个方位都是50px*/

盒子模型：内容conten，边框：border，内边框：padding
         方位词：top上，bottom下，right右，left左，center居中
         内边距padding：会把盒子撑大
         外边距：margin
         -->
         <!-- 外边距的应用：
         1可以让块盒子水平居中>第一盒子要有宽度；第二盒子左右外边距设设置为auto -->
 

八、XM8

外边距以及外边距带来的问题：

 外边距带来的第一个问题，相邻块级元素垂直外边距河 
        （只会取其中最大的值）
        解决方法：一般只取一个盒子设置外边距
        外边距带来的第二个问题：嵌套块级元素垂直外边距塌陷问题
        解决方法：1给父盒子添加边框
        解决方法2：给父盒子添加内边框
        解决方法3：给父盒子添加overflow:hidder;开发中常用的
        -->

九、XM9

显示模式：

<!-- 标签的显示模式：
        1块元素：block
        比较霸道，但独占一行
        默认宽度是父级元素宽度的100%
        可以设置宽、高和对齐属性
        块元素可以包含行元素和其他块元素
        文本标签（h1~h6,p,)内不要再装块元素
        2：行内元素：inline
         一行显示多个
         默认的宽度是内容的宽度
         宽、高和对齐属性设置无效
         行内元素只包含文本或者其他行内元素，一般不要包含块元素
         链接标签不要包含其他链接
         3.行内块元素：inline-block（input，img，td)
         一行显示多个
         默认的宽度内容的宽度
         可以设置宽高和对齐属性
         <input/> <img/> <td/>
         元素显示模式的转换：
         display:block/inline/inline-block;
         -->

十、XM10

浮动：

<!-- 传统的网页布局：标准流（元素的显示模式）+浮动+定位 -->
        <!-- 浮动float：让块元素一行内显示 
        float：left；左浮动，盒子从左往右摆动
        float：right；右浮动，盒子往左摆动
        float：none；不浮动
        1.浮动的元素会脱标（脱离标准流）
        清除浮动方法：
        1额外标签法：隔墙法
        2.给父盒子添加overflow:hidden
        3.给父元素添加after伪元素
        4.ge父元素
        -->
        
        
        <!-- 1快速创建标签：标签名*个数>teb键 -->
        <!-- 2.创建带有类名的标签：标签名.类名*格数>teb键  p.font*10 -->
        <!-- 3.创建带有类名的div:.类名*个数>teb键 -->
        
        <!-- 网页布局第一准则：多个块级元素纵向排列找标准流，多个块级元素 -->