成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

你應(yīng)該知道的關(guān)于CSS的一些奇淫巧技

Paul_King / 2462人閱讀

摘要：本文分享關(guān)于應(yīng)用中的一些小技巧，如果有不對(duì)的地方，歡迎指出建議和意見(jiàn)。項(xiàng)目地址，歡迎和，如果有更多的，也歡迎提交。

本文分享關(guān)于CSS應(yīng)用中的一些小技巧， 如果有不對(duì)的地方，歡迎指出建議和意見(jiàn)。

Github項(xiàng)目地址：Great-CSS-Tips-You-Should-Know，歡迎fork和star，如果有更多的tips，也歡迎提交PR。

使用CSS來(lái)垂直居中一切元素

其實(shí)很簡(jiǎn)單, 使用下面的代碼就讓你的所有元素都垂直居中

html, body {
  height: 100%;
  margin: 0;
}

body {
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;  
  -ms-flex-align: center;  
  align-items: center;
}

如果你的需求不只是垂直居中的話--比如你想要上下左右都居中, 那么, 可以看看我的另外一個(gè)項(xiàng)目: css-center-complete

使用CSS來(lái)制作箭頭

如果使用CSS來(lái)畫(huà)我們常用的箭頭呢? 就像下面這樣:

/* 向下的箭頭 */
.caret {
    display: inline-block;
    width: 0;
    height: 0;

    vertical-align: middle;
    
    /* 如果需要向上的箭頭的話, 就把border-top改為border-bottom */
    border-top: 20px solid;
    border-right: 20px solid transparent;
    border-left: 20px solid transparent;
}
使用CSS來(lái)讓footer永遠(yuǎn)位于屏幕底部, 并隨內(nèi)容而拉伸

這是個(gè)困擾我很久的問(wèn)題, 不過(guò)最終, 我還是找到了一個(gè)比較好的解決方案

假設(shè)你的html是下面這樣寫(xiě)的:

我們要的效果是footer一直位于底部, 同時(shí), 當(dāng)內(nèi)容的高度增加時(shí), 他也會(huì)被內(nèi)容給擠下去. 所以, 我們需要像下面這樣定義CSS:

html {
    height: 100%;
}

body {
    position: relative;
    min-height: 100%;

    &:after {
        display: block;
        content: "";
        height: 200px; /* 此處的高度必須和footer的高度相同 */
    }
}

.footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 200px;
}
使用CSS避免圖片超出包含塊

我們想要我們的大圖放在我們的文章或者其他地方, 所以, 要避免這些圖片超出內(nèi)容, 怎么做呢?

img {
    display: block;
    max-width: 100%;
    margin: 0 auto;
}
使用CSS制作帶有分割線的導(dǎo)航

制作一個(gè)帶有分割線的橫向?qū)Ш? 可以使用CSS的:not和:last-child來(lái)實(shí)現(xiàn)

.nav li:not(:last-child) {
    border-right: 1px solid #cccccc;
}
使用CSS來(lái)通過(guò)動(dòng)態(tài)計(jì)算設(shè)置元素的高度

不得不說(shuō), CSS3的calc屬性真的很棒, 我們可以使用這個(gè)屬性來(lái)動(dòng)態(tài)計(jì)算一個(gè)元素的高度

當(dāng)你使用calc來(lái)計(jì)算元素的高度的時(shí)候你要注意, 計(jì)算的高度是依賴于父級(jí)元素的高度的, 所以, 你需要先設(shè)置父級(jí)元素的高度
.container {
    height: 100vh;  /* 使用vh這個(gè)單位來(lái)設(shè)置高度為100% */
}

.content {
  width: 100%;  
  height: calc(100% - 150px);
  background-color: #aaaaaa;
}
使用CSS設(shè)置全屏圖片

Set a full page image is so common for the website nowadays.
現(xiàn)在的很多網(wǎng)站都采用了全屏的圖片, 那么, 這是怎么實(shí)現(xiàn)的呢? 有兩種方法:

1. 設(shè)置全屏背景圖

html {
    background: url("the/path/to/your/image") no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=".myBackground.jpg", sizingMethod="scale");
    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src="myBackground.jpg", sizingMethod="scale")";
}

2. 使用img標(biāo)簽的全屏圖片

要使用img標(biāo)簽的話, 最好是將它放在一個(gè)div中


    

