01-CSS

前言1-CSS對(duì)HTML元素分類

css元素分為三種：塊級(jí)元素关贵、行內(nèi)元素和行內(nèi)塊元素。

1.塊級(jí)元素:設(shè)置display:block就是將元素顯示為塊級(jí)元素。

獨(dú)占一行鳖谈。
高度凝危，行高波俄、外邊距以及內(nèi)邊距都可以控制。
寬度默認(rèn)是容器的100%蛾默。
以容納內(nèi)聯(lián)元素和其他塊元素懦铺。

<div>、<p>支鸡、<h1>...<h6>冬念、<ol>、<ul>牧挣、<dl>急前、<table>、<address>瀑构、<blockquote> 裆针、<form>

2.行內(nèi)元素：塊級(jí)元素也可以通過代碼display:inline將元素設(shè)置為行內(nèi)元素。

多個(gè)元素在同一行检碗。
默認(rèn)寬度就是它本身內(nèi)容的寬度据块。
行內(nèi)元素只能容納文本或則其他行內(nèi)元素。（a特殊）
可以通過設(shè)置display屬性變成其他元素折剃。
高另假、寬無效，但水平方向的padding和margin可以設(shè)置怕犁，垂直方向的無效边篮。
垂直居中：
父元素固定高度己莺，子元素單行，可以設(shè)置line-height與父元素同高戈轿。
父元素固定高度凌受，子元素多行，可以設(shè)置彈性布局思杯。

div{
    border: dashed red;
    width: 300px;
    height: 300px;
    text-align: center;
    display:flex;
    flex-direction:column;
    justify-content:center;
   
}
span{
    border: dashed rgb(0, 17, 255);
   
}

注意：

只有文字才能組成段落胜蛉，因此p里面不能放塊級(jí)元素，同理還有這些標(biāo)簽h1,h2,h3,h4,h5,h6,dt色乾，他們都是文字類塊級(jí)標(biāo)簽誊册，里面不能放其他塊級(jí)元素。
鏈接里面不能再放鏈接暖璧。

<a>案怯、<span>、<i>澎办、<em>嘲碱、<strong>、<label>局蚀、<q>麦锯、<var>、<cite>至会、<code>

3.行內(nèi)塊狀元素:就是同時(shí)具備行內(nèi)元素离咐、塊狀元素的特點(diǎn)，代碼display:inline-block就是將元素設(shè)置為狀元素奉件。

同時(shí)具有行內(nèi)元素和塊級(jí)元素的特點(diǎn)宵蛀。
和其他元素在同一行。
高县貌、寬和邊距可以設(shè)置术陶。

<img>、<input>

HTML標(biāo)簽嵌套規(guī)則

前言2-CSS樣式特性

CSS的樣式有層疊和繼承特性煤痕。

層疊特性：CSS的層疊依據(jù)選擇器的權(quán)重：

!important的作用是提升優(yōu)先級(jí)梧宫，比內(nèi)聯(lián)樣式的優(yōu)先級(jí)還高。
第一等：代表內(nèi)聯(lián)樣式摆碉，如: style=””塘匣，權(quán)值為1000。
第二等：代表ID選擇器巷帝，如：#content忌卤，權(quán)值為0100。
第三等：代表類楞泼，偽類和屬性選擇器驰徊，如.content笤闯，權(quán)值為0010。
第四等：代表類型選擇器和偽元素選擇器棍厂，如div p颗味，權(quán)值為0001。
通配符牺弹、子選擇器浦马、相鄰選擇器等的。如*张漂、>捐韩、+,權(quán)值為0000。
繼承的樣式?jīng)]有權(quán)值鹃锈。

權(quán)重比較規(guī)則：
- 1,0,0,0 > 0,99,99,99。也就是說從左往右逐個(gè)等級(jí)比較瞧预，前一等級(jí)相等才往后比屎债。
- 無論是行間、內(nèi)部和外部樣式垢油，都是按照這個(gè)規(guī)則來進(jìn)行比較盆驹。
- 在權(quán)重相同的情況下，后面的樣式會(huì)覆蓋掉前面的樣式滩愁。
- 通配符躯喇、子選擇器、相鄰選擇器等的硝枉。雖然權(quán)值為0000廉丽，但是也比繼承的樣式優(yōu)先。
- 復(fù)合選擇器的權(quán)重會(huì)疊加妻味。

