Warning: error_log(/data/www/wwwroot/hmttv.cn/caches/error_log.php): failed to open stream: Permission denied in /data/www/wwwroot/hmttv.cn/phpcms/libs/functions/global.func.php on line 537 Warning: error_log(/data/www/wwwroot/hmttv.cn/caches/error_log.php): failed to open stream: Permission denied in /data/www/wwwroot/hmttv.cn/phpcms/libs/functions/global.func.php on line 537 91社区在线观看,日韩中文字幕一区二区不卡,91麻豆精品国产91久久久久 

      

        

          



          
	
          
		
          
			
			
          
				
          整合營銷服務(wù)商
          
				
          電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
          
			
          
			
          				
				
          免費咨詢熱線：
          			
			
          
		
          
	
          
		
	
	
	

          


          
	

          

 

          
  
          
    
          
      
          
        
          CSS盒子（Box）模型入門
          
        
           
          
	
	
          
		
                        
          論您是CSS的新手還是經(jīng)驗豐富的老手，了解和理解box模型都很重要。讓我們更好地了解它。
          每個初學(xué)者都應(yīng)該從基礎(chǔ)開始。以CSS為例，基礎(chǔ)是學(xué)習(xí)Box模型。在繼續(xù)學(xué)習(xí)其他CSS概念之前，您應(yīng)該首先掌握它!
          盒子（Box）模型是CSS的基本元素。
          它確實會讓初學(xué)者感到困惑，所以現(xiàn)在是時候糾正錯誤了。在這里，您將了解box模型的所有基本元素以及它們是如何使用的。
          在深入研究之前，每個人都需要了解web設(shè)計中的每個元素都是一個矩形框。您可能已經(jīng)聽過很多次了，但是這是每個開發(fā)人員都應(yīng)該注意的一個重要概念。
          現(xiàn)在，讓我們來解釋一下神秘的盒子模型!
           盒子模型結(jié)構(gòu)
          如上所述，box模型的結(jié)構(gòu)包括：
          Content (height and width).
          Padding.
          Border.
          Margin.
          這些是瀏覽器呈現(xiàn)框模型所需的所有元素。值得慶幸的是，有了CSS，我們可以單獨地控制它們。讓我們來看看。
          在本文中，我們將使用以下代碼并逐漸添加到其中。
          HTML
          <div class="box">Lorem ipsum dolor amet whatever woke cronut, 
farm-to-table church-key tousled edison bulb. </div>

          CSS
          .box {
 background-color: hotpink;
 color: #fff;
}

          The Content
          Content非常清晰。它是具有特定寬度和高度的元素的內(nèi)容。可以使用CSS屬性的高度和寬度設(shè)置固定的高度和寬度，也可以由內(nèi)容本身決定。
          現(xiàn)在，有一件事讓人有點困惑，那就是使用內(nèi)聯(lián)或塊級元素。
          使用內(nèi)聯(lián)和塊級元素（Using Inline and Block Level Elements
          ）
          為了刷新您的內(nèi)存，內(nèi)聯(lián)元素和塊元素之間的區(qū)別在于塊元素占用了容器寬度的100%，而內(nèi)聯(lián)元素只占用了內(nèi)容需要的空間量。
          在使用內(nèi)聯(lián)元素時，不可能為該元素設(shè)置固定的寬度或高度，因為元素沒有預(yù)先確定的寬度和高度(因為寬度和高度由內(nèi)容決定)。這可以通過將元素轉(zhuǎn)換為塊元素來克服。
          與內(nèi)聯(lián)元素不同，使用塊級元素時，可以輕松地為其設(shè)置固定的寬度或高度。由于在默認(rèn)情況下，塊級元素占容器寬度的100%，我們可以通過設(shè)置一個固定的寬度輕松覆蓋它。
          您還可以將元素轉(zhuǎn)換為inline-block。當(dāng)使用inline-block時，元素具有內(nèi)聯(lián)元素的行為(只占用內(nèi)容的空間)，但是您可以像使用塊元素那樣操作它。
          現(xiàn)在，當(dāng)我們有一個塊級元素時，我們可以給它一個寬度和高度。
          CSS
          .box {
 height: 200px;
 width: 200px;
 background-color: hotpink;
 color: #fff;
}

          結(jié)果如下圖：
          The Padding
          接下來，我們將在我們的框中添加一些填充。
          padding定義了內(nèi)容和框的邊緣之間的空間。
          讓我們看看它在我們的例子中的作用
          CSS
          .box {
 height: 200px;
 width: 200px;
 background-color: hotpink;
 color: #fff;
 padding: 10px;
}

          結(jié)果如圖:
          在圖像中，我們看到padding如何影響框的整體外觀。框的內(nèi)容和四邊都有10px的空間。我們也可以向四面八方單獨添加padding,使用padding-top padding-bottom,padding-left padding-right。
          The Border
          因為我們是從內(nèi)到外，下一步就是定義border。border圍繞著內(nèi)容，您不必使用它，但它仍然存在。這意味著border的寬度為0。
          現(xiàn)在我們添加一個邊框。
          CSS
          .box {
 height: 200px;
 width: 200px;
 background-color: hotpink;
 color: #fff;
 padding: 10px;
 border: solid 3px black;
}

          The Margin
          框模型的最后一個方面是margin。正如你們所知道的，margin是border外的空間。它是元素之間的空間。
          在實際示例中演示這一點的最佳方式是向您展示兩個元素是如何放置的，以及如何使用和不使用margin邊距。
          HTML
          <div class=”box”></div>
