HTML-CSS標準盒子模型布局 217

)CSS 標準盒子模型(Box Model)

在網頁中所有HTML元素可以看作盒子,在CSS中,"box model"術語是用來設計和布局時使用的;CSS盒模型本質上是一個盒子,封裝周圍的HTML元素包括:外邊距(margin)邊框(border)內邊距(padding)實際內容(content)四個屬性,所以布局時每個元素所占的總寬高是這4個屬性的總和;比如寬度:總元素的寬度=寬度+左填充+右填充+左邊框+右邊框+左邊距+右邊距

1.1Margin(外邊距)清除邊框外的區域,外邊距是透明的

1.2Border(邊框)圍繞在內邊距和內容外的邊框

1.3Padding(內邊距)清除內容周圍的區域,內邊距是透明的

1.4Content(內容)盒子里填充的內容比如文本,圖像等

標準盒子模型

寬度為100px的div

根據盒子模型得出該元素的總寬度為:100+(20+20)+(15+15)+(15+15)(由里至外)因此如果想在此div中放置一個寬度為100px的元素,此元素的總寬度必須小于等于100px

2)DIV+CSS布局

Div+CSS布局就是將網頁內容用<div>分割為塊,之后使用css設置每個塊的大小,位置等

DIV+CSS布局最重要的是靈活運用float(浮動)屬性,其值:1)left 2)right 3)both

clear屬性作用是清除浮動,其值為:1)left 2)right 3)both

d2向右浮動 float:right

因為div是塊級元素,如果都沒有脫離文檔流div就會按照從上到下的順序放置

d2設置為右浮動其他兩個div位置的變化:

1)d1沒有脫離文檔流會占據一行,所以d2只能浮動到d1下面的右面如上圖所示

2)d2脫離文檔流,d3自動填充到d2的位置

d1,d2全部設置為右浮動

1)當d1,d2都設置為右浮動時:因為css中d1在d2上面先設置,因此d1在右側,如果d2在d1上面先設置樣式,則d2在右側,d1在左側,自己測試不再截圖

2)當d1,d2都設置為右浮動時:d3就會跑到上圖中d2的位置

3)如果3個div都設置左或右浮動,當3個width加一起<=100%就會在第一行顯示(d1,d2,d3)

 <style type="text/css">
      #d1 {
      margin: 0px;
      background-color: red;
      padding: 0px;
      width: 50%;
      height: 100px;
      float:right; 
    }
    #d2 {
      margin: 0px;
      background-color: yellow;
      padding: 0px;
      width: 50%;
      height: 100px;
      float:right; 
    }
    #d3 {
      margin: 0px;
      background-color: green;
      padding: 0px;
      width: 50%;
      height: 100px;
    }
  </style>

d2清除左浮動,d3設置為右浮動

當d2清除了左浮動,d3設置為右浮動,就會如上圖所示;如果d2清除的是右浮動,d2就會在d1上面,d3就會定位在d1下面的右面,自己測試不再截圖

當d2清除了左浮動,如果想要d2緊挨著d1(與d1在一行上),可以通過position脫離文檔流設置其上下左右屬性使其定位在d1右側,自己測試

<!DOCTYPE html
  PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>div+CSS布局</title>
  <style type="text/css">
      #d1 {
      margin: 0px;
      background-color: red;
      padding: 0px;
      width: 30%;
      height: 100px;
      float:left; 
    }
    #d2 {
      margin: 0px;
      background-color: yellow;
      padding: 0px;
      width: 40%;
      height: 100px;
      clear: left;     
    }
    #d3 {
      margin: 0px;
      background-color: green;
      padding: 0px;
      width: 30%;
      height: 100px; 
      float: right; 
    }
  </style>
</head>
<body>
    <div id="d1"><span style="font-size: 50px;">d1</span></div>
    <div id="d2"><span style="font-size: 50px;">d2</span></div>
    <div id="d3"><span style="font-size: 50px;">d3</span></div>
  </body>
