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> 标签