CSS的基礎(chǔ)知識(shí)1-創(chuàng)新互聯(lián)

這兩天看了前端css的部分內(nèi)容，真心讓我難受，太多的屬性記不住，唉??！所以才想著把筆記記錄一下，方便以后用到查看。

成都創(chuàng)新互聯(lián)2013年開創(chuàng)至今，是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司，擁有項(xiàng)目網(wǎng)站設(shè)計(jì)、成都做網(wǎng)站網(wǎng)站策劃，項(xiàng)目實(shí)施與項(xiàng)目整合能力。我們以讓每一個(gè)夢(mèng)想脫穎而出為使命，1280元澄邁做網(wǎng)站,已為上家服務(wù),為澄邁各地企業(yè)和個(gè)人服務(wù),聯(lián)系電話:18982081108

CSS 指的是層疊樣式表，定義了如何顯示html屬性，樣式通常存儲(chǔ)到樣式表中。
外部樣式表通常存儲(chǔ)在css文件中：多個(gè)樣式可層疊為一個(gè)。

css的基礎(chǔ)語法：

css規(guī)則是由兩個(gè)主要部分組成：選擇器，以及一條或多條聲明。
選擇器一般是需要改變樣式的html元素：每個(gè)聲明由一個(gè)屬性和一個(gè)值組成。屬性是希望設(shè)置的樣式屬性，每個(gè)屬性有一個(gè)值，屬性和值用冒號(hào)分開。
h2 ｛color ：red；font-size:14px；｝ ----------將h2元素內(nèi)的文字顏色定義為紅色，同時(shí)字體大小設(shè)置為14px

屬性值除了英文表示外，還可以使用16進(jìn)制表示
當(dāng)使用RGB百分比時(shí)，當(dāng)值為0時(shí)，也需要寫百分號(hào)，其他情況不需要。
p ｛color：rgb（100%，0%，0%）；｝

**如果值為若干個(gè)單詞，需要加引號(hào)：
p{font-family:"sans serif";}

**多重聲明：就是有幾個(gè)聲明，如下所示：

p{
text-align:center; ------每行只描述一個(gè)屬性，增加樣式的可讀性
color :black;
font-family: arial;
}

css 高級(jí)語法：

選擇器的分組：對(duì)選擇器進(jìn)行分組，使被分組的選擇器分享相同的聲明，用逗號(hào)分開選擇器。例如：
        h2,h3,h4,h5,h6,h7{
                color:green;
            }

**css派生選擇器是通過根據(jù)元素在其位置的上下文關(guān)系來定義樣式的。

**id選擇器
id選擇器是為標(biāo)有特定id的html元素指定特定的樣式，id選擇器以#定義
#red {color:red;}
#green {color :green;}

id選擇器和派生選擇器的關(guān)系：
1.id選擇器用于建立派生選擇器
#sidebar p{
font-style:italic;
text-align:right;
margin-top:0.5em;
}

#sidebar h3{
        font-size:1em;
        font-weight:normal;
        font-style:italic;
        margin:0;
        line-height:1.5;
        text-align:right;
   }
    此時(shí)，sidebar中的p和h3有別與其他地方的此標(biāo)簽元素。該位置的標(biāo)簽元素做了特殊處理。

2.id選擇器單獨(dú)使用：
#sidebar {
border:1px dotted #000;
padding :10px;
}

**類選擇器
類選擇器是以點(diǎn)號(hào)顯示的：
.center {text-align:center;}
***類名的第一個(gè)字符不能為數(shù)字

類選擇器也可以用作派生選擇器：
.fancy td {
color:#f60;
background:#666;
}

**屬性選擇器
對(duì)帶有指定屬性的html元素設(shè)置樣式，不僅限與class和id屬性
1.屬性選擇器：
[title]
{
color:red;
}
2.屬性和值選擇器：
[title=hw]
{
border:5px solid blue;
}

3.屬性和值選擇器 ----多個(gè)值 title 中只要包含hello字符就設(shè)置樣式

[title ~=hello] {color :red;}  

    [lang | =en] {color:red;}

***設(shè)置表單的樣式，屬性選擇器在不帶class和id的表單設(shè)置樣式很有用
input[type="text"]
{
width:150px;
display:block;
margin-bottom:10px;
background-color:yellow;
font-family:Verdana,Arial;
}

input[type="button"]
     {
       width:120px;
        margin-left:35px;
        display:block;
        font-family:Verdana,Arial;
     }

