Question

我是一个初学者，想要想象我在学习时所做的html和css更改，所以我想在我添加的所有元素周围添加边框。

问题：当溢出设置为隐藏时，html / body元素周围的蓝色边框会切断并且不会完全显示在边框的底部和右侧。

为什么即使宽度和高度设置为100％，边框也会溢出html页面？

HTML

<!DOCTYPE html>
    <html>
    <head>
        <title> Practice Webpage </title>
        <link href="stylesrevised.css" rel="stylesheet" type="text/css" >
    </head>

    <body></body>
    </html>

CSS

html,body{
    width: 100%;
    height: 100%;
    margin: 0; /* Space from this element (entire page) and others*/
    padding: 0; /*space from content and border*/
    border: solid blue;
    border-width: thin;
    overflow:hidden;
    display:block;
}

Here is the resulting webpage

Answer 1

欢迎来到编码之旅！在您的css中，添加以下内容：box-sizing: border-box;

这将使您的元素符合规定的宽度和高度。

＆＃13;

html,body{
    width: 100%;
    height: 100%;
    margin: 0; /* Space from this element (entire page) and others*/
    padding: 0; /*space from content and border*/
    border: solid blue;
    border-width: thin;
    overflow:hidden;
    display:block;
    box-sizing: border-box;
}

＆＃13;

<!DOCTYPE html>
    <html>
    <head>
        <title> Practice Webpage </title>
        <link href="stylesrevised.css" rel="stylesheet" type="text/css" >
    </head>

    <body></body>
    </html>

＆＃13;

Answer 2

你的overflow: hidden;是什么让你烦恼，边框的默认设置是内容框，它将元素添加到元素的宽度和高度，例如，如果你有100像素宽的div并添加1px边界到它的实际大小将是102px。

你可以使用box-sizing: border-box;来解决这个问题，这会导致边框被添加到元素的内部。

＆＃13;

html,body{
    width: 100%;
    height: 100%;
    margin: 0; /* Space from this element (entire page) and others*/
    padding: 0; /*space from content and border*/
    border: solid blue;
    border-width: thin;
    display:block;
    box-sizing: border-box;
}

＆＃13;

如果您想要在整个网站中使用所有边框，您可以使用此功能，每次添加边框时都必须设置它。

*, *:before, *:after {
  box-sizing: border-box;
}

如何在不切断身体标签的情况下获得边框？

2 个答案: