CSS13：盒子模型及边框使用

最新推荐文章于 2023-04-12 14:16:11 发布

一个优雅的搬砖人

最新推荐文章于 2023-04-12 14:16:11 发布

阅读量894

点赞数

分类专栏： # CSS 文章标签： css html css3

本文链接：https://blog.csdn.net/weixin_48306950/article/details/123111838

版权

CSS 专栏收录该内容

24 篇文章 1 订阅

订阅专栏

什么是盒子模型

所有 HTML 元素可以看作盒子，在 CSS 中 “box model” 这一术语是用来设计和布局时使用。

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

margin：外边距

padding：内边距

border：边框

边框

1、边框的粗细

可以指定长度值，如 2px 或者 0.1em，或者使用3个关键字之一，分别是 thick、medium（默认值）和 thin

2、边框的样式

其中样式分类四种：solid（实线边框）、dashed（虚线边框）、dotted（点线边框）、double（双线边框）

3、边框的颜色

color - 指定颜色的名称，如“red”
RGB - 指定 RGB 值，如“rbg(255,0,0)”
Hex - 指定16进制值，如“#ff0000”

语法

1、可以通过 border 一起声明
border: 粗细 样式 颜色;

2、三种属性也可以分开声明
border-style: 样式; /* 可以有1-4个属性值，分别设置四个边的样式 */
border-color: 颜色;
border-width: 粗细;

3、也可以上下左右边框分开声明
border-left: 粗细 样式 颜色;
boder-top: 粗细 样式 颜色;
border-right: 粗细 样式 颜色;
border-bottom: 粗细 样式 颜色;

4、上下左右的边框属性也可以分开声明
border-left-style: 样式;
border-left-color: 颜色;
border-left-width: 粗细;

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            /* 很多元素都可能有一个默认的外边距，去掉的办法就是margin: 0; */
            margin: 0;
        }
        #box {
            width: 300px;
            /* border: 粗细 样式 颜色; */
            border: 1px solid red;
        }
        div:nth-of-type(1) input {
            border: 3px solid #0fffff;
        }
        div:nth-of-type(2) input {
            border: 3px dashed darkblue;
        }
        div:nth-of-type(3) input {
            border: 3px dotted #ff1124;
        }
        div:nth-of-type(4) input {
            border: 3px double #19ff06;
        }
    </style>
</head>
<body>
<div id="box">
    <h2>会员登录</h2>
    <form action="#">
        <div>
            <span>用户名：</span>
            <input type="text" value="solid">
        </div>
        <div>
            <span>密码：</span>
            <input type="text"  value="dashed">
        </div>
        <div>
            <span>邮箱：</span>
            <input type="text" value="dotted">
        </div>
        <div>
            <span>验证码：</span>
            <input type="text" value="double">
        </div>
    </form>
</div>
</body>
</html>

一个优雅的搬砖人

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
CSS13：盒子模型及边框使用

什么是盒子模型所有 HTML 元素可以看作盒子，在 CSS 中 “box model” 这一术语是用来设计和布局时使用。CSS 盒子模型本质上是一个盒子，封装周围的 HTML 元素，它包括边距，边框，填充和实际内容。margin：外边距padding：内边距border：边框边框1、边框的粗细可以指定长度值，如 2px 或者 0.1em，或者使用3个关键字之一，分别是 thick、medium（默认值）和 thin2、边框的...
复制链接

扫一扫

专栏目录