css樣式的創(chuàng)建：插入css樣式的方法有三種：
1.外部樣式表：
當(dāng)樣式需要應(yīng)用與許多的頁面時(shí)，采用外部樣式表
<link rel="stylesheet" type="text/css" href="mystyle.css"/>
-----從外部引用一個(gè)css文件的樣式聲明來格式文檔

2.內(nèi)部樣式表：
<style type="text/css">
hr {color: sienna;}
p {margin-left: 20px;}
body {background-image: url("images/back40.gif");}
</style>

3.內(nèi)聯(lián)樣式：（慎用）
當(dāng)樣式需要在一個(gè)元素上應(yīng)用一次時(shí)可以采用，但是慎用，因?yàn)楸憩F(xiàn)和內(nèi)容混雜在一起，內(nèi)聯(lián)樣式容易損失掉樣式表的許多優(yōu)勢(shì)
<p style="color: sienna; margin-left: 20px">
This is a paragraph
</p>
4.多重樣式：
如果某些屬性在不同的樣式表中被同樣的選擇器定義，那么屬性值將從更具體的樣式表中被繼承過來

外部樣式表：
h4{
color:red;
text-align:left;
font-size:8pt;
}

內(nèi)部樣式表：
h4 {
text-align: right;
font-size: 20pt;
}

 color: red; 
 ext-align: right; 
 font-size: 20pt;

***當(dāng)外部和內(nèi)部樣式表都有共同的屬性時(shí)，顏色屬性被繼承于外部樣式表，而文字排列和字體尺寸會(huì)被內(nèi)部樣式表中的規(guī)則取代

css的背景：

可以應(yīng)用純色作為背景，也可以使用背景圖像創(chuàng)建相當(dāng)復(fù)雜的效果

使用background-color 屬性數(shù)字背景色，可以接收任何合法的顏色值

p {
background-color:green;
}

background-color 不能被繼承，默認(rèn)值是transparent 透明的意思

背景圖像：
將圖像放入背景中，使用background-image 屬性，默認(rèn)值為none，表示沒有放任何圖像

**如果需要設(shè)置一個(gè)背景圖像，必須為這個(gè)屬性設(shè)置一個(gè)url值：
body {background-image: url(/i/eg_bg_04.gif);}
background-image 不能被繼承，所有的背景屬性都不能被繼承

背景重復(fù)：
如果需要在頁面上對(duì)背景圖像進(jìn)行平鋪，可使用background-repeat屬性
repeat屬性導(dǎo)致圖像在水平垂直方向上平鋪，repeat-x和repeat-y分別導(dǎo)致圖像只在水平和垂直方向上重復(fù)，no-repeat 不允許圖像在任何方向上平鋪

默認(rèn)背景圖像從一個(gè)元素的左上角開始：
body
{
background-image: url(/i/eg_bg_03.gif);
background-repeat: repeat-y;
}

背景定位：
利用 background-position 屬性改變圖像在背景中的位置
body
{
background-image:url('/i/eg_bg_03.gif');
background-repeat:no-repeat;
background-position:center;
}

關(guān)鍵字：top、bottom、left、right和center以及使用長度值，如100px、5cm

關(guān)鍵字通常會(huì)成對(duì)出現(xiàn)，如果只出現(xiàn)一個(gè)關(guān)鍵字，則另一個(gè)是center

背景關(guān)聯(lián)：
如果文檔比較長，當(dāng)文檔向下滾動(dòng)時(shí)，背景圖像也會(huì)滾動(dòng)，當(dāng)文檔滾動(dòng)超過圖像的位置時(shí)，圖像消失。
background-attachment屬性防止這種滾動(dòng)，通過這個(gè)屬性，可以聲明圖像相對(duì)于可視區(qū)是固定的（fixed）。
body
{
background-image:url(/i/eg_bg_02.gif);
background-repeat:no-repeat;
background-attachment:fixed
}

background-attachment 屬性的默認(rèn)值是scroll 。默認(rèn)情況下，背景隨著文檔滾動(dòng)

**css的背景屬性：
background                   背景屬性設(shè)置在一個(gè)聲明中

background-attachment 背景圖像是否固定或者隨著頁面的其余部分滾動(dòng)
background-color 設(shè)置元素的背景顏色
background-image 把圖像設(shè)置為背景
background-position 設(shè)置背景圖像的起始位置
background-repeat 設(shè)置背景圖像是否及如何重復(fù)

