如何提高個人HTML&CSS技術，編寫有結構的代碼

時間  2019-11-12
標籤 如何 提高 個人 html&css html css 技術 編寫 結構 代碼 欄目 CSS 简体版
原文   原文鏈接

前言

    以前寫了四篇HTML和CSS的知識點，也至關因而一個知識點彙總。有須要的能夠收藏，平時開發過程當中應該會遇到這些點，到時候再查看這些博客可能更容易理解。從這篇開始更多的介紹開發過程常常讓人頭痛的前端問題，以及如何編寫性能比較高的前端代碼。本人也是剛入門前端的小菜，但願各位前端大牛多多糾正內容中寫的不對的地方，讓我提高的更快。最近看到博客園中好多前端大牛，都是在各大bat公司工做，這也是我作開發的夢想。。。javascript

導航

 1.基礎篇 css

     這些HTML、CSS知識點，面試和平時開發都須要 No1-No4（知識點：HTML、CSS、盒子模型、內容佈局）html

     這些HTML、CSS知識點，面試和平時開發都須要 No5-No7（知識點：文字設置、設置背景、數據列表）前端

     這些HTML、CSS知識點，面試和平時開發都須要 No8-No9（知識點：媒體操做、構建表單）java

     這些HTML、CSS知識點，面試和平時開發都須要 No10-No11（知識點：表格操做、代碼編寫規則）web

2.進階篇面試

    如何提高個人HTML&CSS技術，編寫有結構的代碼瀏覽器

No1.CSS展示和組織

1.CSS結構化服務器

    （1）比較經典的樣式架構：咱們常常看到的web系統樣式文件通常都只包含index.css或者base.css，但在實際開發過程當中咱們應該儘可能按模塊分組CSS樣式，把同類的樣式放到一個模塊下。雖然模塊化後增長了不少css文件，但當咱們發佈版本的時候，能夠把全部的css文件壓縮到一個css文件中，這樣可提高頁面的加載速度。下面是一個比較經典的CSS樣式架構：架構

複製代碼 
# Base //基礎樣式
– normalize.css  //標準化樣式
– layout.css  //流佈局樣式
– typography.css  //段落樣式

# Components //組件樣式
– alerts.css 
– buttons.css
– forms.css
– list.css
– nav.css
– tables.css

# Modules 模塊樣式
– aside.css //邊欄樣式
– footer.css //底部樣式
– header.css //頭部樣式
複製代碼

    （2）模塊化CSS架構：包含Base、Layout、Module、State、Theme模塊。每一個模塊的意義以下所示：

# Base（核心元素style，覆蓋body、form等默認樣式）
# Layout（區別不一樣元素的size和grid樣式）
# Module（個別的特別頁面樣式）
# State（基於各類事件，提供不一樣的狀態樣式，例如:hover等）
# Theme（基於skin、look、feel的樣式）

2.如何提高頁面加載速度

    （1）選擇器寫法：因爲瀏覽器會渲染CSS樣式名稱路徑上的每個選擇器，因此應該保持簡短的選擇器路徑，減小渲染，提高頁面加載速度。

    （2）減少或壓縮文件：在文件經過http協議傳輸時，可經過gzip方式壓縮html、css以及js文件，縮減流量。不一樣的http服務器都提供了gzip壓縮傳輸。

    （3）減小HTTP請求-減小文件數量：把類似的文件結合成一個文件，例如把多個CSS文件壓縮成一個CSS文件、把多個JS文件壓縮成一個JS文件，這樣每次只用發送一次http請求。

    （4）減小HTTP請求-在正確的位置加載文件：CSS文件應該放在head的開頭加載，JS文件應該放在頁面的最後位置（body關閉標示</body>以前加載）。這是由於在加載CSS文件的同時可加載剩下的頁面，而加載JS文件時會致使頁面加載阻塞，因此最好是等頁面加載完了再加載js文件，這樣改善了用戶感知。

    （5）圖片拼切：常常看到一組操做按鈕，每一個按鈕有不一樣的圖標，加載頁面時每一個圖標加載都會產生一次請求。咱們可使用一個合併的圖片做爲多個元素的背景，而後使用background-position來定位圖片的顯示位置。下面的頁面就實現了這樣的想過：