</html>

DIV+CSS布局綜合運用position+上下左右屬性與float屬性為網頁進行布局

注意:瀏覽器的兼容性問題,特別是使用IE內核的瀏覽器對W3C的規范不怎么遵守

Python 是一個強大的交互式 Python 解釋器，它提供了許多增強的功能，使得 Python 編程更加高效和有趣。

以下是一些 IPython 的使用技巧，包括代碼示例和解釋：

1. 自動補全：

使用 Tab 鍵可以自動補全變量名、函數名等。

import numpy as np
np.a # Press Tab to autocomplete to np.array

2. 自動縮進：

當你開始一個新代碼塊時，IPython 會自動縮進。

for i in range(5):
    # IPython automatically indents for you
    print(i)

3. 代碼歷史：

使用上下箭頭鍵可以瀏覽你的命令歷史。或者使用 %history 查看命令歷史

4. 魔術命令：

IPython 提供了一些特殊的命令，稱為魔術命令，它們以 % 或 %% 開頭。

%timeit 用于測量某個代碼片段的執行時間。

%timeit [x**2 for x in range(1000)]

%%timeit 是一個單元格魔術命令，用于測量整個單元格的執行時間。

%%timeit
import numpy as np
x = np.arange(1000)
(x**2).sum()

%run 用于運行一個 Python 腳本。

    %run my_script.py

5. 變量查看：

使用 %whos 可以查看當前命名空間中的所有變量。

a = 10
b = 20
%whos

6. 清屏：

使用 %clear 可以清除當前的輸出。

%clear

7. 幫助系統：

使用 ? 或 %? 可以獲取函數或魔術命令的幫助信息。

%?print

8. 使用 %paste 和 %cpaste：

當你從其他地方復制代碼時，可以使用這些命令來避免一些常見的粘貼問題。

%paste
# Paste your code here

9. 使用 %%capture 來捕獲輸出：

當你想要捕獲某個單元格的輸出，而不是顯示它時，可以使用 %%capture。

%%capture captured_output
print("This will not be displayed")

10. 使用 %load 加載文件：

使用 %load 可以快速加載并執行一個 Python 腳本。

%load my_script.py

11. 使用 %edit 編輯變量或函數：

使用 %edit 可以快速打開并編輯當前命名空間中的變量或函數。

%edit my_function

12. 使用 %xmode 控制錯誤信息的顯示：

%xmode 可以控制當發生錯誤時顯示的堆棧跟蹤的詳細程度。

%xmode minimal

13. 自動換行：

IPython 支持自動換行，當你的代碼超出了屏幕寬度時，可以使用 Shift + Enter 來換行并繼續輸入。

14. 使用 %auto 來自動導入模塊：

如果你經常需要導入某些模塊，可以使用 %auto 來自動導入它們。

%auto

15. 使用 %bookmark 來保存和加載工作會話：

%bookmark 允許你保存當前的工作會話，并在之后加載它。

%bookmark save my_bookmark
%bookmark load my_bookmark

16. 使用 %matplotlib 來集成圖形庫：

如果你使用 matplotlib 進行繪圖，%matplotlib 魔術命令可以設置 matplotlib 來在 IPython 中顯示圖形。

%matplotlib inline
import matplotlib.pyplot as plt
plt.plot([1, 2, 3], [4, 5, 6])

17. 使用 %precision 來控制浮點數的顯示精度：

%precision 魔術命令可以設置浮點數的顯示精度。

%precision 2
a = 3.1415926
print(a)

18. 使用 %alias 來創建命令別名：

%alias 允許你為常用的命令創建別名。

%alias ll ls -l
ll

19. 使用 %config 來配置 IPython：

%config 命令可以用來查看和設置 IPython 的配置選項。

%config IPCompleter.greedy=True

20. 使用 %debug 來進入調試模式：

