HTML+CSS基礎

時間 2020-03-02

標籤 html+css html css 基礎欄目 CSS 简体版

原文原文鏈接

幾個月以前學過一段時間的前端，工做緣由都忘的差很少了，如今重溫一下，總結一些基礎的知識點。css

css有盒模型，網頁佈局也有基本模型。佈局模型和盒模型同樣都是css最基本、最核心的概念。可是佈局模型是創建在盒模型基礎上的，又不一樣於咱們常說的css佈局樣式或css佈局模板。佈局模型是本，css佈局模板是末，是外在表現形式。html

css包含三種基本的佈局模型：一、流動（Flow）二、浮動（Float）三、層（Layer）前端

塊級元素：div、p、h一、form、ul、li。設置display：block就是將元素顯示爲塊級元素，具有塊狀元素的特色。chrome

塊級特色：一、每一個塊級元素都重新的一行開始，而且其後的元素也另起一行（霸道）；瀏覽器

二、元素的高度、寬度、行高以及頂和底邊距均可設置。佈局

三、元素寬度如不設置，是它自己父容器的100%（除非設置一個寬度）；字體

內聯元素（行內元素）：span、a、lable、strong、em。設置display：inline將元素設置爲內聯元素。spa

內聯特色：一、和其餘元素都在一行上；firefox

二、元素的高度、寬度及頂部和底邊距不可設置；code

三、元素寬度就是它包含的文字或圖片的寬度，不可改變。

內聯塊狀元素：img、input。設置display：inline-block將元素設置爲內聯塊狀元素。

內聯塊狀特色：一、和其餘元素都在一行上；

二、元素高度、寬度、行高及頂和底邊距均可設置。

一、Flow

Flow是默認的網頁佈局模式。它具備兩個比較典型的特徵：

第1、塊狀元素都會在所處的包含元素內自上而下按順序垂直延伸分佈，由於在默認狀態下，塊狀元素的寬度都爲100%，塊狀元素都會以行的形式佔據位置。

第2、內聯元素都會在所處的包含元素內從左到右水平分佈顯示。

二、Float

實現兩個塊狀元素並排顯示（設置width、height和float）（設置爲right的話，第一個塊狀元素會靠右）；

三、Layer（對圖層精肯定位）

絕對（absolute）：將元素從文檔流中拖出來，而後使用left、right、top、bottom屬性相對於其最接近的一個具備定位屬性的父包含塊進行絕對定位（若不存在就相對於body）；

相對（relative）：它的完成過程是首先按static（float）方式生成一個元素（像層同樣浮動），而後相對於之前的位置移動，偏移前的位置不變；

固定（fixed）：它相對移動的座標是視圖（屏幕內的網頁窗口），視圖自己是固定的，不隨滾動條變化而變化。與background-attachment:fixed;屬性相同；

Relative與Absolute組合使用：

一、參照定位的元素必須是相對定位元素的父輩元素；

二、參照定位元素加入positive：relative；定位元素加入position：absolute。

四、簡寫：Eg：margin：10px 20px 30px 20px；

簡化爲：margin：10px 20px 30px；

color：#000000；簡化爲color：#000；#336699；簡化爲color:#369;

font：一、至少需指定font-size和font-family；二、縮寫時font-size和line-height中間要加入/斜槓。

五、顏色

一、color：red；

二、color：rgb（133，45，200）；

三、color：rgb（20%，33%，25%）；

四、color：#00ffff；

六、長度值（px、em、%（都是相對單位））

一、像素；

二、em：它是給定字體的font-size值，若是元素的font-size爲14px，則1em=14px；（注：若font-size設置單位爲em，則此時計算的標準是父元素的font-size爲基礎）；

三、百分比：行高爲字體的1.3倍；

p{font-size:12px;line-height:130%}

八、水平居中：

行內元素：被設置元素是文本、圖片等行內元素時，居中是經過給父元素（外層包裹的標籤）設置text-

align：center實現的；

塊狀元素：這時用text-align：center就沒做用了；

定寬塊狀元素（塊狀元素的寬度width爲固定值）：經過左右margin值爲auto實現居中；

不定寬塊元素（塊狀元素的寬度width不固定；好比網頁上的分頁導航：由於分頁的數量是不肯定的，因此不能經過設置寬度設置它的彈性）：

A、加入table標籤（table的長度是根據其內文本長度決定，因此能夠當作一個定寬度的塊狀元素，再設置定寬度塊狀居中的margin的方法）：

<div>
 <table>
  <tbody>
    <tr><td>
    <ul>
        <li>我是第一行文本</li>
        <li>我是第二行文本</li>
        <li>我是第三行文本</li>
    </ul>
    </td></tr>
  </tbody>
 </table>
</div>
<style>
table{
    border:1px solid;
    margin:0 auto;
}
</style>

B、設置display：inline方法：與第一種相似，顯示類型設置爲行內元素，進行不定寬元素的屬性設置：比較第一種，不用增長無語義標籤，可是也會存在將display設置爲inline變爲行內元素，因此少了一些功能，好比設定長度值；

<body>
<div class="container">
    <ul>
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
    </ul>
</div>
</body>
<style>
.container{
    text-align:center;
}
/* margin:0;padding:0（消除文本與div邊框之間的間隙）*/
.container ul{
    list-style:none;
    margin:0;
    padding:0;
    display:inline;
}
/* margin-right:8px（設置li文本之間的間隔）*/
.container li{
    margin-right:8px;
    display:inline;
}
</style>

C、設置position：relative和left：50%：利用相對定位方式，將元素向左偏移50%，達到居中目的（這個在下一篇博客講）；

九、垂直居中：

A、父元素高度肯定的單行文本：

設置父元素的height和line-height（行與行之間基線間的距離）高度一致來實現。line-height與font-size計算值的差，在css中成爲「行間距」，分爲兩半，分別加到一個文本行內容的頂部和底部。

弊端：文字內容長度大於塊的寬時，就有內容脫離了塊。

<div class="container">
    hi,imooc!
</div>
<style>
.container{
    height:100px;
    line-height:100px;
}
</style>

B、父元素高度肯定的多行文本（兩種方法）

方法1、插入table標籤（包括tbody、tr、td），同時設置豎直居中屬性：vertical-align：middle對於inline-block類型的子元素都有用（td標籤默認狀況下就默認設置了vertical-align爲middle）；

方法2、兼容性較差，提供參考。chrome、firefox及IE8以上的瀏覽器下能夠設置塊級元素的display爲table-cell（表格單元顯示），激活vertical-align屬性，但注意IE六、7並不支持這個格式，並且這樣會破壞原有的塊狀元素的性質，可是不用增長無心義標籤。

<div class="container">
    <div>
        <p>看我是否能夠居中。</p>
        <p>看我是否能夠居中。</p>
        <p>看我是否能夠居中。</p>
    </div>
</div>
<style>
.container{
    height:300px;
    background:#ccc;
    display:table-cell;/*IE8以上及Chrome、Firefox*/
    vertical-align:middle;/*IE8以上及Chrome、Firefox*/
}
</style>

十、Css中的隱性改變display類型方法：

當爲元素設置下面2句之一（display：none）：一、position：absolute；二、float：left或float：right；元素的display就會自動變爲display：inline-block（塊狀元素）的方式顯示，固然能夠設置元素的width和height了，且默認寬度不佔滿父元素。

Eg：a是行內元素，so設置width是沒效果的，可是設置position：absolute後，就能夠了。

<div class="container">
    <a href="#" title="">進入課程請單擊這裏</a>
</div>
<style>
.container a{
    position:absolute;
    width:200px;
    background:#ccc;
}
</style>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。