精华内容
下载资源
问答
  • 关于HTML的标准盒模型知识点汇总以及总结 盒模型 盒模型是css布局的基石,它规定了网页元素如何显示以及元素间相互关系。css定义所有的元素都可以拥有像盒子一样的外形和平面空间. 盒模型的组成:内容区、补白/填充...

    关于HTML的标准盒模型知识点汇总以及总结

    盒模型

    盒模型是css布局的基石,它规定了网页元素如何显示以及元素间相互关系。css定义所有的元素都可以拥有像盒子一样的外形和平面空间.
    盒模型的组成:内容区、补白/填充、边框、边界/外边距。

    通俗的来说,元素在页面中显示就像是一个盒子一样
    由内容content 内填充padding 边框border 以及外边距margin组成
    如何计算元素在整个页面中显示的大小
    宽:margin-left+margin-right+border-left+border-right+paddding-left+padding-right+content本身的宽度
    同理可得如何计算元素在页面中的总高度为:
    margin-top+margin-bottom+border-top+border-bottom+paddding-top+padding-bottom+content本身的高度

    标准盒模型的大小

    以下分别介绍盒模型中的各个属性

    padding

    首先介绍padding padding是盒模型中的内填充
    padding的作用:控制子元素在父元素里面的位置关系。
    如果想让盒子保持原有的大小:在宽高基础上减掉。(如果一个元素是被内容撑开的,没有设置固定的宽高,padding直接撑开。不用减掉)

    ---------------------------以下为举例-------------------------------------------------
    如:一个块元素div我们将他的宽高分别设置为width:200px;height:300px
    给元素加上padding属性的话,如:padding:10px;
    那么padding将会将整个块元素给撑大,那么此时,div的所占据的空间将为width:220px;height:220px;
    如果要使得块元素占据的空间大小不变的话,那么要将div的宽高分别减去20px;

    -------------------------分割线---------------------------------------------------------
    padding的添加方法:
    如果给单一方向添加padding
    padding-top/bottom/left/right
    padding的设置特点:
    padding:30px; 四周
    padding:10px 30px; 上下 左右
    padding:10px 30px 50px 上 左右 下
    padding:10px 30px 50px 100px 上右下左
    7:padding不会对背景图的位置造成影响。

    margin
    之后我们来介绍margin margin是盒模型中的外边距
    margin作用:控制元素与元素之间的间距。
    注!!与padding不同的是,margin在元素的外侧,想当与元素与元素之间的间距,并不会撑开元素本身的大小

    margin的设置方法:
    给单一方向添加margin
    margin-left/right/top/bottom
    margin用法
    (外边距、边界)
    margin设置方法:
    margin:30px; 四周
    margin:10px 30px; 上下 左右
    margin:10px 30px 50px 上 左右 下
    margin:10px 30px 50px 100px 上右下左
    margin:0 auto;
    让当前元素在父元素里面左右居中

    重点:
    margin常出现的bug
    a:两个相邻元素上下的margin值 不会叠加 按照较大值设置。
    b:如果父元素和第一个子元素没有浮动的情况下,给第一个子元素添加margintop,会错误放在父元素上面。

    拓展:如果要消除margin的叠加bug,需要使用到bfc。

    以上为盒模型的部分知识点汇总,谢谢各位看官的浏览,拜谢~

    展开全文
  • 今天来探究一下box 盒子模型的问题: 盒子模型html设计页面时常出现一个知识,对于不同盒子模型可以实现不同功能,来方便我们来做页面...关于标准盒子模型的实例 .Standard{ /*标准盒子*/ backgroun...

    今天来探究一下box 盒子模型的问题:
    盒子模型是html设计页面时常出现的一个知识,对于不同的盒子模型可以实现不同的功能,来方便我们来做页面的设计。首先我们放置两个div,通过设置两个不同属性的div来观察其属性的变化和探究两个盒子模型的区别。

    					****标准盒子模型与怪异盒子模型:****
    
    关于标准盒子模型的实例
    
    .Standard{		/*标准盒子*/
    				background-color: chartreuse;
    				width: 300px;
    				height: 300px;
    				margin:20px ;
    				padding: 20px;
    				border: 20px;
    			}
    

    标准盒子
    设置的width=300px hight=300px
    观察标准盒子内容区可得hight=“设置的hight”
    width=“设置的width”
    所以标准盒子模型设置的宽高等于内容区的宽高

    关于怪异盒子模型实例
    
    .Weird{			/*怪异盒子*/
    				box-sizing: border-box;
    				background-color:chartreuse;
    				width: 300px;
    				height: 300px;
    				margin:20px ;
    				padding: 20px;
    				border: 20px;
    

    在这里插入图片描述
    设置的width=300px hight=300px
    而怪异盒子模型内容区宽高为260px这与设置的300px所差的40差在了margin+border+padding=40上。
    所以设置的宽高=内容区+padding+border+margin
    怪异盒子设置的宽高等于实际盒子的宽高而并非内容区的宽高

    这两种盒子模型的区别:
    标准盒模型:这种盒模型设置width的时候的值是内容区的宽度,如果再设置padding和margin,border的话盒子的实际宽度会增大。
    怪异盒模型:这种盒子的width设置的值为盒子实际的宽度,border和padding的设置不会影响盒子的实际宽度和高度。

    展开全文
  • 关于盒子模型

    2020-07-30 02:49:26
    1.盒模型/盒子模型/框模型(box model) (1)css将页面所有元素都设置为一个矩形盒子 (2) 将元素设置为矩形盒子后,对页面布局就变成将不同盒子摆放到不同位置 2.每个盒子组成部分有: (1)内容区...

    一.什么是盒子模型

    1.盒模型/盒子模型/框模型(box model)
    (1)css将页面所有元素都设置为一个矩形的盒子
    (2) 将元素设置为矩形的盒子后,对页面的布局就变成将不同的盒子摆放到不同的位置

    2.每个盒子的组成部分有:
    (1)内容区(content)
    (2)内边框(padding)
    (3)边框(border)
    (4)外边框(margin)

    3.介绍一个简单的盒子模型:`

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>盒子模型</title>
        <style>
            .ass {
                /* 
                内容区(content),元素中的所有子元素和文本内容都在内容区排列
                    -内容区的大小有width和height两个属性来设置
                        width来设置内容的宽度
                        height来设置内容的高度
                 */
                width: 300px;
                height: 300px;
                background-color: blueviolet;
    
                /* 
                边框(border)属于盒子的边缘,边框里边属于盒子内部,出了边框都是盒子的外部要设置边框,需要至少设置三个样式:
                        边框的宽度 (border-width)
                        边框的颜色 (border-color)
                        边框的样式 (border-style)
                */
    
                border-width: 8px;
                border-color: darkred;
                border-style: solid;
            }
        </style>
        
    </head>
    <body>
        <!-- 
            盒模型/盒子模型/框模型(box model)
            -css将页面所有元素都设置为一个矩形的盒子
            -将元素设置为矩形的盒子后,对页面的布局就变成将不同的盒子摆放
               到不同的位置
            -每个盒子的组成部分有:
                                内容区(content)
                                内边框(padding)
                                边框(border)
                                外边框(margin)
         -->
    
    
        <div class="ass"></div>
    </body>
    </html>
    

    4.页面效果
    在这里插入图片描述

    展开全文
  • 标准w3c盒模型图示 关于怪异盒模型和标准盒模型的对比 关于怪异盒模型盒标准盒模型之间转换 转载于:https://www.cnblogs.com/paradise-zzz/p/8458087.html...

    标准w3c盒模型图示

    关于怪异盒模型和标准盒模型的对比

     

    关于怪异盒模型盒标准盒模型之间的转换

    转载于:https://www.cnblogs.com/paradise-zzz/p/8458087.html

    展开全文
  • 关于CSS中盒子模型

    2020-08-06 20:13:13
    CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:边距,边框,填充,和实际内容。 盒模型允许我们在其它元素和周围元素边框之间空间放置元素。 内容区 + padding + border + margin box-sizing: ...
  • 1、盒模型的基本概念:CSS盒子模型也叫做框模型,具备内容(content)、填充(padding)、边框(border)、边界(margin)这些属性。在CSS中,每一个元素都被视为一个框,而每个框都有三个属性: border:元素边框(可能不...
  • 关于盒模型1

    2020-12-16 17:40:25
    盒模型的结构 content(内容):用来显示内容 padding(内边距):内容与边框之间距离 border(边框):元素边框 margin(外边距):元素与元素之间距离(兄弟关系,父子关系) 盒子宽=width + 左右padding + 左右border ...
  • 关于js-盒模型

    2020-02-25 22:02:25
    简单点说,盒模型就是在结构中对于一定区域划分,我们可以通过css对它进行大小、形状等等设置,对于盒模型本身而言,它也可以分为四个部分: 一:内容是指我们所放入信息所占有区域(图片、文本、视频等等)。...
  • 关于盒模型

    2018-08-18 12:22:00
    层叠 盒模型 实体字符 在HTML中,有些字符会被浏览器特殊处理 如<>会被浏览器认为是标记符号,不会显示到页面中 如果是空白字符,会被浏览器折叠为一个空格 实体字符可用于显示HTML中具有特殊含义字符 ...
  • 今天这篇文章写一下自己关于前端中基础的CSS盒子模型中的一些注意事项。之前写页面时。HTML的结构完全没有问题。可是到了后面加CSS样式时,关于marging,padding中就总有问题解决不了。每次好不容易写完这块,写到...
  • 定义了一个div,设置了一张背景图片,这个div用于放置图片,图片宽度及高度是确定,如果不设置图片标签padding属性那么背景图片图案就显示不了。当设置了图片标签padding属性后,背景图片图案可以正常...
  • DOCTYPE html&gt; &lt;html&gt;  &lt;head&gt;  &lt;meta charset="UTF-8"&gt;  &lt;link rel="shortcut icon" href="img/mynote.ico" /&gt...
  • 盒模型是浏览器位页面中每个HTML元素生成矩形盒子,这些盒子都是要按照可见版式模型在页面上排布,而且每个盒子边框是不可见,背景也是透明。所以它有控制属性和元素属性这两种属性来对它进行一个包装和...
  • https://www.cnblogs.com/smyhvae/p/7297736.html#4147305
  • 如果想熟练掌握DIV和CSS布局方法,首先要对盒模型有足够了解。每个HTML元素都可以看作一个装了东西盒子,盒子里面内容到盒子边框之间距离即填充(padding),盒子本身有边框(border),而盒子边框外和...
  • 盒模型

    2020-02-22 18:05:06
    关于盒模型 盒模型是在CSS中常用一种布局基础,制定了一个元素可以在页面中如何显示,让使用CSS变得更加容易。盒子模型由四个部分组成:内容(content)...利用盒模型通过定义一系列相关属性可以在整个HTML文档...
  • HTML盒模型基础

    2020-02-24 00:04:00
    下面就让我们来说说一些基础的盒模型的css属性 一.内填充(padding) padding的作用:让文本和盒子的周围产生间距,主要控制子元素和盒子内部。 关于 padding的注意事项: (1)padding是长在...
  • 首先,盒模型一共有2种模式,分别是 符合W3C标准的‘标准盒模型’ 和 在IE下的‘怪异盒模型’。 我们知道无论是哪个模型,一个盒子的 总宽度 = content(内容) + padding + border 。 在html的首部,我们经常会看到...
  • 第一问:什么是盒模型?可以说,页面就是由一个个盒模型堆砌起来的,每个HTML元素都可以叫做盒模型,盒模型由外而内包括:边距(margin)、...但是,盒模型有标准盒模型和IE的盒模型。如果你打出来这两种,第二问:两...
  • css两种盒模型

    万次阅读 多人点赞 2018-03-24 15:15:34
    初学 css 时候 div 一些宽高问题经常会引起一些不好理解问题,这里做一个关于css盒模型的分享。 问题 下面代码可以直接复制出去运行哦 &lt;!DOCTYPE html&gt; &lt;html lang=&...
  • 看到一篇不错文章 就转载过来了 说得全面 https://www.cnblogs.com/ylliap/p/6119740.html点击... 关于盒模型的使用 在最初接触CSS时候,对于CSS盒模型的不了解,撞了很多次南墙呀。盒模型是网页布局基...
  • 第一问:什么是盒模型?可以说,页面就是由一个个盒模型堆砌起来的,每个HTML元素都可以叫做盒模型,盒模型由外而内包括:边距...但是,盒模型有标准盒模型和IE的盒模型。如果你打出来这两种,第二问:两者的区别是...
  • 下面是自己积累和总结的关于css盒子模型的知识^_^,希望对初学者有用。一、css盒子模型概念CSS css盒子模型 又称框模型 (Box Model) ,包含了元素内容(content)、内边距(padding)、边框(border)、外边距(margin)几个...
  • 盒子模型

    2017-09-22 20:39:08
    来自:...下面是自己积累和总结的关于css盒子模型的知识^_^,希望对初学者有用。 一、css盒子模型概念 CSS css盒子模型 又称框模型 (Box Model) ,包含了元素内容(conte
  • HTML中margin与padding区别我们以DIV为一个盒子为例,既然和现实生活中盒子一样,那我们想一下,生活中盒子内部是不是空好用来存放东西,而里面存放东西区域我们给他起个名字叫“content(内容)”,而盒子...
  • 文章目录盒子模型内边距(padding)边框 (border)外边距(margin)外边距塌陷盒子模型内嵌内嵌盒子外边距塌陷标准文档流标准文档流将HTML分成三种浮动(flot)元素贴靠字围效果收缩浮动嵌套 盒子模型 盒子:可以...
  • 关于CSS3中弹性和模型模块中弹性容器和弹性项目属性总结 针对弹性“容器” 将容器设置为弹性容器 使用display属性设置弹性容器 display:flex; /* 将容器设置为弹性容器后,其中所有子代标签将成为弹性项目 */ ...
  • CSS 盒子模型

    2017-06-19 15:25:58
    今天学到了“盒子模型”的课程,终于快要解开我关于...但是元素是基于html总框架下每一行的内容都属于html的元素,内容加上相应的内边距、边框和外边距才成为一个元素,也就是一个盒子模型。 因此一个元素实际宽度(
  • 考核内容:有关于CSS盒模型知识题发散度: ★试题难度: ★解题思路:CSS 盒子模型(Box Model)所有HTML元素可以看作盒子,在CSS中,"box model"这一术语是用来设计和布局时使用。CSS盒模型本质上是一个盒子,封装周围...
  • 浏览器渲染引擎通过盒模型的方式来布局html元素。我们可以将每一个html元素都看做是一个盒子,每一个盒子都有长和款,多个这样盒子组成了我们网页。 Margin,Border,Padding 每一个盒子都会有margin,border和...

空空如也

空空如也

1 2 3 4 5 ... 11
收藏数 202
精华内容 80
关键字:

关于html的盒模型