CSS总结5-盒子模型

盒子模型

页面中的每一个标签都看成是一个盒子

浏览器在显示页面的时候，把页面中的元素看作是一个个矩形区域，也称之为盒子

css中盒子由 内容content，内边距padding，边框border，外边距margin 构成，就是盒子模型

内容content

内容的宽度和高度

通过width和height属性设置的就是 内容区域的大小

边框border

边框粗细，边框样式，边框颜色

     .box {
        width: 200px;
        height: 200px;
        /* 边框粗细 */
        /* border-width: 5px; */
        /* 边框样式
        dashed  虚线
        solid 实线
        dotted 点线
        */
        /* border-style: dotted; */
        /* 边框颜色 */
        /* border-color: red; */
        /* 连写
        border:粗细 样式  颜色;
        粗细和样式必须一起写 不能省略
        */
        /* border: 5px solid yellow; */

        /* 单方向 */
        border-left: 3px solid red;
        border-top: 5px solid;
        border-bottom: 6px dashed blue;
        border-right: 10px solid green;
      }

表格边框属性

属性：border-collapse
separate 默认值，分离边框模式
collapse 边框合并模式

属性：border-spacing
border-spacing 2px   四周的间距为2px
border-spacing 1px 2px  水平间距1px，垂直间距2px

边框圆角border-radius

让盒子四个角变得圆润

border-radius: 数字+px/百分比；

案例

需求：盒子尺寸 300*300，背景红色，边框10px solid；

1：设置的width和height 是内容的宽高
2：设置边框会撑大盒子

总结:

盒子实际大小宽度=左边框+内容的width+右边框
盒子实际大小高度=上边框+内容的height+下边框

盒子被border撑大后，手动在内容中减去border的大小

三角形

<style>
      .main {
        width: 0px;
        height: 0;
        border-left: 40px solid red;
        border-top: 40px solid;
        border-bottom: 40px solid blue;
        border-right: 40px solid green;
      }
      .box {
        width: 0;
        height: 0;
        border-left: 60px solid red;
        border-bottom: 60px solid transparent;
        border-right: 60px solid transparent;
        border-top: 60px solid transparent;
      }
    </style>
  </head>
  <body>
    <div class="main"></div>

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

内边距padding

内容和盒子边框之间的距离--内边距 padding

语法

.box {
        width: 50px;
        height: 21px;
        
        /* 上下左右各10px */
        /* padding: 10px; */
        /* padding:上下各10px 左右各20px */
        /* padding: 10px 20px; */
        /* padding:上10px 左右各20px  下30px*/
        /* padding: 10px 20px 30px; */

        /* padding:上10px 右20px  下30px 左40px*/
        padding: 10px 20px 30px 40px;
      }

盒子实际大小

1：设置的width和height 是内容的宽高
2：设置边框会撑大盒子
3：设置padding也会撑大盒子

盒子大小计算

盒子实际大小宽度=左边框+左padding+内容的width+右padding+右边框
盒子实际大小高度=上边框+上padding+内容的height+下padding+下边框

盒子被border和padding撑大后，计算多余的大小，手动在内容中减去

padding什么情况下不会撑大盒子

如果子盒子没有设置宽度，此时宽度默认是父盒子的宽度，给子盒子设置左右的padding，和左右border不会撑大盒子(块元素)

   <style>
      .out {
        width: 500px;
        height: 500px;
        
      }
      .inner {
        /* 不设置宽度 */
        
        border: 20px solid;
        padding: 0 30px;
      }
    </style>
  </head>
  <body>
    <div class="out">
      <div class="inner">123</div>
    </div>
  </body>

案例

需求:盒子尺寸300*300，背景粉色，边框10px 实线黑色，上下左右20px的内边距，如何实现？

手动内减

width=实际宽度-左边框-左padding-右padding-右边框

height=实际高度-上边框-上padding-下padding-下边框

 .box {
        /* 
        实际宽度=左边框+左padding+width+右padding+右边框
        实际高度=上边框+上padding+height+下padding+下边框
        */
        width: 240px;
        height: 240px;
        border: 10px solid;
        padding: 20px;
        
      }

