21 , CSS 構(gòu)造模型

AbnerMing 發(fā)布于2019-04-23 11:42 / 3253人閱讀

摘要：宋體邊距宋體邊框宋體定位宋體浮動(dòng)宋體部分宋體元素宋體經(jīng)常以宋體形式引用宋體是宋體元素宋體用于定義宋體文宋體件中的區(qū)域宋體添加宋體給宋體添加一個(gè)宋體宋體宋體添加子宋體

1. div

2. 邊距

3. 邊框

4. 定位

5. 浮動(dòng)

1 21.1 ?div

部分(division)---

元素,經(jīng)常以 div 形式引用---是 XHTML 元素,用于定義 XHTML 文

件中的區(qū)域.

1.添加 div

This is our content area.

給 div 添加一個(gè) id

”container”>

This is our content area.

#container {

Padding: 20px;

Border:1px solid #000;

Background:#ccc;

}

2.添加子 div

”container”>

This is our content area.

”box”>

I’m in a box!

”box”>

I’m also in a box!

.box {

margin: 10px;

padding: 20px;

border:1px solid #000;

}

3.div 和上下文選擇器

.box p {

Color: #333;

}

#container p {

Color: #333;

}

2 21.2 ?邊距

外邊距(margin)

外邊距聲明:

#container {

Margin:-top: 20px;

Margin-left: auto;

Margin-right: auto;

Margin-bottom; 20px;

Width: 300px;

Border: 1px solid #333;

Padding: #ccc;

}

#container {

Margin: 20px auto 1em auto; /*上,右,下 , 左*/

}

用 margin:auto 居中

Body {

Text-align: center;

}

#container {

Width: 400px;

Margin: 10px auto 10px auto;

Padding: 20px;

Background: #ccc;

Text-align: left;

}

5.內(nèi)邊距(padding)

#container {

Padding-top: 20px;

Padding-left: 10%;

Padding-right: 1em;

Padding-bottom: 0;

Background: #ccc;

}

6.外邊距,內(nèi)邊距和主體

Body {

Margin: 0;

Padding: 0;

}

3 21.3 ?邊框

Border-style (邊框樣式)

None(無(wú)邊框),dotted(點(diǎn)線(xiàn)),dashed(虛線(xiàn)),

Solid(實(shí)現(xiàn)),double(雙線(xiàn)),groove(凹槽),ridge(凸槽),

Inset(凹邊),outset(凸邊)

/*上右下左*/

Border-style: solid dotted inset outset;

Border-width(長(zhǎng)度)

Border-top-width

Border-right-width

Border-bottom-width

Borer-left-width

Border-color

Border

Border-top

Border-right

Border-bottom

Border-left

Border(四周)Border-top(上)…

4 21.4 ?定位

P,h1 和 div 等成為塊級(jí)元素.意思是這些元素顯示為一塊內(nèi)容,即”塊框”.與之相

反,strong 和 span 等元素稱(chēng)為行內(nèi)元素,即”行內(nèi)框”.更多內(nèi)容 , 后章在述.

(1).相對(duì)定位

#myBox {

Position: relative;

Top: 20px;

Left: 20px;

}

(2).絕對(duì)定位

#myBox {

Position:absolute;

Top: 20px;

Left: 20px;

}

5 21.5 ?浮動(dòng)

.news img {

Float: left;

}

.news p {

Float: right;

}

11構(gòu)造模型上下文選擇器





無(wú)標(biāo)題文檔





	構(gòu)造模型構(gòu)造模型
	構(gòu)造模型2構(gòu)造模型2
	構(gòu)造模型2構(gòu)造模型2

　　12構(gòu)造模型邊距





無(wú)標(biāo)題文檔





	構(gòu)造模型構(gòu)造模型
	構(gòu)造模型2構(gòu)造模型2
	構(gòu)造模型2構(gòu)造模型2

　　13構(gòu)造模型定位





無(wú)標(biāo)題文檔





	構(gòu)造模型構(gòu)造模型

云服務(wù)器 GPU云服務(wù)器 21 vianet 21u機(jī)柜 21vianet python 21

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/1037.html

相關(guān)文章

JavaScript基礎(chǔ)知識(shí)總結(jié)

摘要：字面量方式這是最簡(jiǎn)單最基本的一種方法。簡(jiǎn)單的構(gòu)造函數(shù)方式通過(guò)這樣的形式創(chuàng)建對(duì)象。結(jié)合上面的簡(jiǎn)單構(gòu)造函數(shù)和原型，一個(gè)完整的構(gòu)造函數(shù)應(yīng)該是這樣的還有一種方法就是提供的簡(jiǎn)單實(shí)現(xiàn)下中的，，創(chuàng)建一個(gè)對(duì)象談?wù)剬?duì)象的理解。避免使用表達(dá)式又稱(chēng)動(dòng)態(tài)屬性。要點(diǎn)：數(shù)據(jù)類(lèi)型、面向?qū)ο?、繼承、閉包、插件、作用域、跨域、原型鏈、模塊化、自定義事件、異步裝載回調(diào)、模板引擎、Nodejs等。 JS基本類(lèi)型有什么？引...

