CSS盒模型

最新推荐文章于 2024-09-11 21:44:44 发布
最新推荐文章于 2024-09-11 21:44:44 发布
阅读量44 收藏
点赞数
分类专栏： CSS 文章标签： css css3 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43641912/article/details/129124252
版权
文章详细探讨了CSS中的盒子模型，包括宽高、边框、内边距和外边距的概念，以及如何通过`box-sizing`属性改变元素尺寸计算方式。同时，介绍了内层盒子居中和外层盒子固定宽高的布局技巧。此外，还讨论了定位（绝对定位和相对定位）以及浮动元素的影响，以及BFC（块级格式化上下文）在解决margin合并和高度塌陷问题中的应用。最后，提到了一些其他CSS特性，如伪类、阴影、圆角和背景图像的使用。
摘要由CSDN通过智能技术生成

盒子模型
1、宽高所划分的区域
2、边框
3、内边距
4、外边距
内边距和边框是不占据盒子本身的宽高的

内层盒子居中
外部盒子宽高固定，内层盒子宽高继承外部盒子

在这里插入代码片<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        /* .out-box{
            width: 200px;
            height: 200px;
            border: 10px solid green;
            padding: 50px;
            margin: 50px;
        }
        .inner-box{
            width: 100px;
            height: 100px;
            background-color: orange;
        } */
        .box{
            width: 100px;
            height: 100px;
            padding: 30px;
            border: 1px solid #000;
        }
        .box .box1{
            /* width: 100px;
            height: 100px; 或者*/
            width: 100%;
            height: 100%;
            background-color:orange ;

        }
    </style>
</head>
<body>
    <!-- <div class="out-box">
        <div class="inner-box"></div>
    </div> -->
    <div class="box">
        <div class="box1"></div>
    </div>
</body>
</html>

