CSS——盒子模型

最新推荐文章于 2024-05-03 14:55:36 发布

花里梦雨

最新推荐文章于 2024-05-03 14:55:36 发布

阅读量789

点赞数

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

本文链接：https://blog.csdn.net/qq_37369201/article/details/121358006

版权

CSS 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

`文档流`

在说盒子模型之前，先介绍一个文档流的概念：

文档流（normal flow）是一个多层结构，通过CSS可以分别为每一层来设置样式，作为用户只能看到最上边的一层，而最底下的一层就被称为文档流。

所有的元素有两个状态：在文档流中和不在文档流中

在文档流中的元素特点：

块元素：
-独占一行、自上而下垂直排列
-默认宽是父元素的全部（把父元素占满）
-高度被子元素撑开
行内元素：
-不会独占一行（自左而右水平排列，如果一行只能怪容纳不了所有，则会换行继续从左往右排列）
-默认宽度/高度都是被内容撑开

`盒子模型`

CSS将界面中所有的元素都设置为一个矩形的盒子，每个盒子由以下几部分组成：

内容区：元素的所有子元素+文本内容
-width/height是用来设置内容区的大小的
内边距：内容区和边框的距离
边框：盒子的边缘，会影响盒子的大小
外边距：确定盒子的位置

在这里插入图片描述

一、边框（border）

简写语法一：border(border-width border-color border-style)比如：border(10px orange solid)。每个属性之间用空格隔开，不分先后顺序。
简写语法二：border-xxx(border-width border-color border-style)，其中xxx可以代表 top、right、bottom、left

这里共有三个属性，缺一不可。它们也可以分开来单独设置：

`1`.border-width：指定四个方向边框的宽度

有默认值，为3px
可以对四个边设置不同参数值：
-border-width(上边框右边框下边框左边框)
-border-width(上边框左/右边框下边框)
-border-width(上/下边框左/右边框)
-border-width(上/下/左/右边框)

`2`.border-color：指定边框的颜色

有默认值，默认使用color值
和border-width一样可以对四个边设置不同参数值

`3`. border-style：指定边框的样式，默认值为none

solid–实线、dotted–点状虚线、dashed–虚线、double–双线
和border-width一样可以对四个边设置不同参数值

`4`. 其他

也可单独指定某一个边：border-xxx-width/color/style，其中xxx可以代表 top、right、bottom、left
单独一个边不加边框：border-right:none

二、内边框（padding）

简写语法一：padding(padding-top padding-right padding-bottom padding-left)，按照上右下左这样顺时针的顺序设置四个方向的内边距
简写语法二：padding(padding-value)，所有的内边框都为paddin-value

内边距的设置会影响内容区的大小
背景颜色会延伸到内边距

可见宽：指一个盒子得可见大小，是由内容区+内边距+边框的和来决定

三、外边距（margin）

简写语法一：margin(margin-top margin-right margin-bottom margin-left)，按照上右下左这样顺时针的顺序设置四个方向的外边距简写语法二：margin(padding-value)`，所有的内边框都为paddin-value

不会影响盒子的可见大小，但会影响盒子的位置，元素在页面中自左向右排列。
对于top、right、bottom、left这三个值来说：
-如果为正值，设置左上的值，会移动元素本身；设置下右，会移动其他元素
-如果为负值，则规则一样，但该移动的元素会向相反的方向移动
margin-right 的特殊性——特殊性主要体现在这篇博客介绍的水平布局情况中，一般自己设置它的数值，不会有任何效果

四、代码展示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Surymy</title>
    <style>
        .box1{
            /* 设置内容区样式 */
            width:200px;
            height:100px;
            background-color:#bfa;

            /* 设置边框样式 */
           border:10px #abc solid;
           padding:30px;
           margin:20px;
        }
    </style>
</head>
<body>
    <div class="box1">
        <div>Hello!</div>

    </div>
    
</body>
</html>

在这里插入图片描述

花里梦雨

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS——盒子模型

盒子模型CSS将界面中所有的元素都设置为一个矩形的盒子，每个盒子由以下几部分组成：内容区：元素的所有子元素+文本内容-width/height是用来设置内容区的大小的内边距：内容区和边框的距离边框：盒子的边缘，会影响盒子的大小外边距：确定盒子的位置一、边框（border）简写语法一：border(border-width border-color border-style)比如：border(10px orange solid)。每个属性之间用空格隔开，不分先后顺序。简写语法二：bor
复制链接

扫一扫