css盒子模型相关知识点

最新推荐文章于 2023-10-30 15:12:25 发布
最新推荐文章于 2023-10-30 15:12:25 发布
阅读量58 收藏
点赞数
文章标签： css 前端 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_47651772/article/details/128023080
版权

目录

一、文档流

二、盒子模型

三、盒子模型-边框

四、盒子模型-内边距

五、外边距

六、水平布局

一、文档流

网页是一个多层的结构，css可以给每一层设置样式，最终我们看到是最上面的一层。文档流是网页最底下的那一层。

元素分为两种状态：在文档流中，脱离文档流

之前将元素分为三类，块元素、行内元素、行内块元素

 分别具有一些特点，这些特点都是元素在文档流中的特点

       块元素：

          不会独占一行，宽是父元素内容区宽度，高是被内容撑开

        行内元素：

          不会独占一行，宽高是被内容撑开，不可以自定义宽高

        行内块：

          兼具块元素，行内元素的特点

 注意：

       1、一旦元素脱离文档流，以上的分类，以上分类的特点都不复存在

       2、我们创建的元素默认是在文档流

二、盒子模型

 盒模型                   快递

 内容区 content           冰箱

 内边距 padding           泡沫

 边框   border           快递盒子      

 外边距 margin           快递离你的距离

盒子的大小：内容区、内边距、边框 有关系，跟外边距是没有关系。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
    <style type="text/css">
    /* 布局相关样式
        文档流默认的布局，浮动，定位，弹性盒子等*/
      /* 盒模型、盒子模型、框模型（box model）*/
      /* 
      网页中也有很多的元素，将各种元素摆放在合适的位置，
        盒模型将页面所有元素的形状都统一了，你在布局时，
        只需要考虑到元素的大小即可
      */
      /*  盒模型                   快递
          内容区 content           冰箱
          内边距 padding           泡沫
          边框   border           快递盒子      
          外边距 margin           快递离你的距离
          
          盒子的大小：内容区、内边距、边框 有关系，跟外边距是没有关系

      */
      .box1{
        width: 100px;
        height: 100px;
        background-color: red;
      }
      /* 
      1、内容区 content：
         width:; 内容区的宽
         height:;  内容区的高
      */



    </style>
  </head>
  <body>
    <div class="box1">
      馆单上，王说着，爻。
    </div>
  </body>
</html>

三、盒子模型-边框

边框（border） 边框用来隔开盒子内部和盒子外部

设置边框，三个要素，缺一不可   宽度、颜色、样式

边框的宽度  border-width

          1、可以设置多个值，以空格隔开即可

            4个值   上  右  下  左

            3个值   上  左右   下

            2个值   上下  左右

            1个值    上下左右

          2、单独设置某一边的宽度

          border-top-width: ;  

          border-bottom-width: ;

          border-left-width: ;

          border-right-width: ;

          3、border-width  是由默认值，默认大小在1-3px

 边框的颜色  border-color

          1、可以设置多个值

             规则跟border-width是一样

          2、单独设置某一边的颜色

               border-XXX-color:;

                XXX:top、right、bottom、left

          3、小箭头的写法

          border-color: transparent  transparent orange transparent ;

          4、border-color 有默认值，默认值是黑色

    边框的样式  border-style

    1、边框样式的种类

              solid   实线

              dotted  点状的虚线

              dashed  虚线

              double  双线

     2、可以写多个样式  

          规则跟border-width一样

     3、单独设置某一边样式

            border-XXX-style:;

                XXX:top、right、bottom、left

     4、border-style 默认值是none

