21 , CSS 構造模型

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

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

1. div

2. 邊距

3. 邊框

4. 定位

5. 浮動

1 21.1 ?div

部分(division)---

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

件中的區(qū)域.

1.添加 div

This is our content area.

給 div 添加一個 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(無邊框),dotted(點線),dashed(虛線),

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

Inset(凹邊),outset(凸邊)

/*上右下左*/

Border-style: solid dotted inset outset;

Border-width(長度)

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 等成為塊級元素.意思是這些元素顯示為一塊內(nèi)容,即”塊框”.與之相

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

(1).相對定位

#myBox {

Position: relative;

Top: 20px;

Left: 20px;

}

(2).絕對定位

#myBox {

Position:absolute;

Top: 20px;

Left: 20px;

}

5 21.5 ?浮動

.news img {

Float: left;

}

.news p {

Float: right;

}

11構造模型上下文選擇器





無標題文檔





	構造模型構造模型
	構造模型2構造模型2
	構造模型2構造模型2

　　12構造模型邊距





無標題文檔





	構造模型構造模型
	構造模型2構造模型2
	構造模型2構造模型2

　　13構造模型定位





無標題文檔





	構造模型構造模型

GPU云服務器云服務器 21 vianet 21u機柜 21vianet python 21

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

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/1037.html

JavaScript基礎知識總結(jié)

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

lakeside 2019-08-19 17:40 評論0 收藏0
前端面試知識點集錦

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

iKcamp 2019-08-30 12:58 評論0 收藏0
前端面試知識點集錦

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

Prasanta 2019-08-19 18:10 評論0 收藏0
前端面試知識點集錦

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

NikoManiac 2019-08-01 15:12 評論0 收藏0
JS面試理論題

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

FullStackDeveloper 2019-08-26 12:13 評論0 收藏0