盒子模型

最新推荐文章于 2024-06-22 17:15:40 发布

浩哥学习编程之路

最新推荐文章于 2024-06-22 17:15:40 发布

阅读量145

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/m0_46978034/article/details/105694491

版权

css 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

盒子的模型
1.盒子模型
就是把HTML页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器。盒子分为：内容，边框，内边距，外边距。想象成盒子以后，对于页面的布局就变成了如何摆放盒子
2.盒子的边框（border）
代码如下

border：

属性
border-width	定义边框的粗细，单位是px
border-style	边框样式none（没有边框默认）solid（单实线）dashed（虚线）dotted（点线）
border-color	边框颜色

案例如下

 div {
        width: 500px;
        height: 500px;
        /* 边框的宽度单位px */
        border: 7px;
        /* 边框的样式 单实线 */
        border-style: solid;
        /* 边框的样式 虚线 */
        border-style: dashed;
        /* 边框的样式 点线 */
        border-style: dotted;
        /* 边框的颜色 */
        border-color: pink;
        /* 边框综合设置简写法 */
        border: 5px solid pink;
    }
    </style>
</head>
<body>
<div> </div>
</body>

2.1边框综合设置（简写）
案例如下

  /* 边框粗细，样式，颜色 综合设置简写法 没有顺序之分 */
        border: 5px solid pink;

2.2盒子边框写法总结
很多情况下，我们不需要指定4个边框，我们可以单独给4个边框分别指定的。

上边框	下边框
border-top:宽度样式颜色	border-bottom：宽度样式颜色
左边框	右边框
border-left：宽度样式颜色	border-right：宽度样式颜色

案例如下

  div {
        width:  500px;
        height: 500px;
        /* 上边框 */
        border-top: 2px solid red;
       /* 下边框 */
       border-bottom: 2px solid yellow;
       /* 左边框 */
       border-left: 2px solid coral;
       /* 右边框 */
       border-right: 2px solid chartreuse;
    }
    input {
        border:none;
        border-bottom:1px solid red
    }
    </style>
</head>
<body>
<div> </div>
    用户名：<input type="text">
    密码：<input type="password"> 
</body>

2.3表格的细线边框
代码如下：

table {border-collapse: collapse;
}