css文本

css的文本屬性是對(duì)文本的外觀進(jìn)行操作，如改變顏色、大小、字符的縮進(jìn)等

縮進(jìn)文本：
text-indent 屬性
p {text-indent :5em;}
一般來說，該屬性可以為所有塊級(jí)元素應(yīng)用，但是無法應(yīng)用與行內(nèi)元素，圖像之類的替換元素也無法應(yīng)用該屬性。
不過，如果一個(gè)塊級(jí)元素的首行中有一個(gè)圖像，則會(huì)隨著該行的其余文本移動(dòng)。
如果想把一個(gè)行內(nèi)元素的第一行“縮進(jìn)”，可以用左內(nèi)邊距或外邊距創(chuàng)造這種效果

使用負(fù)值：可以實(shí)現(xiàn)“懸掛縮進(jìn)”，即第一行懸掛在元素中余下部分的左邊
p {text-indent:-5em;}
如果對(duì)一個(gè)段落設(shè)置了負(fù)值，那么首行的某些文本可能會(huì)超出瀏覽器窗口的左邊界,為了避免該問題，需要再設(shè)置一個(gè)外邊距或一些內(nèi)邊距：
p {text-indent:-5em; padding-left:5em;}

使用百分比值：
百分?jǐn)?shù)相對(duì)于縮進(jìn)元素父元素的寬度。如果縮進(jìn)了20%，其父元素寬度也會(huì)縮進(jìn)20%
div {width:500px;}
p {text-indent:20%;}
<div>
<p>this is a paragragh</p>
</div>
繼承：text-index可以被繼承
div#outer {width: 500px;}
div#inner {text-indent: 10%;}
p {width: 200px;}
<div id="outer">
<div id="inner">some text. some text. some text.
<p>this is a paragragh.</p>
</div>
</div>

***水平對(duì)齊：

text-align屬性
屬性值：left、right、center
<CENTER>不僅影響文本，還會(huì)把整個(gè)元素居中，text-align 不會(huì)控制元素的對(duì)齊，只會(huì)影響內(nèi)部內(nèi)容
justify 是兩端對(duì)齊方式屬性

***字（單詞）間隔
word-spacing 屬性可以改變字之間的標(biāo)準(zhǔn)間隔，默認(rèn)值是normal 與0 一樣的含義
word-spacing 屬性接受一個(gè)正長度值或負(fù)長度值。如果提供一個(gè)正長度值，那么字之間的間隔就會(huì)增加，反之，則拉近

p.spread {word-spacing: 30px;}
p.tight {word-spacing: -0.5em;}
<p class="spread">
This is a paragraph. The spaces between words will be increased.
</p>
<p class="tight">
This is a paragraph. The spaces between words will be decreased.
</p>

letter-spacing 屬性是字母間隔，是數(shù)字和字母之間的間隔
h2 {letter-spacing: -0.5em}
h5 {letter-spacing: 20px}
<h2>This is header 1</h2>
<h5>This is header 4</h5>

***字符轉(zhuǎn)換：
text-transform 屬性處理文本的大小寫
屬性值：none ---無任何操作
uppercase ---全大寫
lowercase --全小寫
capitalize ---只對(duì)每個(gè)單詞的首字母大寫
h2 {text-transform: uppercase} ---對(duì)h2元素的內(nèi)容全大寫

***文本裝飾：
text-decoration 屬性 ------它的值會(huì)替換而不是累積
屬性值： none --去掉本來的裝飾，恢復(fù)默認(rèn)
underline --對(duì)元素加下劃線
overline ---在文本的頂端畫一個(gè)上劃線
line-through 在文本中間畫個(gè)貫穿線
blink ----讓文本閃爍

可以結(jié)合多種裝飾使用；例如：
     a:link a:visited {text-decoration: underline overline;}   --超鏈接既有下劃線，又有上劃線

***處理空白符：
white-space 屬性可以處理字之間和文本行之間的空白符的方式

<p>This paragraph has many
spaces in it.</p>

p {white-space: normal;}

***當(dāng) white-space 屬性設(shè)置為 normal 時(shí)，會(huì)合并所有的空白符，并忽略換行符