.container {
    positiong: relative;
    width: 100%;
    max-height: 500px;
    background-color: red;
    
    /* 避免編邊距折疊 */
    overflow: hidden;
}

.container:after {
    content: "";
    display: block;
    margin-top: 50%; /* 或者設(shè)置padding-top: 50%; */
}

你應(yīng)該能看到, 圖片沒(méi)有加載出來(lái)的時(shí)候, 內(nèi)容也是有高度的.

使用CSS來(lái)制作圖片加載失敗的效果

在圖片加載失敗的時(shí)候, 使用CSS來(lái)讓加載失敗的圖片顯得更美觀更友好

img:before {  
  content: "We"re sorry, the image below is broken :(";
  display: block;
  margin-bottom: 10px;
}

img:after {  
  content: "(url: " attr(src) ")";
  display: block;
  font-size: 12px;
}

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/115156.html

相關(guān)文章

  • CSS相關(guān)面試題——三欄等高布局

    摘要：題目最近在面試中遇到過(guò)這樣一道面試題，讓寫(xiě)出左中右，三欄布局，左欄右欄固定寬度，中間欄寬度自適應(yīng)。代碼如下效果如下所示乍一看實(shí)現(xiàn)了三列布局，但是題目要求等高，這個(gè)可就麻煩了。 題目 最近在面試中遇到過(guò)這樣一道面試題，讓寫(xiě)出左中右，三欄布局，左欄右欄固定寬度200px，中間欄寬度自適應(yīng)。要求三欄的高度隨最高的一欄展示 解題 step1 常規(guī)拿到這個(gè)面試題，首先想到的是三個(gè)盒子左浮動(dòng)右浮動(dòng)...

    Taste 評(píng)論0 收藏0

  • CSS相關(guān)面試題——三欄等高布局

    摘要：題目最近在面試中遇到過(guò)這樣一道面試題，讓寫(xiě)出左中右，三欄布局，左欄右欄固定寬度，中間欄寬度自適應(yīng)。代碼如下效果如下所示乍一看實(shí)現(xiàn)了三列布局，但是題目要求等高，這個(gè)可就麻煩了。 題目 最近在面試中遇到過(guò)這樣一道面試題，讓寫(xiě)出左中右，三欄布局，左欄右欄固定寬度200px，中間欄寬度自適應(yīng)。要求三欄的高度隨最高的一欄展示 解題 step1 常規(guī)拿到這個(gè)面試題，首先想到的是三個(gè)盒子左浮動(dòng)右浮動(dòng)...

    fsmStudy 評(píng)論0 收藏0

  • Flexbox 很棒，但有些情況不適用

    摘要：其設(shè)計(jì)初衷并不是完備的網(wǎng)格系統(tǒng)。所以禁止將其作為一個(gè)完整的網(wǎng)格系統(tǒng)使用。但貓有四條腿，而人類(lèi)只有兩條?？偠灾?，還是很棒的真的很有用。 對(duì)大部分的人來(lái)說(shuō)（如果你寫(xiě)過(guò)CSS），F(xiàn)lexbox 可以說(shuō)是完美，但它是否適合所有場(chǎng)景呢？ 簡(jiǎn)而言之，我會(huì)給出幾種可用的場(chǎng)景，需要你重新思考 Flexbox 模型的使用。 順便說(shuō)一句，本人是 Flexbox 的忠實(shí)粉絲，曾寫(xiě)過(guò)一篇 Flexbox 詳...

    wums 評(píng)論0 收藏0

  • PDF、PPT、Excel、Word、視頻等格式文件在線預(yù)覽

    摘要：最近項(xiàng)目中用到了文件在線預(yù)覽功能，文件類(lèi)型大概有圖片視頻等等，總結(jié)梳理了一下，分享給大家。文件類(lèi)型在線文檔推薦使用，簡(jiǎn)單易用。而原生的的元素支持三種視頻格式，所以我們需要更強(qiáng)大支持更多視頻在線播放，第三方擴(kuò)展庫(kù)。 最近項(xiàng)目中用到了文件在線預(yù)覽功能，文件類(lèi)型大概有圖片、視頻、PDF、PPT、Excel、Word 等等，總結(jié)梳理了一下，分享給大家。 PDF 文件類(lèi)型 jquery.medi...

    13651657101 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

Paul_King

男|高級(jí)講師

TA的文章

閱讀更多
最新活動(dòng)
閱讀需要支付1元查看
<