css的margin、padding和佈局定位

阿新 • • 發佈：2019-01-12

個人心得：在一個頁面中首先要分清整個頁面總共分為多少小塊，從外到內，一層一層分割，由大到小，理清包含關係，本人初學者，剛學到這，個人覺得只要思路正確，能分清哪一部分需要div，哪些部分用table佈局簡單，一個簡單的頁面就很容易成型，再運用各個屬性，學習的過程不能只注重知識點，知識點要牢固，大概的框架，層次分出來，再在裡邊運用所學屬性，進行功能細化，比如本次筆記中，就提到了幾個常見的佈局、定位屬性，div是塊級元素，會佔一整行，要是想讓兩個div並排，就可以用absolute這個屬性，來進行絕對定位，當然也可以用float：left這個屬性，浮動。當使用絕對定位absolute時，一定要找到它的父容器，也就是給父容器也設定一個position屬性，一般父容器設定position：relative。這樣父容器也可以進行一系列的屬性設定。相對於絕對佈局來說，relative對其他屬性設定的限制就要小的多.一個頁面總會有留白，這個時候就要用到對邊距的調整：margin（外邊距）、padding（內邊距）。在使用邊距時，如果不設定具體的左右距離，比如margin：10px。這裡指的就是外邊距都是10px，邊距的距離依據的是left、top。也就是說不管大小，設定邊距屬性之後，左和上一定是10px，右和下就隨便了。

2.6盒子模型

margin：外邊距

margin-top、margin-right、margin-bottom、margin-left

使用方式：

1）margin：30px；表示上下左右外邊距都是30px；

2）margin-left：30px；單獨設定上下左右外邊距

3）margin：10px 20px30px 40px；分別設定上右下左四個邊距為10、20、30、40

padding：內邊距

也有上下左右邊距，和margin類似，不在贅述

border：邊框

border-width：邊框寬度

border-style: 邊框線條

border-color: 邊框顏色

word中設定邊框的操作

也可以使用更優化的書寫方式

border:10px dashed blue;

outline：輪廓線，用法同border

2.7定位

定位方式有：static、fixed、relative、absolute

static靜態定位（預設）

無定位，元素正常出現了流中，不受left、right、top、bottom屬性影響。

div{
width: 200px;
height: 200px;
background-color: red;
position: static;
}

顯示效果

fixed

#div1{
width: 200px;
height: 200px;
background-color: red;
}
#div2{
width 
: 200px;
height: 200px;
background-color: greenyellow;
}

顯示效果

<style>
#div1{
width: 200px;
height: 200px;
background-color: red;
position: fixed;
left: 30px;
top: 20px;
}
#div2{
width: 200px;
height: 200px;
background-color: greenyellow;
}
</style>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
</body>

顯示效果

從結果可以看出，fixed定位會將元素從流中“摘”出來單獨進行定位，其定位取決於left、top等屬性。

重新定位之後可能會出現重疊，通過z-index可以調整其順序，但是靜態定位z-index無效。

relative相對定位

<style>
#div1{
width: 200px;
height: 200px;
background-color: RGBA(255,0,0,1);
}
#div2{
width: 200px;
height: 200px;
background-color: greenyellow;
position: relative;
top: 20px;
left: 30px;
}
#div3{
width: 100px;
height: 100px;
background-color: aqua;
}
</style>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
</body>

顯示結果

從結果可以看出來，相對定位是從原來的位置進行唯一，但並不影響後續位置。

absolute絕對定位

<style>
#div1{
width: 200px;
height: 200px;
background-color: RGBA(255,0,0,1);
}
#div2{
width: 200px;
height: 200px;
background-color: greenyellow;
position: absolute;
top: 20px;
left: 30px;
}
#div3{
width: 100px;
height: 100px;
background-color: aqua;
}
</style>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
</body>

顯示效果：

從結果可以看出：絕對定位的元素將從流中被“摘”出來，依靠left、top屬性進行定位。

與fixed類似，但是參照物不同

fixed參照根元素（html）

absolute參照父容器

css的margin、padding和佈局定位

個人心得：在一個頁面中首先要分清整個頁面總共分為多少小塊，從外到內，一層一層分割，由大到小，理清包含關係，本人初學者，剛學到這，個人覺得只要思路正確，能分清哪一部分需要div，哪些部

java,applet 容器、元件和佈局管理器

10.2.1 容器　　AWT容器分為兩類：外部容器和內部容器。其中，外部容器一般會獨立存在，例如Frame類；而內部容器則會巢狀在外部容器內部使用，例如Panel類。容器的層次結構如圖10-2所示。　　　　　　圖10-2 AWT容器的層次結構　　其中兩個最

聖盃佈局、雙飛翼佈局、Flex佈局和絕對定位佈局的幾種經典佈局的具體實現示例

題目要求：針對如下DOM結構，編寫CSS，實現三欄水平佈局，其中left、right分別位於左右兩側，left寬度為200px，right寬度為300px，main處在中間，寬度自適應。要求：允許增加額外的DOM節點，但不能修改現有節點順序。 <

淺談對象的創建、內存布局和訪問定位

虛擬機創建 head 分配完成原子性 mar ava 失敗重試檢查在此簡單的記錄一下《深入理解Java虛擬機》第2章的2.3節內容。對象的創建　　這裏的對象的創建是指普通的對象（不包括數組和Class對象）。對象的創建簡單來說就是執行new的時候，虛擬機做出對應

Java使用opencv進行二維碼定位、矯正和裁剪

例子使用的版本為3.4.0，安裝配置網上資料比較多。程式碼為本地測試時候的版本，所以會有點亂。 import org.opencv.core.*; import org.opencv.imgcodecs.Imgcodecs; import org.opencv.imgproc.Imgproc; i

