CSS經驗

時間  2019-11-10
標籤 css 經驗 欄目 CSS 简体版
原文   原文鏈接

一、複選框與文字的偏移問題
通常狀況下，複選框的小方框會與文字誤差2px，以下所示：
請輸入圖片描述
爲了解決該問題，須要在頁面（不能再單獨的CSS中寫）上添加vertical-align:-2px;javascript

<label title="笑話"><input name="vip0" type="checkbox" value="" style="vertical-align:-2px" />&nbsp;笑話</label>

效果以下：
請輸入圖片描述css

二、png圖片在IE8及如下的IE瀏覽器中出現黑邊（對opacity動態操做時）
主要緣由：IE8如下的瀏覽器bug，動態修改透明度，就會出現黑邊問題。
解決方案：
（1） 設置容器的background-color背景顏色
（2）給容器加一個zoom:1;
IE修改透明度，不是經過css屬性，而是經過filter濾鏡，因此想要理解這個bug，就要從filter濾鏡上找緣由。filter做用於一個對象時，這個對象必須是有形體，也就是必須是layout，而IE存在一個很特殊的屬性：hasLayout ，這個屬性能夠 賦予容器成layout，hasLayout這個屬性有些詭異，你沒法經過直接寫css啓動，而必須經過javascript啓動，其實還有一種方法能夠啓動，就是使用特殊的css屬性，變相將hasLayout啓動，這個css屬性就是 zoom （其餘的屬性好比display:inline-block、float:left等也行，而只有zoom沒什麼反作用）html

三、背景自適應
（1）讓背景圖片和網頁內容都浮動，背景圖片在最底下便可！java

<!--背景圖片-->
<div id="bodybg">   
     <img src="images/body_bg.png" class="stretch" alt="" />   
</div>
<!--背景圖片 end-->

<!--ajc-wrapper-->
<div class="ajc-wrapper">
    <!------全部網頁內容----------------->
</div>
<!--ajc-wrapper end-->

**CSS設置**
    /*--------------背景圖片-------------*/
    #bodybg {   
        width: 100%;        
        position: absolute;    
        left: 0px;    
        bottom: 0px;    
        z-index: -10;   
    }   

    .stretch {   
        width:100%;     
    }  
    /*--------------背景圖片 end-------------*/


    /*---------------ajc-wrapper-----------------*/
    .ajc-wrapper{
        width:100%;
        height:100%;
        overflow-y:scroll;
        position: absolute;    
            left: 0px;    
            bottom: 0px;    
            z-index: 1000;   
    }
    /*---------------ajc-wrapper end-----------------*/

（2）方法2git