屬性值：
pre ----瀏覽器不會(huì)合并空白符，也不會(huì)忽略換行符
nowrap -----防止元素中的文本換行，除非使用了一個(gè) br 元素
pre-wrap ----瀏覽器不僅會(huì)保留空白符并保留換行符，還允許自動(dòng)換行
pre-line ----瀏覽器會(huì)保留換行符，并允許自動(dòng)換行，但是會(huì)合并空白符（和pre-wrap的區(qū)別）

***文本方向：
direction 屬性影響塊級(jí)元素中文本的書寫方向、表中列布局的方向、內(nèi)容水平填充元素框的方向、以及兩端對(duì)齊元素中最后一行的位置
對(duì)于行內(nèi)元素，只有當(dāng)unicode-bidi 屬性設(shè)置為embed或bidi-override 時(shí)才會(huì)應(yīng)用direction 屬性
屬性值：ltr和rtl ；；；默認(rèn)值是ltr，顯示從左到右文本。rtl是從右往左顯示

css文本屬性：

    color               設(shè)置文本顏色
        direction           設(shè)置文本方向。
        line-height         設(shè)置行高。
        letter-spacing      設(shè)置字符間距。
        text-align          對(duì)齊元素中的文本。
        text-decoration     向文本添加修飾。
        text-indent         縮進(jìn)元素中文本的首行。
        text-shadow         設(shè)置文本陰影。CSS2 包含該屬性，但是 CSS2.1 沒有保留該屬性。
        text-transform      控制元素中的字母。
        unicode-bidi        設(shè)置文本方向。
       white-space         設(shè)置元素中空白的處理方式。
       word-spacing        設(shè)置字間距。

css字體
定義了文本中字體的大小、粗細(xì)、風(fēng)格等
font-family 屬性定義文本的字體

body {font-family: sans-serif;}

font-style 屬性 ---設(shè)置斜體文本
屬性值：normal ---文本正常顯示
italic --文本斜體顯示
oblique --文本傾斜顯示

字體變形：
font-variant 屬性設(shè)定小型大寫字母 ---不同大小的大寫字母

                 p {font-variant:small-caps;}

字體加粗：
font-weight 屬性設(shè)置文本的粗細(xì)
屬性值：bold 粗體

p.normal {font-weight:normal;}
p.thick {font-weight:bold;}
p.thicker {font-weight:900;}

字體大?。?br/>font-size 設(shè)置文本的大小

***如果您沒有規(guī)定字體大小，普通文本（比如段落）的默認(rèn)大小是 16 像素 (16px=1em)

css字體屬性：
font 簡寫屬性。作用是把所有針對(duì)字體的屬性設(shè)置在一個(gè)聲明中。
font-family 設(shè)置字體系列。
font-size 設(shè)置字體的尺寸。
font-size-adjust 當(dāng)選字體不可用時(shí)，對(duì)替換字體進(jìn)行智能縮放。（CSS2.1 已刪除該屬性。）
font-stretch 對(duì)字體進(jìn)行水平拉伸。（CSS2.1 已刪除該屬性。）
font-style 設(shè)置字體風(fēng)格。
font-variant 以小型大寫字體或者正常字體顯示文本。
font-weight 設(shè)置字體的粗細(xì)。

css鏈接：
鏈接的四種狀態(tài)：
a:link - 普通的、未被訪問的鏈接
a:visited - 用戶已訪問的鏈接
a:hover - 鼠標(biāo)指針位于鏈接的上方
a:active - 鏈接被點(diǎn)擊的時(shí)刻

規(guī)則：

a:hover 必須位于 a:link 和 a:visited 之后
a:active 必須位于 a:hover 之后

text-decoration 屬性大多用于去掉鏈接中的下劃線

background-color 屬性規(guī)定鏈接的背景色

css列表：

css列表屬性允許放置、改變列表項(xiàng)的標(biāo)志，或者將圖像作為列表項(xiàng)標(biāo)志

列表類型：影響列表的樣式，最簡單的方法是改變其標(biāo)志類型

修改列表項(xiàng)的標(biāo)志類型：list-style-type屬性
   ul {list-style-type : square}

列表項(xiàng)圖像：
對(duì)各標(biāo)志使用圖像：list-style-image屬性

ul li {list-style-image : url(xxx.gif)}

列表標(biāo)志位置：list-style-position屬性

簡化列表樣式：

list-style屬性
li {list-style : url(example.gif) square inside}

list-style 的值可以按任何順序列出，而且這些值都可以忽略。只要提供了一個(gè)值，其它的就會(huì)填入其默認(rèn)值