當代碼出錯時，使用 %debug 可以進入調試模式，逐行檢查代碼。

def my_function():
    x = 1 / 0

my_function()  # This will raise an error
%debug

21. 使用 %prun 來分析代碼性能：

%prun 魔術命令可以用來運行代碼并提供性能分析。

%prun [x**2 for x in range(10000)]

22. 使用 %%writefile 來創建或覆蓋文件：

%%writefile 單元格魔術命令可以將單元格的內容寫入文件。

%%writefile my_new_file.txt
Hello, this is a new file.

23. 使用 %store 和 %retrieve 來存儲和檢索變量：

%store 可以用來存儲變量，%retrieve 可以用來檢索之前存儲的變量。

a = 10
%store a
%store -d a  # Delete stored variable
%retrieve a

24. 使用 %conda 來管理 Conda 環境：

如果你使用 Conda 來管理 Python 環境，%conda 魔術命令可以在 IPython 中直接管理它們。

%conda install numpy

25. 使用 %%R 來運行 R 語言代碼：

如果你安裝了 rpy2，可以使用 %%R 單元格魔術命令來運行 R 語言代碼。

    %%R
    x <- c(1, 2, 3, 4, 5)
    plot(x, rnorm(5))

IPython 還有許多高級功能和技巧，以下是一些額外的高級使用技巧：

26. 使用 %%HTML 來顯示 HTML 內容：

%%HTML 單元格魔術命令允許你直接在 IPython 筆記本中嵌入 HTML 內容。

%%HTML
<h1 style="color:red">Hello, HTML in IPython!</h1>

27. 使用 %%SVG 來顯示 SVG 圖像：

%%SVG 單元格魔術命令可以用來在 IPython 筆記本中嵌入 SVG 圖像。

%%SVG
<!-- Your SVG code here -->

28. 使用 %%latex 來顯示 LaTeX 公式：

如果你在 IPython 筆記本中工作，%%latex 單元格魔術命令可以用來渲染 LaTeX 公式。

%%latex
\[
\int_{-\infty}^\infty e^{-x^2} dx = \sqrt{\pi}
\]

29. 使用 %%javascript 來執行 JavaScript 代碼：

%%javascript 單元格魔術命令允許你在 IPython 筆記本中執行 JavaScript 代碼。

%%javascript
console.log('Hello, JavaScript in IPython!');

30. 使用 %%sql 來執行 SQL 語句：

如果你安裝了 IPython 的 sql 魔術命令擴展，%%sql 可以用來執行 SQL 語句。

%load_ext sql
%%sql sqlite:///:memory:
CREATE TABLE test (col1, col2);
INSERT INTO test (col1, col2) VALUES (1, 'text1');
SELECT * FROM test;

31. 使用 %%bash 來執行 Bash 命令：

%%bash 單元格魔術命令允許你在 IPython 筆記本中執行 Bash 命令。

%%bash
ls -l

32. 使用 %%capture 來捕獲輸出并進行進一步操作：

%%capture 不僅可以捕獲輸出，還可以將捕獲的內容賦值給變量。

%%capture captured
print("This is captured output")
captured_output = captured.stdout
print(captured_output)

33. 使用 %%cython 來編譯 Cython 代碼：

如果你在進行性能敏感的計算，%%cython 單元格魔術命令可以用來編譯 Cython 代碼。

%load_ext Cython
%%cython
def example(int n):
    cdef int i
    return sum(i*i for i in range(n))

34. 使用 %%file 來將單元格內容寫入文件：

%%file 單元格魔術命令可以將單元格的內容寫入一個新文件，如果文件已存在則覆蓋。

%%file myfile.py
def hello_world():
    print("Hello, world!")

35. 使用 %%html 來創建 HTML 單元格：

%%html 單元格魔術命令可以用來創建 HTML 單元格，這在 IPython 筆記本中非常有用。

%%html
<div>
  <p>This is some HTML content.</p>
