css盒子模型

最新推荐文章于 2024-08-20 15:49:45 发布

Yy123456tp

最新推荐文章于 2024-08-20 15:49:45 发布

阅读量268

点赞数 2

文章标签： css html html5

本文链接：https://blog.csdn.net/yy123456tp/article/details/115187617

版权

css之盒子模型

一个盒子的组成部分：
一个盒子的主要属性：
边框的样式：
外边距：
可见框的大小：
如何计算一个盒子的总宽度：
简写属性:

一个盒子的组成部分：

在css中一个盒子的组成部分
内容(content)+内填充(padding)+边框(border)+外边距(margin)

一个盒子的主要属性：

在css中一个盒子的组成部分
内容(content)+内填充(padding)+边框(border)+外边距(margin)
一个盒子的主要属性：
width、height、padding、border、margin。

边框的样式：

单词	样式
none	没有边框
dotted	点线
dashed	虚线
solid	实线
double	双线
groove	槽线
ridge	脊线
inset	凹边
outset	凸边

外边距：

外边距是元素边框与周围元素相距的空间。

使用margin属性可以设置外边距。

用法和padding类似，同样也提供了四个方向的 margin-top/right/bottom/left。

当将左右外边距设置为auto时，浏览器会将左右外边距设置为相等，所以这行代码margin:0 auto可以使元素居中

可见框的大小：

内边距会影响盒子的可见框的大小，元素的背景会延伸到内边距, 盒子的大小由内容区、内边距和边框共同决定。因此：
盒子可见框的宽度

= border-left-width + padding-left + width + padding-right + border-right-width

盒子可见宽的高度

= border-top-width + padding-top + height + padding-bottom + border-bottom-width

如何计算一个盒子的总宽度：

一个盒子的总宽度=盒子里面内容的长度+左右两边的填充+左右两边的边框线
注意:一个盒子的高度一般情况下是不用设置的，因为一个盒子的高度他应该是由其内容来决定的。
其代码如下：

`<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .box{
            width: 100px;/*这里的WIDTH属性值得是盒子里面内容的宽度*/
            height: 100px; /*这里的height属性值得是盒子里面内容的高度*/
            padding:20px; /*内填充 盒子里面内容到边框的距离*/
            border:1px solid #f00; /*外边框*/
        }
    </style>
</head>
<body>
    <div class="box">这是我的第一篇博客</div>
</body>
</html>

提到盒子就不得不讲的两个属性 : margin(外边距 )跟(padding) 内填充。

pdding是内填充的意思指的是盒子中间的内容到边框之间的距离。padding 是有四个方向的所以我们能够分别的描述这四个方向的padding 方法有两种：第一种我们称之为小属性，第二种我们称之为简写属性
小属性：

padding-top 上内填充

padding-right 右内填充

padding-bottom:下内填充

padding-lift 左内填充.

简写属性:

padding:

这个属性是有方向的，内边距，也叫补白，表示盒子内容区域到边框的区域可以同时表示四个方向这个属性的方向是有顺序的。
顺序是顺时针的方向也就是 上右下左 这个顺序
padding:10px 20px 30px 40px；他的内边距为上边距10px，右边距为20px 下边距为30px 左边距为40px

margin：

margin 外边距，使用margin表示盒子与盒子之间的距离，他表示及外边距的意思它是指盒子与盒子之间的距离
margin 他也是有四个方向的所以我们能够通过四个方向对其进行描述
方法有两种:第一种我们称之为小属性，第二章我们称之为简写属性.
小属性

margin-top：上外边距
margin-right:右外边距
margin-bottom：下外边距
margin-left :做外边距

简写属性

margin：简写属性它是有方向的这里的方向是一个顺时针的方向他的方向是的顺序是：上、右、下、左
margin：10px;表示上右下左这四个方向的外边距为10像素
margin：10px 20px；表示上下这两个方向的外边距为10像素左右两个方向的外边距为20像素
margin：10px 20px 30px；表示上边距为10像素左右边距为20像素下外边距为30像素
margin：10px 20px 30px 40px；表示上外边距为10像素右外边距为20像素下外边距为30像素左边距为40像素
源代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .box{
            width: 100px;/*这里的WIDTH属性值得是盒子里面内容的宽度*/
            height: 100px; /*这里的height属性值得是盒子里面内容的高度*/
            /*使用小属性来描述内填充*/
            padding-top: 20px;
            padding-right:30px;
            padding-bottom: 40px;
            padding-left: 50px;
            border:1px solid #f00; /*外边框*/
        }
    </style>
</head>
<body>
    <div class="box">我的第一篇博客</div>
</body>
</html>

background：

用来设置盒子的背景：
背景颜色：background-color
背景颜色会填充一个盒子的内容区域和padding区域以及边框。
背景图片：background-image
url（）函数，表示用来指定一个背景图片的路径，（）里面可以加""，也可以不加。
默认情况下，一个盒子的背景图片会平铺一个盒子，在水平和垂直方向上都会平铺。【可以通过一个属性来指定是否平铺，叫background-repeat】
默认情况下，背景图片的左上角和盒子的padding’的左上角是对齐的。【可以通过一个属性来指定背景图片的位置，叫background-position】

Yy123456tp

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css盒子模型

css之盒子模型一个盒子的组成部分：一个盒子的主要属性：边框的样式：外边距：可见框的大小：如何计算一个盒子的总宽度：简写属性:padding:margin：background：一个盒子的组成部分：在css中一个盒子的组成部分内容(content)+内填充(padding)+边框(border)+外边距(margin)一个盒子的主要属性：在css中一个盒子的组成部分内容(content)+内填充(padding)+边框(border)+外边距(margin)一个盒子的主要属性：width、
复制链接

扫一扫