關於css的總結

時間 2019-11-12

標籤關於 css 總結欄目 CSS 简体版

原文原文鏈接

本文轉載於:猿2048網站關於css的總結php

　　寫在前面 ,學好css,須要長期的推敲和積累 ,細節是不斷完善的,逐漸造成本身的風格讓本身的css更加接近優雅.css

　　下面來總結一些我以爲比較好的css代碼風格 :html

　　1. 通常網頁中的背景用背景時設置爲行內樣式 style="background-image: url(img/01.jpg)";

　　　　這樣作有一點好處:圖片通常爲資源儘可能寫在html中便於後期維護結構清晰前端

　　　　這樣作還有一點要注意:這裏應該使用 "background-image" 而不要偷懶寫"background",由於行內樣式的權重比較高(1000),避免在外聯css中設置其餘背景屬性設置不上;css3

　　2.左邊固定右邊自適應

　　在佈局的時候，好比一些列表頁，經常左邊是一個固定大小的圖，右邊剩餘部分展現標題，web

　　方法有兩種瀏覽器

　　　　1.100%寬的div用padding-left把左邊圖片的位置留出來，div元素內容的部分就是標題，圖片絕對定位到padding-left區域，這樣就實現了左固定右自適應，（前提是box-sizing必須是border-box，不然padding加上100%寬會超出屏幕寬度），代碼以下：佈局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<style>
    .container{
        position: relative;
        width: 50%;
        margin: 0 auto;
    }
    .left{
        width: 300px;
        height: 300px;
        position:absolute;
        left: 0;
        top: 0;
        background: red;
    }
    .right{
        box-sizing: border-box;
        width: 100%;
        height: 300px;
        padding-left: 300px;
        background: #ccc;
    }

</style>
<body>
    <div class="container">
        <div class="left"></div>
        <div class="right">
            我就是左邊自適應的內容        我就是左邊自適應的內容        我就是左邊自適應的內容        我就是左邊自適應的內容        我就是左邊自適應的內容        我就是左邊自適應的內容    
        </div>
    </div>
    
</body>
</html>

