HTML-CSS標準盒子模型布局 217

)CSS 標準盒子模型(Box Model)

在網頁中所有HTML元素可以看作盒子,在CSS中,"box model"術語是用來設計和布局時使用的;CSS盒模型本質上是一個盒子,封裝周圍的HTML元素包括:外邊距(margin)邊框(border)內邊距(padding)實際內容(content)四個屬性,所以布局時每個元素所占的總寬高是這4個屬性的總和;比如寬度:總元素的寬度=寬度+左填充+右填充+左邊框+右邊框+左邊距+右邊距

1.1Margin(外邊距)清除邊框外的區域,外邊距是透明的

1.2Border(邊框)圍繞在內邊距和內容外的邊框

1.3Padding(內邊距)清除內容周圍的區域,內邊距是透明的

1.4Content(內容)盒子里填充的內容比如文本,圖像等

標準盒子模型

寬度為100px的div

根據盒子模型得出該元素的總寬度為:100+(20+20)+(15+15)+(15+15)(由里至外)因此如果想在此div中放置一個寬度為100px的元素,此元素的總寬度必須小于等于100px

2)DIV+CSS布局

Div+CSS布局就是將網頁內容用<div>分割為塊,之后使用css設置每個塊的大小,位置等

DIV+CSS布局最重要的是靈活運用float(浮動)屬性,其值:1)left 2)right 3)both

clear屬性作用是清除浮動,其值為:1)left 2)right 3)both

d2向右浮動 float:right

因為div是塊級元素,如果都沒有脫離文檔流div就會按照從上到下的順序放置

d2設置為右浮動其他兩個div位置的變化:

1)d1沒有脫離文檔流會占據一行,所以d2只能浮動到d1下面的右面如上圖所示

2)d2脫離文檔流,d3自動填充到d2的位置

d1,d2全部設置為右浮動

1)當d1,d2都設置為右浮動時:因為css中d1在d2上面先設置,因此d1在右側,如果d2在d1上面先設置樣式,則d2在右側,d1在左側,自己測試不再截圖

2)當d1,d2都設置為右浮動時:d3就會跑到上圖中d2的位置

3)如果3個div都設置左或右浮動,當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設置為右浮動

當d2清除了左浮動,d3設置為右浮動,就會如上圖所示;如果d2清除的是右浮動,d2就會在d1上面,d3就會定位在d1下面的右面,自己測試不再截圖

當d2清除了左浮動,如果想要d2緊挨著d1(與d1在一行上),可以通過position脫離文檔流設置其上下左右屬性使其定位在d1右側,自己測試

<!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布局綜合運用position+上下左右屬性與float屬性為網頁進行布局

注意:瀏覽器的兼容性問題,特別是使用IE內核的瀏覽器對W3C的規范不怎么遵守

天來分享一個JavaScript圖片跟隨導航欄特效

下面再來看看代碼

<!DOCTYPE html>

<html>

<style>

*{margin: 0; padding: 0;}

ul {list-style:none;}

body {

background-color: #000;

}

.nav {

width: 800px;

height: 42px;

background:url("images/rss.png") no-repeat right center #fff;

margin: 100px auto;

border-radius: 5px;

position: relative;

}

.cloud {

width: 83px;

height: 42px;

position: absolute;

top: 0;

left: 0;

background: url(images/cloud.gif) no-repeat;

}

.nav ul {

position: absolute;

top: 0;

left: 0;

}

.nav li {

float: left;

width: 83px;

height: 42px;

line-height: 42px;

text-align: center;

color: #000;

cursor: pointer;

}

</style>

</head>

<body>

<ul>

</ul>

</div>

</body>

</html>

var cloud = document.getElementById("cloud"); // 云彩

var nav = document.getElementById("nav");

var lis = nav.children[1].children;

var current = 0; // 用于存放點擊時候的 offsetLeft

//alert(lis.length);

for(var i=0; i<lis.length;i++) {

lis[i].onmouseover = function() {

// alert(this.offsetLeft);

target = this.offsetLeft; // 把左側的位置，給 target

}

lis[i].onmouseout = function() {

target = current; // 鼠標離開 target 是剛才我們點擊的位置

}

lis[i].onclick = function() {

current = this.offsetLeft; // 點擊的時候吧當前位置存貯一下

}

// 緩動公式

var leader = 0, target = 0;

setInterval(function(){

leader = leader + (target - leader ) / 10;

cloud.style.left = leader + "px";

},10);

</script>

今天的分享就到這里了，大家看完后學會了嗎？

如果覺得文章對您有用就加個關注啦~~

歡迎評論留言，提供建議和思路。

幾天學習了HTML相關的基礎知識之后，老師出了五道自測題，通過這幾天學習的總結，和查閱相關文檔，我也作出了自己的理解，以下是我學習的相關心得分享給大家。

1.HTML元素、標簽和屬性之間的關聯與區別？

如果想要搞清楚HTML元素、標簽、屬性之間的關系，首先我們應該了解3個概念：

什么是HTML標簽？
HTML標簽由一對尖括號（'<'，'>'）包裹起來的對象，如<div>、 <h1>，<p>等等都叫標簽。絕大多數的標簽都是成對出現的，如，<div></div>、 <h1></h1>，<p></p>，但是也有例外，比方說換行符<br />，分割線<hr />，這些標簽，開始標簽和結束標簽都是自身。
什么是元素？
一個HTML頁面是由多個元素組成的，一個元素是由一對標簽包含某些內容組成的，比如：<h1>Hello World</h1>，這個就是元素。
什么是屬性？
給HTML元素附加各種樣式的叫屬性，它是以“屬性名=屬性值”這種名、值對形式出現的，需要注意的是，屬性必須寫在元素的起始標簽中。

了解上述三個概念，我明白了，一個HTML頁面就是由多個元素構成，元素是由標簽描述，每一個元素的特征，都是由屬性決定的。

2.為什么說HTML是結構化的文檔?

根據W3C標準，HTML是一種Web語言，它是使用一些“標簽”來定義網頁內容的，例如我們在一個HTML文檔中寫<html xmlns="http://www.w3.org/1999/xhtml"></html>，就聲明了一個HTML文檔的開始，里面可以放各種標簽，一個HTML文檔是由以下結構構成的：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
</head>
<body>
</body>
</html>

由以上代碼不難看出，HTML結構層次分明，是一種具有結構層次的標記語言，通過這些標簽可以告訴瀏覽器如何做出相應的解析。否則，如果HTML標簽任意位置都能放置，就沒法做標準高度統一了，那么瀏覽器也就無法做出正確的解析了。因此，我們看到的各種網頁，都是通過這種具有結構化的標簽組合而成的。

3.表單控件中的name屬性為什么非常重要？

表單控件中的name值，是前端與后端進行交互時傳值的變量名稱，后端只有通過控件的name值才可以接收到該值進行相應的處理。

4.為什么現在都不再使用表格進行頁面布局了？

1.頁面布局不靈活；
2.代碼的可讀性：表格布局的代碼可讀性低，沒有使用<div>， <h1>等標簽直觀；
3.表格加載速度慢；
4.不利于SEO；

5.一個元素，最終呈現的樣式，由幾方面的因素決定的？

1.繼承的：根據元素在文檔的結構和層級關系來確定它的最終樣式；
2.瀏覽器客戶端：用戶代理樣式（user agent style），基本上瀏覽器的表現樣式都是一致的；
3.用戶自定義：寫在HTML文檔<style>標簽中的樣式；
4.行內樣式（內聯樣式）：寫在元素的style屬性中的樣式。

以上就是我個人的總結，不知道是否完全正確，如果有錯誤的地方煩請各位指正，多謝大家。

在線咨詢

上一篇：如何使用CSS3美化HTML5表單？
下一篇：HTML常用代碼集合，背完這些基本可以自己做表白網頁了

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

HTML-CSS標準盒子模型布局 217

下面再來看看代碼

1.HTML元素、標簽和屬性之間的關聯與區別？

2.為什么說HTML是結構化的文檔?

3.表單控件中的name屬性為什么非常重要？

4.為什么現在都不再使用表格進行頁面布局了？

5.一個元素，最終呈現的樣式，由幾方面的因素決定的？

您的項目需求