css的列表屬性（list）：
list-style 簡寫屬性。用于把所有用于列表的屬性設(shè)置于一個(gè)聲明中。
list-style-image 將圖象設(shè)置為列表項(xiàng)標(biāo)志。
list-style-position 設(shè)置列表中列表項(xiàng)標(biāo)志的位置。
list-style-type 設(shè)置列表項(xiàng)標(biāo)志的類型。

css表格
改善表格的外觀

表格邊框：
border屬性
table, th, td
{
border: 1px solid blue;
}
如果需要把表格顯示為單線條邊框，請(qǐng)使用 border-collapse 屬性

折疊邊框：
border-collapse 屬性將表格邊框折疊為單一邊框
table
{
border-collapse:collapse;
}

table,th, td
{
border: 1px solid black;
}
***如果沒有規(guī)定 !DOCTYPE，border-collapse 屬性可能會(huì)引起意想不到的錯(cuò)誤

表格的寬度和高度：

width和height ---寬度和高度

table
{
width:100%;
}

th
{
height:50px;
}

表格的文本對(duì)齊：
text-align 和 vertical-align 屬性設(shè)置表格中文本的對(duì)齊方式

text-align 是水平對(duì)齊
vertical-align 是垂直對(duì)齊

表格的內(nèi)邊距：
控制表格中內(nèi)容和邊框的距離，為td和th設(shè)置padding屬性：

td
{
padding:15px;
}

表格的顏色：

table, td, th
{
border:1px solid green;
}

th
{
background-color:green; --背景顏色
color:white;
}

css Table屬性：

border-collapse 設(shè)置是否把表格邊框合并為單一的邊框。
border-spacing 設(shè)置分隔單元格邊框的距離。
caption-side 設(shè)置表格標(biāo)題的位置。
empty-cells 設(shè)置是否顯示表格中的空單元格。
table-layout 設(shè)置顯示單元、行和列的算法。

css輪廓:
輪廓outline 是繪制于元素周圍的一條線，位于邊框邊緣的外圍，可起到突出元素的作用。css outline 屬性規(guī)定元素輪廓
的樣式、顏色、寬度

css 邊框?qū)傩裕?br/>outline 在一個(gè)聲明中設(shè)置所有的輪廓屬性。
outline-color 設(shè)置輪廓的顏色。
outline-style 設(shè)置輪廓的樣式。
outline-width 設(shè)置輪廓的寬度。

css框模型
css框模型規(guī)定了元素框處理元素的內(nèi)容、內(nèi)邊距、邊框和外邊距的方式

border     邊框

margin 外邊距
padding 內(nèi)邊距
element 元素

元素框的最內(nèi)部分是實(shí)際的內(nèi)容，直接包圍內(nèi)容的是內(nèi)邊距。內(nèi)邊距呈現(xiàn)了元素的背景

內(nèi)邊距的邊緣是邊框。邊框以外是外邊距，外邊距默認(rèn)是透明的，不會(huì)遮擋其后的任何元素。

背景是由內(nèi)容和內(nèi)邊距以及邊框組成的區(qū)域；內(nèi)邊距、邊框和外邊距是可選的，默認(rèn)是零?？梢酝ㄟ^設(shè)置內(nèi)外邊距為零來覆蓋瀏覽器樣式

* {
    margin: 0;
    padding: 0;
    }

在css中，width和height是指元素內(nèi)容的寬度和高度，增加內(nèi)外邊距和邊框不會(huì)影響內(nèi)容的尺寸，但是會(huì)增加元素框的總尺寸

內(nèi)邊距、邊框和外邊距可以應(yīng)用于一個(gè)元素的所有邊，也可以應(yīng)用于單獨(dú)的邊

外邊距可以是負(fù)值，而且在很多情況下都要使用負(fù)值的外邊距

邊框內(nèi)的空白是內(nèi)邊距，邊框外的空白是外邊距

1.css 內(nèi)邊距

內(nèi)邊距是邊框內(nèi)的空白部分，即元素內(nèi)容到邊框之間的空白部分，使用padding屬性，可以接受長度值和百分比值，但是不能是負(fù)值

h2 {padding: 10px;} ---為h2所有邊設(shè)置10px的內(nèi)邊距

也可以按照上、右、下、左的順序分別設(shè)置內(nèi)邊距

  h2 {padding: 10px 0.25em 2ex 20%;}   ----簡寫規(guī)則

