CSS盒子模型

前端开发作者： 2024-08-26 06:40:01

盒子模型 1. 什么是盒子模型 margin：外边距 padding：内边距 border：边框 2. 边框边框的样式边框的粗细边框的颜色 <!DOCTYPE html&g

盒子模型

盒子模型

边框的样式
边框的粗细
边框的颜色

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

    <style>
        /*常见操作，初始化0*/
        h1,ul,li,a,body{
            /*body总有一个默认的外边距，这里使之为0*/
            margin: 0;
            padding: 0;
            text-decoration: none;
        }
        /*border: 粗细 样式 颜色*/
        #box{
            width: 300px;
            border: 1px solid red;
        }

        h2{
            font-size: 16px;
            background-color: rosybrown;
            line-height: 30px;
            margin: 0;
        }

        form{
            background: greenyellow;
        }
        /*solid实线*/
        div:nth-of-type(1) input{
            border: 3px solid black;
        }
        /*dashed虚线*/
        div:nth-of-type(2) input{
            border: 3px dashed yellow;
        }
        div:nth-of-type(3) input{
            border: 2px dashed violet;
        }
    </style>
</head>
<body>

<div id="box">
    <h2>会员登录</h2>
    <form action="#">
        <div>
            <span>用户名：</span>
            <input type="text">
        </div>
        <div>
            <span>密码：</span>
            <input type="password">
        </div>
        <div>
            <span>邮箱：</span>
            <input type="text">
        </div>
    </form>
</div>

</body>
</html>

块元素（div）
块元素有固定的宽度
写在style的div中

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

    <!--
    外边距的妙用：居中元素
        margin: 0 auto;
	margin顺时针旋转
    -->
    <style>
        #box{
            width: 300px;
            border: 1px solid red;
            margin: 0 auto;
        }

        h2{
            font-size: 16px;
            background-color: rosybrown;
            line-height: 30px;
            margin: 0;
        }

        form{
            background: greenyellow;
        }
        input{
            border: 1px solid black;
        }
    </style>
</head>
<body>

<div id="box">
    <h2>会员登录</h2>
    <form action="#">
        <div>
            <span>用户名：</span>
            <input type="text">
        </div>
        <div>
            <span>密码：</span>
            <input type="password">
        </div>
        <div>
            <span>邮箱：</span>
            <input type="text">
        </div>
    </form>
</div>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 100px;
            height: 50px;
            border: 10px solid red;
            border-radius: 50px 50px 0px 0px;
            margin: 0 auto;
        }
        /*图片削圆角*/
        img{
            border-radius: 200px;
        }
    </style>
</head>
<body>

<div></div>

<img src="images/book_cover.jpg" alt="">

</body>
</html>

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

    <style>
        div{
            width: 500px;
            height: 1000px;
            margin: 0 auto;
        }
        img{
            width: 100px;
            height: 100px;
            border: 10px solid red;
            border-radius: 200px;
            box-shadow: 10px 10px 100px yellow;
        }
    </style>
</head>
<body>

<div>
    <img src="images/book_cover.jpg" alt="">
</div>

</body>
</html>

原创声明

本站部分文章基于互联网的整理，我们会把真正“有用/优质”的文章整理提供给各位开发者。本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。

本文链接：http://www.jiecseo.com/news/show_68830.html