CSS+DIV佈局（一）
*************************使用CSS+DIV佈局*******************************
********************************盒模型*******************************
html中每一個元素(標籤)都是一個盒子,遵循盒模型
盒模型寬度
1.內盒模型
不帶邊距的
2.外盒模型
算上邊距
一般討論的都是內盒模型的大小(即元素本身的大小),firefox右鍵檢視元素顯示的寬度、高度
為內盒模型的大小...
補白會繼承內容的背景顏色
演示程式碼:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>演示盒模型</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
* {
margin:0px;
}
div.divClass1 {
width:100px;
height:100px;
padding:20px;
border:2px solid #000000;
background-color: yellowgreen;
}
</style>
</head>
<body>
<div class="divClass1">
我是div1
</div>
</body>
</html>
********************************盒模型邊距問題*******************************
如果給兩個div同時都設定了邊距,注意兩個div的邊距大小 不是邊距之和
而是取邊距比較大的那個
**********************塊級元素)和行內元素的區別(div和span的區別)*****************
塊級元素(Block Element)
行內元素(Inline Element),也叫內聯元素
排列方式 寬、高、邊距 預設寬度 典型代表
塊級元素(div) 垂直排列 可調 和父容器一樣寬 div、p、h1
行內元素 (span) 水平排列 寬、高不可調、邊距(水平可調、垂直不可調) 和內部元素的寬度一樣寬 span、a、label
如何區分一個元素是塊級元素還是行內元素???
********************************塊級元素和行內元素相互轉換*******************************
使用display屬性
1. 塊級元素------------>行內元素
display:inline;
轉成行內元素以後 變成了行內元素的特徵
2. 行內塊
display:inline-block;
水平排列的塊級元素
行內塊有預設間隔 如果想去掉預設間隙,可以使用 負邊距、去掉空白、加註釋的方式,但是都比較麻煩、程式碼可讀性差,
如果想讓div水平排列 不推薦使用 行內塊 應該使用浮動(稍後再說)
3.行內元素----->塊級元素
display: block;
********************************overflow屬性***********************************************
overflow
1.預設值是visible
可見的,文字如果多長,會溢位
2.hidden
隱藏的
3.scroll
加滾動條
不管內容超不超長 都加滾動條
4.auto
如果內容不超長 不加滾動條
超長 自動加滾動條
*******************************word-break**************************************
word-break
預設值是 normal 按照瀏覽器預設的 斷句規則 顯示