</div>

36. 使用 %%markdown 來創建 Markdown 單元格：

%%markdown 單元格魔術命令可以用來創建 Markdown 單元格，這在 IPython 筆記本中非常有用。

%%markdown
# Header 1
## Header 2
- Bullet 1
- Bullet 2

37. 使用 %%sh 來執行 Shell 命令：

%%sh 單元格魔術命令允許你在 IPython 筆記本中執行 Shell 命令。

%%sh
echo "Hello, shell in IPython!"

38. 使用 %%perl 來執行 Perl 代碼：

如果你安裝了 IPython 的 perlmagic 擴展，%%perl 可以用來執行 Perl 代碼。

%%perl
my $greeting = "Hello, Perl in IPython!";
print $greeting;

39. 使用 %%ruby 來執行 Ruby 代碼：

如果你安裝了 IPython 的 ruby 魔術命令擴展，%%ruby 可以用來執行 Ruby 代碼。

%%ruby
puts "Hello, Ruby in IPython!"

40. 使用 %%python3 或 %%python2 來指定 Python 版本：

如果你需要在 IPython 筆記本中指定 Python 版本，可以使用 %%python3 或 %%python2。

    %%python3
    print("This is Python 3")

最后

這些技巧可以幫助你更有效地使用 IPython，無論是在數據分析、科學計算還是日常編程中。隨著你使用 IPython 的經驗增加，你可能會發現自己對這些工具的依賴也越來越大。記得，IPython 的官方文檔和社區論壇是學習更多高級技巧的好地方。

作者：威哥愛編程
鏈接：https://juejin.cn/post/7389925417807429641

象描述

真正意義上的inline-block水平呈現的元素間，換行顯示或空格分隔的情況下會有間距，很簡單的個例子：

兩個相鄰的radio之間總是多那么一點點的間距，不是margin也不是padding，但是設計妹紙不干了！！！

我們使用CSS更改非inline-block水平元素為inline-block水平，也會有該問題：

.space a {
 display: inline-block;
 padding: .5em 1em;
 background-color: #cad5eb;
}
<div class="space">
 <a href="##">惆悵</a>
 <a href="##">淡定</a>
 <a href="##">熱血</a>
</div>

這種表現是符合規范的應該有的表現

不過，這類間距有時會對我們布局，或是兼容性處理產生影響，需要去掉它，該怎么辦呢？以下展示N種方法（歡迎補充）！

二、方法之移除空格

元素間留白間距出現的原因就是標簽段之間的空格，因此，去掉HTML中的空格，自然間距就木有了。考慮到代碼可讀性，顯然連成一行的寫法是不可取的，我們可以：

<div class="space">
 <a href="##">
 惆悵</a><a href="##">
 淡定</a><a href="##">
 熱血</a>
</div>

或者是：

<div class="space">
 <a href="##">惆悵</a
 ><a href="##">淡定</a
 ><a href="##">熱血</a>
</div>

或者是借助HTML注釋：

<div class="space">
 <a href="##">惆悵</a><!--
 --><a href="##">淡定</a><!--
 --><a href="##">熱血</a>
</div>

三、使用margin負值

.space a {
 display: inline-block;
 margin-right: -3px;
}

margin負值的大小與上下文的字體和文字大小相關，其中，間距對應大小值可以參見我之前“基于display:inline-block的列表布局”一文part 6的統計表格：

例如，對于12像素大小的上下文，Arial字體的margin負值為-3像素，Tahoma和Verdana就是-4像素，而Geneva為-6像素。

由于外部環境的不確定性，以及最后一個元素多出的父margin值等問題，這個方法不適合大規模使用。

四、讓閉合標簽吃膠囊

如下處理：

<div class="space">
 <a href="##">惆悵
 <a href="##">淡定
 <a href="##">熱血</a>
</div>

