初试CSS-盒模型

最新推荐文章于 2024-05-28 11:16:20 发布

F-process

最新推荐文章于 2024-05-28 11:16:20 发布

阅读量240

点赞数

分类专栏： html css 文章标签： css

本文链接：https://blog.csdn.net/qq_15421661/article/details/76428343

版权

html 同时被 2 个专栏收录

21 篇文章 0 订阅

订阅专栏

css

13 篇文章 0 订阅

订阅专栏

CSS盒模型简介

CSS盒模型就是一个元素的模型，因为模型原理看起来像生活中的盒子所以叫做盒模型，内容(content)、填充(padding)、边框(border)、边界(margin)， CSS盒模式通常具备这些属性。

边框（border）

这里写图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        span {
            border: 1px solid #000000;
        }
    </style>
</head> 
<body>
    <span>给你看看我的边框</span>
</body>
</html>

上面是border代码的缩写形式，可以分开写：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        span {
            div{
                border-width:1px;
                border-style:solid;
                border-color:#000000;
            }
        }
    </style>
</head> 
<body>
    <span>给你看看我的边框</span>
</body>
</html>

1、border-style（边框样式）常见样式有：
dashed（虚线）| dotted（点线）| solid（实线）。

2、border-color（边框颜色）中的颜色可设置为十六进制颜色，如:
border-color:#888;//前面的井号不要忘掉。

3、border-width（边框宽度）中的宽度也可以设置为：
thin | medium | thick（但不是很常用），最常还是用象素（px）。
如果你不想要元素四外周都是边框你也可以用，border-bottom，border-top,border-left,border-right

宽度和高度

盒模型宽度和高度和我们平常所说的物体的宽度和高度理解是不一样的，css内定义的宽（width）和高（height），指的是填充以里的内容范围。
这里写图片描述
因此一个元素实际宽度（盒子的宽度）=左边界+左边框+左填充+内容宽度+右填充+右边框+右边界。
区别：padding和margin的区别，padding在边框里，margin在边框外。

填充

元素内容与边框之间是可以设置距离的，称之为“填充”。填充也可分为上、右、下、左(顺时针)。如下代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        span {
            padding:20px 10px 15px 30px;
        }
    </style>
</head> 
<body>
    <span>给你看看我的边距</span>
</body>
</html>

顺序一定不要搞混。可以分开写上面代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        span {
               padding-top:20px;
               padding-right:10px;
               padding-bottom:15px;
               padding-left:30px;
            }
    </style>
</head> 
<body>
    <span>给你看看我的边距</span>
</body>
</html>

F-process

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
初试CSS-盒模型

CSS盒模型简介CSS盒模型就是一个元素的模型，因为模型原理看起来像生活中的盒子所以叫做盒模型，内容(content)、填充(padding)、边框(border)、边界(margin)， CSS盒模式通常具备这些属性。边框（border）<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Doc
复制链接

扫一扫