CSS笔记3-盒子模型

芝奥小婷

已于 2024-10-24 09:14:02 修改

阅读量588

点赞数 21

文章标签： css 笔记前端 1024程序员节

于 2024-07-21 21:14:00 首次发布

本文链接：https://blog.csdn.net/weixin_70903041/article/details/140573447

版权

盒子模型

在CSS中，盒模型是用来对元素进行设计和布局的，

由内到外包含实际内容区、内边距、边框、和外边距四个部分。

布局	作用
内容区Content	用来放置文本或者子元素
内边距padding	即内容区与边框的距离
边框border	围绕在内边距外的边框
外边距margin	边框以外的区域

内容区Content

content，盒模型的实际内容区。

该区域可以放入文本，以及子元素。

样式属性width，height，background-color就是对该区域进行设置的

内边距padding

定义了内容区距离边框的这一片区域，该区域是透明的，没有颜色。

包含上下左右的四个内边距。

padding-top：上内边距

padding-right：右内边距

padding-right：右内边距

padding-left：左内边距

<head>
    <title>盒模型的内边距</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            border: 5px solid red;
            padding-top: 10px;
            padding-right: 15px;
            padding-bottom: 20px;
            padding-left: 25px; 
        }

    </style>
</head>
<body>
    <div></div>   
</body>

边框border

在CSS中,元素的边框，通常由的这三个维度属性来控制。

边框宽度：border-width

边框颜色：border-color

边框样式：border-style

边框的样式有如下几种：

none: 默认无边框

dotted: 点虚线

solid: 实线

double 双线条

dashed 虚线

元素的可见大小，就是由边框+padding+content决定的。

外边距margin

margin属性定义元素周围的空间。作用一般是用来设置该元素所在网页的位置。

包含上下左右外边距：

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

注意：

上下左右可以使用具体值，左右也可以使用百分比，左右也可以使用auto，有居中效果

盒子的水平布局

元素在其父元素中水平方向的位置由以下几个属性共同决定：

margin-left
border-left
padding-left
width
padding-right
border-right
margin-right

上述值相加等于其父元素内容区的宽度（必须满足），是一个元素在其父元素中，水平布局必须满足的条件。

盒子的垂直布局

盒模型的垂直布局: 只需要设置上下外边距,上下边框的宽,上下内边距以及height即可

在垂直方向上,如果有溢出,可以在父元素里使用overflow属性,来设置以下值.

overflow:

visible: 可见,默认值

hidden: 隐藏(溢出部分)

scroll: 添加滚动条

auto: 根据是否溢出选择性的自动添加滚动条.

外边距的折叠

针对于块元素来说，都是独占一行的，因此只涉及到垂直方向上的外边距的重叠(折叠)，即两个元素的相邻外边距可以发生重叠现象。

1.兄弟之间的外边距重叠:

-如果两个值都是正值,取较大值

-如果是一正一负,取两者的和. 如果负数的绝对值大于正数,那么可见部分一定重叠了;

-如果两个都是负数,取绝对值较大的. 可见部分一定会发生重叠.

注意:兄弟之间的外边距的重叠,不是问题.可以根据情况去设定即可.

2.父子之间的外边距重叠:

- 子元素的上外边距传递给了父元素,使父元素距离他的父元素的上外边距也发生了变化

致使父元素的位置发生了改变.

-父元素只需要设置border属性

行内元素的盒模型

行内元素的盒模型特点:

1. 内容区不能使用width和height属性设置,不生效,内容区的宽度和高度都是文字撑起来的.

2. padding, border, margin的水平方向都是生效的,垂直方向上不生效.

想要将行内元素像块元素一样,各种属性设置都生效.那么需要使用display属性在行内元素中设置其值为block.

display: 可选值如下

none: 隐藏消失.不占用页面的布局空间

block: 将行内元素当成块元素设置样式

inline: 将块元素当成行内元素设置样式

inline-block: 要设置的元素既有行内样式也有块样式.

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>        
        #s1{
            width: 300px;
            height: 200px;
            border: 5px solid red;
            padding: 20px;
            margin: 40px;
            
            display: block;
        }

        div div{
            color: blue;
            width: 200px;
            height: 100px;
           
            display: inline-block;
            
        }
        #d1{
            background-color: aqua;
        }
        #d2{
            background-color: pink;
        }

    </style>

</head>
<body>
    <div>       
        <span id="s1">你好</span>
        <span id="s2">谢谢</span>
        <div id="d1">1</div>
        <div id="d2">2</div>
    </div>
</body>