單邊內(nèi)邊距的屬性：
padding-top
padding-right
padding-bottom
padding-left
padding 作用是在一個(gè)聲明中設(shè)置元素的所內(nèi)邊距屬性

h2 {
padding-top: 10px;
padding-right: 0.25em;
padding-bottom: 2ex;
padding-left: 20%;
}

內(nèi)邊距可以設(shè)置百分比值，并且這個(gè)百分比值是根據(jù)其父元素的width計(jì)算的。同時(shí)改變

****上下內(nèi)邊距與左右內(nèi)邊距一致；即上下內(nèi)邊距的百分?jǐn)?shù)會(huì)相對(duì)于父元素寬度設(shè)置，而不是相對(duì)于高度

css邊框
元素的邊框是圍繞元素內(nèi)容和內(nèi)邊距的一條或多條線
可以設(shè)置元素邊框的樣式、寬度和顏色

border-style屬性定義了10個(gè)不同的非inherit 樣式；包括none

定義一個(gè)圖片：
a:link img {border-style: outset;}

為一個(gè)邊框定義多種樣式：
p.aside {border-style: solid dotted dashed double;}

定義單邊樣式：

p {border-style: solid solid solid none;} 《=====》 p {border-style: solid; border-left-style: none;}

邊框的寬度：
border-width 屬性指定
指定寬度有兩種方法：
1.指定長度值；2.使用關(guān)鍵字，thin、medium（默認(rèn)）和thick

p {border-style: solid; border-width: 5px;}

或
p {border-style: solid; border-width: thick;}

定義單邊寬度：
按照上右下左的順序設(shè)置元素各邊邊框：
p {border-style: solid; border-width: 15px 5px 15px 5px;}
或者簡寫：
p {border-style: solid; border-width: 15px 5px;}

可以通過下面屬性設(shè)置邊框各邊寬度：
border-top-width
border-right-width
border-bottom-width
border-left-width

邊框?qū)挾仍O(shè)置值：
none ---無邊框
solid
outset
***當(dāng)屬性值border-style設(shè)置為none時(shí)，即沒有邊框，所以之前不管你定義的是什么，都會(huì)消失。包括任何樣式
由于 border-style 的默認(rèn)值是 none，如果沒有聲明樣式，就相當(dāng)于 border-style: none。因此，如果您希望邊框出現(xiàn)，就必須聲明一個(gè)邊框樣式

邊框的顏色：
border-color屬性設(shè)置
它一次可以最多接收4個(gè)顏色值，如果小于四個(gè)，則值賦值會(huì)起作用

邊框顏色默認(rèn)是元素本身的前景色，如果沒有為邊框聲明顏色，將與元素的文本顏色相同。如果元素沒有任何文本，
則它的邊框顏色是其父元素的文本顏色，這個(gè)父元素可能是body、div等

定義單邊顏色：--和定義寬度屬性一樣
border-top-color
border-right-color
border-bottom-color
border-left-color

透明邊框：
border-color：transparent ---創(chuàng)建不可見邊框

css外邊距
圍繞著元素邊框的空白區(qū)域是外邊距
設(shè)置外邊距使用margin屬性，該屬性可以接受任何長度單位，百分?jǐn)?shù)值甚至負(fù)值

margin 可以設(shè)置auto，更常見的是為外邊距設(shè)置長度值

h2 {margin : 0.25in;}

內(nèi)邊距屬性值設(shè)置百分比值也是相對(duì)應(yīng)父元素的width計(jì)算的。

使用值賦值的規(guī)則：

如果缺少左外邊距的值，則使用右外邊距的值。
如果缺少下外邊距的值，則使用上外邊距的值。
如果缺少右外邊距的值，則使用上外邊距的值。

單邊外邊距屬性：
margin-top
margin-right
margin-bottom
margin-left
margin 在一個(gè)聲明中設(shè)置所有外邊距屬性

css 外邊距合并
外邊距合并指當(dāng)兩個(gè)垂直外邊距相遇時(shí)，他們將形成一個(gè)外邊距。合并之后的外邊距的高度等于兩個(gè)發(fā)生合并的外邊距的高度較大者

css定位：

css定位屬性允許你對(duì)元素進(jìn)行定位

使用display 屬性改變生成框的類型。display=block 可以讓行內(nèi)元素表現(xiàn)的像塊級(jí)元素一樣。
display=none 讓生成的元素根本沒有框