使用box-sizing: border-box; 把边框和内边距收到盒子内部

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        .box {
            width: 200px;
            height: 200px;
            padding: 30px;
            background-color: green;
            border: 10px solid #000;
            /* 把边框和内边距收到盒子内部 */
            box-sizing: border-box;
            /* firefox */
            -moz-box-sizing: border-box;
            /* chrome safair */
            -webkit-box-sizing: border-box;
            /* IE8及以下 */
            -ms-box-sizing: border-box;
            /* presto opera */
            -o-box-sizing: border-box;

        }

        .box1 {
            width: 100%;
            height: 100%;
            background-color: orange;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="box1"></div>
    </div>
</body>

</html>

body默认的外边距
ie 8 上下16px 左右 8px
ie7 上下16px 左右 11px

盒子居中
水平居中 margin:0 auto;

定位
绝对定位 ：设置了定位后，会在当前的文档层之上在重新建一个文档
层，它就到新建的文档层上去了，所以就会导致下边的元素会上去

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        .box1{
            /* 
            * 设置了定位后，会在当前的文档层之上在重新建一个文档
            *层，它就到新建的文档层上去了，所以就会导致下边的元素会上去
             */
            position: absolute;
            width: 100px;
            height: 100px;
            background-color: rebeccapurple;
        }
        .box2{
            width: 200px;
            height: 200px;
            background-color: green;
        }
      
    </style>
</head>

<body>
    <!-- 绝对定位 
        position: absolute;
        left/right top/bottom
    -->
    <div class="box1">
    </div>
    <div class="box2"></div>
</body>

</html>

在这里插入图片描述

在这里插入图片描述
相对定位： 设置相对定位后，依然会新建文档层，但是之前文档层的位置还会保留

绝对定位中的两栏设计

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        html,body{
            height: 100%;
            margin: 0;
            overflow: hidden;
        }
        .left{
            height: 100%;
            margin-right: 300px;
            background-color: #bfa;
        }
        .right{
            position: absolute;
            top: 0;
            right: 0;
            width: 300px;
            height: 100%;
            background-color: orange;
        }
    </style>
</head>

<body>
    <!-- 绝对定位 
        position: absolute;
        left/right top/bottom
    -->
    <div class="left">
    left
    </div>
    <div class="right">
    right
    </div>
</body>

</html>

在这里插入图片描述
浮动
浮动流并没有新建一个层，块级元素无法识别浮动流的位置
内联、内联块、浮动、溢出隐藏、纯文本都可以识别浮动元素的位置
float以后元素就变成内联块了

伪类、伪元素
:after
:before
伪元素
::before
::after

<style>
p:before{
content:attr(data-username)
}
</style>
<body>
<p data-username="动态数据">内容</p>
</body>

盒子阴影
box-shadow:水平位置（必填） 垂直位置（必填） 模糊距离 阴影的尺寸 阴影颜色 阴影的种类(inset outset)

.box1{
            width: 300px;
            height: 150px;
            background-color: orange;
            margin: 100px;
            /* 
            box-shadow:水平位置（必填） 垂直位置（必填）
                模糊距离 阴影的尺寸 阴影颜色 阴影的种类(inset outset)
             */
             /* box-shadow: 20px 10px; */
             -webkit-box-shadow: 0px 10px;
             -moz-box-shadow: 20px 0px;
             -o-box-shadow: -20px -10px;
             box-shadow: 20px 10px 20px;
             box-shadow: 20px 10px 5px 10px;

        }

边框圆角
border-radius: 纯圆 设置为50% 但是宽高要一样
半圆角 height/2 px
圆角被非圆角元素隐藏 解决方法：设置圆角元素的overflow:hidden

 -webkit-border-radius:20px;
 -moz-border-radius: 20px ;
 -o-border-radius: 20px ;

bakckground-image: url(图片地址不用写引号)

 .box1{
            width: 300px;
            height: 300px;
            margin: 100px;
            border: 1px solid #000;
           background-image: url(../DOM/slider/img/1.jpg); 
           background-size: 300px 300px;//css3属性
           /* 或者 
           background-size: 100% 100%;
           background-size: cover
		   background-size: contain
           */
           background-repeat:no-repeat|repeate|repeat-x|repeat-y;
            background-position:left、right、bottom、top、center中的两两组合| 两个都是百分比形式|写两个像素;
            background-position：left center;
            background-position：50% 50%;
            background-position：10px 10px;
            background-attachment: fixed;背景图片不滚动，默认是scroll
        /*
        复合值写法
        */  
         background: background-color background-image
                       background-repeate background-attachment 
                       background-position/background-size   
        }

logo设置主要注意设置overflow: hidden;height:0; padding-top: 容器的高度

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        .logo{
            width: 200px;
            height: 114px;   
            /* border: 1px solid #000; */
        } 
        .logo h1 .logo-hd{
            display: block;
            width: 142px;
            height: 0;
            padding-top: 114px;
            background: url(../DOM/slider/img/1.jpg) no-repeat 0 0/200px 114px;
            border: 1px solid #000;
            overflow: hidden;
        }
    </style>
</head>

<body>
    <div class="logo">
        <h1>
            <a href="" class="logo-hd">
                myLOGO
            </a>
        </h1>
    </div>
</body>

</html>

table样式

这样写单元格有边框 table{border: 1px solid #000 }这样写单元格没边框 设置标题样式 caption-side：top(默认值)；bottom border-collapse: separation|collapse; 单元格宽度保持一致table-layout: automatic|fixed; ```html Document
表格的标题，可以单独定义样式
12
12
42
``` block formatting contexts 块级格式化上下文 BFC（css2.1） 普通流 normal flow 浮动流 float flow 脱离普通流，左右偏移，最早用于解决文字环绕 绝对定位布局 absolute positioning 脱离了文档流，不会影响任何兄弟元素的布局，由左边绝对的 BFC元素 body float: left|right position: absolute | fixed display:inline-block|table-cell overflow: hidden|auto|scroll BFC元素的作用 1、margin合并问题 
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style type="text/css">
  .box{
      width: 200px;
      height: 200px;
  }
  .box1{
      background-color: #baf;
      margin-bottom: 100px;
  }
  .box2{
      background-color:#bfa;
      margin-top: 100px;

  }
  </style>
</head>

<body>
  <div class="box box1">
  </div>
  <div class="box box2">
  </div>
</body>

</html>

解决：
1、放在两个BFC元素里
2、不解决，直接把外边距写在一个盒子里就好
2、高度塌陷问题

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style type="text/css">
      .box {
          width: 200px;
          border: 10px solid #000;
      }

      .box1 {
          float: left;
          width: 100px;
          height: 100px;
          background-color: #baf;
      }

      .box2 {
          float: left;
          width: 100px;
          height: 100px;
          background-color: #bfa;

      }
  </style>
</head>

<body>
  <div class="box">
    <div class="box1">
    </div>
    <div class="box2">
    </div>
  </div>

</body>

</html>

解决将父级元素变成BFC

3、margin塌陷

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style type="text/css">
      .box {
         /*解决方法设置border*/
          /*border-top: 1px  solid transparent;*/
          /*解决方法触发BFC*/
          display: inline-block;
          width: 200px;
          height: 200px;
          background-color: #bfa;
      }

      .box1 {
          width: 50px;
          height: 50px;
          margin: 0 auto;
          margin-top: 100px;
          background-color: #baf;
      }
  </style>
</head>

<body>
  <div class="box">
    <div class="box1">
    </div>
  </div>

</body>

</html>

在这里插入图片描述
所有设置了float的元素都自动转换为inline-block
4、BFC可以解决浮动元素覆盖的问题
CSS书写顺序
显示属性： display, position, float, clear
自身属性：width, height,margin,padding,border,background
文本属性：color, font, text-align,vertical-align,whitespace

小六*^____^*
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css盒子模型
2301_80840100的博客
06-22 2291
CSS盒子模型是网页布局的基础，它描述了元素在页面上的排列方式。Content(内容) - 盒子的内容，显示文本和图像。Padding(内边距) - 清除内容周围的区域，内边距是透明的。Border(边框) - 围绕在内边距和内容外的边框。Margin(外边距) - 清除边框外的区域，外边距是透明的。把盒子模型看成一个快递，快递里面的物品就是content，快递里面的缓冲物就是padding，快递盒子就是border，两个快递间的距离就是margin。
CSS盒子模型
LiLi的博客
12-22 6464
CSS盒子模型（Box Model） 概念 所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用 CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括： 外边距（margin），边框（border），内边距（padding），和实际内容（content） 1 Margin(外边距) - 清除边框外的区域，外边距是透明的 2 Border(边框) - 围绕在内边距和内容外的边框 3 Padding(内边距) - 清除内容周围的区域，内边距是透明的 4 Co
CSS 盒子模型
m0_52861684的博客
08-28 1498
CSS 盒子模型总结。
boxmodel:CSS盒模型编辑器界面构建器输入试用
05-14
BoxModel-CSS盒子模型编辑器 BoxModel是一个jQuery插件，可帮助用户创建紧凑的表单输入，以编辑html表单中的box模型css。 它可以提交几个详细信息，例如单独的值以及可以在CSS块中使用的组合的优化单位。 它支持鼠标...
css盒子模型详解加示例
09-25
CSS盒子模型是网页布局的基础，它定义了网页元素在页面上的空间占用方式。W3C组织推荐使用这一模型，将每个HTML元素视为一个矩形盒子，盒子由四部分组成：内容区域（content）、内填充（padding）、边框（border）和...
CSS+盒模型,css盒模型面试题,HTML源码.zip
10-15
**CSS盒模型** 在网页设计中，CSS（层叠样式表）盒模型是理解布局的基础。它描述了HTML或XML元素如何占据空间并相互影响。盒模型由元素的内容区域、内边距（padding）、边框（border）以及外边距（margin）组成，...
富文本中去掉 HTML 和 CSS 样式，只保留纯文本
S筱潇S四维Smile
09-11 194
要从富文本中去掉 HTML 和 CSS 样式，只保留纯文本，可以使用以下几种方法：1. 纯 JavaScript 方法你可以使用 JavaScript 的innerText或来提取文本，而忽略 HTML 标签和样式。
CSS 常用元素属性
2301_79881188的博客
09-11 482
CSS 属性有很多, 可以参考文档。
前端开发中的CSS命名规范及BEM实践
官方推荐
09-08 2893
前端开发中的CSS命名规范及BEM实践
《HTML 与 CSS—— 响应式设计》
asd4353012的博客
09-11 848
HTML 和 CSS 在响应式设计中起着至关重要的作用。通过使用语义化标签、响应式图像、媒体查询、弹性布局和响应式网格系统等技术，可以实现网页在不同设备上的自适应显示，提供最佳的用户体验。在进行响应式设计时，要遵循移动优先设计、内容优先和测试优化等最佳实践，不断提高网页的质量和性能。随着移动设备的普及和技术的不断发展，响应式设计将变得越来越重要，开发者需要不断学习和掌握新的技术和方法，以满足用户的需求。
水平居中的几种方法（总结）
致未来的你。的博客
09-11 494
水平居中的几种方法（总结）
【CSS in Depth 2 精译_025】4.3 弹性布局的方向
PeacefulWinter的博客
09-09 1946
本篇为新版《CSS in Depth》4.3小节内容，主要介绍了 Flexbox 弹性布局的方向设置，并结合一个典型的两列布局案例，对垂直方向的弹性布局做了进一步讨论，最后还对表单元素的细节样式问题进行了讨论，这些都是平时容易忽略的非常有价值的知识点，建议收藏并在本地实测。
VUE实现刻度尺进度条
最新发布
u011753609的博客
09-11 218
VUE实现刻度尺进度条
CSS中 nth-child 与 nth-of-type 的区别
qq_62512874的博客
09-11 377
nth-child和都是强大的CSS选择器，能够帮助我们更加灵活地选择和样式化页面元素。nth-child选择的是所有子元素的顺序，而只考虑同类型元素的顺序。在实际开发中，根据具体的需求选择合适的伪类选择器，能够使你的CSS更加简洁和高效。通过合理使用这两个选择器，可以简化很多复杂的样式逻辑，尤其是在处理动态内容或复杂的HTML结构时非常有用。
CSS盒模型详解：内边距应用实例
"通过CSS盒模型实现元素样式控制的实例解析" 在CSS中，盒模型是理解元素布局和外观的关键概念。它将每个HTML元素视为一个矩形盒子，由内容区域、内边距、边框和外边距组成。盒模型决定了元素在页面上的空间占用，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值