body {
    background: url(/img/bg.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

來自 https://gist.github.com/isayme/3ae56568728675d3fddbgithub

四、浮動層上下全部居中web

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
</head>
<style type="text/css">
.sty{
    position:absolute;
    width:300px;
    height:200px;
    left:50%;
    top:50%;
    margin-left:-150px;   //寬度的一半
    margin-top:-100px; //高度的一半
    background-color:#fefefe;
    border:dashed 3px #666; 
}
</style>

<body>

<div class="sty">
111
</div>
</body>
</html>

五、<!DOCTYPE html>很重要
噩夢開始的源頭：以前寫html或者jsp頁面，歷來不注意doctype的聲明，也不太明白doctype的做用。直到最近碰到了一個很是奇葩的bug：某一個頁面在IE7和8，Chrome，ff等下正常，可是在IE9下顯示有問題，我就開始找啊找，各類調試，各類log，終於在httpWatch裏邊找到了答案：DOCTYPE未聲明。因而我給頁面添加了<!DOCTYPE html>,果真奏效了。
 
下面我就儘量簡潔扼要的說一下DOCTYPE的做用和用法。
1做用：聲明文檔的解析類型(document.compatMode)，避免瀏覽器的怪異模式。
document.compatMode：
BackCompat：怪異模式，瀏覽器使用本身的怪異模式解析渲染頁面。
CSS1Compat：標準模式，瀏覽器使用W3C的標準解析渲染頁面。
       這個屬性會被瀏覽器識別並使用，可是若是你的頁面沒有DOCTYPE的聲明，那麼compatMode默認就是BackCompat,
這也就是惡魔的開始 -- 瀏覽器按照本身的方式解析渲染頁面，那麼，在不一樣的瀏覽器就會顯示不一樣的樣式。
    若是你的頁面添加了<!DOCTYPE html>那麼，那麼就等同於開啓了標準模式，那麼瀏覽器就得老老實實的按照W3C的
標準解析渲染頁面，這樣一來，你的頁面在全部的瀏覽器裏顯示的就都是一個樣子了。
這就是<!DOCTYPE html>的做用。
 
2 使用：<!DOCTYPE html>
2.1 使用也很簡單，就是在你的html頁面的第一行添加"<!DOCTYPE html>"一行代碼就能夠了
2.2 jsp的話，添加在<%@ page %>的下一行。
2.3 不用區分大小寫哦
 
想了解更多，能夠參考：
w3c : http://www.w3school.com.cn/tags/tag_doctype.asp
博文：http://i.wanz.im/2010/05/28/why_doctype_html/算法

六、Css2如何實現背景透明文字不透明
div {background: rgba(200, 54, 54, 0.5); 主要用於手機chrome

七、頁面佈局
（1）兩列布局，左列固定，右列可伸縮
A.左列設置向左浮動和固定寬高，右列只有高度express

<style type="text/css">
.left{
    background-color: #E8F5FE;
    border: 1px solid #A9C9E2;
    float: left;
    height: 300px;
    width: 200px;
}
.right{
    background-color: #F2FDDB;
    border: 1px solid #A5CF3D;
    height: 300px;
}
</style>

<div class="left">left</div>

<div class="right">right</div>

B.若要兩欄之間有間隙，則須要設置右欄的margin-left（左側外邊距）

margin-left ：左側width + 間隙寬度

（2）三列布局，左右固定，中間可伸縮（有最小寬度）

<!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>
<meta http-equiv="Content-Type" />
<title>3列布局</title>
<style type="text/css">
body {
    font-family: Verdana, Arial;
    margin: 0;
    font-size: 12px;
}
#container{
    /*添加外層容器，用來設置最小寬度*/
    min-width:975px; /*For FF*/
    _width:expression((document.documentElement.clientWidth||document.body.clientWidth)<1000?"975px":"auto"); /*For IE6*/
    background-color:#fff;
    border:1px solid #33CCFF;
}

#dyhead {
    margin-bottom: 10px;
}
#dyleft {
    float: left;
    width: 200px;
    height:300px;
}
#dycenter {
    margin: 0 210px;
    height:300px;
}
#dyright {
    float: right;
    width: 200px;
    height:300px;
}
#dyfoot {
    margin-top: 10px;
    clear: both;
}
div {
    background-color: #eee;
    border: dotted 1px green;
}
</style>
</head>
<body>
<div id="container">
    <div id="dyhead">頭部（3列布局，左右兩欄寬度固定，中間欄自適應寬度）</div>
    <div id="dyleft">左欄固定寬度爲200px</div>
    <div id="dyright">右欄固定寬度爲200px</div>
    <div id="dycenter">中間自適應寬度</div>
    <!--注意這裏，中間3列的div的順序不是「左中右」，而「左右中」,中間一列寫在最後-->
    <div id="dyfoot">底部</div>
</div>
</body>
</html>

八、表格
一、固定表格表頭
主要方法：表格外面套一個div，用div來實現滾動（x方向超過隱藏）。同時，table必須有 border-collapse: collapse; （合併表格邊框）。
把表頭設置爲相對定位，提升層級，使其浮在上邊，不發生滾動