注意，為了向下兼容IE6/IE7等喝蒙牛長大的瀏覽器，最后一個列表的標簽的結束（閉合）標簽不能丟。

在HTML5中，我們直接：

<div class="space">
 <a href="##">惆悵
 <a href="##">淡定
 <a href="##">熱血
</div>

好吧，雖然感覺上有點怪怪的，但是，這是OK的。

您可以狠狠地點擊這里：無閉合標簽去除inline-block元素間距demo

五、使用font-size:0

類似下面的代碼：

.space {
 font-size: 0;
}
.space a {
 font-size: 12px;
}

這個方法，基本上可以解決大部分瀏覽器下inline-block元素之間的間距(IE7等瀏覽器有時候會有1像素的間距)。不過有個瀏覽器，就是Chrome, 其默認有最小字體大小限制，因為，考慮到兼容性，我們還需要添加：

類似下面的代碼：

.space {
 font-size: 0;
 -webkit-text-size-adjust:none;
}

您可以狠狠地點擊這里（去年制作的一個簡單demo）：font-size:0清除換行符間隙demo

補充：根據小杜在評論中中的說法，目前Chrome瀏覽器已經取消了最小字體限制。因此，上面的-webkit-text-size-adjust:none;代碼估計時日不多了。

六、使用letter-spacing

類似下面的代碼：

.space {
 letter-spacing: -3px;
}
.space a {
 letter-spacing: 0;
}

根據我去年的測試，該方法可以搞定基本上所有瀏覽器，包括吃“東鞋”、“西毒(膠囊)”、“南地(溝油)”、“北鈣(三鹿)”的IE6/IE7瀏覽器，不過Opera瀏覽器下有蛋疼的問題：最小間距1像素，然后，letter-spacing再小就還原了。

七、使用word-spacing

類似下面代碼：

.space {
 word-spacing: -6px;
}
.space a {
 word-spacing: 0;
}

一個是字符間距(letter-spacing)一個是單詞間距(word-spacing)，大同小異。據我測試，word-spacing的負值只要大到一定程度，其兼容性上的差異就可以被忽略。因為，貌似，word-spacing即使負值很大，也不會發生重疊。

您可以狠狠地點擊這里：word-spacing與元素間距去除demo

與上面demo一樣的效果，這里就不截圖展示了。如果您使用Chrome瀏覽器，可能看到的是間距依舊存在。確實是有該問題，原因我是不清楚，不過我知道，可以添加display: table;或display:inline-table;讓Chrome瀏覽器也變得乖巧。

.space {
 display: inline-table;
 word-spacing: -6px;
}

八、其他成品方法

下面展示的是YUI 3 CSS Grids 使用letter-spacing和word-spacing去除格柵單元見間隔方法（注意，其針對的是block水平的元素，因此對IE8-瀏覽器做了hack處理）：

.yui3-g {
 letter-spacing: -0.31em; /* webkit */
 *letter-spacing: normal; /* IE < 8 重置 */
 word-spacing: -0.43em; /* IE < 8 && gecko */
}
.yui3-u {
 display: inline-block;
 zoom: 1; *display: inline; /* IE < 8: 偽造 inline-block */
 letter-spacing: normal;
 word-spacing: normal;
 vertical-align: top;
}

以下是一個名叫RayM的人提供的方法：

li {
 display:inline-block;
 background: orange;
 padding:10px;
 word-spacing:0;
 }
ul {
 width:100%;
 display:table; /* 調教webkit*/
 word-spacing:-1em;
}
.nav li { *display:inline;}

也就是上面一系列CSS方法的組組合合。

結語

其他去除間距的方法肯定還有，歡迎大家通過評論方式進行補充。上文部分方法可能有測試不周全之處，因此，部分細節上可能會有紕漏，歡迎指正。

最后，推薦幾本書

在線咨詢

上一篇：APP九宮格如何用Axure畫出來？
下一篇：HTML基礎的 <img> 標簽