繼承特性：在 W3C 規(guī)范的每一個(gè)屬性的介紹中正压，都會(huì)有一個(gè) "inherited" 項(xiàng)，如果值為 "yes"责球，表示該屬性是一個(gè)可繼承的屬性焦履；如果值為 “no”，表示該屬性是一個(gè)不可繼承的屬性雏逾。

不可繼承的：display嘉裤、margin、border栖博、padding屑宠、background、
  height笛匙、min-height侨把、max-height犀变、width、min-width秋柄、max-width获枝、
  overflow、position骇笔、left省店、right、top笨触、bottom懦傍、z-index、float芦劣、clear粗俱、
  table-layout、vertical-align虚吟、page-break-after寸认、page-bread-before和unicode-bidi。
所有元素可繼承：visibility和cursor串慰。
內(nèi)聯(lián)元素可繼承：letter-spacing偏塞、word-spacing、white-space邦鲫、
  line-height灸叼、color、font庆捺、font-family古今、font-size、font-style疼燥、font-variant沧卢、
  font-weight、text-decoration醉者、text-transform但狭、direction。
終端塊狀元素可繼承：text-indent和text-align撬即。
列表元素可繼承：list-style立磁、list-style-type、list-style-position剥槐、list-style-image唱歧。

前言3-CSS常見單位

相對(duì)長(zhǎng)度

絕對(duì)長(zhǎng)度

前言4-CSS書寫規(guī)范

書寫規(guī)范

一、選擇器

1.1 標(biāo)簽選擇器

html

<body>
    <h1>你好</h1>
    <a href="#">超鏈接</a>
</body>

css：注意樣式會(huì)重疊。

h1{
    color: rgb(47, 209, 47);
}
h1{
    background: beige;
}
a {
    text-decoration: none;
}

效果

1.2 類選擇器

html

<body>
   <div class="success mb10" >成功</div>
   <div id="error">失敗</div>
</body>

css

#success{
    border: solid 1px green;
}
#error {
    border: solid 1px red;
}
.mb10{
    margin-bottom: 10px;
}

效果

1.3 ID選擇器

html

<body>
   <div id="success">成功</div>
   <div id="error">失敗</div>
</body>

css:ID選擇器颅崩，推薦給唯一的屬性設(shè)置樣式几于。

#success{
    border: solid 1px green;
}
#error {
    border: solid 1px red;
}

效果

1.4 結(jié)構(gòu)選擇器

html

<body>
   <main>
       <article>
           <h1>H1</h1>
           <aside>
               <h2>H2</h2>
           </aside>
           <h2>H2</h2>
           <h2>H2</h2>
       </article>
   </main>
</body>

1.4.1 后代選擇器

/* 后代選擇器 */
main article h2{
    color: rgb(214, 49, 71);
}

效果

1.4.2 子代選擇器

main article > h2{
    color: rgb(41, 44, 207);
}

效果

1.4.3 兄弟選擇器

<body>
   <main>
       <article>
           <h1>H1</h1>
           <h2>H2</h2>
           <aside>
               <h2>H2</h2>
           </aside>
           <h2>H2</h2>
           <h2>H2</h2>
       </article>
   </main>
</body>

article h1 ~ h2{
    color: rgb(41, 44, 207);
}

~效果

article h1+h2{
    color: rgb(41, 44, 207);
}

+效果

1.5 屬性選擇器

html

<body>
    <main>
        <article>
            <h1>H1</h1>
            <h2>H2</h2>
            <aside>
                <h2 title="abc">H2</h2>
            </aside>
            <h2 title="123"> H2</h2>
            <h2>H2</h2>
        </article>
    </main>
 </body>

css

h2[title="abc"]{
    color: rgb(209, 47, 47);
}

效果

1.6 偽類選擇器

偽類：用于定義元素的特殊狀態(tài)。