<div class=”box”></div>

          CSS
          .box {
 height: 200px;
 width: 200px;
 background-color: hotpink;
 color: #fff;
 padding: 10px;
 border: solid 3px black;
 margin: 0
}

          在這個例子中，我們看到，沒有邊距，兩個元素是如何結(jié)合在一起的，它們之間沒有空間。
          現(xiàn)在，添加margin
          CSS
          .box {
 margin: 20px;
}

          現(xiàn)在,這看起來更好。我們在Box之間增加了一些空間。我們還可以使用margin - top、margin - bottom、margin - left或margin - right來單獨添加元素的每一側(cè)上的空間。
          總結(jié)
          恭喜，你終于完成了這篇文章!那么，我們學(xué)到了什么?
          網(wǎng)頁上的每個元素基本上都是一個框。
          box模型的方面是content, padding, border, and margin.。
          使用內(nèi)聯(lián)元素時，不能為該元素設(shè)置固定的寬度或高度，而使用塊和內(nèi)聯(lián)塊元素則可以。
          希望這能幫助你學(xué)到一些新的東西或者刷新你的記憶。
          <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登錄頁面</title>
    /*總體的樣式*/
    <style>
    	/*盒子樣式*/
        #box{
            width: 350px; //寬
            height: 450px; //高
            border: 1px solid black; //邊框
            border-radius: 10px; //邊框弧度
            font-family: 黑體; //字體
            letter-spacing:8px; //段間距
            word-spacing: 10px; //字間距
            line-height: 40px; //行高
            font-size: 18px; //字大小
            padding: 20px; //內(nèi)邊框
        }
        /*給'注冊'賦予樣式*/
        .register{
            width:280px ; //寬
            height: 50px; //高
            background-color: skyblue; //背景顏色
            border-radius: 10px; //邊框弧度

        }
        /*將所有邊框都改變*/
        *{
            border-radius: 5px; 邊框弧度
        }
        /*使用class選擇器，賦予number寬高和邊框*/
        .number{
            width: 185px; //寬
            height: 27px; //高
            border-width: 1px; //邊框?qū)挾?
        }
        /*id選擇器*/
        #two{
            width: 55px; //寬
            border-width: 1px; 邊框?qū)挾?        }
        /*id選擇器*/
        #phone{
            width: 103px; //寬
        }
        /*class 選擇器*/
        .boxs{
            zoom: 75%; //清除浮動
            color: darkgray; //顏色
        }
        /*class選擇器*/
        .box_a{
            width: 50px; //寬
            height: 50px; //高
            background-image: url("../image/04.jpg "); //背景圖片
            background-repeat: no-repeat; // 是否平鋪
            background-size: 50px 25px; //背景尺寸
            position: relative; //定位 相對定位
            left: 310px; //定位后左移
            bottom: 32px; //定位后下移

        }
    </style>