自动内减

给盒子设置box-sizing:border-box

 /* 自动内减 */
        box-sizing: border-box; /*怪异盒模型----移动端*/
        width: 300px; /*width  height  是盒子实际的宽高,不是内容的宽高*/
        height: 300px;
        border: 10px solid;
        padding: 20px;
        background-color: pink;

外边距margin

设置边框以外，盒子和盒子之间的距离

代码

.box {
        width: 100px;
        height: 100px;
        
        /* 上下左右各10px */
        /* margin: 10px; */
        /* 上下各10px  左右各20px*/
        /* margin: 10px 20px; */
        /* 上10px  左右各20px  下30px*/
        /* margin: 10px 20px 30px; */

        /* 上10px  右各20px  下30px  左40px*/
        /* margin: 10px 20px 30px 40px; */

        /* 单方向 */
        margin-left: 20px;
        margin-top: 40px;
        margin-bottom: 50px;
        margin-right: 40px;
      }

外边距问题

正常情况

    <style>
      * {
        margin: 0;
        padding: 0;
      }
      span {
        width: 100px;
        height: 100px;
        display: inline-block;
        
      }
      span:first-child {
        
        margin-right: 10px;
      }
      span:last-child {
        margin-left: 20px;
      }
    </style>
  </head>
  <body>
    <!-- 正常情况 水平布局的盒子，左右的margin正常，互不影响
     最终两者距离为左右margin的和
    -->
    <span>span1</span>
    <span>span2</span>
  </body>

外边距折叠现象(2种)

合并

 <style>
      * {
        margin: 0;
        padding: 0;
      }
      div {
        width: 200px;
        height: 200px;
      }
      .box {
        
        margin-bottom: 30px;
      }
      .main {
        
        margin-top: 20px;
      }
    </style>
  </head>
  <body>
    <!-- 垂直布局的块级元素，上下的margin会合并 
     最终两者的距离为margin的最大值
     避免这种问题，只给其中一个盒子设置margin即可
    -->
    <div class="box"></div>
    <div class="main"></div>
  </body>

塌陷

    <style>
      * {
        margin: 0;
        padding: 0;
      }
      .box {
        /* 
        第一种
        width: 300px;
        height: 280px;
        
        padding-top: 20px; */

        width: 300px;
        height: 300px;
        
        /* overflow: hidden; */
        float: left;
      }
      .main {
        margin-top: 20px;
        width: 100px;
        height: 100px;
        
      }
    </style>
  </head>
  <body>
    <!-- 互相嵌套的块级元素，子元素的margin-top会作用在父元素上 ，导致父元素一起往下移动
    解决方法：
    1：给父元素设置padding-top,父元素的高度根据需求要自减
    2：给父元素设置overflow:hidden,子元素的margin-top不能去掉
    3：设置浮动
    
    
    -->
    <div class="box">
      <div class="main"></div>
    </div>
  </body>

清除默认的内外边距

*{ margin: 0; padding: 0; }

posted on 2022-08-01 16:58 7891asdf156 阅读(72) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· CSS总结4

· CSS总结1

· CSS-盒子模型-内容，边框，内边距，外边距，（合并，塌陷情况）

· CSS|盒子模型

· CSS盒子模型(详解)

阅读排行：
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型，支持深度思考和联网搜索！
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· ollama系列01：轻松3步本地部署deepseek，普通电脑可用
· 按钮权限的设计及实现
· 25岁的心里话

Arabic	Hebrew	Polish
Bulgarian	Hindi	Portuguese
Catalan	Hmong Daw	Romanian
Chinese Simplified	Hungarian	Russian
Chinese Traditional	Indonesian	Slovak
Czech	Italian	Slovenian
Danish	Japanese	Spanish
Dutch	Klingon	Swedish
English	Korean	Thai
Estonian	Latvian	Turkish
Finnish	Lithuanian	Ukrainian
French	Malay	Urdu
German	Maltese	Vietnamese
Greek	Norwegian	Welsh
Haitian Creole	Persian

0x-x0