動(dòng)態(tài)偽類選擇器:E: link沿后、E: visited沿彭、E: active、E: hover尖滚、E: focus喉刘。
目標(biāo)偽類選擇器: E: target;用來匹配頁面的URI中某個(gè)標(biāo)識(shí)符的目標(biāo)元素。
語言偽類選擇器:E: lang;用來匹配使用指定語言的元素漆弄。
元素狀態(tài)偽類選擇器:E: checked睦裳、E: disabled；
結(jié)構(gòu)偽類選擇器：
: nth-child撼唾、: nth-last-child廉邑、: nth-of-type、: nth-last-of-type倒谷、: first-child鬓催、: last-child、: only-child恨锚、: first-of-type、: last-of-type倍靡、: only-of-type猴伶、: root 、: empty 塌西。
否定偽類選擇器：E: not(F) 匹配所有除F外的E元素他挎。

偽類

偽元素

二、樣式

2.0 通用樣式屬性

用戶外觀(User-interface) 屬性

線框?qū)傩?/div>

多列屬性

尺寸屬性

表格屬性

列表屬性

背景屬性

內(nèi)容生成屬性

CSS函數(shù)

2.1.字體樣式

使用font屬性也可以定義字體類型捡需。
font:font-style || font-variant || font-weight || font-size || line-height || font-family办桨。
定義斜體字體：CSS使用font-style屬性來定義字體斜體效果。
定義字體大小寫：CSS使用font-variant屬性來定義字體大小效果站辉。
定義字體粗細(xì)：CSS使用font-weight屬性來定義字體粗細(xì)呢撞。
定義字體大小:CSS使用font-size屬性來定義字體大小。
font-size:xx-small | x-small | small | medium | large | x-large | xx-large | larger | smaller | length饰剥。
定義行高 ：CSS使用line-height屬性來設(shè)置以百分比計(jì)的行高殊霞。
定義下劃線：CSS使用text-decoration屬性來定義字體下劃線效果。
text-decoration:none || underline || blink || overline || line-throuth汰蓉。
定義字體顏色：CSS使用color屬性來定義字體顏色绷蹲。

字體屬性

2.2 文本樣式

CSS在命名屬性時(shí)，特意使用了font前綴和text前綴來區(qū)分兩類不同性質(zhì)的屬性。

定義縮進(jìn):CSS使用text-indent屬性定義首行縮進(jìn)祝钢。
定義文本水平對(duì)齊：CSS使用text-align屬性來定義文本的水平對(duì)齊方式比规。
text-align屬性只能夠設(shè)計(jì)文本的水平對(duì)齊方式，而對(duì)于塊狀元素的水平對(duì)齊還需要使用CSS的margin屬性拦英。在標(biāo)準(zhǔn)化設(shè)計(jì)中蜒什，如果當(dāng)塊狀元素左右邊界都被設(shè)置為自動(dòng)式，則塊狀元素將居中顯示龄章。
定義文本垂直對(duì)齊:在傳統(tǒng)布局中吃谣，一般元素不支持垂直對(duì)齊效果，不過在表格中可以實(shí)現(xiàn)做裙。CSS使用vertical-align屬性來定義文本垂直對(duì)齊問題岗憋。
vertical-align:auto | baseline | sub | super | top | text-top | middle | bottom | text-bottom | length
vertical-align不支持塊狀元素對(duì)齊，只有當(dāng)包含框顯示為單元格時(shí)才有效锚贱。
定義字距和詞距:CSS使用letter-spacing屬性來定義字距仔戈，使用word-spacing屬性來定義詞距。
定義行高:CSS使用line-height屬性定義行高拧廊。一般行高的最佳設(shè)置范圍為1.2~1.8em,遵循字體越大监徘，行高越小的原則來定義段落的具體行高。
處理文本溢出：

white-space: nowrap;     --- 文本不換行 
overflow: hidden;           --- 溢出部分隱藏
text-overflow:ellipsis;     -- 處理異常部分...

文本屬性

三吧碾、盒子模型

盒子模型

折疊外邊距：在CSS當(dāng)中凰盔，相鄰的兩個(gè)盒子（可能是兄弟關(guān)系也可能是祖先關(guān)系）的外邊距可以結(jié)合成一個(gè)單獨(dú)的外邊距。這種合并外邊距的方式被稱為折疊倦春，并且因而所結(jié)合成的外邊距稱為折疊外邊距户敬。
當(dāng)兩個(gè)垂直外邊距相遇時(shí)，它們將形成一個(gè)外邊距睁本。合并后的外邊距的高度等于兩個(gè)發(fā)生合并的外邊距的高度中的較大者皱卓。而左右外邊距不合并漱逸。