边框 border

      1、语法： border: 大小 颜色 样式;

        三要素顺序是无所谓

      2、单独设置某一边的边框

        border-top

        border-right

        border-bottom

        border-left

      3、 border-bottom: none;  不要某边边框

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
      .box {
        width: 200px;
        height: 200px;
        background-color: red;
        /* border-width: 10px; */
        /* border-color: transparent  transparent orange transparent ; */
        /* border-color: green; */
        /* border-style: solid; */
        border: green 10px solid;
        /* border-top: 10px solid green;
        border-right:10px solid green ;
        border-bottom:10px solid green ;
        border-left: 10px solid green; */
        border-bottom: none;
      }
    </style>
    <!-- 
    边框（border） 边框用来隔开盒子内部和盒子外部
      设置边框，三个要素，缺一不可   宽度、颜色、样式
        边框的宽度  border-width
          1、可以设置多个值，以空格隔开即可
            4个值   上  右  下  左
            3个值   上  左右   下
            2个值   上下  左右
            1个值    上下左右
          2、单独设置某一边的宽度
          border-top-width: ;  
          border-bottom-width: ;
          border-left-width: ;
          border-right-width: ;
          3、border-width  是由默认值，默认大小在1-3px

        边框的颜色  border-color
          1、可以设置多个值
             规则跟border-width是一样
          2、单独设置某一边的颜色
               border-XXX-color:;
                XXX:top、right、bottom、left
          3、小箭头的写法
          border-color: transparent  transparent orange transparent ;
          4、border-color 有默认值，默认值是黑色
        边框的样式  border-style
           1、边框样式的种类
              solid   实线
              dotted  点状的虚线
              dashed  虚线
              double  双线
          2、可以写多个样式   
          规则跟border-width一样
          3、单独设置某一边样式
            border-XXX-style:;
                XXX:top、right、bottom、left
          4、border-style 默认值是none

     -->
    <!-- 
      边框 border 
      1、语法： border: 大小 颜色 样式;
        三要素顺序是无所谓
      2、单独设置某一边的边框
        border-top
        border-right
        border-bottom
        border-left
      3、 border-bottom: none;  不要某边边框  
    -->
  </head>
  <body>
    <div class="box"></div>
  </body>
</html>

四、盒子模型-内边距

内边距  padding  是边框和内容区之间的距离

1、可以单独设置某一边的内边距

        padding-top:;

        padding-right: ;

        padding-bottom:;

        padding-left:;

 2、内边距padding简写

         可以写多个值，规则跟border-width是一样。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
    <style type="text/css">
      /* 内边距  padding  是边框和内容区之间的距离
      1、可以单独设置某一边的内边距
        padding-top:;
        padding-right: ;
        padding-bottom:;
        padding-left:;
      2、内边距padding简写
         可以写多个值，规则跟border-width是一样
    */
      .box1 {
        width: 200px;
        height: 200px;
        background-color: #bfa;
        border: 10px green solid;
        /* padding-top: 30px;
        padding-right: 30px;
        padding-bottom: 30px;
        padding-left: 30px; */
        padding: 10px 40px;
      }
      /* 创建一个子元素box2占满box1，box2把box1内容区撑满了*/
      .box2 {
        width: 100%;
        height: 100%;
        background-color: red;
      }
      *{
        padding: 0;
        margin: 0;
      }
    </style>
  </head>
  <body>
    <!-- <div class="box1">
      <div class="box2"></div>
    </div> -->
    <ul>
      <li>11</li>
      <li>11</li>
      <li>11</li>
    </ul>
  </body>
</html>

五、外边距

外边距  margin不影响盒子的大小，可以改变盒子的位置。

margin-top   设置元素上外边距，如果正值,元素向下移动,如果负值，元素向上移动

margin-right 设置元素右外边距，元素是没有效果

margin-botoom 设置元素下外边距，正值，元素自己不懂，会挤下面的元素向下移动，负值，下面的元素向上移动

margin-left  设置元素左外边距，正值，元素向右移动，负值，元素向左移动

margin简写：

