文章出處
CSS中的數據單位:
文章列表
| table布局 | div布局優勢 |
| 瀏覽器支持完善 | |
| 表現和結構分離 | |
| 樣式設計控制功能強大 | |
| 可以繼承,層疊處理 |
Transitional // 松散過度型
Strict //嚴格型
Frameset //比較不常用的，使用框架使用這種模式
XHTML中的所有標簽都是要閉合的比如
但是在HTML中就不必這樣
"<input/>" 但是在HTML中就不必這樣
"<input>"即可 CSS中的數據單位:
| px : 像素 |
| em : 當前對象體內的字體尺寸（好像英文比較常用這個尺寸） |
| ex : 當前字符高度的相對尺寸 ( font-size:1.2ex,當前字符的1.2倍高) |
| pt : 點/鎊point (font-size:9pt;) |
| pc : 派卡 pica |
| in : 英寸 |
| pc : 派卡 pica |
| mm ： 毫米 |
| cm ：厘米 |
| rgb ： （0，0，0） |
| rgba：（0，0，0，0.2） |
| rrggbb ：十六進制的顏色單位 #ffffff; |
| colorName ： 字體顏色(color:blue) |
樣式分有三種 ：- 行間樣式
- 內部樣式
- 外部樣式
css布局和定位:
/固定寬度的布局/
/流式布局（按照%比）/
/彈性布局，根據字體 em進行布局/
1:一列自適應: width:80%;
<h5>一列固定居中: margin:0 auto;</h5>
<h5>二列固定寬度:</h5>
<div id="two-row" class="clearFix">
<style>
.clearFix:after{
content:"";
display:block;
visibility:visible;
clear:both;
height:0;
}
#two-row {
width:500px;
background:#666
}
#two-row .left{
width:200px;
background:#0C9;
float:left;
}
#two-row .right{
width:300px;
background:#069;
float:left;
}
</style>
<div class="left">row1</div>
<div class="right">row2</div>
</div>
2:兩列寬度自適應：利用左右定位；中間居中
<div id="two-auto" class="clearFix"> <style> .clearFix:after{ content:""; display:block; visibility:visible; clear:both; height:0; } #two-auto { background:#666 } #two-auto .left{ width:35%; background:#0C9; float:left; } #two-auto .right{ width:30%; background:#069; float:left; } </style> <div class="left">auto-left</div> <div class="right">auto-right</div> </div>
3:兩列右列寬度自適應
<div id="right-auto"> <style> #right-auto{ } #right-auto .left{ width:100px; float:left; background:#ccc; } #right-auto .right{ background:#f00; border:2px solid #000; } </style> <div class="left">left</div> <div class="right">right</div> </div>
<h5>三列自適應</h5> <div id="three"> <style> #three{ position:relative; } #three .left{ position:absolute; left:0;top:0; width:100px; height:300px; background:#C99; } #three .right{ position:absolute; top:0;right:0; width:100px; height:300px; background:#C99; } #three .center{ margin-left:100px; margin-right:100px; height:300px; background:#F03; } </style> <div class="left">left</div> <div class="right">right</div> <div class="center">center</div> </div>
<h5>三列自適應;利用左右浮動；中間居中</h5> <div id="three-1"> <style> #three-1{ position:relative; } #three-1 .left{ float:left; width:100px; height:300px; background:#C99; } #three-1 .right{ float:right; width:100px; height:300px; background:#C99; } #three-1 .center{ margin-left:100px; margin-right:100px; height:300px; background:#F03; } </style> <div class="left">left</div> <div class="right">right</div> <div class="center">center</div> </div>
高度自適應:
高度自適應這個必須設置 html,body{height:100%} 因為ff和ie中html，和body的高度是不同的，這么寫是處理兼容問題; ff,chrome{html為當前視區大小,要把html100%的高度，body為內部內容高度，滾動出現在html中} ie{html為隱藏的好像；body為內部內容的高度，滾動是出現在body中的}
盒模型； 主要是IE和IE6的怪異模式'
box-sizing:border-box; box-sizing:content-box; box-sizing:padding-box;
margin疊加和margin雙倍解決
for example:
background
background-image; background-color: background-repeat; background-attachment:設置背景圖的滾動方式，背景會被固定住,不會隨著scroll改變; background-position: 左對齊方式 ，右對齊方式；
超出div的內容區域
//要換行最好都加，這樣可以處理英文和中文 word-break:break-all;允許詞間換行； word-wrap:break-word超過容器就換行 white-space:no-wrap;超過容器不換行;
img標簽的clip剪切css
這個東西不常用； img{ position:absolute; clip:rect(1px 2px 3px 4px) }
文章列表
全站熱搜
留言列表