折疊及解決方案

注釋：只有普通文檔流中塊框的垂直外邊距才會(huì)發(fā)生外邊距合并。行內(nèi)框、浮動(dòng)框或絕對(duì)定位之間的外邊距不會(huì)合并缕允。參考：http://www.reibang.com/p/5f18f12cd162

兩個(gè)相鄰的外邊距都是正數(shù)時(shí)嘱朽，折疊結(jié)果是它們兩者之間較大的值润讥。
兩個(gè)相鄰的外邊距都是負(fù)數(shù)時(shí)魄咕，折疊結(jié)果是兩者絕對(duì)值的較大值。
兩個(gè)外邊距一正一負(fù)時(shí)骂维，折疊結(jié)果是兩者的相加的和钞翔。

產(chǎn)生折疊的原因:根據(jù)w3c規(guī)范，兩個(gè)margin是鄰接的必須滿足以下條件

1.必須是處于常規(guī)文檔流（非float和絕對(duì)定位）的塊級(jí)盒子,并且處于同一個(gè)BFC當(dāng)中席舍。
2.沒有線盒布轿，沒有空隙（clearance，下面會(huì)講到），沒有padding和border將他們分隔開汰扭。
3.都屬于垂直方向上相鄰的外邊距稠肘，可以是下面任意一種情況：
　 a:元素的margin-top與其第一個(gè)常規(guī)文檔流的子元素的margin-top。
　 b:元素的margin-bottom與其下一個(gè)常規(guī)文檔流的兄弟元素的margin-top萝毛。
　 c:height為auto的元素的margin-bottom與其最后一個(gè)常規(guī)文檔流的子元素的margin-bottom项阴。
　 d:高度為0并且最小高度也為0，不包含常規(guī)文檔流的子元素笆包，并且自身沒有建立新的BFC的元素的margin-top和margin-bottom环揽。

3.1 CSS盒子屬性

盒子屬性

CSS3box新屬性

3.2 CSS邊框和輪廓屬性

邊框和輪廓屬性

3.3 CSS邊距屬性

邊距屬性

3.4 CSS填充屬性

padding:父元素設(shè)置寬和高，子元素沒有設(shè)置寬和高庵佣，則子元素在設(shè)置padding屬性的時(shí)候歉胶，子元素的寬和高與父元素保持一致。

填充屬性

清除內(nèi)外邊距

四巴粪、CSS布局

Box是CSS布局的基本單位通今。傳統(tǒng)布局方式：標(biāo)準(zhǔn)流、浮動(dòng)肛根、定位辫塌。

Box是CSS布局的對(duì)象和基本單位直觀點(diǎn)來說，就是一個(gè)頁面是由很多個(gè)Box組成的派哲。元素的類型和display屬性臼氨，決定了這個(gè)Box的類型。不同類型的Box芭届，會(huì)參與不同的 Formatting Context（一個(gè)決定如何渲染文檔的容器）一也，因此Box內(nèi)的元素會(huì)以不同的方式渲染。

Formatting context 是 W3C CSS2.1 規(guī)范中的一個(gè)概念喉脖。它是頁面中的一塊渲染區(qū)域，并且有一套渲染規(guī)則抑月，它決定了其子元素將如何定位树叽，以及和其他元素的關(guān)系和相互作用。最常見的 Formatting context 有 Block fomatting context (簡(jiǎn)稱BFC)和 Inline formatting context (簡(jiǎn)稱IFC)谦絮。

BFC(Block formatting context)直譯為"塊級(jí)格式化上下文"题诵。它是一個(gè)獨(dú)立的渲染區(qū)域，只有Block-level box參與层皱，它規(guī)定了內(nèi)部的Block-level Box如何布局性锭，并且與這個(gè)區(qū)域外部毫不相干。

BFC的特性:
1.內(nèi)部的Box會(huì)在垂直方向上一個(gè)接一個(gè)的放置叫胖。
2.垂直方向上的距離由margin決定草冈。
3.bfc的區(qū)域不會(huì)與float的元素區(qū)域重疊。
4.計(jì)算bfc的高度時(shí)，浮動(dòng)元素也參與計(jì)算怎棱。
5.bfc就是頁面上的一個(gè)獨(dú)立容器哩俭，容器里面的子元素不會(huì)影響外面元素。

形成BFC的條件:
1.浮動(dòng)元素拳恋，float除none以外的值凡资。
2.定位元素，position（absolute谬运，fixed）隙赁。
3.display為以下其中之一的值 inline-block，table-cell梆暖，table-caption伞访。
4.overflow除了visible以外的值（hidden，auto式廷，scroll）咐扭。

定位屬性

顯示和隱藏

4.1 浮動(dòng)布局

浮動(dòng)定位：解決了多個(gè)塊級(jí)元素能在一行內(nèi)顯示。

文檔流是文檔中可顯示對(duì)象在排列時(shí)所占用的位置滑废。而標(biāo)準(zhǔn)文檔流指的是在不使用其他的與排列和定位相關(guān)的特殊CSS規(guī)則時(shí)蝗肪，各種元素的排列規(guī)則。標(biāo)準(zhǔn)流里面的限制非常多蠕趁，導(dǎo)致很多頁面效果無法實(shí)現(xiàn)薛闪。如果我們現(xiàn)在就要并排、并且就要設(shè)置寬高俺陋，就要使文檔脫離標(biāo)準(zhǔn)流豁延。

準(zhǔn)則-1

浮動(dòng)示例：解決div獨(dú)占一行。
html

<body>
   <div>DIV1</div>
   <div>DIV2</div>
</body>

CSS1

 div {
     border: solid 2px rgb(219, 22, 22);
     width: 200px;
     /* float: left; */
}

效果1

CSS2

 div {
     border: solid 2px rgb(219, 22, 22);
     width: 200px;
     float: left; 
}

效果2

特點(diǎn)：
1.將元素排除在文檔流之外腊状，即元素脫離文檔流诱咏，不受默認(rèn)排列方式（從上到下或者從左往右）的控制。
2.浮動(dòng)起來的元素將不再占用頁面的空間缴挖。（元素從瀏覽器上原地拔起袋狞，從上往下依舊能看到浮動(dòng)元素），有可能會(huì)壓住其他的元素映屋。
3.元素會(huì)凸堆欤靠在包含框（父層元素）的左邊或左邊，或者团锏悖靠在已經(jīng)浮動(dòng)的元素的左邊或者右邊早处。
4.元素?zé)o論怎么浮動(dòng)，最終還是在包含框之內(nèi)瘫析。
5.塊級(jí)浮動(dòng)之后砌梆，寬度自適應(yīng)不是100%默责。
6.行內(nèi)元素浮動(dòng)后，除了具備以上特點(diǎn)么库，它將變成塊級(jí)元素傻丝，行內(nèi)元素設(shè)置浮動(dòng)多數(shù)是為了改變寬和高。

推薦用法

浮動(dòng)弊端

清除浮動(dòng)本質(zhì)

清除浮動(dòng)

4.2 定位布局

按照定位(定位模式+邊偏移)的方式移動(dòng)Box诉儒。子絕父相葡缰。

css中的position屬性，position有四個(gè)值：absolute/relative/fixed/static(絕對(duì)/相對(duì)/固定/靜態(tài)(默認(rèn)))通過定位屬性可以設(shè)置一些不規(guī)則的布局忱反，使用TLBR(top,left,bottom,right)來調(diào)整元素位置泛释。

static：沒有特別的設(shè)定，遵循基本的定位規(guī)定温算，不能通過z-index進(jìn)行層次分級(jí)怜校，在普通流中，各個(gè)元素默認(rèn)的屬性注竿。
relative：對(duì)象不可層疊茄茁、不脫離文檔流，參考自身靜態(tài)位置通過 top,bottom,left,right 定位巩割。
absolute: 脫離文檔流裙顽，通過 top,bottom,left,right 定位。選取其最近一個(gè)最有定位設(shè)置的父級(jí)對(duì)象進(jìn)行絕對(duì)定位宣谈，如果對(duì)象的父級(jí)沒有設(shè)置定位屬性愈犹，absolute元素將以body坐標(biāo)原點(diǎn)進(jìn)行定位。
fixed：這里所固定的參照對(duì)像是可視窗口而并非是body或是父級(jí)元素闻丑。使用了fixed的元素不會(huì)隨著窗口的滾動(dòng)而滾動(dòng)漩怎。屬于absolute的子集。

