CSS盒子模型注意细节

最新推荐文章于 2022-07-29 23:59:40 发布

原创最新推荐文章于 2022-07-29 23:59:40 发布 · 299 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css布局

前端专栏收录该内容

6 篇文章

订阅专栏

什么是盒子模型：

一个标签就是一个盒子，可以通过6大属性(margin，border,padding，width，height，background-color)来设置这个盒子。
同时，标签分男标签和女标签。对于男盒子来说，6大属性都有作用。对于女盒子来说，width，height不起作用，padding 和 margin在水平方向上有作用，在垂直方向上没有作用。

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        *{margin: 0;
        padding: 0;}    
    </style>
</head>
<body>
    <div style="width: 100px;height: 100px; background-color: red;"></div>
    <span style="width: 100px;height:100px;background-color:green;">span</span>
</body>
</html>

在这里插入图片描述

<body>
    <div style="width: 100px;height: 100px; background-color: red;"></div>
    <span style="margin:20px 20px;padding:20px 20px;background-color:green;">span</span>
</body>

在这里插入图片描述

下面由外到内依次介绍盒子模型的六大属性：

一.margin属性

margin是什么：它指元素之间盒子与盒子之间的距离。

1.1 css外边距属性margin:

分别是：margin-top;margin-right;margin-bottom;margin-left
可以简写为：margin：margin-top margin-right margin-bottom margin-left;依次按顺时针排列。
margin属性值的表示方式：

margin中一个值：比如，margin:20px;表示上右下左距离都是20px。
margin中两个值：比如，margin：20px 30px;表示上下是20px,左右是30px。
margin中三个值：比如，margin：20px 40px 30px;表示上是20px,左右是40px,下是30px。
margin中四个值：依次按顺时针上右下左排列，比如，margin：20px 40px 30px 50px;表示上是20px,右是40px,下是30px，左50px。

应用实例：有些标签默认右margin值的，*{margin:0;}清楚所有标签的默认值
margin对于块级元素，四个方向都有效，对于行级标签，水平方向有效，垂直方向无效。

margin外边距的重叠性：
重叠的前提条件：块级标签，垂直方向上

情况一：兄弟盒子之间重叠：
当两个相邻的盒子的垂直方向上的下边距（margin-top）和上边距（margin-bottom）挨着时候，则两个外边距会重叠在一起，这时候中间的margin大小是取大优先。

解决兄弟重叠：
方法1：给男的变成不男不女的（display:inline-block;）
方法2：浮动（浮动元素是不会塌陷的）

情况二：父子盒子之间的重叠（嵌套盒子）
两个盒子嵌套关系（父子），其中他们的父元素上边距（margin-top）和子元素上边距（margin-top）会重叠一起。

解决父子重叠：
方法1：给父元素设置边框（border-top），如果不想用到边框，可以使用transparent属性边框透明化。
方法2：给父元素设置padding-top
方法3：给男的变成不男不女的（给块级元素加上：display：inline-block；）

margin设置负值的作用：
当没有给子元素设置宽度时候，给子元素盒子设置margin-right:-100px;子元素宽度会增加100，此时f子元素盒子宽度是：width+margin-rigth=200px

   <style>
        * {
            margin: 0;
            padding: 0;
        }
        .wrap {
            width: 100px;
            border: 1px solid blue;     
        }
        .father {
            background-color: aqua;
            overflow: hidden;
            margin-right: -100px;
        }
    </style>
    <div class="wrap">
        <div class="father">
            111
        </div>
    </div>

效果图展示：
在这里插入图片描述

二.border属性

border:设置盒子的边框

盒子设置属性可简写为：
border:粗细线型颜色比如： border:1px solid red;
盒子的四个边框：border-top border-right border-bottom border-left
border-width border-style border-color
border-top-width xxx
border在页面是占空间的

border可以实现小三角

border:10px solid transparent;
border-top:10px solid red;

三.padding属性

padding:是内容与border之间的距离。也就是内边距。
padding中四个属性值：padding:padding-top padding-right padding-bottom padding-left,它和margin属性的四个值的表达方式是一样的。
应用：有些标签有默认的padding 可以用 *{padding:0;}选中清除
应用：调整内容与border之间的间隙
padding在页面是占空间的

四.content属性（width，height）

宽度和高度是指内容的宽高。
男标签可以设置宽度和高度，女标签不能设置宽度和高度
当父元素设置宽高是，子元素没有设置宽度高度，则子元素占据了父元素的100%空间
女标签它的宽度由内容决定，高度由font-size决定
width和height可以设置百分比，是是相对父元素的百分比，比如父元素width：1000px;则子元素width:25%,子元素即为：1000*25%=250。

五：background:

background-color:
background-image:
1，默认水平和垂直方向都会平铺
2，如果空间不足，图片也会显示，只是显示不完整
3，url后面的路径引号可加可不加
4，背景图片默认会填充border,padding,content
background-repeat:
background-position:
background-attactment:fixed,定位图片，定死了，滑动页面不会改变。