CSS入门（4）

最新推荐文章于 2023-06-28 12:31:50 发布

Saltyswordfish

最新推荐文章于 2023-06-28 12:31:50 发布

阅读量103

点赞数

文章标签： html css webview

本文链接：https://blog.csdn.net/Salttswordfish/article/details/124882915

版权

4、盒子模型

4.1什么是盒子模型

margin:外边距

padding:内边距

border:边框

4.2 边框

    1、边框的粗细
    2、边框的样式
    3、边框的颜色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*body总有一个默认外边距*/
        body{
            margin: 0;
            padding: 0;
            text-decoration: none;
        }
        h2{
            font-size: 16px;
            background-color: #fffbaf;
            line-height: 30px;
            color: #00DBDE;
        }
        /*border:粗细，样式，颜色*/
        #box{
            width: 300px;
            border: 1px solid red;
        }
        form{
            background: #FC00FF;
        }
        div:nth-of-type(1) input{
            border: 2px solid aqua;
        }
    </style>
</head>
<body>

/*border:粗细，样式，颜色*/
#box{
    width: 300px;
    border: 1px solid red;
    margin: 0 auto;
}

4.3圆角边框

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>

<style>
        div{
            width: 100px;
            height: 100px;
            border: 10px solid red;
            border-radius: 10px;
        }
    </style>
</head>
<body>
<div></div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            border: 10px solid red;
            border-radius: 0px 50px 0px 50px;
        }
    </style>
</head>
<body>
<div></div>
</body>
</html>