定位的特殊性-1

定位的特殊性-2

總結(jié)

4.3 彈性盒布局

彈性盒模型是css3的一種新的布局方式嗦嗡，是一種當(dāng)前頁面需要適應(yīng)不同的屏幕大小及設(shè)備類型時(shí)確保擁有恰當(dāng)?shù)男袨榈牟季址绞窖浮？梢源娓?dòng)侥祭。

彈性容器：display:flex 設(shè)置塊級(jí)彈性容器叁执；display:inline-flex設(shè)置行內(nèi)彈性容器。
彈性元素：彈性容器的子元素卑硫。一個(gè)元素可以同時(shí)使彈性容器和彈性元素。

彈性盒屬性

4.4 柵格系統(tǒng)

Flex 布局是軸線布局蚕断，只能指定"項(xiàng)目"針對(duì)軸線的位置欢伏，可以看作是一維布局。Grid 布局則是將容器劃分成"行"和"列"亿乳，產(chǎn)生單元格硝拧，然后指定"項(xiàng)目所在"的單元格径筏，可以看作是二維布局。Grid 布局遠(yuǎn)比 Flex 布局強(qiáng)大障陶；兼容性不如Flex滋恬。
Grid 布局的屬性分成兩類。一類定義在容器上面抱究，稱為容器屬性恢氯；另一類定義在項(xiàng)目上面，稱為項(xiàng)目屬性鼓寺。

采用網(wǎng)格布局的區(qū)域勋拟，稱為"容器"（container）。容器內(nèi)部采用網(wǎng)格定位的子元素妈候，稱為"項(xiàng)目"（item）敢靡。
容器里面的水平區(qū)域稱為"行"（row），垂直區(qū)域稱為"列"（column）苦银。
行和列的交叉區(qū)域啸胧，稱為"單元格"（cell）。
劃分網(wǎng)格的線幔虏，稱為"網(wǎng)格線"（grid line）纺念。水平網(wǎng)格線劃分出行，垂直網(wǎng)格線劃分出列所计。

網(wǎng)格布局

最后編輯于：2022.04.01 22:52:38

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者

