css - 盒子模型

qq_38535965

已于 2023-09-12 08:34:48 修改

阅读量88

点赞数

文章标签：前端 html

于 2023-09-06 20:13:37 首次发布

本文链接：https://blog.csdn.net/qq_38535965/article/details/132721451

版权

元素显示模式

类型	特点
行内元素	1.不独占一行，多个行内元素可在一行显示，当超出宽度后换行从左到右排列； 2.默认大小由自身内容决定；不可以自定义宽高；不继承父元素宽 3.只可以设置水平方向的margin和padding 4.可以嵌套行内元素
块元素	1.独占一行显示； 2.没设置宽度时，默认父级宽度。高度以内容撑开 3.可以自定义宽高、水平垂直方向内外边距；
行内块	1.多个行内块元素可以在一行显示但有条缝隙间隔 2.默认大小为自身大小，不继承父元素宽，可以自定义宽高 3.可以自定义水平/垂直方向的padding/margin

元素显示模式转换

display : block 转换成（块元素）
display : inline 转换成（行内元素）
display : inlineBlock 转换成（行内块元素）

案例

1.行内元素转行内块元素

盒子模型

每个盒子由外边距margin，边框Border,内边距padding，内容content组成。

padding为内容距离边框的距离。

padding: 20px 表示上下左右内边距都为20；padding: 10px 20px表示垂直内边距10px，水平内边距20px;padding: 10px 20px 30px 表示：上10，左右20，下30；padding: 10px 20px 30px 40px 表示以顺时针分别设置内边距上10,右20,下30,左40

margin为元素边框距离边框的距离,书写于padding一致

外边距合并

1.上下兄弟外边距合并

如图: 两个兄弟级别元素，第一个元素设置下外边距10px，第二个元素设置上外边距9px，此时他俩的距离不为19px,而是10px 得出此情况取两者中最大的Margin作为公共margin。

2.父子嵌套的外边距合并

两个嵌套关系的div都设置了上外边距；但最终子上外边距作用在了父身上；

实际上发生塌陷：子的marigin-top作用到了父身上表象为父盒子塌陷了。

解决方法：

.fu {
      width: 200px;
      height: 200px;
      background-color: rgb(12, 128, 230);
      margin-top: 50px;
      /* 1.overflow: hidden; */
      /* 2.border-top: 1px solid red; */
      padding-top: 1px;
    }

    .z {
      width: 100px;
      height: 100px;
      margin-top: 80px;
      background-color: rgb(85, 161, 228);
    }

块元素水平居中

margin:0 auto

浮动

类似行内块效果，让块级元素在一行显示，比行内块更好的地方在于可以消除多个行内块间的缝隙

行内块效果：

浮动：

浮动特性

1.浮动后的元素在一行显示；

2.浮动后的元素具有行内块元素的特点

3.浮动的元素脱离文档流不占有位置父盒子无法检测内容的高度。

4.一浮全浮：由于浮动的元素不占有位置继而影响其后面的元素的排列，所以同一级下的元素中一个元素浮动后面的元素也尽量要浮动。

浮动的缺点

父盒子无法检测内容的高度。

如图：父盒子没有检测到子项内容的高度导致border没有包裹所有子项

正常现象：父盒子检测到子项高度=>撑开盒子=>border包裹住子项

解决

1.伪元素清理法

2.隔墙法

3.父元素overflow:hidden

 <style>
    div {
      border: 1px solid red;
      width: 300px;


    }
    
    /* 
        ！伪元素清理法 ：必须设置显示模式和内容
    */
    div:after {
      content: '';
      display: block;
      clear: both;
    }

    img {
      float: left;
      width: 150px;
      height: 150px;
    }
  </style>
</head>

<body>
  <div>
    <img
      src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F201801%2F19%2F20180119112939_VM5tZ.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1696508977&t=4a876b2fcac7188715ab48bee2cf6788"
      alt="">
    <img
      src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F201801%2F19%2F20180119112939_VM5tZ.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1696508977&t=4a876b2fcac7188715ab48bee2cf6788"
      alt="">
  </div>