css設計匯總
1.對於絕大多數網站而言，最佳行間距應該是字體高度的125%
2.對於絕大多數移動端設備而言，最佳行間距是字體高度的150%
3.每行的字符數量應當控制在45~60個之間（中文也有一個約定俗成的數量），而在移動端上，這個數量通常需要減半看起來才足夠舒適。
4.小寫字母x的高度是這套字體的x高度，小寫字母的整體比例會直接影響到閱讀的體驗。
5.通過將max-width設置為100% ，便可以告訴瀏覽器不要讓圖片的大小超過了它的容器元素。這樣，即使瀏覽器窗□變窄，圖片也不會溢出或被裁剪了 ：
.slats img {
width: 100%;
max-width: 100%;
}
6.一般的網頁是960px，按照1：1.618這個比例來計算的話，那麽高度就可以設置為594px
7.在DIV裏的圖片居中問題：
外層DIV：要設置寬高和行高（line-height），圖片要設border:0; “vertical-align:middle;”。
8.
行間距 line-height
字符間距 letter-spacing
單詞間距 word-spacing
大小寫 text-transform
值：
uppercase 全部大寫
capitalize 首字母大寫
lowercase 全部小寫
空白格 white-space
值：
normal 默認。多個空白格或者換行符會被合並成一個空白格
pre 有多少空白格，顯示多少空白格，相當於pre標簽,如果長度超出父容器也不會換行。
pre-wrap 有多少空白格，顯示多少空白格，相當於pre標簽,如果長度超出父容器，會換行。
nowrap 一直不換行，直到使用br
9.表格邊框
屬性：border-collapse
值：
separate:邊框分隔
collapse:邊框合並
10.隱藏元素有兩種方式
display:none; 使用display:none; 隱藏一個元素，這個元素將不再占有原空間 “坑” 讓出來了
visibility:hidden; 使用 visibility:hidden;隱藏一個元素，這個元素繼續占有原空間，只是“看不見”
11.如果style.css中，<style>標簽中，style屬性上有沖突的樣式，那麽誰的優先級更高？
a.style標簽與外部文件style.css樣式重復 ,那麽優先使用： 最後出現的一個
eg.
<link rel="stylesheet" type="text/css" href="style.css" />
<style>
.p1{
color:green;
}
</style>
<p class="p1">優先使用p1 顏色是綠色的樣式</p>
或
<style>
.p1{
color:green;
}
</style>
<link rel="stylesheet" type="text/css" href="style.css" />
<p class="p1">優先使用style.css的樣式</p>
b.style標簽上的與style屬性沖突 ,優先使用style屬性
e.g.
<style>
.p1{
color:green;
}
</style>
<p class="p1" style="color:red">p1 顏色是紅色，優先使用style屬性</p>
c.如果樣式上增加了!important，則優先級最高，甚至高於style屬性
12.絕對定位
屬性：position
值： absolute
通過指定left,top絕對定位一個元素
a.設置了絕對定位的元素，相當於該元素被從原文檔中刪除了
b.絕對定位是基於最近的一個"定位了
c.如果父容器(如：div)，並沒有定位,這找它上級最近的一個定位了的父容器(如：body)
e.g.
<style>
p.abs{
position: absolute;
left: 100px;
top: 50px;
}
</style>
<body>
<div>
<p>正常文字</p>
</div>
<div>
這個div沒有定位
<p class="abs" >絕對定位的文字</p>
</div>
</body>
d.通過絕對定位可以把一個元素放在令一個元素上，這樣位置就重復了。
重復了，就存在一個誰掩蓋誰的問題。 這個時候就可以使用z-index屬性， 當z-index的值越大，就表示放上面，z-index:越小就表示放下面。
13.相對定位
屬性：position
值：relative
與絕對定位不同的是，相對定位不會把該元素從原文檔刪除掉，而是在原文檔的位置的基礎上，移動一定的距離
14.浮動的框可以向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動框的邊框為止。
屬性：float
值： left,right
a.文字向右浮動
浮動後，原來的“坑”就讓出來了,並且是在原來的高度的基礎上，向右浮動
b.文字向左浮動
首先，向左浮動後，會把“坑”讓出來，這個時候"浮動的文字後面的正常的文字“ 就會過來試圖占這個坑，但是，發現 “浮動的文字”並沒有走，結果，就只好排在它後面了
c.文字圍繞圖片
當圖片浮動時，文字圍繞著圖片
d.不允許出現浮動元素
屬性:clear
值: left right both none
e.水平排列div
默認的div排列是會換行的,如果使用float就可以達到水平排列的效果，通常會用在菜單，導航欄等地方,如果超出了父容器，還會有自動換行的效果
15.元素的diplay顯示方式有多種，隱藏、塊級、內聯、內聯-塊級
display:none 隱藏(使得被選擇的元素隱藏，並且不占用原來的位置 )
display:block 塊級(表示塊級元素,塊級元素會自動在前面和後面加上換行，並且在其上的width和height也能夠生效,div默認是塊級元素)
display:inline 內聯(表示內聯元素,內聯元素前後沒有換行，並且在其上的width和height也無效。 其大小由其中的內容決定,span默認是內聯元素(不會有換行,width和height也不會生效) )
display:inline-block 內聯-塊級 (內聯是不換行，但是不能指定大小,塊級時能制定大小，但是會換行,有時候，需要元素處於同一行，同時還能指定大小，這個時候，就需要用到內聯-塊級)
其他的顯示方式:
list-item 顯示為列表
table 顯示為表格
inline-table 顯示為前後無換行的表格
table-cell 顯示為單元格
16.CSS 布局 水平居中
內容居中
通過設置屬性align="center" 居中的內容
通過樣式style="text-align:center" 居中的內容
元素居中
設置本div的寬度，然後再使用樣式 margin: 0 auto來使得元素居中
內聯元素(如：span)的居中可以通過放置在div中，然後讓div text-align實現居中
17.CSS 布局 垂直居中
line-height方式 ：line-height 適合單獨一行垂直居中
內邊距方式 ：借助設置相同的上下內邊距，實現垂直居中效果，可以用在多行文本上
table方式 ：首先通過display: table-cell;把div用單元格的形式顯示，然後借用單元格的垂直居中vertical-align: middle; 來達到效果。這樣對圖片也可以居中，而 line-height就不能對圖片居中。
e.g.
<style>
#d {
display: table-cell;
vertical-align: middle;
height:200px;
}
div{
border:solid 1px lightskyblue;
}
</style>
<div id="d">
<img src="example.gif">
</div>
18.左側固定，右邊自動占滿
<style>
.left{
width:200px;
float:left;
box-sizing: border-box; color: rgb(51, 51, 51); font-family: arial, verdana, "Microsoft YaHei", Tahoma, Simsun, sans-serif;"> }
.right{
overflow:hidden;
}
</style>
<div class="left">左邊固定寬度</div>
<div class="right">右邊自動填滿</div>
19.一個div始終貼在下方
<style>
#div1
{
position: relative;
height: 300px;
width: 90%;
}
#div2
{
position: absolute;
bottom: 0;
height: 30px;
width: 100%;
}
</style>
<div id="div1">
<div id="div2"> 無論藍色div高度如何變化，綠色div都會貼在下面
</div>
</div>
首先把藍色div（div1）設置為相對定位，然後把內部的綠色div（div2）設置為絕對定位， bottom: 0表示貼在下面
19. CSS應用 顯示圖片一部分
a.使用背景方式
對div使用背景圖片
background:transparent url(wangwang.gif) no-repeat scroll -83px -0px ;
等同於
background-image:url(/site/wangwang.gif);
background-repeat:no-repeat;
background-attachment:scroll;
background-position: -83px -0px;
設置scroll -83px -0px 把圖片向左滾動83個像素，向上滾動0個像素。
再把div大小設置為和小圖片大小一樣，即可大小只顯示部分圖片的效果
b.使用img方式
借助裁剪的方式只顯示部分圖片：
clip:rect(top, right, bottom, left)
裁剪之後，只顯示被裁剪出來的圖片，所以還需要把整個圖片向左移動，才看上去像拿到了想要的那部分圖片
img{
position:absolute;
left:-83px;
clip:rect(0px 108px 25px 83px);
}
20.塊級元素和內聯元素的邊框區別
塊級元素div默認是占用100%的寬度,常見的塊級元素有div h1 p 等
內聯元素span的寬度由其內容的寬度決定,常見的內聯元素有 a b strong i input 等
21.div設置滾動條樣式（只用於div）
overflow:auto;height:88%;
22.ie兼容CSS3漸變寫法
IE用濾鏡：filter
linear-gradient 在 ie9 以下是不支持的，所以對於 ie6 - ie8 我們可以使用濾鏡來解決，代碼如下：
.gradient{
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=‘#000000‘, endColorstr=‘#ffffff‘,GradientType=0 );
}
由於 filter 是 ie 的私有屬性，所以我們需要針對 ie9 單獨處理濾鏡效果，代碼如下：
:root 樣式名稱{filter:none;}
e.g.
.gradient{
background: #000000;
background: -moz-linear-gradient(top, #000000 0%, #ffffff 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#000000), color-stop(100%,#ffffff));
background: -webkit-linear-gradient(top, #000000 0%,#ffffff 100%);
background: -o-linear-gradient(top, #000000 0%,#ffffff 100%);
background: -ms-linear-gradient(top, #000000 0%,#ffffff 100%);
background: linear-gradient(to bottom, #000000 0%,#ffffff 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=‘#000000‘, endColorstr=‘#ffffff‘,GradientType=0 );
}
:root .gradient{filter:none;}
css設計匯總