複製代碼 
<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <style type="text/css">
        ul {
        margin: 0;
        padding: 0;
        }
        li {
        float: left;
        list-style: none;
        margin: 2px;
        }
        li a {
        background: linear-gradient(#fff, #eee);
        border: 1px solid #ccc;
        border-radius: 3px;
        display: block;
        padding: 3px;
        }
        li a:hover {
        border-color: #999;
        }
        li span {
        background: url("sprite.png") 0 0 no-repeat;
        color: transparent;
        display: block;
        font: 0/0 a;
        height: 16px;
        width: 16px;
        }
        .italic {
        background-position: -16px 0;
        }
        .underline {
        background-position: -32px 0;
        }
        .size {
        background-position: -48px 0;
        }
        .bullet {
        background-position: -64px 0;
        }
        .number {
        background-position: -80px 0;
        }
        .quote {
        background-position: -96px 0;
        }
        .left {
        background-position: -112px 0;
        }
        .center {
        background-position: -128px 0;
        }
        .right {
        background-position: -144px 0;
        }
    </style>

    <script type="text/javascript">
    </script>
</head>
<body>
    <ul>
    <li><a href="#"><span class="bold">Bold Text</span></a></li>
    <li><a href="#"><span class="italic">Italicize Text</span></a></li>
    <li><a href="#"><span class="underline">Underline Text</span></a></li>
    <li><a href="#"><span class="size">Size Text</span></a></li>
    <li><a href="#"><span class="bullet">Bullet Text</span></a></li>
    <li><a href="#"><span class="number">Number Text</span></a></li>
    <li><a href="#"><span class="quote">Quote Text</span></a></li>
    <li><a href="#"><span class="left">Left Align Text</span></a></li>
    <li><a href="#"><span class="center">Center Align Text</span></a></li>
    <li><a href="#"><span class="right">Right Align Text</span></a></li>
    </ul>
</body>
</html>
複製代碼

    展現結果以下：

image

No2.元素定位

1.float浮動定位問題

    （1）float經典問題：先看看代碼和展現結果：

複製代碼 
<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <style type="text/css">
        .box-set {
            background: #eaeaed; /* 灰色  */
            /* overflow: auto; */  /* overflow技術 */
        }
        .box {
            background: #2db34a; /* 綠色 */
            float: left;
            margin: 1.858736059%;
            width: 29.615861214%;
        }
    </style>

    <script type="text/javascript">
    </script>
</head>
<body>
    <div class="box-set">
        <figure class="box">Box 1</figure>
        <figure class="box">Box 2</figure>
        <figure class="box">Box 3</figure>
    </div>
</body>
</html>
複製代碼

    從下面的展現效果可知，父容器box-set設置的背景色並無生效，父容器的height等於0。

image

    （2）解決方法：使用overflow和clearfix兩個技術。

    （3）解決方法-overflow：直接在box-set樣式中添加屬性overflow: auto,添加後就可看到父容器的背景設置生效了。但考慮兼容器，IE6還須要設置width和height。但這裏遺留有其餘問題，若是咱們設置了其餘樣式，例如box-shadow樣式，可能致使陰影效果溢出box-set容器。

image

    （4）解決方法-clearfix：把頁面修改爲下面的代碼，運行頁面box-set展現正常而且也解決了IE6和7的兼容問題。須要說明的是:bofore僞類組織child的top-margin溢出，而:after僞類組織child的buttom-margin溢出。

複製代碼 
<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <style type="text/css">
        .box-set {
            background: #eaeaed; /* 灰色  */
            *zoom: 1;
        }

        .box-set:before,
        .box-set:after {
            content: "";
            display: table;
        }

        .box-set:after{
            clear: both;
        }

        .box {
            background: #2db34a; /* 綠色 */
            float: left;
            margin: 1.858736059%;
            width: 29.615861214%;
        }
    </style>

    <script type="text/javascript">
    </script>
</head>
<body>
    <div class="box-set">
        <figure class="box">Box 1</figure>
        <figure class="box">Box 2</figure>
        <figure class="box">Box 3</figure>
    </div>
</body>
</html>
複製代碼

2.position屬性

    （1）position默認值：元素默認的position爲static。

    （2）position的relative值：相對於元素position屬性值爲static的偏移位置。relative不會致使其餘元素的位置改變。

    （3）position的absolute值：元素從常規的流文檔中溢出，元素的位置是相對於最近的position爲relative或者absolute值得父元素偏移位置，找不到則元素的位置相對於body偏移。

    （4）position的fixed值：元素相對於瀏覽器視窗的偏移位置，不會隨着瀏覽器的滾動條滾動而改變位置。IE6不支持該屬性。

    （5）fixed實現header和foot停靠功能：下面這個例子實現footer一致停靠在瀏覽器的最下面，不會隨着滾動條位置的變化而變化。

複製代碼 
<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <style type="text/css">
    body {
        background: #eaeaed;
    }
    footer {
        height: 100px;
        background: #2db34a;
        bottom: 0;
        left: 0;
        position: fixed;
        right: 0;
    }
    </style>

    <script type="text/javascript">
    </script>
</head>
<body>
    <footer>Fixed Footer</footer>
</body>
</html>
複製代碼

3.z-index屬性

    （1）默認z-index位置：越排在DOM節點的靠top位置就越在z方向的下邊。

    （2）前置條件：若是要設置z-index屬性，必須設置元素的position屬性爲relative、aboslute或者fixed。例以下面的代碼分別按層次停靠元素：

複製代碼 
<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <style type="text/css">
        .box-set {
            background: #eaeaed;
            height: 160px;
            position: relative;
        }
        .box {
            background: #2db34a;
            border: 2px solid #ff7b29;
            position: absolute;
        }
        .box-1 {
            left: 10px;
            top: 10px;
        }
        .box-2 {
            bottom: 10px;
            left: 70px;
            z-index: 3;
        }
        .box-3 {
            left: 130px;
            top: 10px;
            z-index: 2;
        }
        .box-4 {
            bottom: 10px;
            left: 190px;
            z-index: 1;
        }
    </style>
</head>
<body>
    <div class="box-set">
        <figure class="box box-1">Box 1</figure>
        <figure class="box box-2">Box 2</figure>
        <figure class="box box-3">Box 3</figure>
        <figure class="box box-4">Box 4</figure>
    </div>
</body>
</html>
複製代碼
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程