如何查看html标签的边框（容器线）？

Question

我不确定我是否以正确的方式表达了这一点。但是，我想要实现的是看到html标签的限制边界，基本上我希望html标签位于行框内，这样我就能理解它们的定位和一些CSS选择器的效果更容易

Answer 1

您可以添加样式属性：

<div style="border: 1px solid red;">div contents</div>

或类似的东西，但您最好在Web开发工具下使用网络浏览器（Chrome，Firefox，Safari）中的“Inspect Element”和相关工具，或者右键单击该元素。

Answer 2

box-sizing:border-box;

它包括标签内的边框，填充和内容

box-sizing:content-box;（默认）

div {width:200px; padding:50px; background:tomato; border:25px red solid;}

<div> text </div>
<!--total width: 200px+50px+50px+25px+25px=350px-->

box-sizing:border-box;

div {box-sizing:border-box;
  width:200px; padding:50px; background:tomato; border:25px red solid;}

<div> text </div>  
<!-- 200px -->

Answer 3

最好的工具是Firefox，安装了Firebug。不必制作任何你真正不需要的CSS样式标签，你可以看到每个元素的位置，元素，边距，填充等不同的颜色代码。你还可以看到很多其他的信息，正在使用的CSS，正在应用的内容，被抑制的内容等。您还可以在浏览器中编辑内容，以查看不同的属性将执行的操作。