4-基本布局+CSS样式属性+盒子模型

***********************回顾一下*****************************
---行级布局----
1. div是块级元素，独占一行空间，宽度默认沾满父级元素
2. div的高度由子级元素来决定
---列级布局---
1. 浮动元素与兄弟元素之间的关系
    1）a浮动，b不浮动，b钻到a下面
    2）a不浮动，b浮动，b的上边界和a的下边界重叠
    3）a浮动，b浮动，a,b一行显示，当行内放不下的时候b另起一行

2. 浮动元素的边距
    1) a,b不浮动，a设定外边距-下，b设定外边距-上，共用（谁大用谁的）
    2) a,b浮动，a设定外边距-右，b设定外边距-左，不共用（两者和是他们的边距）

    margin上下值在行布局时共用，浮动后不再共用

3. 浮动元素与父级元素之间的关系
    1) 层级关系
        <div class="outer">
            <div class="inner"></div>
            <div class="inner"></div>
        </div>
        <div class="outer2">
        
        </div>
    2) 高度宽度的问题？
        1.高度应该由子级元素来指定
            当子级浮动的时候，无法撑开父级的高度。只能由父级自己指定（overflow:hidden）
        2.宽度应该由父级元素来指定
**********************************************************        
CSS    
    1, 基本布局
        布局顺序
            由上至下，由左至右，由内至外
        块居中
            1）不能浮动
            2）要居中的块必须小于父级元素
            3）利用margin-left margin-right的自动值来居中
        布局级别：
            1）行布局级（横排）
            2）列布局级（浮动布局）
                1.设置浮动 float
                    任何元素都可以浮动，可以改变普通文档流的排列方式，可以使得块元素在同一行中排列，使我们的布局更加方便，浮动是脱离文档流的，也就是其他元素视而不见。

                    浮动何时停止？
                        1. 当遇到一个浮动元素后
                        2. 当遇到父级元素后
                    多个盒子都浮动后，就产生了块级元素水平排列的效果
                    多个浮动元素不会相互覆盖
                    若包含的容器太窄，无法容纳水平排列的多个浮动元素，那么最后的浮动盒子会向下移动，但如果浮动元素的高度不同，那么它们向下移动时可能会被卡住。
                    float:
                    left     元素向左浮动。
                    right     元素向右浮动。
                    none     默认值。元素不浮动，并会显示在其在文本中出现的位置。
                2. 清理浮动
                    clear
                    left     在左侧不允许浮动元素
                    right     在右侧不允许浮动元素
                    both     在左右两侧均不允许浮动元素
                        
                3. 最佳实践：
                    1) 假如某个div元素A是浮动的，如果A元素上一个元素也是浮动的，那么A元素会跟随在上一个元素的后边(如果一行放不下这两个元素，那么A元素会被挤到下一行)；如果A元素上一个元素是标准流中的元素，那么A的相对垂直位置不会改变，也就是说A的顶部总是和上一个元素的底部对齐。div的顺序是HTML代码中div的顺序决定的
                    2) 高度尽量给子级，父级高度自动
                    3) 子级浮动，父级未浮动，父级高度无法依赖子级，这时父级需要自己添加高度（overflow:hidden）。
                    4) margin上下值在行布局时共用，浮动后不再共用
                    5) clear 清除浮动对象对当前对象的影响


        PS切片
             裁切工具->切片工具


    2，CSS常见的样式属性和值 (dreamweaver)
          1）CSS 尺寸属性
             height    设置元素高度。    
             width    设置元素的宽度。
             max-height    设置元素的最大高度。    
             max-width    设置元素的最大宽度。    
             min-height    设置元素的最小高度。    
             min-width    设置元素的最小宽度。    

        2） 字体属性
            font-family字体族科
                宋体 SimSun    黑体 SimHei
                微软雅黑 Microsoft YaHei
                微软正黑体 Microsoft JhengHei
                新宋体 NSimSun
                新细明体 PMingLiU
                细明体 MingLiU
                标楷体 DFKai-SB
                仿宋 FangSong
                仿宋_GB2312 FangSong_GB2312
                楷体_GB2312 KaiTi_GB2312
             font-size    字体大小
            font-style    字体风格
                normal    正常;italic  斜体;oblique  倾斜
            font-weight字体加粗
                normal  正常;bold  粗体;bolder 更粗;lighter  更细
            text-decoration 规定添加到文本的修饰 ：
                none         默认。定义标准的文本。
                underline     定义文本下的一条线。
                overline     定义文本上的一条线。
                line-through定义穿过文本下的一条线。
                blink         定义闪烁的文本。

        3） 颜色
            color    设定文本的颜色
            opcity    设置透明度
            所有浏览器都支持 opacity 属性。
            注释：IE8 以及更早的版本支持替代的 filter 属性。
            例如：filter:Alpha(opacity=50)。
            一般两个属性一起写，保证兼容性
            opacity：0.5;
            filter:Alpha(opacity=50)
        4） 背景
            设置元素的背景颜色。background-color:#CCC;
            background-image    
                设置元素的背景图像。
                url(bgimage.gif);
            background-repeat    
                设置是否及如何重复背景图像。
                repeat     默认。背景图像将在垂直方向和水平方向重复。
                repeat-x     背景图像将在水平方向重复。
                repeat-y     背景图像将在垂直方向重复。
                no-repeat     背景图像将仅显示一次。
                inherit     规定应该从父元素继承 background-repeat 属性的设置。    
            background-attachment
                设置背景图像是否固定或者随着页面的其余部分滚动。
                fixed    固定    
                scroll    滚动
            background-position    
                设置背景图像的开始位置。这个属性设置背景原图像（由 background-image 定义）的位置，    背景图像如果要重复，将从这一点开始。您需要把 background-attachment属性设置为 "fixed"，才能保证该属性在 Firefox 和 Opera 中正常工作。
                  横向关键字： left center right
                  纵向关键字： top center bottom
                百分比：
                  左上角是 0% 0%。右下角是 100% 100%。
            background
                简写属性在一个声明中设置所有的背景属性。如果不设置其中的某个值，也不会出问题，比如 background:#ff0000 url('smiley.gif'); 也是允许的。

            图片精灵技术：
                也叫CSS背景图片精灵技术，是将多张背景图片放到一个图片中，通过定位的方式来获取响应位置的图片，使得一个图片一次载入，多次使用，使得页面下载速度加快

        5） 边框属性
            border-style  设置4个边框的样式
                dotted     定义点状边框。在大多数浏览器中呈现为实线。
                solid     定义实线。
                double     定义双线。
                none     定义无边框
                ...
                如果4个值都给定了，分别应用于上，右，下;
                左如果给定1个值，应用于各边;
                如果给定2个值，第一个值应用于上下边，第二个值应用于左右边
            border-width  设置4个边框的宽度
                值为关键字或者长度  medium,thin,thick
            border-color  设置边框颜色
            border  在一个声明设置所有的边框属性。
            border:1px solid #ff0000
        6） 鼠标光标属性
            cursor    属性规定要显示的光标的类型（形状）。
                none    无
                auto     默认。浏览器设置的光标。
                pointer 光标呈现为指示链接的指针（一只手）
                wait     此光标指示程序正忙（通常是一只表或沙漏）。
                help     此光标指示可用的帮助（通常是一个问号或一个气球）。
        7） 列表属性
            list-style         在一个声明中设置所有的列表属性。
            list-style: square inside url('/i/eg_arrow.gif')
            list-style-image     将图象设置为列表项标记。
            list-style-image:url("/i/arrow.gif");
            list-style-position 设置列表项标记的放置位置。
            inside     列表项目标记放置在文本以内，且环绕文本根据标记对齐。
            outside 默认值。保持标记位于文本的左侧。列表项目标
                记放置在文本以外，且环绕文本不根据标记对齐。
            list-style-type     设置列表项标记的类型。
                none     无标记。
                disc     默认。标记是实心圆。
                circle     标记是空心圆。
                square     标记是实心方块。
                decimal 标记是数字。
                ower-roman    小写罗马数字(i, ii, iii, iv, v, 等。)
                upper-roman    大写罗马数字(I, II, III, IV, V, 等。)
                lower-alpha    小写英文字母The marker is lower-alpha (a, b, c, d, e, 等。)
                upper-alpha    大写英文字母The marker is upper-alpha (A, B, C, D, E, 等。)
                lower-latin    小写拉丁字母(a, b, c, d, e, 等。)
                upper-latin    大写拉丁字母(A, B, C, D, E, 等。)
        8）表格
            优先级：
                td,th-->tr-->tbody,thead,tfoot-->table
            color,font-size
            text-align    文字对齐
            background
            border         边框，只能用于table,th,td
            margin         间距，只能用于table,caption
            padding     内间距，只能用于th,td
            width         宽，只能用于table,td,th
            height         高，只能用于table,td,th、可以用于tr并且优先级高于td
            border-collapse:
                separate     默认值，分开
                collapse     边框合并
                inherit        从父元素中继承该属性
            table-layout 宽度类型：
                fixed    固定宽度
                auto    自动宽度
            caption-side 标题位置：
                top/left/right/botton
    3. div+css
        div+css是一种网页的布局方法。
        标签div span无特殊含义，配合css才具有特殊的样式
        网页就是由许多个盒子通过不同的排列方式堆积而成，网页上每个元素都被浏览器看成是一个矩形的盒子，这个盒子由元素的内容，填充，边框，边界组成。默认盒子边框无，背景色透明，默认看不到盒子
        1） 盒子模型
            margin  外边距，定义区块外边界与上级元素距离的属性，值为长度
            padding 内边距（填充），是设置区块的内边距的属性，是边框和元素内容之间的间隔距离
            border  边框，在一个声明设置所有的边框属性。
            width   盒子的宽度
            height  盒子的高度
            内容    盒子里面所包含的元素和内容

            属性值：
                1个：上下左右都是该值
                2个：前者表示上下的值，后者表示左右的值
                3个：前者表示上边的值，中间表示左右的值，后者表示下边的值
                4个：上右下左，顺时针排序
        2） 不同浏览器解析盒子模型的差异：
            IE5盒子  width = 内容 + border + padding
                盒子占据的宽度 = margin*2+width
                盒子占据的高度 = margin*2+height
                盒子实际的宽度 = width
                盒子实际的高度 = height

            W3C盒子 width = 内容
                盒子占据的宽度 = margin*2+border*2+padding*2+width
                盒子占据的高度 = margin*2+border*2+padding*2+height
                盒子实际的宽度 = border*2+padding*2+width
                盒子实际的高度 = border*2+padding*2+height
        3） 设置浏览器去遵循w3c标准
            只需要在网页的顶部加上DOCTYPE声明即可
            !important的使用
            p{
                color:red !important;
                color:blue;
            }
            当不加!important;的时候，后者覆盖前者，当加上之后说明第一个,样式优先级更高，采用前者，但是Ie6不支持!important;
        4）其他属性
            border-width    边框高度
            border-color    边框颜色
            border-style    边框样式
                none    无样式
                dotted    点线
                dashed    虚线
                solid    实线
                double    双线
                groove    槽线
                ridge    脊线
                inset    内凹
                outset    外凸
        5）关于填充和边框的常见问题
            1. 大部分的html元素的盒子属性（margin,padding）默认值为0，有少数html元素的（marigin，padding不为0）例如：body,p,ul,li,form等标签，有时需要将其先设置为0
            2. 相邻两个兄弟元素的外边框会发生合并，一般布局会设定他们的外边距
            3. 如果没有设置父级元素的内边距或边框，那么它的子元素的边界会和其合并。
            4. 设置一个块元素居中： marigin:0 auto;
            5. margin可以设置负值，padding不可以设置
            6. 行内元素的margin值，只有左右值，没有上下值
        6）行内元素与块级元素
            行内元素
                行内元素不可以设置宽（width）和高（height【但是可以通过line-height设置】），但可以与其他行内元素位于同一行，行内元素内一般不可以包含块级元素。行内元素的高度一般由元素内部的字体大小决定，宽度由内容的长度控制。常见的行内元素有:em,font,b,span,a,strong
            块级元素
                块状元素排斥其他元素与其位于同一行，可以设定元素的宽（width）和高（height），块级元素一般是其他元素的容器，可容纳块级元素和行内元素。常见的块级元素有div, p ,h1~h6等

                IE6/7及IE8混杂模式中，text- align:center可以使块级元素也居中对齐。其他浏览器中，text-align:center仅作用于行内内容上。
            改变元素类型：
                display
                    可以将一个行级元素转换为块级元素，但是这种转换并不能改变元素本质，转换的只是CSS的盒子的外观
                    需要转换盒子类型的情况：
                    水平的列表菜单，不断行的标题，隐藏元素
                    none     隐藏元素。不会被显示，不占空间
                    block    块级元素。独占一行空间
                    inline  默认。此元素会被显示为内联元素，元素前后没有换行符。
                    inline-block    兼有块级和行级元素特性，在行内显示但是可以设定宽高

                    list-item         此元素会作为列表显示。

                    table     此元素会作为块级表格来显示（类似 <table>），表格前后带有换行符。
                    inline-table     此元素会作为内联表格来显示（类似 <table>），表格前后没有换行符。
                    table-row-group     此元素会作为一个或多个行的分组来显示（类似 <tbody>）。
                    table-header-group     此元素会作为一个或多个行的分组来显示（类似 <thead>）。
                    table-footer-group     此元素会作为一个或多个行的分组来显示（类似 <tfoot>）。
                    table-row         此元素会作为一个表格行显示（类似 <tr>）。
                    table-column     此元素会作为一个单元格列显示（类似 <col>）
                    table-cell         此元素会作为一个表格单元格显示（类似 <td> 和 <th>）
                    table-caption     此元素会作为一个表格标题显示（类似 <caption>）
                    inherit         规定应该从父元素继承 display 属性的值。
                float,position
                    应用了浮动和绝对定位的元素，变成了块级元素，因此display属性一般被忽略
                如果元素应用了display:none，该元素（以及子元素）被隐藏起来，对其再使用float,position将不再有意义



    4.和页面布局相关的CSS属性
        1）定位属性：
            绝对定位 absolute:
                是元素完全脱离文档流，页面中的其他元素视它不存在，绝对定位元素不会影响到其他元素。绝对定位是参照距离他最近的父级有定位属性的元素，如果父级元素没有定位属性，则会参照文档
            相对定位 relative:
                是参照元素原来的位置进行移动，元素原来的空间位不变，元素在移动时会覆盖其他元素。
            固定定位 fixed:
                将元素固定在窗口中的某个位置，绝对定位是相对于元素的，固定定位是相对于窗口的，会随着窗口的一定而移动。在低版本IE中不支持该属性
            默认定位 static:
                默认属性，指定了元素按照常规的文档流进行定位，静态定位元素不允许使用top,left和类似其他属性定位。position的值为static为非定位元素，为其他值时候为定位元素，因为static元素不能自定义元素的位置，而其他可以

        top:  层距离页面顶点纵坐标的距离
        left: 层距离页面定点横坐标的距离
        text-align:    横向排列 left right center
        line-height:行高，内容都在行的中间，可以使用这个属性设置内容垂直居中
        z-index ：  第三个维度 ，值高的元素会覆盖值低的元素。该属性可以使得元素脱离文档流，可能会覆盖其他元素。
        
        
       
        float:  设置区块浮动属性
        clear:  指定一个元素是否允许有元素漂浮在它的旁边

    4，盒子模型的浮动
        

    5，css规范
        1）overflow:    设置层内的内容超出层所能容纳的范围处理方式。
            visible :默认值，如果需要，内容可以溢出并绘制在元素的边框的外面
            hidden  :裁剪掉和隐藏溢出的内容。
            scroll  :元素一直显示水平和垂直滚动条，如果内容超出元素尺寸，允许用户通过滚动来查看额外的内容。
            auto    :滚动条只在内容超出元素尺寸时显示，而非一直显示。
        2）display :   属性设置元素如何显示。
            none     此元素不会被显示【浏览器会认为这个元素不存在】
            block     此元素将显示为块级元素，此元素前后会带有换行符。
            inline     默认。此元素会被显示为行内元素，元素前后没有换行符。
            inline-block    行内块级元素
            table     此元素会作为块级表格来显示（类似 <table>），表格前后带有换行符。
            table-row 此元素会作为一个表格行显示（类似 <tr>）。
            table-cell此元素会作为一个表格单元格显示（类似 <td> 和 <th>）
        3）visiblity:  设定元素是否可见
            visible 默认。元素框是可见的。
            hidden     元素框不可见，但仍然影响布局【浏览器认为该元素存在，但是不显示】
        4）具有padding,margin值的元素
            1. h1~h6
            2. dl,dd
            3. ol,ul
            4. form
                在Chrome,Firefox,Safari,Opera,IE8中没有默认的margin,padding。但是在IE7以及以下版本有默认margin:19px 0px
                表单控件一般都有默认的padding和marigin
            5. p
            6. body
        5）IE浏览器需要注意的兼容性问题
            1. IE6双倍边距（？）
                在一排浮动的元素中，如果一个元素设置了margin-left在ie浏览器中就会显示第一个块有双倍的边距。
               解决方案：
                   1）给第一个子元素设置display:inline
                   2）利用CSS hack单独设置在ie6下的左边距
            2. IE浏览器中会自动给添加了连接的图片加边框
        6）页面布局中规范
            页面布局中所有的块级元素必须要设置宽高
            文字和图片在一行布局时可以统一采用块元素的方式进行布局
            标签不能随意嵌套
            控制页面样式时，尽量少用标签选择器
            图片必须设置宽高属性
        7）CSS命名规范
            通用基类：
                base.css
                或者
                base.atom.css
                base.reset.css
                base.layout.css
            公共模型
                model.css
                或者
                model.box.css
                model.list.css
                model.form.css
                model.content.css
            页面样式
                page.ccss
                或者
                page.index.css
            整体结构
                头        head/header
                内容      content/container
                导航    nav
                    主导航    mainnav
                    边导航    sidebar
                    左右导航    leftsidebar.rightsidebar
                    顶导航    topnav
                    子菜单    submenu
                栏目    column
                左右中     left,right,center
                页面主体main
                尾        footer/foot
                侧栏    sidebar
        8）属性书写顺序
              定位属性（比如：display， position， float， clear， visibility， table-layout等）
              自身属性（比如：width， height， margin， padding， border等）
              文本属性（比如：font， line-height， text-align， text-indent， vertical-align等）
              其他属性（比如：color， background， opacity， cursor，content， list-style， quotes等）