<meta http-equiv="X-UA-Compatible" content="IE=7" /> 
    <style type="text/css"> 
    div{ 
        overflow-y: scroll; 
        overflow-x: hidden; 
        height: 100px; 
        margin-top: 5px; 
        margin-left: 12px; 
        padding-top: -2px; 
        padding-bottom: 5px; 
        border: 3px solid #009933; 
    } 
    table{ 
        width: 100%; 
        border-color: #d2f1ac; 
        border-collapse: collapse; 
        border-top: 0px solid #ffffff; 
    } 
    .fixedtd th{ 
        position: relative; 
        z-index: 1; 
        background: #009933; 
        text-align: center; 
    } 
    </style>

九、CSS中用到的@ （媒體查詢、引入字體）

媒體查詢

@media screen and (max-width:980px) {
  .....
}
<link rel="stylesheet" media="screen and (orientation : portrait ) and (min-width:800px) "  href="portrait-screen.css" />

@font-face{
      font-family:FontName;
      src : url( URL );
}

@import  url("photo.css") screen and (man-width:360px);

在當前樣式中按條件引入其餘樣式表

媒體查詢能檢測到的特性：
width：視口大小
height：視口大小
device-width：設備屏幕大小
device-height：設備屏幕大小
orientation：設備出於橫向仍是縱向
aspect-ratio：基於視口的寬高比，例如：16/9
device-aspect-ratio：基於屏幕的寬高比
color：顏色，min-color可檢測設備是否擁有16位顏色
color-index：設備顏色索引表中的顏色數
monnchrome：檢測單色幀緩衝區中每像素所使用的位數。值必須是非負整數
resolution：用來檢測屏幕或打印機的分辨率
scan：電視機的掃描方式，progressive（逐行掃描）、interlace（隔行掃描）
grid：檢測輸出設備是網格設備仍是位圖設備

十、小的Tips

  • 1）鼠標圖標參數：cursor : point

  • 2）經常使用連接<a href="javascript:void(0);"></a>表示不採起任何操做

  • 3）網頁收藏欄圖標

    <link rel="icon" href="/guodu.ico" mce_href="guodu.ico" type="image/x-icon">
    ico文件尺寸不能超過255 X 255

  • 4）表單控件輸入「默認文字」 （IE七、8不兼容）

    <input type="text" class="form-control" placeholder="Email address" autofocus>輸入框裏面的默認文字

  • 5）text-indent 文字縮進量

  • 6）css陰影效果

    IE9+ / Firefox / Chrome / Opera / Safari
    .shadow {
    -moz-box-shadow: 3px 3px 4px #000;
    -webkit-box-shadow: 3px 3px 4px #000;
    box-shadow: 3px 3px 4px #000;
    }

IE 使用濾鏡（兼容老版本）

.shadow {
    /* For IE 8 */
    -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";
    /* For IE 5.5 - 7 */
    filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');
}

  • 7）圖片不存在的時候，顯示一個默認圖片

十、一行內文本超出指定寬度溢出的處理

  • 1）通常的文字截斷（適用於內聯與塊）：

.text-overflow {
display:block;/內聯對象需加/
width:31em;
word-break:keep-all;/* 不換行 /
white-space:nowrap;/ 不換行 /
overflow:hidden;/ 內容超出寬度時隱藏超出部分的內容 /
text-overflow:ellipsis;/ 當對象內文本溢出時顯示省略標記(...) ；需與overflow:hidden;一 起使用。*/
}

  • 2）對於表格文字溢出的定義：

table{
width:30em;
table-layout:fixed;/* 只有定義了表格的佈局算法爲fixed，下面td的定義才能起做用。 /
}
td{
width:100%;
word-break:keep-all; / 不換行 /
white-space:nowrap; / 不換行 /
overflow:hidden; / 內容超出寬度時隱藏超出部分的內容 /
text-overflow:ellipsis; / 當對象內文本溢出時顯示省略標記(...) ；需與overflow:hidden;一 起使用。*/
}

  • 3）如何設置列表(li)超出部分顯示省略號：