lakeside 2019-08-19 17:40 評(píng)論0 收藏0
前端面試知識(shí)點(diǎn)集錦

摘要：個(gè)人總結(jié)的比較全面的前端面試知識(shí)點(diǎn)。主要是一些個(gè)人認(rèn)為面試時(shí)容易考到以及平時(shí)需要注意的一些知識(shí)點(diǎn)。如果需要進(jìn)行深入了解可以根據(jù)知識(shí)點(diǎn)查詢(xún)相關(guān)的技術(shù)文章。個(gè)人總結(jié)的比較全面的前端面試知識(shí)點(diǎn)。主要是一些個(gè)人認(rèn)為面試時(shí)容易考到以及平時(shí)需要注意的一些知識(shí)點(diǎn)。本人只是對(duì)這些知識(shí)進(jìn)行了一個(gè)大概的總結(jié)，還有一部分技術(shù)還沒(méi)開(kāi)始涉及，后期會(huì)持續(xù)添加。如果需要進(jìn)行深入了解可以根據(jù)知識(shí)點(diǎn)查詢(xún)相關(guān)的技術(shù)文...

iKcamp 2019-08-30 12:58 評(píng)論0 收藏0
前端面試知識(shí)點(diǎn)集錦

摘要：個(gè)人總結(jié)的比較全面的前端面試知識(shí)點(diǎn)。主要是一些個(gè)人認(rèn)為面試時(shí)容易考到以及平時(shí)需要注意的一些知識(shí)點(diǎn)。如果需要進(jìn)行深入了解可以根據(jù)知識(shí)點(diǎn)查詢(xún)相關(guān)的技術(shù)文章。個(gè)人總結(jié)的比較全面的前端面試知識(shí)點(diǎn)。主要是一些個(gè)人認(rèn)為面試時(shí)容易考到以及平時(shí)需要注意的一些知識(shí)點(diǎn)。本人只是對(duì)這些知識(shí)進(jìn)行了一個(gè)大概的總結(jié)，還有一部分技術(shù)還沒(méi)開(kāi)始涉及，后期會(huì)持續(xù)添加。如果需要進(jìn)行深入了解可以根據(jù)知識(shí)點(diǎn)查詢(xún)相關(guān)的技術(shù)文...

Prasanta 2019-08-19 18:10 評(píng)論0 收藏0
前端面試知識(shí)點(diǎn)集錦

摘要：個(gè)人總結(jié)的比較全面的前端面試知識(shí)點(diǎn)。主要是一些個(gè)人認(rèn)為面試時(shí)容易考到以及平時(shí)需要注意的一些知識(shí)點(diǎn)。如果需要進(jìn)行深入了解可以根據(jù)知識(shí)點(diǎn)查詢(xún)相關(guān)的技術(shù)文章。個(gè)人總結(jié)的比較全面的前端面試知識(shí)點(diǎn)。主要是一些個(gè)人認(rèn)為面試時(shí)容易考到以及平時(shí)需要注意的一些知識(shí)點(diǎn)。本人只是對(duì)這些知識(shí)進(jìn)行了一個(gè)大概的總結(jié)，還有一部分技術(shù)還沒(méi)開(kāi)始涉及，后期會(huì)持續(xù)添加。如果需要進(jìn)行深入了解可以根據(jù)知識(shí)點(diǎn)查詢(xún)相關(guān)的技術(shù)文...

NikoManiac 2019-08-01 15:12 評(píng)論0 收藏0
JS面試?yán)碚擃}

摘要：要去中查找創(chuàng)建對(duì)象的幾種方法字面量通過(guò)構(gòu)造函數(shù)原型構(gòu)造函數(shù)實(shí)例原型鏈的原理運(yùn)算符一個(gè)新對(duì)象被創(chuàng)建它繼承自構(gòu)造函數(shù)被執(zhí)行。等同于，只能用在不傳遞任何參數(shù)的情況如果構(gòu)造函數(shù)返回了一個(gè)對(duì)象，那么這個(gè)對(duì)象會(huì)取代整個(gè)出來(lái)的結(jié)果。變量類(lèi)型和計(jì)算值類(lèi)型&&引用類(lèi)型 1.值類(lèi)型 var a = 100 var b = a a = 200 console.log(b)//100 2.引用類(lèi)型（對(duì)象 ...

FullStackDeveloper 2019-08-26 12:13 評(píng)論0 收藏0