margin 可以设置多个值，规则跟padding一样。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
    <!-- 
       外边距  margin
          不影响盒子的大小，可以改变盒子的位置
         margin-top   设置元素上外边距，如果正值,元素向下移动,如果负值，元素向上移动
         margin-right 设置元素右外边距，元素是没有效果
         margin-botoom 设置元素下外边距，正值，元素自己不懂，会挤下面的元素向下移动，负值，下面的元素向上移动
         margin-left  设置元素左外边距，正值，元素向右移动，负值，元素向左移动
        
         margin简写
           margin 可以设置多个值，规则跟padding一样

    -->
    <style type="text/css">
      *{
        margin: 0;
        padding: 0;
      }
      .box1 {
        width: 200px;
        height: 200px;
        background-color: #bfa;
        /* margin-top:-50px ; */
        /* margin-left: -50px; */
        /* margin-bottom: 50px; */
        /* margin-right: -5000px; */
        margin: 40px;
      }

      .box2 {
        width: 200px;
        height: 200px;
        background-color: yellow;
      }
    </style>
  </head>
  <body>
    <div class="box1"></div>
    <div class="box2"></div>
  </body>
</html>

六、水平布局

水平方向能影响到inner所占位置的因素有哪些？

margin-left border-left padding-left width padding-right border-right margin-right    

过度约束：

浏览器规定，元素水平方向7个值相加，必须要等与其父元素内容区的宽度，如果不等于，浏览器就会进行调整，让等式成立

margin-left+border-left+padding-left + width + padding-right +

border-right+ margin-right=父元素内容区的宽度

浏览器如何调整：

1、如果水平方向7个值当中没有auto，浏览器会自动调整margin-right的值

    40+20+0+100+0+20+ 420 =600

 2、7个值当中，有3个值可以设置auto，margin-left width margin-right

（1） 设置1个auto   谁是auto，浏览器就调整谁

        margin-left  

          auto+20+0+100+0+20+0=600  auto=460

        width

          40+20+0+auto+0+20+0=600  auto=520

        margin-right

（2）设置2个auto

        margin-left width    调整width

        width margin-right    调整width

        margin-left margin-right   同时调整margin-left margin-right

（3）设置3个auto

        margin-left width margin-right  调整的就是width

  总结：

      1、如果7个值当中有auto，调整的顺序

         width > margin-left margin-right

      2、如果想让块元素水平方向居中，必须要width为固定值，左右外边距为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>
      .outer {
        width: 600px;
        height: 200px;
        border: 10px red solid;
      }
      /*面试题： 什么是过度约束，浏览器是如何调整水平方向值？ */
     /*    
     水平方向能影响到inner所占位置的因素有哪些
margin-left border-left padding-left width padding-right border-right margin-right    
   过度约束：
      浏览器规定，元素水平方向7个值相加，必须要等与其父元素内容区的宽度，
      如果不等于，浏览器就会进行调整，让等式成立
margin-left+border-left+padding-left + width + padding-right + 
border-right+ margin-right=父元素内容区的宽度

40+20+0+100+0+20+0=600
  180 ！= 600
  浏览器如何调整
    1、如果水平方向7个值当中没有auto，浏览器会自动调整margin-right的值
    40+20+0+100+0+20+ 420 =600
    2、7个值当中，有3个值可以设置auto，margin-left width margin-right
     （1） 设置1个auto   谁是auto，浏览器就调整谁
        margin-left  
          auto+20+0+100+0+20+0=600  auto=460
        width
          40+20+0+auto+0+20+0=600  auto=520
        margin-right
    （2）设置2个auto
        margin-left width    调整width
        width margin-right    调整width
        margin-left margin-right   同时调整margin-left margin-right

      设置3个auto
        margin-left width margin-right  调整的就是width

      总结：
      1、如果7个值当中有auto，调整的顺序
         width > margin-left margin-right
      2、如果想让块元素水平方向居中，必须要width为固定值，左右外边距为auto
     */
      .inner {
        width:100px;
        height: 100px;
        background-color: #bfa;
        border: 20px solid green;
        /* margin-left:auto ;
        margin-right:auto; */
        margin: 0 auto;
        padding: 0;

      }
    </style>
  </head>
  <body>
    <div class="outer">
      <div class="inner"></div>
    </div>
  </body>