咱們經常但願列表中的內容，超過設置的長度的時候，不要撐開父元素，也不但願它直接換行；咱們更願意讓其超過部分用省略號來代替。而在title標籤中，置放的是完整的標題。
這樣的方法新手們經常不知道該如何搞定。下面就是方法的演示。不過請注意此方法適用與IE與OP瀏覽器！

li {
width:200px;
white-space:nowrap;
text-overflow:ellipsis;
overflow: hidden;
}

十一、IE條件註釋

<!--[if lte IE 6]>
<link rel="stylesheet" type="text/css" href="images/StyleSheet.css" />
<![endif]-->
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="images/css.css" />
<![endif]-->
<!–[if IE]>

這裏是正常的html代碼

<![endif]–>

　　1，條件註釋的基本結構和HTML的註釋(<!– –>)是同樣的。所以IE之外的瀏覽器將會把它們看做是普通的註釋而徹底忽略它們。
　　2，IE將會根據if條件來判斷是否如解析普通的頁面內容同樣解析條件註釋裏的內容。
　　3，條件註釋使用的是HTML的註釋結構，所以他們只能使用在HTML文件裏，而不能在CSS文件中使用。
可以使用以下代碼檢測當前IE瀏覽器的版本（注意：在非IE瀏覽器中是看不到效果的）

<!--[if IE]>
       <h1>您正在使用IE瀏覽器</h1>
       <!–[if IE 5]>
           <h2>版本 5</h2>
       <![endif]-->
       <!--[if IE 5.0]>
           <h2>版本 5.0</h2>
       <![endif]-->
       <!--[if IE 5.5]>
           <h2>版本 5.5</h2>
       <![endif]-->
       <!--[if IE 6]>
           <h2>版本 6</h2>
       <![endif]-->
       <!--[if IE 7]>
           <h2>版本 7</h2>
       <![endif]-->
<![endif]-->

　　那若是當前的瀏覽器是IE，但版本比IE5還低，該怎麼辦呢，可使用<!–[if ls IE 5]>，固然，根據條件註釋只能在IE5+的環境之下，因此<!–[if ls IE 5]>根本不會被執行。
　　lte：就是Less than or equal to的簡寫，也就是小於或等於的意思。
　　lt ：就是Less than的簡寫，也就是小於的意思。
　　gte：就是Greater than or equal to的簡寫，也就是大於或等於的意思。
　　gt ：就是Greater than的簡寫，也就是大於的意思。
　　! ：就是不等於的意思，跟javascript裏的不等於判斷符相同

　　Conditional comments屬於CSS hack? 條件判斷屬於CSS hack嗎？
　　嚴格地說是屬於CSS hack。由於就好象其餘真正的css hack同樣，它使得咱們能夠給一些瀏覽器賦予特殊的樣式，再則它不依賴於某個瀏覽器的BUG來控制另一個瀏覽器（的樣式）。除此以外，條件判斷還能用來作一些超出CSS HACK範圍的事情(雖然這種狀況不多發生)。
　　由於條件判斷不依賴於某個瀏覽器的hack,而是一個通過深思熟慮的特點功能，因此我相信它是能夠被放心地使用的。固然，其餘瀏覽器也有可能支持條件判斷（到目前爲止尚未），可是看起來，他們應該不會使用如<!–[if IE]>這樣的語法。
　　應該如何應用條件註釋
　　本文一開始就說明了，由於IE各版本的瀏覽器對咱們製做的WEB標準的頁面解釋不同，具體就是對CSS的解釋不一樣，咱們爲了兼容這些，可運用條件註釋來各自定義，最終達到兼容的目的。好比：

<!--默認先調用css.css樣式表-->
<link rel="stylesheet" type="text/css" href="css.css" />
<!--[if IE 7]>
<!-- 若是IE瀏覽器版是7,調用ie7.css樣式表 -->
<link rel="stylesheet" type="text/css" href="ie7.css" />
<![endif]-->
<!--[if lte IE 6]>
<!-- 若是IE瀏覽器版本小於等於6,調用ie.css樣式表 -->
<link rel="stylesheet" type="text/css" href="ie.css" />
<![endif]-->
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程