盒子模型

IE盒子模型

在这里插入图片描述

边框样式（border）

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Title</title>
    <style>
        div {
            background-color: lightgrey;/*背景颜色是白色*/
            width: 300px;/*div标签的宽度*/
            border: 25px solid green;/*边框 50 绿色*/
            padding: 25px;/*内边距 盒子内容的大小 */
            margin: 25px;/*外边距 留出空白的距离*/
        }
    </style>
</head>
<body>

<h2>盒子模型演示</h2>

<p>CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。</p>

<div>这里是盒子内的实际内容。有 25px 内间距，25px 外间距、25px 绿色边框。</div>

</body>
</html>

效果如下：
在这里插入图片描述
　1.2这段代码可以单独设置四个边框的宽度颜色

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Title</title>
    <style>
        div {
            background-color: lightgrey;/*背景颜色是白色*/
            width: 300px;/*div标签的宽度*/
            border: 25px solid;/*边框 50*/
            padding: 25px;/*内边距 盒子内容的大小 */
            margin: 25px;/*外边距 留出空白的距离*/
            /*border-top: 25px solid;*/
            border-color: green cornflowerblue darkblue darkmagenta;


        }
    </style>
</head>
<body>

<h2>盒子模型演示</h2>

<p>CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。</p>

<div>这里是盒子内的实际内容。有 25px 内间距，25px 外间距、25px 边框。</div>

</body>
</html>

效果如下：四个边框的颜色都不一致
在这里插入图片描述
　1.3 四个边框不同的样式

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Title</title>
    <style>
        div {
            background-color: lightgrey;/*背景颜色是白色*/
            width: 300px;/*盒子内容的宽度*/
            padding: 25px;/*内边距 盒子内容的大小 */
            margin: 25px;/*外边距 留出空白的距离*/
            /*border-top: 25px solid;*/
            border-width: 25px 25px 25px 25px;
            /*none hidden dotted dashed solid double*/
            border-style: solid dotted none double;/*边框样式*/

            /*以下四行代码等价于   border-color: #ff7956 green darkmagenta gold;*/
            border-top-color: #ff7956;
            border-bottom-color: green;

            border-left-color: darkmagenta;
            border-right-color: gold;

        }
    </style>
</head>
<body>

<h2>盒子模型演示</h2>

<p>CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。</p>

<div>这里是盒子内的实际内容。有 25px 内间距，25px 外间距、25px 边框。</div>

</body>
</html>

在这里插入图片描述
　2. 外边距（margin）
margin: 0px auto; 可以使盒子放在页面的左右中间；

　3. 内边距（padding）
　 - padding-left
　 - padding-right
　 - padding-top
　 - padding-bottom
　
　4. 圆角边框

border-radius: 20px 10px 50px 30px;

在这里插入图片描述
5. 盒子阴影

box-shadow: inset 1px 1px 10px deepskyblue;
/*从左到右的参数依次是 阴影类型内阴影 x轴位移 y轴位移 阴影模糊半径 阴影颜色*/

效果如下图所示：
在这里插入图片描述

CSS之------盒子模型

盒子模型

IE盒子模型

猜你喜欢