css中实际边框怎么算 |css 取消高亮

首先，让大家看一下下面这张图片：

.box {
width: 100px;
height: 50px;
padding: 10px;
border: 1px solid black;
}

在这段CSS代码中，大家为一个名为“box”的div元素添加了宽度、高度、内边距和边框。现在让大家来看一下这个元素如何渲染：

从图中可以看出，元素的宽度是：100px（width）+ 20px（padding-left + padding-right）+2px（border-left + border-right），即122px。高度是：50px（height）+ 20px（padding-top + padding-bottom）+ 2px（border-top + border-bottom），即72px。这是因为CSS盒模型将元素分为“内容”、“内边距”、“边框”和“外边距”四个部分。

关于以上这种盒模型，大家需要注意的是，虽然大家已经设置了div的宽度和高度，但盒模型会计算元素的实际宽度和高度，并将其添加到文档流中。在实际使用中，大家需要注意到这点，并对相关的元素进行正确的布局。

除了上述边框被计算进CSS盒模型中的情况之外，大家还可以在CSS中使用“box-sizing”属性来改变元素的盒模型。如果将“box-sizing”属性设置为“border-box”，那么就表示元素的边框（border）和内边距（padding）会被包含在元素的宽度和高度中，这就使得大家在布局时更加便捷。

.box {
width: 100px;
height: 50px;
padding: 10px;
border: 1px solid black;
box-sizing: border-box;
}

在上面的例子中，大家为元素“box”添加了“box-sizing”属性，并将其设置为“border-box”，这样大家在计算元素的实际宽度和高度时，无需考虑边框和内边距，这会使得元素更加独立自主，更加易于布局。

综上所述，在CSS中，实际的边框是由元素的宽度、内边距、边框等因素综合计算得出的。大家需要准确理解CSS盒模型，并结合实际情况在布局和设计时进行合理的调整。同时，大家也可以使用“box-sizing”属性来调整元素的盒模型，从而让布局更加便捷。