　　　2.父容器width100% 左邊盒子寬度固定左浮動右邊盒子 overflow:hedden(原理暫不清楚) 代碼以下:字體

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .container{
            width: 100%;
        }
        .left{
            float: left;
            width: 300px;
            height: 300px;
            background: red;
        }
        .right{
            overflow: hidden;
            background: #ccc;
            height: 300px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="left">我是左邊固定盒子</div>
        <div class="right">
            我就是左邊自適應的內容        我就是左邊自適應的內容        我就是    左邊自適應的內容        我就是左邊自適應的內容        我就是左邊自適應的內容        我就是左邊自適應的內容        
        </div>
    </div>
</body>
</html>

　　　　3.元素的上下間距

　　佈局的時候從上往下開始寫頁面，通常都是寫下一個的元素margin-top來決定和上一個元素的間距，那麼就儘可能不要又是寫margin-top又是寫margin-bottom，若是混着用，後期很差維護，好比某一塊區域須要換位置，或者是一個組件可能會被不少地方共用，混着寫的話後期在改的時候，可能會麻煩一點，這裏致使的問題能夠說不痛不癢，可是不論是js仍是css，注重細節並養成好的習慣，是代碼能力的一種體現。優化

　　　　4.字體顏色透明

　　有時候設計師，在配置字體顏色的時候可能用透明的百分比，來設置幾種不一樣的顏色，好比主色是#000，淺灰色#000 75%的透明度，這種狀況下不建議web寫透明度，而是讓設計師給到對應的顏色值，由於透明色會根據背景的不一樣，這樣擴展性就比較差。　　

　　　　5.命名

　　命名是一個讓人最糾結的事情，先看第一種,這樣命名的更詳細能夠一目瞭然的知道當前類的意思，可是長度比較長，增長代碼量。

　　　　　　nav-botton-float-right

　　第二種使用縮略命名，會使代碼更短，寫起來更快，可是不易讀。

　　　　　　nav-btn-fr

　　若是用縮略命名，能夠約定文檔，有約定和熟悉成本，可是熟悉之後更高效，類的命名也會變得更規範和統一

　　　　　　約定 fr爲 float right

　　　　6. 0.5px邊框的理解誤區

　　以前寫邊框的時候就發現，只要讓邊框的顏色更淡，邊框看起來就更細，因此當設計師問我爲何邊框看起來比較粗的時候，我都告訴他們顏色調淺一點就行了，這個技巧我一直在實際使用。網上有博客說經過css3 transform的縮放scale 50%，能夠實現0.5px邊框，我一直很奇怪，1px實際是物理的最小單位，怎麼可能實現0.5px，就這樣我作了個實驗，我設置了1px顏色爲000的邊框（黑色）

　　　　7.rem佈局的文字大小

　　你們都知道瀏覽器通常不會讓文字小於12px，若是設置小於12px瀏覽器都會顯示12px，咱們在用到rem佈局的時候，元素是會根據屏幕寬度等比例縮放的，好比設計師給到750px的設計稿，若是某一個元素文字是22px，那麼當用戶的屏幕寬度是375的時候，文字會縮放爲11px，實際瀏覽器就會顯示爲最小12像素，那麼其餘非字體元素比例仍然會縮小，這個時候字體可能和其餘元素的比例就不是原設計稿的比例了，若是用戶屏幕是320px，那麼和原設計稿元素間的比例就差更多了。因此咱們必定要根據本身的狀況告訴設計師(也許人家就知道)，在寬是750像素的設計稿裏，字體最小應該是24像素。

　　　　8.沒有必要過度的去兼容低版本的IE

　　　　兼容IE就是甚至浪費人力成本，好比說IE8不支持圓角，得用圖片代替，沒有沒有placeholder，得用JS來模擬。對於我的來講，技術的更新換代是大勢所趨，咱們要往前看，有的是東西給你學，不要在這個地方浪費青春。

　　　　總結:

　　要作好css，寫好頁面，和設計師的溝通也是很重要的一個技能，由於設計師決定頁面最終要呈現的樣子，要經過項目驗收，也必需要設計師驗收經過才行。

　　設計師給過來一個交互效果，前端拿到，一想交互效果還能夠，可是實現成本比較高，功能都作不完，不想作這麼細，而後就直接說沒時間這個作不了，設計師一想這個交互很難嗎，別人都能作，你爲何不作，就這樣來回幾句就鬧矛盾了，鬧到產品那裏去了，最後可能交互效果還得作，時間也耽誤了。其實這個是不少前端會遇到的問題，時間壓得緊，功能可能都要延期，還來作這些交互，天然會有點抱怨，情緒一上來，把產品和設計都得罪了，最後仍是要作，長此以往矛盾愈來愈深，溝通就愈來愈困難。換個思路想問題，設計師大部分時候時間也很緊，要對產品和設計領導有所交代，前端又在催，好不容易作出來了，你這也不能實現那也不能實現，你這樣我也無法交代啊。那麼咱們換個溝通方式，好比這樣說：咱們這邊時間確實有點緊，這個交互比較麻煩，比較費時間，我作是能夠作，只是可能會影響項目進度，你看要不我先作簡單點，等到提測的時候有時間再加上這個交互，實在不行能不能等到上線以後，我單獨再優化一下這個地方，很快就能上線。

　　設計師們仍是講道理的，根據web上的一些特性，設計師設計出來的一些樣式一些想法或許無法實現，又或者實現成本過高，咱們就得說服他們這個地方爲何不能實現，由於他們不懂，因此懼怕你忽悠他們（實際有時候就有人忽悠他們），因此要想說服別人，本身必定要把問題搞清楚，把知識點理清楚，不能實現的理由對設計師說清楚，而且要有理有據，同時最好網上找到相關博客或者官方解釋進行佐證。有不少矛盾和問題，就在於咱們疏忽了溝通，又或者說是咱們本身偷懶了，其實當本身把知識點能給外行說清楚了，這也說明是理解透了，也是對本身能力的提高。設計師辛苦設計的稿子必定要儘可能達到他們的效果，也要考慮擴展性和可實現性，態度很重要，不要讓人以爲是在敷衍他們，什麼是敷衍，不解釋清楚就說不作，就是敷衍，不然碰一鼻子灰只有怪本身。技術點要搞清楚，要不解釋不清楚，別人不買單，在發現設計稿有問題的時候，耐心提醒其中一些不合適的地方，多幫別人承擔一點，前端和設計師要友好相處。