當(dāng)把一些文本添加到一個(gè)塊級(jí)元素的開頭，即使沒有把文本定義為段落，也會(huì)當(dāng)作段落來對(duì)待

ss 定位機(jī)制：普通流、浮動(dòng)、絕對(duì)定位

所有框都在普通流中定位。

css position 屬性：
static 元素框正常生成。塊級(jí)元素生成一個(gè)矩形框，作為文檔流的一部分，行內(nèi)元素則會(huì)創(chuàng)建一個(gè)或多個(gè)行框，置于其父元素中

relative 元素框偏移某個(gè)距離。元素仍保持其未定位前的形狀，它原本所占的空間仍保留 ---相對(duì)定位

absolute 元素框從文檔流完全刪除，并相對(duì)于其包含塊定位；包含塊可能是文檔中的另一個(gè)元素或者是初始包含塊。元素原先在正常文檔流中所占的空間會(huì)關(guān)閉，
就好像元素原來不存在一樣。元素定位后生成一個(gè)塊級(jí)框，而不論原來它在正常流中生成何種類型的框 --絕對(duì)定位

fixed 元素框的表現(xiàn)類似于將 position 設(shè)置為 absolute，不過其包含塊是視窗本身 ---固定定位

css定位屬性：

position 把元素放置到一個(gè)靜態(tài)的、相對(duì)的、絕對(duì)的、或固定的位置中。
top 定義了一個(gè)定位元素的上外邊距邊界與其包含塊上邊界之間的偏移。
right 定義了定位元素右外邊距邊界與其包含塊右邊界之間的偏移。
bottom 定義了定位元素下外邊距邊界與其包含塊下邊界之間的偏移。
left 定義了定位元素左外邊距邊界與其包含塊左邊界之間的偏移。
overflow 設(shè)置當(dāng)元素的內(nèi)容溢出其區(qū)域時(shí)發(fā)生的事情。
clip 設(shè)置元素的形狀。元素被剪入這個(gè)形狀之中，然后顯示出來。
vertical-align 設(shè)置元素的垂直對(duì)齊方式。
z-index 設(shè)置元素的堆疊順序。

css 相對(duì)定位：

設(shè)置為相對(duì)定位的元素框會(huì)偏移某個(gè)距離。元素仍然保持其未定位前的形狀，它原本所占的空間仍保留。

*****在使用相對(duì)定位時(shí)，無論是否進(jìn)行移動(dòng)，元素仍然占據(jù)原來的空間。因此，移動(dòng)元素會(huì)導(dǎo)致它覆蓋其它框

css 絕對(duì)定位：
設(shè)置為絕對(duì)定位的元素框從文檔流完全刪除，并相對(duì)于其包含塊定位，包含塊可能是文檔中的另一個(gè)元素或者是初始包含塊。
元素原先在正常文檔流中所占的空間會(huì)關(guān)閉，就好像該元素原來不存在一樣。元素定位后生成一個(gè)塊級(jí)框，而不論原來它在正常流中生成何種類型的框。

css絕對(duì)定位使元素與文檔流無關(guān)，因此不占據(jù)空間

***相對(duì)定位是相對(duì)于元素在文檔中的初始位置，而絕對(duì)定位是相對(duì)于最近的已定位祖先元素，如果不存在祖先元素，那么相對(duì)于最初的包含塊

css 浮動(dòng)：

浮動(dòng)的框可以向左或向右移動(dòng)，直到它的外邊緣碰到包含框或另一個(gè)浮動(dòng)框的邊框?yàn)橹埂?/p>

由于浮動(dòng)框不在文檔的普通流中，所以文檔的普通流中的塊框表現(xiàn)得就像浮動(dòng)框不存在一樣

float 屬性

行框和清理

要想阻止行框圍繞浮動(dòng)框，需要對(duì)該框應(yīng)用 clear 屬性
屬性值：left、right、both和none
表示框的哪些邊不應(yīng)該挨著浮動(dòng)框

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。

網(wǎng)頁標(biāo)題：CSS的基礎(chǔ)知識(shí)1-創(chuàng)新互聯(lián)
分享URL：http://muchs.cn/article34/heise.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供域名注冊(cè)、網(wǎng)站維護(hù)、網(wǎng)站建設(shè)、微信公眾號(hào)、網(wǎng)站排名、網(wǎng)站設(shè)計(jì)公司

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容