</head>
<body>
<div id="box">
    <h1>請注冊</h1>
<p style="color: darkgray">已有帳號?<a href="https://im.qq.com/index">登錄</a></p>
<form action="" method="post">
    <label for="name">用戶名</label>
    <input type="text" placeholder="請輸入用戶名" id="name" class="number"> <br>
    <label for="phone">手機(jī)號</label>
    <select name="" id="two" class="number">
    <optgroup>
        <option style="" class="">+86</option>
    </optgroup>
    </select>
    <input type="text" placeholder="請輸入手機(jī)號" id="phone" class="number"> <br>
    <label for="mima">密?碼</label>
    <input type="password" placeholder="請輸入密碼" id="mima" class="number"> <br>
    <label for="mima">驗證碼</label>
    <input type="password" placeholder="請輸入驗證碼" id="is" class="number">
    <div class="box_a"></div>
    <div class="boxs">
        <input type="radio" id="" class="accept">閱讀并接受協(xié)議<br>
    </div>
    <input type="submit" value="注冊" class="register" >

    </form>
</div>


</body>
</html>
在這里插入圖片描述
          )CSS 標(biāo)準(zhǔn)盒子模型(Box Model)
          在網(wǎng)頁中所有HTML元素可以看作盒子,在CSS中,"box model"術(shù)語是用來設(shè)計和布局時使用的;CSS盒模型本質(zhì)上是一個盒子,封裝周圍的HTML元素包括:外邊距(margin)邊框(border)內(nèi)邊距(padding)實際內(nèi)容(content)四個屬性,所以布局時每個元素所占的總寬高是這4個屬性的總和;比如寬度:總元素的寬度=寬度+左填充+右填充+左邊框+右邊框+左邊距+右邊距
          1.1Margin(外邊距)清除邊框外的區(qū)域,外邊距是透明的
          1.2Border(邊框)圍繞在內(nèi)邊距和內(nèi)容外的邊框
          1.3Padding(內(nèi)邊距)清除內(nèi)容周圍的區(qū)域,內(nèi)邊距是透明的
          1.4Content(內(nèi)容)盒子里填充的內(nèi)容比如文本,圖像等
          標(biāo)準(zhǔn)盒子模型
          寬度為100px的div
          根據(jù)盒子模型得出該元素的總寬度為:100+(20+20)+(15+15)+(15+15)(由里至外)因此如果想在此div中放置一個寬度為100px的元素,此元素的總寬度必須小于等于100px
          2)DIV+CSS布局
          Div+CSS布局就是將網(wǎng)頁內(nèi)容用<div>分割為塊,之后使用css設(shè)置每個塊的大小,位置等
          DIV+CSS布局最重要的是靈活運(yùn)用float(浮動)屬性,其值:1)left 2)right 3)both
          clear屬性作用是清除浮動,其值為:1)left 2)right 3)both
          d2向右浮動 float:right
          因為div是塊級元素,如果都沒有脫離文檔流div就會按照從上到下的順序放置
          d2設(shè)置為右浮動其他兩個div位置的變化:
          1)d1沒有脫離文檔流會占據(jù)一行,所以d2只能浮動到d1下面的右面如上圖所示
          2)d2脫離文檔流,d3自動填充到d2的位置
          d1,d2全部設(shè)置為右浮動
          1)當(dāng)d1,d2都設(shè)置為右浮動時:因為css中d1在d2上面先設(shè)置,因此d1在右側(cè),如果d2在d1上面先設(shè)置樣式,則d2在右側(cè),d1在左側(cè),自己測試不再截圖
          2)當(dāng)d1,d2都設(shè)置為右浮動時:d3就會跑到上圖中d2的位置
          3)如果3個div都設(shè)置左或右浮動,當(dāng)3個width加一起<=100%就會在第一行顯示(d1,d2,d3)
           <style type="text/css">
      #d1 {
      margin: 0px;
      background-color: red;
      padding: 0px;
      width: 50%;
      height: 100px;
      float:right; 
    }
    #d2 {
      margin: 0px;
      background-color: yellow;
      padding: 0px;
      width: 50%;
      height: 100px;
      float:right; 
    }
    #d3 {
      margin: 0px;
      background-color: green;
      padding: 0px;
      width: 50%;
      height: 100px;
    }
  </style>
          d2清除左浮動,d3設(shè)置為右浮動
          當(dāng)d2清除了左浮動,d3設(shè)置為右浮動,就會如上圖所示;如果d2清除的是右浮動,d2就會在d1上面,d3就會定位在d1下面的右面,自己測試不再截圖
          當(dāng)d2清除了左浮動,如果想要d2緊挨著d1(與d1在一行上),可以通過position脫離文檔流設(shè)置其上下左右屬性使其定位在d1右側(cè),自己測試
          <!DOCTYPE html
  PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>div+CSS布局</title>
  <style type="text/css">
      #d1 {
      margin: 0px;
      background-color: red;
      padding: 0px;
      width: 30%;
      height: 100px;
      float:left; 
    }
    #d2 {
      margin: 0px;
      background-color: yellow;
      padding: 0px;
      width: 40%;
      height: 100px;
      clear: left;     
    }
    #d3 {
      margin: 0px;
      background-color: green;
      padding: 0px;
      width: 30%;
      height: 100px; 
      float: right; 
    }
  </style>