人面猴
序言：七十年代末柠辞，一起剝皮案震驚了整個(gè)濱河市，隨后出現(xiàn)的幾起案子主胧，更是在濱河造成了極大的恐慌叭首，老刑警劉巖，帶你破解...
沈念sama閱讀 222,590評(píng)論 6贊 517
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件踪栋，死亡現(xiàn)場(chǎng)離奇詭異焙格，居然都是意外死亡，警方通過查閱死者的電腦和手機(jī)夷都，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 95,157評(píng)論 3贊 399
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進(jìn)店門眷唉，熙熙樓的掌柜王于貴愁眉苦臉地迎上來，“玉大人囤官，你說我怎么就攤上這事冬阳。” “怎么了党饮？”我有些...
開封第一講書人閱讀 169,301評(píng)論 0贊 362
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵肝陪，是天一觀的道長(zhǎng)。經(jīng)常有香客問我刑顺，道長(zhǎng)氯窍，這世上最難降的妖魔是什么饲常？我笑而不...
開封第一講書人閱讀 60,078評(píng)論 1贊 300
?港島之戀（遺憾婚禮）
正文為了忘掉前任，我火速辦了婚禮狼讨，結(jié)果婚禮上贝淤，老公的妹妹穿的比我還像新娘。我一直安慰自己政供，他們只是感情好播聪，可當(dāng)我...
茶點(diǎn)故事閱讀 69,082評(píng)論 6贊 398
惡毒庶女頂嫁案：這布局不是一般人想出來的
文/花漫我一把揭開白布。她就那樣靜靜地躺著鲫骗，像睡著了一般犬耻。火紅的嫁衣襯著肌膚如雪。梳的紋絲不亂的頭發(fā)上执泰，一...
開封第一講書人閱讀 52,682評(píng)論 1贊 312
城市分裂傳說
那天枕磁，我揣著相機(jī)與錄音，去河邊找鬼术吝。笑死计济，一個(gè)胖子當(dāng)著我的面吹牛，可吹牛的內(nèi)容都是我干的排苍。我是一名探鬼主播沦寂，決...
沈念sama閱讀 41,155評(píng)論 3贊 422
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼，長(zhǎng)吁一口氣：“原來是場(chǎng)噩夢(mèng)啊……” “哼淘衙！你這毒婦竟也來了传藏？” 一聲冷哼從身側(cè)響起，我...
開封第一講書人閱讀 40,098評(píng)論 0贊 277
萬榮殺人案實(shí)錄
序言：老撾萬榮一對(duì)情侶失蹤彤守，失蹤者是張志新（化名）和其女友劉穎毯侦，沒想到半個(gè)月后，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體具垫，經(jīng)...
沈念sama閱讀 46,638評(píng)論 1贊 319
?護(hù)林員之死
正文獨(dú)居荒郊野嶺守林人離奇死亡侈离，尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點(diǎn)故事閱讀 38,701評(píng)論 3贊 342
?白月光啟示錄
正文我和宋清朗相戀三年，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了筝蚕。大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片卦碾。...
茶點(diǎn)故事閱讀 40,852評(píng)論 1贊 353
活死人
序言：一個(gè)原本活蹦亂跳的男人離奇死亡，死狀恐怖起宽，靈堂內(nèi)的尸體忽然破棺而出洲胖，到底是詐尸還是另有隱情，我是刑警寧澤坯沪，帶...
沈念sama閱讀 36,520評(píng)論 5贊 351
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布绿映，位于F島的核電站，受9級(jí)特大地震影響屏箍，放射性物質(zhì)發(fā)生泄漏绘梦。R本人自食惡果不足惜，卻給世界環(huán)境...
茶點(diǎn)故事閱讀 42,181評(píng)論 3贊 335
男人毒藥：我在死后第九天來索命
文/蒙蒙一赴魁、第九天我趴在偏房一處隱蔽的房頂上張望卸奉。院中可真熱鬧，春花似錦颖御、人聲如沸榄棵。這莊子的主人今日做“春日...
開封第一講書人閱讀 32,674評(píng)論 0贊 25
一樁弒父案潘拱，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽疹鳄。三九已至，卻和暖如春芦岂，著一層夾襖步出監(jiān)牢的瞬間瘪弓，已是汗流浹背。一陣腳步聲響...
開封第一講書人閱讀 33,788評(píng)論 1贊 274
情欲美人皮
我被黑心中介騙來泰國(guó)打工禽最，沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留腺怯，地道東北人。一個(gè)月前我還...
沈念sama閱讀 49,279評(píng)論 3贊 379
代替公主和親
正文我出身青樓川无，卻偏偏與公主長(zhǎng)得像呛占，于是被迫代替她去往敵國(guó)和親。傳聞我的和親對(duì)象是個(gè)殘疾皇子懦趋，可洞房花燭夜當(dāng)晚...
茶點(diǎn)故事閱讀 45,851評(píng)論 2贊 361

01-CSS

前言1-CSS對(duì)HTML元素分類

前言2-CSS樣式特性

前言3-CSS常見單位

前言4-CSS書寫規(guī)范

一、選擇器

1.1 標(biāo)簽選擇器

1.2 類選擇器

1.3 ID選擇器

1.4 結(jié)構(gòu)選擇器

1.4.1 后代選擇器

1.4.2 子代選擇器

1.4.3 兄弟選擇器

1.5 屬性選擇器

1.6 偽類選擇器

二、樣式

2.0 通用樣式屬性

2.1.字體樣式

2.2 文本樣式

三吧碾、盒子模型

3.1 CSS盒子屬性

3.2 CSS邊框和輪廓屬性

3.3 CSS邊距屬性

3.4 CSS填充屬性

四巴粪、CSS布局

4.1 浮動(dòng)布局

4.2 定位布局

4.3 彈性盒布局

4.4 柵格系統(tǒng)

推薦閱讀更多精彩內(nèi)容