html盒模型基礎

盒模型 

             概念：若是CSS對HTML文檔元素生成了該元素在HTML文檔佈局中佔據空間的矩形元素框（element box），稱盒子

            經過一系列定義盒子的相關屬性（內容content，填充padding，邊框border，邊界margin），控制各個盒子乃至HTML文檔來呈現的效果與佈局結構

             border:   5px solid/dash虛線/dotted點劃線/double雙線 #444; 值加在原有元素的高寬上

             padding:值加在原有元素的高寬上的，若是要保持元素不變，須要調整高寬

                {20px上下 20px左右}

             marigin：

                {0 auto}元素水平居中，相鄰兄弟元素垂直方向會相互融合，取大值。子級有margin-top的時候，子級會傳遞到父級，解決，父級  overflow:hidden 

元素類型

            根據css顯示分類，XHTML元素被分爲三種類型

                 塊狀元素：block element,顯示成矩形區域，經常使用div dl dt dd ol ul fieldset h1-h6 p form hr iframe colgroup col table tr td

                    通常做爲容器容納內聯元素和其餘塊狀元素，通常稱盒子

                 內聯元素：inline element(或行內元素) 經常使用 span i a em strong b

                    沒有本身的形狀，不能定義寬高，由內容決定寬高，最小內容單元呈現矩形，可定義padding border margin background 但有時候不起做用

                 可變元素：須要上下文肯定該元素是塊元素仍是內聯元素

                    applet - java applet

                    button， del，iframe -inline frame，ins-插入的文本，map-圖片區塊，object-object對象，script-客戶端腳本

             元素類型的轉換

                 display:定義佈局時元素生成的顯示框類型

                     none：

                     block:當元素使用了float之後，至關於加上了  display:block ，（塊狀元素默認）

                     inline:代碼換行被解釋成一個空格，不支持寬高（內聯元素默認）

                     inline-block：（表單控件button，圖片img默認值）行內塊元素，內容以塊狀顯示，行內其餘元素顯示同一行（中間有空隙，各瀏覽器定義空隙大小不一樣，通常用float），支持寬高，其餘和inline差很少

                     list-item：能夠變成列表塊狀元素，列表默認值

       

             元素的定位設置

                 position

                     static:默認值，忽略top,bottom,left,right,z-index,的聲明

                     absolute:絕對定位，相對於static之外的第一個父元素進行定位

                     relative:相對定位，正常位置進行定位,z-index默認比absolute高

                     fixed:絕對定位元素，相對於窗口進行定位

                         z-index:auto聽從父對象/number，只做用於absolute和relative

寬度自適應

            但願元素能根據窗口或者子元素進行變化，可讓窗口適應不一樣設備、窗口、分辨率下運行

             min-height:IE6不支持，

                兼容性hack1：  min-height:200px;_height:200px; 

                兼容性hack2：  min-height:200px;height:auto!important;height:200px; 

             min-width:IE6不支持,

             max-width:IE6不支持，

             max-height:IE6不支持，

高度自適應

            方法：  html,body{height:100%} 元素則添加  {height:100%} 

             height:auto; 根據內容自動改變高度，默認

             height:100%; 根據父塊高度決定。

 

浮動屬性練習

　　 css