</head>
<body>
    <div id="d1"><span style="font-size: 50px;">d1</span></div>
    <div id="d2"><span style="font-size: 50px;">d2</span></div>
    <div id="d3"><span style="font-size: 50px;">d3</span></div>
  </body>
</html>
          DIV+CSS布局綜合運(yùn)用position+上下左右屬性與float屬性為網(wǎng)頁進(jìn)行布局
          注意:瀏覽器的兼容性問題,特別是使用IE內(nèi)核的瀏覽器對W3C的規(guī)范不怎么遵守
                              	
          
	
	

          

          

 
          
        
        
		  
      
          
      
      
          
    
          
  
          

          



 


			
		





          
  
          
    
  
          

          

          
	
          
		
		
		
          
	
          


          
 

 







主站蜘蛛池模板：
国产一区二区精品在线观看|
jazzjazz国产精品一区二区|
麻豆精品一区二区综合av|
亚洲午夜日韩高清一区|
国内精品视频一区二区三区八戒
|
一区二区视频免费观看|
无码国产精品一区二区免费3p|
福利一区二区三区视频午夜观看|
亚洲第一区视频在线观看|
精品伦精品一区二区三区视频
|
一区五十路在线中出|
另类ts人妖一区二区三区|
亚洲综合无码一区二区|
免费一区二区无码东京热|
精品一区二区三区在线视频观看
|
日韩在线视频一区二区三区|
国产一区二区三区在线视頻|
日韩A无码AV一区二区三区|
精品国产一区二区三区麻豆|
91在线看片一区国产|
精品视频一区二区三三区四区
|
成人精品一区久久久久|
高清精品一区二区三区一区|
韩国福利一区二区美女视频|
亚洲一区二区免费视频|
无码播放一区二区三区|
中文字幕一区二区三匹|
中文字幕人妻第一区|
国产一区二区不卡老阿姨|
亚洲AV无码一区二区三区鸳鸯影院
|
爆乳熟妇一区二区三区霸乳|
动漫精品一区二区三区3d|
一区二区三区在线视频播放|
中文字幕一区二区在线播放|
99久久国产精品免费一区二区
|
国产精品合集一区二区三区|
激情内射亚洲一区二区三区爱妻
|
国产在线精品一区免费香蕉
|
无码一区二区三区亚洲人妻|
男人免费视频一区二区在线观看
|
色噜噜狠狠一区二区三区|