</html>

qq_47651772
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML,CSS进阶知识（盒子模型）
m0_61213423的博客
11-23 386
文档流文档流（normal flow）网页是一个多层的结构，css可以给每一层设置样式，最终我们看到是最上面的一层。文档流是网页最底下的那一层元素分为两种状态：在文档流中，脱离文档流之前将元素分为三类，块元素、行内元素、行内块元素分别具有一些特点，这些特点都是元素在文档流中的特点块元素：不会独占一行，宽是父元素内容区宽度，高是被内容撑开行内元素；
HTML-div盒子模型
主营前端方向，技术栈是vue
11-09 4463
div盒子模型(边框的border-width宽度，border-color颜色，border-style样式，上右下左四个边框以及简写、内联元素盒子)
2023.2.20
weixin_43550562的博客
10-19 2885
html css 1.让一个div垂直居中 2.css三栏布局 <div class="container"> <div class="left"></div> <div class="main">center</div> <div class="right">right</div> </div> .container{ display: flex; } .left{
css中如何使用子绝父相实现一个盒子嵌套在另一个盒子并且嵌套的盒子居中！
TangMonk的博客
08-10 1275
4. 使用 `top`, `left`, `right`, `bottom` 属性来调整子盒子在父盒子内的位置，以实现居中效果。2. 使用 CSS 将父盒子设置为相对定位（`position: relative;3. 将子盒子设置为绝对定位（`position: absolute;1. 创建一个父盒子和一个子盒子的 HTML 结构。
HTMLCSS学习笔记（六）——CSS盒子模型
qq_45268602的博客
08-08 1196
CSS 盒子模型(Box Model) 所有HTML元素可以看做盒子，在CSS中，“box model”这一术语是用来设计和布局时使用。 CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距、边框、填充和实际内容。盒模型允许我们在其它元素和周围元素边框之间放置元素。 不同部分的说明： Margin(外边距)：清除边框外的区域，外边距是透明的。 Border(边框)：围绕在内边距和内容外的边框。 Padding(内边距)：清除内容周围的区域，内边距是透明的。 Content(内容)：盒子的
css盒子模型相关知识点二
qq_47651772的博客
11-25 387
如果父子元素的垂直外边距相邻了，则子元素的外边距会传递给父元素,导致父元素的位置发生变化，会影响到父元素下面的布局，所以这个问题必须要解决。overflow-x 对水平方向溢出的内容进行设置，垂直方向根据实际需要自动生成。overflow-y 对垂直方向溢出的内容进行设置，水平方向根据实际需要自动生成。scroll 生成双向的滚动条，可以通过滚动条查看完整的内容。如果两个值是负值，谁小听谁的（绝对值谁大听谁的）。visible 默认值 文本正常显示。如果两个值都是正值，谁大听谁的。
css盒子模型基础知识
weixin_61111233的博客
04-13 301
一. CSS的发展简史 　　网页为什么要用div布局?CSS为什么会有盒模型?为什么会有CSS代码?为什么会有网页?为什么会有坑爹的多媒体设计?... ... 　　想知道为什么，这就得了解一点网页的发展历史了。下面请听我娓(zhuang)娓(zhuang)道(bi)来(xian)。
CSS3盒子模型详解
12-13
本章将介绍CSS3中各种盒的知识点；主要包含以下内容： CSS3中各种各样盒的类型概念、浏览器支持情况； 当盒中内容超出容纳范围时，如何利用属性来让浏览器按照自己想要的方式对盒中内容进行显示； 掌握给盒添加阴影...
CSS3:CSS3 知识点提炼整理
05-08
CSS3核心知识点 CSS 选择器 背景 & 颜色 & 边框 字体 & 描边 & 倒影 动画 transform & transition & keyframes @media 媒体查询 flex 弹性盒 width: 50}, CSS进阶顺序 基础 能还原设计稿、兼容各种主流浏览器 盒子...
css盒子模型的讲解
12-03
而是用CSS来排版你的网页，也就是常听的用DIV来编排你的网页结构，又或者说你想学习网页标准设计，再或者说你的上司要你改变传统的表格排版方式，提高企业竞争力，那么你一定要接触到的一个知识点就是CSS的盒子模式...
HTML如何在盒子里设置小盒子,使用css如何将一个小盒子始终固定在大盒子的底部，大盒子高度为100%，请教。...
weixin_34856035的博客
06-25 2613
看下我有没有猜错你的意思； //大容器100% //滚动区域.container{position:relative;height:100%;overflow:hidden;/*.....*/}.wrapper{position:relative;height:auto;/*.....*/}.content{position:relative;height:auto;/*....*/}.refre...
每天一个效果 ：（11）移动的小盒子
liuyang___的博客
04-06 1035
今天我们来制作一个移动的盒子，一个盒子，点击之后，他会向右移动，然后点击停止，便不在动了。 我们来看一下html和css代码 <body> <div id="div"></div> <button>点击开始</button> <button>点击停止</button> </body> <style> *{ margin:
html盒子模型
Hatsune_1的博客
10-12 3587
盒子模型
简单的一个盒子移动到另一个盒子，你用什么方式实现动画效果
sdasadasds的博客
07-21 1371
方法二使用HTML5+CSS3中的animation动画属性结合2d里面的位移translate进行实现。方法一使用HTML+CSS里面的transition过渡动画结合2d的位移translate设置。方法三复杂方法，可以使用js封装一个动画函数，直接使用鼠标移动移入事件或者点击事件触发移动。*陆荣涛前端学习交流Q群858752519。加群备注CSDN推荐。...
html 盒子
NNNNNNI的博客
09-12 1385
盒子
HTML盒模型基础
Zcassie_的博客
02-24 687
盒模型是网页布局的基石，从盒子的内部到盒子的外围分别是： 1.内容（content） 2.内填充（padding） 3.盒子本身（border） 4.外边距（margin） 下面就让我们来说说一些基础的盒模型的css属性 一.内填充（padding） padding的作用：让文本和盒子的周围产生间距，主要控制子元素和盒子内部。 关于 padding的注意事项： （1）padding是长在...
html制作一个立方体
weixin_42576410的博客
01-21 327
可以使用HTML中的div元素和CSS中的transform属性来制作一个立方体。 HTML代码： <divclass="cube"> <div class="face front"></div> <div class="face back"></div> <div class="face left"></d...
在一个盒子里加入长图片，使其图片在盒子内显示JavaScript
2301_76615415的博客
10-30 234
img id="pic" src="./微信图片_20231030111352.jpg" alt="">
详解HTML的盒模型以及HTML相关知识点
rr20060119的博客
10-14 2862
HTML，全称为超文本标记语言（HyperText Markup Language），是一种用于创建网页结构的标记语言。HTML用于描述和定义网页的结构和内容，通过使用标签和属性来标记和组织文档中的各个元素。一个HTML文档由DOCTYPE>文档类型声明、根元素以及头部和主体组成。HTML标签用于定义文档的不同部分和元素，如标题、段落、链接、图像等。每个标签通常有一个起始标签和一个结束标签，并可以包含其他嵌套标签。
css盒子模型知识点
最新发布
12-06
CSS盒子模型的知识点包括以下内容： 1. 盒子模型的四个部分：内容区域、内边距、边框和外边距； 2. 盒子模型的属性：width、height、padding、border、margin等； 3. 盒子模型的标准盒模型和IE盒模型； 4. 盒子模型...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值