小程式頁面佈局和絕對定位和button分享問題

<view class="dibu"> <input value='{{inputVal}}' bindinput='inputTyping' class="wz" bindinput='inputTyping' placeholder="請輸入私信內容" placeho

55、控制元件、事件處理和佈局介紹

學習目標： 1、瞭解Swing提供的控制元件 2、掌握控制元件的不同的事件器學習過程：這裡我們就一一介紹一下swing中常用的一些控制元件。一、常用控制元件例項：先看看那下圖，初步瞭解一下每個控制元件的基本形式。 1、jLable

Qt佈局管理(3)：內容邊距、間距和QSpacerItem類

Qt佈局管理(3)：內容邊距(ContentsMargins)、間距(spacing)和QSpacerItem類若對C++語法不熟悉可參閱《C++語法詳解》一書，電子工業出版社出版內容邊距就是頁邊距，指的是佈局中的各子部件(內容)與周圍四個邊的距離，內容邊距比較簡單，下面列出需要使用

笨鳥兒靜態佈局、自適應佈局、流式佈局、響應式佈局、彈性佈局等的概念和區別

一、靜態佈局（Static Layout）即傳統Web設計，網頁上的所有元素的尺寸一律使用px作為單位。 1、佈局特點：不管瀏覽器尺寸具體是多少，網頁佈局始終按照最初寫程式碼時的佈局來顯示。常規的pc的網站都是靜態（定寬度）佈局的，也就是設定了min-width，這樣的話，如果小於這個寬度就會

xpath定位中詳解id 、starts-with、contains、text()和last() 的用法

https://www.cnblogs.com/unknows/p/7684331.html 1、XPATH使用方法使用XPATH有如下幾種方法定位元素（相比CSS選擇器，方法稍微多一點）： a、通過絕對路徑定位元素（不推薦！） WebElement ele = driver.

關於position:relative absolute fixed定位和佈局的踩坑心得

position屬性介紹 absolute 顧名思義，這是絕對定位的意思，我們在使用時通常都是給元素聲明瞭position:absolute屬性，然後再用top,left,right,bottom屬性去改變元素的位置，語法示例如下： position:absol

深入理解Java虛擬機器筆記--物件的記憶體佈局和訪問定位

物件的記憶體佈局在HotSpot虛擬機器中，物件在記憶體中儲存的佈局可以分為3塊區域：物件頭（Header）、例項資料（Instance Data）和對齊填充（Padding）。 HotSpot虛擬機器物件頭包括兩部分資訊：第一

tf.nn.conv2d函式、padding型別SAME和VALID、tf.nn.max_pool函式、tf.nn.dropout函式、tf.nn.softmax函式、tf.reduce_sum函式

tf.nn.conv2d函式：該函式是TensorFlow裡面實現卷積的函式。函式形式： tf.nn.conv2d (input, filter, strides, padding, use_cudnn_on_gpu=None, data_format=None,

3、物件記憶體佈局物件訪問定位

物件佈局 * 物件頭（兩個部分） * 執行時資料：雜湊碼，GC分代年齡，鎖狀態標誌，執行緒持有鎖，偏向執行緒ID，偏向時間戳等 * 型別指標：指向本類。。確定是那個類的例項。但是查詢（查詢物件的元資料資訊不一定經過物件本身）。 * 如果物

移動端佈局字型單位的選擇之px、rem和em揭祕

一般我們在pc上主要是流動式佈局，採用的單位一般都是px，由於pc螢幕都是很大的，所以不用過多的擔心字型單位的選擇，但是在移動端呢？那麼這完全相反，由於手機螢幕較小，且各種螢幕尺寸你一不

響應式佈局的常用解決方案對比(媒體查詢、百分比、rem和vw/vh）

簡要介紹：前端開發中，靜態網頁通常需要適應不同解析度的裝置，常用的自適應解決方案包括媒體查詢、百分比、rem和vw/vh等。本文從px單位出發，分析了px在移動端佈局中的不足，接著介紹了幾種不同的自適應解決方案。本文原文在我的github主頁中，如果喜歡

靜態佈局、自適應佈局、流式佈局、響應式佈局、彈性佈局等的概念和區別

一、靜態佈局（Static Layout）即傳統Web設計，網頁上的所有元素的尺寸一律使用px作為單位。1、佈局特點：不管瀏覽器尺寸具體是多少，網頁佈局始終按照最初寫程式碼時的佈局來顯示。常規的pc的網站都是靜態（定寬度）佈局的，也就是設定了min-width，這樣的話，如果小於這個寬度就會出現滾動條，如果大

xpath定位中starts-with、contains和text()的用法

starts-with 顧名思義，匹配一個屬性開始位置的關鍵字 contains 匹配一個屬性值中包含的字串 text（）匹配的是顯示文字資訊，此處也可以用來做定位用 eg //input[starts-with(@name,'name1')] 查詢name屬性中

CSS中常見屬性和值、盒子和定位

一、CSS中常見屬性和值 1、字型屬性 1> 字型家族：font-family （宋體、楷體...） 2> 字型風格：font-style （normal普通、italic斜體） 3> 字型大小：font-size 4> 字型加粗：font-weight：bold 2、控制文

Java筆記(10)-圖形介面設計、Swing、視窗、JFrame、常用元件和佈局、處理事件、MVC結構、對話方塊、GUI

我希望有個如你一般的人如山間清爽的風如古城溫暖的光只要最後是你就好今天你路過了誰誰又丟失了你呢或者從你的全世界路過圖形介面設計 1 Java Swing 概述圖形化介面（Graphics User Int

css的margin、padding和佈局定位

2.6盒子模型

2.7定位

相關推薦