/* ::-webkit-scrollbar{display: none}/* 取消overflow的默認下拉條 */ */
        .v1{float: left;height: 30px;width: 30px;background-color: #333;}
        .v2{height: 130px;width: 130px;background-color: #999;}
        .fa{overflow: hidden;border:5px solid red; width: 1160px}
        .b1{width: 230px;background-color: brown;}
        .b2{width: 700px;background-color: burlywood;}
        .b3{width: 230px;background-color:#333;}
        .b1,.b2,.b3{height: 50px;float: left;}
        .bottom{height: 100px;width: 100%;background-color: darkblue;}

 

　　只對後面的元素產生影響，後面一個元素緊貼前面一個元素（使用px的時候），若是瀏覽窗口變小，則區塊換行，  clear:none默認/both/left/right； 

　　 高度塌陷問題：父元素若是沒有高度，沒法被撐起

　　　　 方法一：父元素   overflow:hidden 

　　　　 方法二：在浮動元素下添加   DIV{clear:both;height:0;overflow:hidden  （或  font-size:0  IE不容許高度爲0）}

            <div class="v1"></div>
            <div class="v2">
                文字環繞文字環繞文字環繞文字環繞，v2區域在v1區域下面，背景色能夠看到
            </div>
            <div class="fa">
                <div class="b1"></div><div class="b2"></div><div class="b3"></div>
            </div>
            <div class="bottom"></div>
            <!-- 只設置高度的時候，圖片等比例縮放，若是同時設置了寬度和高度，只要考慮圖片比例變形的結果-->
            <img src="img/top.jpg" width="100%" title="圖片劃上去圖片出現的提示" alt="圖片加載失敗後出現的字">
            <img src="" width="100%" >

練習導航條

　　 css

.nav{height: 100px;background: #111}
        .nav ul{list-style: none;width: 980px;background: #777;margin: 0 auto;overflow: hidden;}
        .nav ul li{float: left;border-right: 1px #999 solid}
        .nav ul li .last{border-right: none}
        .nav ul li a{display:block;width: 139px;height: 100px;line-height: 100px;text-align: center;text-decoration: none}
        .nav ul li a:hover{background:orangered}

　　html

<div class="nav">
            <ul>
                <li><a href="#">集團信息</a></li>
                <li><a href="#">集團信息</a></li>
                <li><a href="#">集團信息</a></li>
                <li><a href="#">集團信息</a></li>
                <li><a href="#">集團信息</a></li>
                <li><a href="#">集團信息</a></li>
                <li class="last"><a>集團信息</a></li>
            </ul>
        </div>

練習錨點

　　定位錨點

             錨點連接：  <div id="p1">位置1</div><a href="#p1">跳轉到位置1</a> 

　　 css

.imgmd{height: 500px;width: 500px;position: relative;}
        .list{position: absolute;bottom: 10px;right: 5px;}
        .list a{float: left;height: 30px;width: 30px;background: rgba(0,0,0,.7);margin-right: 5px;text-decoration: none;text-align: center;line-height: 30px;color: #fff}
        .list a:hover{background: rgba(0,0,0,1);}
        .imglist{overflow: hidden;height: 500px;width: 500px;}

　　html

　　　　<div class="imgmd">
            <div class="list">
                <a href="#img1">1</a>
                <a href="#img2">2</a>
                <a href="#img3">3</a>
                <a href="#img4">4</a>
            </div>
            <div class="imglist">
                <img src="../img/1.jpg" id="img1" />
                <img src="../img/2.jpg" id="img2" />
                <img src="../img/3.jpg" id="img3" />
                <img src="../img/4.jpg" id="img4" />
            </div>
        </div>

 

練習css圖片拼合

　　 圖片整合

            css sprites或者精靈圖，CSS圖像拼合或CSS貼圖定位

            減小http iis的請求數，對於淘寶這種大型網站是必須的

　　 css

.cssimg{width: 200px;height: 22px;overflow: hidden;list-style: none;}
        .cssimg li{float: left;}
        .cssimg li a{display: block;height: 22px;width: 50px;background: url(/img/1.jpg);text-align: center;text-decoration: none;line-height: 22px}
        .p2 a{background: url(/img/1.jpg) -50px 0;}
        .p3 a{background: url(/img/1.jpg) -100px 0;}
        .p4 a{background: url(/img/1.jpg) -150px 0;}
        .p2 a:hover{background: url(/img/1.jpg) -50px -22px;}
        .p3 a:hover{background: url(/img/1.jpg) -100px -22px;}
        .p4 a:hover{background: url(/img/1.jpg) -150px -22px;}

　　html

        <ul class="cssimg">
            <li class="p1"><a href="#">新聞</a></li>
            <li class="p2"><a href="#">新聞</a></li>
            <li class="p3"><a href="#">新聞</a></li>
            <li class="p4"><a href="#">新聞</a></li>
        </ul>    

 

text-overflow練習

　　 文本溢出

             overflow:

                 visible：默認，內容不會被修剪，會出如今元素框以外。

                 hidden:內容會被修剪，其他內容不可見

                 scroll：內容會被修剪，但出現下拉框

                 auto：若是內容被修剪，則出現下拉框

                 inheirit：從父級繼承overflow值

 

             white-space:設置如何處理元素內空白

                 normal:默認，空白會被瀏覽器忽略

                 pre:被瀏覽器保留

                 nowrap：文本不會換行，文本會在同一行繼續，直到遇到<br />（經常使用）

                 pre-wrap:保留空白符序列，會正常換行

                 pre-line:合併空白符序列，可是保留換行符

                 inherit:繼承父元素的white-space

 

             text-overflow:文本溢出包含元素時發生

                 clip:不顯示省略號，簡單裁切

                 ellipsis:溢出時，顯示省略號

                    要顯示省略號須要的條件：要設定width,而且  over-flow:hidden ,還要有  white-space:nowrap 

css

.textul{border: 1px solid #333;}
        .textul .p1{width: 100px;text-overflow: ellipsis;white-space: nowrap;border: 1px solid #222;overflow: hidden;}

html

        <ul class="textul">
            <li class="p1"><a href="#">新聞sfdfsffsdfsfsdf</a></li>
            <li class="p2"><a href="#">新聞</a></li>
            <li class="p3"><a href="#">新聞</a></li>
            <li class="p4"><a href="#">新聞</a></li>
        </ul>