案例

   table,
      td,
      th {
        border: 2px solid pink;
        border-collapse: collapse;

3.内边距
padding属性用于设置内边距。是指边框于内容之间的距离。
3.1属性

属性	作用
padding-left	左内边距
padding-right	右内边距
padding-top	上内边距
padding-bottom	下内边距

可简写为

值的个数
1个值	上下左右边距
2个值	padding:上下、左右边距
3个值	padding：上内、左右内、下内边距
4个值	padding：上内、右内、下内、左内边距

案例如下

  <style>
    div {
        width:  500px;
        height: 500px;
      border: 2px solid red ;
      /* 左内边距 */
      padding-left: 5px;
      /* 右内边距 */
      padding-right: 5px;
      /* 上内边距 */
      padding-top: 5px;
      /* 下内边距 */
      padding-bottom: 5px;
      /* 简写 上20 右10 下30 左40 顺时针 */
      padding: 20px 10px 30px 40px ;
    }
    </style>
</head>
<body>
<div>青春不常在 </div>
</body>

3.2盒子尺寸计算（元素实际大小）
我们在输入元素时，会撑大原来的盒子。
解决如下：

盒子的实际大小=内容的宽度和高度+内边框+外边框
通过给设置了宽高的盒子，减去相应的内边距的值，维持盒子原有的大小即可

3.3 padding不影响盒子大小情况

如果没有给一个盒子指定宽度，此时，如果给这个盒子指定padding，则不会撑开盒子。如果指定了宽度则会撑开盒子。

4.1外边距
margin属性用于设置外边距。margin就是控制盒子于盒子之间的距离

属性	作用
margin-left	左外边距
margin-right	右外边距
margin-top	上外边距
margin-bottom	下外边距

注意margn也可以简写简写方法跟padding完全相同

4.2块级盒子水平居中
可以让一个块级盒子实现水平居中有以下条件必须满足

盒子必须有宽度
然后就给左右的外边距都设置auot

案例如下

   <style>
       div {
height: 170px;
width: 170px;
background-color: red;
margin-left: auto;
margin-right: auto;
       }
    </style>
</head>
<body>
  <div></div>
</body>

常见的写法有三种

margin-left：auto； margin-right：auto;
margin:auto;
margin:0(上下) auto（左右）;

4.3文字居中和盒子居中的区别
1.盒子内的文字居中是text-align：center；而且还可以让行内元素和行内块居中对齐
2.块级盒子水平居中左右margin改为auto

4.4插入图片于背景图片区别
1.插入图片用的最多比如产品展示类，移动位置只能靠盒模型padding、margin
2.背景图片我们一般用于小图片或者超大背景图片背景图片只能通过background-position去移动位置

4.5清除元素的默认内外边距（重要）
代码如下

* {
 padding：0；清除内边距
 margin：0；清除外边距
 }

注意
行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距。

4.6外边距合并
使用margin定义块元素的垂直外边距时，可能会出现外边距的合并。
（1）相邻块元素垂直外边距的合并

当上下相邻的俩个块元素相遇时，如果上面的元素有下外边距margin-bottom
下面的元素有上外边距margin-top，则它们之间的垂直间距不是margin-bottom与margin-top之和
取他们俩个中最大的值这种现象被称为相邻块元素垂直外边距的合并（也称外边距塌陷）

案例如下

 <style>  
    .hh,
    .ee {
      width: 200px;
      height: 200px;
      background-color: red;
    }
    .hh {
      margin-bottom: 30px;
    }
    .ee {
      background-color: pink;
      margin-top: 60px;
    }
    </style>
</head>
<body>
<div class="hh"></div>
<div class="ee"></div>
</body>

解决办法：尽量只给一个盒子添加margin值

（2）嵌套块元素垂直外边距的合并（塌陷）

对于俩个嵌套关系的块元素，如果父元素没有上边距及边框
父元素的上边距会与子元素的上外边距发生合并
合并后的外边距为俩着的较大者

解决方案

可以为父元素定义上边框起到固定作用
可以为父元素定义上内边距
可以为父元素添加overflow：hidden；

案例如下

   .hh {
     width: 500px;
     height: 500px;
     background-color: pink;
    /* 垂直外边距合并解决方案 */
    /* 1.可以给父元素定义上边框  transparent 透明*/
    border-top:1px solid transparent;
    /* 2。可以给父元素指定一个 上 padding 值 */
    padding-top: 1px;
    /* 3.可以给父元素添加overflow: hidden; */
    overflow: hidden;
   }
   .ee {
     width: 200px;
     height: 200px;
     background-color: purple;
     margin-top: 100px;
     
    </style>
</head>
<body>
<div class="hh">
  <div class="ee">ee</div>
</div>

4.7去掉列表默认的样式
无序和有序前面默认的列表样式，在浏览器不同，所以一般都是要取消
代码如下

li {list-style:none;
}

5.圆角边框
代码如下

border-radius：xx；

其中每一个值可以为数值或者百分比的形式
技巧，让一个正方形，变成一个圆圈
矩形的圆角，就不能用百分比了，因为百分比会表示高宽的一半，矩形就只能用高度的一半就好了，记得精确单位px。

6.盒子阴影
代码如下

box-shadow：水平阴影、垂直阴影、模糊距离、阴影大小、阴影颜色、内外阴影

在这里插入图片描述
注意

外部阴影（ovtset）是默认的，但是不能写，想要内阴影可以inset即可
水平阴影和锤子阴影也可以是负值的

7.轮廓
轮廓就是不占空间的边框，设置轮廓不会影响到元素的布局

语法具体属性值查阅手册

  outline: 10px solid red;

在这里插入图片描述

浩哥学习编程之路

关注

0
点赞
踩
0

收藏

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

盒子的模型1.盒子模型就是把HTML页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器。盒子分为：内容，边框，内边距，外边距。2.盒子的边框（border）代码如下border：属性border-width定义边框的粗细，单位是pxborder-style边框样式none（没有边框默认）solid（单实线）dashed（虚线）dotted...
复制链接

扫一扫

专栏目录