精华内容
下载资源
问答
  • 盒子模型代码

    2018-10-09 15:07:18
    简单的html代码盒子模型,只是大概的描述下盒子模型的例子
  • CSS有两种盒子模型:标准盒子模型和ie盒子模型盒子模型如下:所谓的盒子模型,无非就是我们编写html结构代码时的块,有内容(content)、内边距(padding)、边框(border),外边距(margin)。类比类似于下面这枚戒指,...

    CSS有两种盒子模型:标准盒子模型和ie盒子模型

    盒子模型如下:所谓的盒子模型,无非就是我们编写html结构代码时的块,有内容(content)、内边距(padding)、边框(border),外边距(margin)。

    46ef09f102e49687a7b2fb14823c6ef6.gif

    类比

    类似于下面这枚戒指,存储戒指的内部空间我们可以称为content,为了避免戒指被摩擦、压坏,商家都会预留一部分空间避免戒指上方不接触到盒子,这部分的空间叫做padding(内边距)。盒子的外框,这部分大小可以称为border,当快递运送这个戒指(250w,非常珍贵)的时候,为了防止损坏,距离这个盒子50厘米内不准放任何东西,这部分我们也可以称为margin(外边边距)。

    f653a5538b0a2eb3affbc85e06fd6a99.png

    标准模型和ie盒子模型的区别就在于(height:我们平时写代码设置的):

    • 标准盒子模型:原本就预留足够存储戒指的空间(也就是戒指占空间多少)= height
    • 标准盒子模型,块的高度 = height(content)+padding(上下内边距)+border(上下边框)+margin(外边距);
    • ie盒子模型: 原本预留足够存储戒指的空间(content)+为了防止被摩擦、压坏而多预留的空间(padding)+盒子的大小(border)= height;
    • ie盒子模型,块的高度= height(content+padding+border)+margin(上下外边距) (即怪异模式下,width包含了border以及padding;

    CSS盒子模型原理

    • 1、W3C 盒子模型的范围包括 margin、border、padding、content,并且 content 部分不包含其他部分。
    • 2、IE 盒子模型的范围也包括 margin、border、padding、content,和标准 W3C 盒子模型不同的是:IE 盒子模型的 content 部分包含了 border 和 pading。

    转换

    • 设置为标准盒子模型
    box-sizing: border-box;
    • 设置为ie盒子模型
        box-sizing: content-box;

    我们平时更倾向标准盒子模型,因为不用计算,设置高度多大就是内容就多大,边距和边框可以另外设置。

    展开全文
  • 主要介绍了JS Web Flex弹性盒子模型代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
  • jsliang 联系方式一 目录 不折腾的前端,和咸鱼有什么区别目录一 目录二 前言三 举例四 题目 4.1 题目 1:简单描述下盒子模型 4.2 题目 2:计算实际 margin 和 padding二 前言 CSS 盒子模型分为标准盒子和怪异盒子...

    jsliang 联系方式

    33c1f99390b9c44a8868863e2b90325d.png2d565f0f4552342e0fe81fca3fa87b27.png

    一 目录

    不折腾的前端,和咸鱼有什么区别

    目录
    一 目录
    二 前言
    三 举例
    四 题目
     4.1 题目 1:简单描述下盒子模型
     4.2 题目 2:计算实际 margin 和 padding

    二 前言

    CSS 盒子模型分为标准盒子和怪异盒子。

    那么标准盒子和怪异盒子的 widthpaddingborder 以及 margin 是如何相处的呢?

    如何设置一个块为标准盒子或者怪异盒子呢?

    下面我们一一讲解。

    三 举例

    已知有代码:

    html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>盒子模型title>
      <style>div {background: deepskyblue;/* 怪异盒子:100 *//* box-sizing: border-box;  *//* 标准盒子:140 */box-sizing: content-box;width100px;padding10px;border10px solid #ccc;margin10px;
        }
    style>
    head>
    <body>
      <div>盒子模型div>
    body>
    html>

    此刻它在 W3C 标准(标准盒子)下展示为:

    a656339eac260d8c050a3005f0f64f68.png

    在 IE(怪异盒子)下展示为:

    50cd89640d1be5a60b80b93eebe44c19.png

    假设我们编写 JS 脚本如下:

    const div = document.querySelector('div');

    // 如果写在行内,可以获取 100px,当前打印为空
    // (标准盒子和怪异盒子相同,注意带单位的)
    console.log(div.style.width); // 100px || ''

    // 标准盒子:140;怪异盒子:100;(不带单位的)
    console.log(div.offsetWidth); // 100 || 140

    关于 JavaScript 获取 HTML 元素的实际宽度高度:

    1. #div.style.width:这种方法只有在样式写在行内的时候,才能获取到宽度,并且是带单位的:100px。如果不是行内样式,那么获取到的是空的。
    2. #div.offsetWidth:这种方法看盒子模式,如果是 IE 模式的怪异盒子,那么获取到 100(border-box);如果是 W3C 的标准盒子(content-box),那么获取到 140。注意是不带单位的。

    四 题目

    小收集几道题。

    4.1 题目 1:简单描述下盒子模型

    请简单描述下盒子模型?


    考查内容:盒子模型

    答:

    1. CSS 盒子模型分为标准盒子和怪异盒子。
    2. 标准盒子的 contentWidth 等于设置的 width,它的实际总宽度 = width + padding + border + margin。(高度也一样)
    3. 怪异盒子的 contentWidth 等于设置的 width + padding + border,它的实际总宽度 = contentWidth + margin。(高度也一样)
    4. 建议在页面初始化的时候,设置全局 CSS 属性 box-sizing,统一标准。
    • inherit - 继承父元素的值
    • content-box - 指定盒子为 W3C(标准盒子)
    • border-box - 指定为 IE(怪异盒子)。

    4.2 题目 2:计算实际 margin 和 padding

    怪异盒子(border-box)下宽度为 100px,高度为 200px,设置它的 paddingmargin20%,请问它的 paddingmargin 实际为多少?

    <style>div {box-sizing: border-box;width100px;height200px;padding20%;border10px solid #ccc;margin20%;
      }
    style>

    <body>
      <div>怪异盒子div>
    body>

    考查内容:盒子模型 + CSS 百分比

    答:

    开放式题目,有坑,百分比设置是相对于上一个块元素来说的。

    假设 body 下有一个 div,那么这个 div 设置百分占比就是找它上一个 display: block/inline-block 元素,即 body 的宽度(默认 100%)。

    所以这时候需要得知 body 在浏览器中显示的实际宽度,才可以计算出 divpaddingmargin

    所以这道题跟盒子模型无关的!

    既然这样,我们改下题目,假设:

    <style>.div {background: deepskyblue;/* 怪异盒子*/box-sizing: border-box;/* 标准盒子 *//* box-sizing: content-box; */width100px;height200px;padding20%;border10px solid #ccc;margin20%;
    }
    style>

    <div style="display: inline-block">
     <div class="div">
       盒子模型
     div>
    div>

    请问怪异盒子和标准盒子下它的 paddingmargin 是多少?

    • 怪异盒子
    1. 此时父元素(第一个盒子)没有宽度,会被它的子元素撑宽,所以父元素的宽度是 100px。(这个宽度就跟怪异盒子有关,100px.div 盒子的宽度)
    2. 父元素的 20% = 100 * 20% = 20px
    3. 所以此时它的 paddingmargin20px
    • 标准盒子
    1. 此时父元素被子元素撑宽,父元素的宽度是 120px(标准盒子下,120px.div 盒子的 width + 两个 border)
    2. 父元素的 20% = 120 * 20% = 24px
    3. 所以此时它的 paddingmargin24px

    那么高度呢?请计算一下!


    jsliang 的文档库由 梁峻荣 采用 知识共享 署名-非商业性使用-相同方式共享 4.0 国际 许可协议 进行许可。
    基于 https://github.com/LiangJunrong/document-library 上的作品创作。
    本许可协议授权之外的使用权限可以从 https://creativecommons.org/licenses/by-nc-sa/2.5/cn/ 处获得。

    展开全文
  • 目录普通盒模型一个盒子模型包括以下东西怪异盒模型ie6兼容性问题什么是css hack盒子高度不能低于默认字体高度普通盒模型CSS 盒子模型(Box Model),所有HTML元素可以看作盒子,在CSS中,"box model"这一术语是用来...

    ece03b4664acb456a4f02e8128828abd.png

    目录

    普通盒模型
    一个盒子模型包括以下东西
    怪异盒模型
    ie6兼容性问题
    什么是css hack
    盒子高度不能低于默认字体高度

    普通盒模型

    CSS 盒子模型(Box Model),所有HTML元素可以看作盒子,在CSS中,"box model"这一术语是用来设计和布局时使用。CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:边距,边框,填充,和实际内容。盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。

    一个盒子模型包括以下东西

    content(内容区)、border(边框)、padding(内边距)、margin(外边距)
    #box{
    	width: 200px;
    	height: 200px;
    	background-color: red;
    	padding: 50px;
    	border: 10px solid green;
    	margin: 50px 0 0 50px;
    }
    
    <div id="box"></div>

    示意图:

    c99fad7a8db2716375a0988458593be6.png
    谷歌浏览器下的盒模型效果
    • margin(外边距): 清除边框区域。margin没有背景颜色,它是完全透明
    • border(边框):边框周围的填充和内容。边框是受到盒子的背景颜色影响
    • padding(内边距): 清除内容周围的区域。会受到框中填充的背景颜色影响
    • content(内容):盒子的内容,显示文本和图像

    最终元素的总宽度计算公式是这样的:

    总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距 

    元素的总高度最终计算公式是这样的:

    总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距 

    怪异盒模型

    标准模式是指,浏览器按W3C标准解析执行代码。怪异模式则是使用浏览器自己的方式解析执行代码,因为不同浏览器解析执行的方式不一样,所以我们称之为怪异模式。目前几乎所有主流浏览器都是使用的是普通盒模型。而在ie6以下则都是怪异盒模型。

    ie6兼容性问题

    浏览器解析CSS的两种模式:正常模式和怪异模式。

    正常模式:宽高确定后,添加内边距,border盒子集体外扩。
    怪异模式:宽高确定后,添加内边距,border盒子会向内自减,实际书写内容区域变小。

    正常状态下显示效果

    3073d92d3b86c0530b2189e82a933d16.png

    怪异状态下显示效果

    f62980cc88d0a7de6c7c54c19bfa67c2.png

    那遇到这种情况怎么解决呢?这才是重点,我之前对于这个问题百度了一下,发现大多数的答案那是要加文档dtd,而我测试的结果则是失败。所以我又想了一个方案,可以解决这个问题。那就是利用css hack的方式去改变元素的width和height。

    .box{
        width: 200px;
        height: 200px;
        padding: 50px;
        background-color: red;
        _width: 300px;
        _height: 300px
    }  

    这种方法的思路很简单,在ie6以下,给它在padding它是内减的,所以我们直接把它减去的宽高直接又加到该元素宽高上,使用css hack,_width和_height这两句样式只有在ie6下才会起作用,把这两句放在最后,根据后者覆盖前的特点,就能解决这个问题。如果项目要兼容ie6就用这种方式,不然少用为妙,css hack本来就是针对一些老浏览器而存在的。

    解决方案:如果项目要兼容ie5、6,则需要使用css hack

    什么是css hack

    CSS hack由于不同厂商的浏览器,比如Internet Explorer,Safari,Mozilla Firefox,Chrome等,或者是同一厂商的浏览器的不同版本,如IE6和IE7,对CSS的解析认识不完全一样,因此会导致生成的页面效果不一样,得不到我们所需要的页面效果。 这个时候我们就需要针对不同的浏览器去写不同的CSS,让它能够同时兼容不同的浏览器,能在不同的浏览器中也能得到我们想要的页面效果。简单的说,CSS hack的目的就是使你的CSS代码兼容不同的浏览器。当然,我们也可以反过来利用CSS hack为不同版本的浏览器定制编写不同的CSS效果。

    我之前也写过关于css hack的东西,有兴趣可以参考一下:

    路奇:HTML之判断IE版本zhuanlan.zhihu.com
    daf83708b71697813b185267e16de0bf.png

    盒子高度不能低于默认字体高度

    ie5、6默认是18px,也就是你元素设置的高度最少也要是18px,如果低于18px就以18px显示。其它浏览器照常显示。解决方案也是有的:就是在元素上加上_font-size。这个也是只有在ie6以下才会显示 ,和font-size的效果是一样的。

    4b47d4c9037eca0bc90ba2d6d274287e.png
    解决方案:要设置高度的盒子单独设置一个字号属性,属性值小于或者等于要设置的盒子高度

    c33e575f3a056a181439531efd10534c.png

    20ab3ac21b3d883c7e664baecf1b3a03.png
    展开全文
  • 1.什么是css模型?css的盒模型由里到外包括:content,padding,border,margin4部分,如图所示。...W3C标准盒子模型(content-box): width=内容宽度IE盒子模型(border-box):边框才是盒子的边界。IE盒子模型(b...

    1.什么是css模型?

    css的盒模型由里到外包括:content,padding,border,margin4部分,如图所示。

    4c0fe3224a9313f2735b8589dcc6e22e.png

    css的盒模型有两种:IE盒模型和标准盒模型

    2.两种盒模型的区别

    • W3C标准盒子模型(content-box):内容就是盒子的边界。
    • W3C标准盒子模型(content-box): width=内容宽度
    • IE盒子模型(border-box):边框才是盒子的边界。
    • IE盒子模型(border-box): width=内容宽度+padding+border

    3.如何设置两种盒模型

    在不设置box-sizing的情况下,box-sizing默认是content-box。

    /* 标准模型 */
    box-sizing:content-box;
    
     /*IE模型*/
    box-sizing:border-box;

    4.margin合并

    margin合并:如果两个box都设置了外边距,那么在垂直方向上,两个box的外边距会发生重叠,以绝对值大的那个为最终结果显示在页面上。

    哪些情况会发生margin合并

    • 父子margin合并

    如果子元素设置了外边距,在没有把父元素变成BFC的情况下,父元素也会产生外边距,给父元素添加 overflow:hidden 这样父元素就变为 BFC,不会随子元素产生外边距,但是父元素的高会变化。

    • 兄弟margin合并

    同级(兄弟)元素在垂直方向上外边距会出现重叠情况,最后外边距的大小取两者绝对值大的那个

    注意:行内元素没有margin-top或margin-bottom,也就是说,在行内元素上设置margin-top或margin-bottom是不起作用的。

    5.BFC

    BFC(Fomatting Context)是块级格式化上下文的意思。它是 CSS 2.1 规范中的一个概念,它决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用。

    触发BFC的条件

    • 浮动元素(float除了node以外的值)
    • 定位元素(position: absolute/ fixed)
    • display(值为inline-block/ table-cell/- table-caption/ flex/ inline-flex)
    • overflow(值为hidden/atuo/srcoll)设置有这些属性的box,都会产生BFC

    BFC特性

    • 内部的盒子在垂直方向上一个接一个地放置
    • 垂直方向上地距离由margin决定,在同一个BFC的box中,相邻的两个box边距会重叠
    • BFC的区域不会与float box重叠
    • 计算BFC的高度时,浮动元素也参与计算
    • BFC就是一个独立的容器,里面的子元素不受外面的元素影响

    BFC的作用

    1.解决margin重叠问题(添加独立BFC)

    看下面例子

    未设置BFC之前

     CSS代码
     .child{
        width: 100px;
        height: 100px;
        background-color: orange;
        margin: 30px;
    }
    ​
    html代码
    <div class="child"></div>
    <div class="child"></div>

    设置BFC后

     CSS代码
    .child{
        width: 100px;
        height: 100px;
        background-color: orange;
        margin: 30px;
    }
    .bfc{
        overflow: hidden;
    }
    ​
    html代码
    <div class="child"></div>
    <div class="bfc">
        <div class="child"></div>
    </div>

    设置BFC后,第一个child的margin-bottom不会和第二个child的margin-top重叠,这也是BFC元素的另一个原则,不会影响到外边的box,是一个独立的区域。

    效果图对比

    47a67b8a500a23917b98c692f8d99915.png

    2.解决浮动高度塌陷问题(在父元素添加overflow:hidden)

    当我们不给父元素设置高度,子元素设置了浮动的时候,会发生高度塌陷,代码和效果图如下。

    效果图:

    6fd205bca11170a0b755ab494a3e555f.png
    CSS代码
    .father {
        border: 5px solid rgb(91, 243, 30);
        width: 460px;
        
    }
    .child{
        width: 200px;
        height: 200px;
        border:5px solid orange;
        float: left;
    }
    ​
    html代码
    <div class="father">
        <div class="child"></div>
        <div class="child"></div>
    </div>

    当我们在父元素的样式中加入overflow:hidden,就能解决float高度塌陷问题。

    CSS代码
    .father {
        border: 5px solid rgb(91, 243, 30);
        width: 460px;
        overflow: hidden;
    }
    .child{
        width: 200px;
        height: 200px;
        border:5px solid orange;
        float: left;
    }
    ​
    html代码
    <div class="father">
        <div class="child"></div>
        <div class="child"></div>
    </div>

    效果图就会发生变化

    815a36e5b26f617c151403c9c2e0e5ba.png

    以上便是对CSS盒模型的理解,如有不对的地方,请指出。

    展开全文
  • 目录普通盒模型一个盒子模型包括以下东西怪异盒模型ie6兼容性问题什么是css hack盒子高度不能低于默认字体高度普通盒模型CSS 盒子模型(Box Model),所有HTML元素可以看作盒子,在CSS中,"box model"这一术语是用来...
  • 今天带大家快速理解盒子模型,直接上代码:<!doctype html><html> <head> <meta charset="utf-8" /> <title>css盒子</title> <meta name="keywords" content="关键词,...
  • 这里我尽量用少一点的言语把这事儿给说清楚,尽量不拿代码说事儿。1、盒模型有几种?答:有两种盒模型,分别是IE盒模型(border-box) 和 W3C标准盒模型(content-box)。2、为什么会有盒模型?答:为了方便Web前端...
  • 今天带大家快速理解盒子模型,直接上代码:<!doctype html><html> <head> <meta charset="utf-8" /> <title>css盒子</title> <meta name="keywords" content="关键词,...
  • 这里我尽量用少一点的言语把这事儿给说清楚,尽量不拿代码说事儿。1、盒模型有几种?答:有两种盒模型,分别是IE盒模型(border-box) 和 W3C标准盒模型(content-box)。2、为什么会有盒模型?答:为了方便Web前端...
  • ? 设置2个属性值时前者为上下padding的值后者为左右padding的值 ? 设置3个属性值时第1个为上padding的值第2个为左右padding的值第3个为下padding的值 ? 设置4个属性值时按照顺时针方向依次为上右下左padding的值 ...
  • 模型是CSS的基础中的基础。 因为它的重要性,所以很多面试中都会提到。它也成为了考察求职者基本素质的一道题。属于绝对的经典问题。这样描述,相信大家能意识到盒模型的重要性了吧。然而,在面试的过程中,我发现...
  • CSS盒子模型与怪异盒模型 盒子模型(Box Modle)可以用来对元素进行布局,包括内边距(padding),边框(border),外边距(margin),和实际内容(content)这几个部分。标准盒模型 标准盒模型中盒子的大小是指:content + ...
  • 模型是CSS的基础中的基础。 因为它的重要性,所以很多面试中都会提到。它也成为了考察求职者基本素质的一道题。属于绝对的经典问题。这样描述,相信大家能意识到盒模型的重要性了吧。然而,在面试的过程中,我发现...
  • 简单css盒子模型代码

    千次阅读 2018-11-29 18:15:17
    Document header(.logo+nav)> mian article section section section aside ul>li ul>li ul>li ...代码有点冗杂,多多指。
  • <div>div><style>div{width:200px;height:100px;border:5pxsolid#000;padding:20px;...代码很简单,就是一个200px * 100px(长 * 高)的div,其边框5px,padding值20px。效果如下:效果图这里...
  • 来源:https://juejin.cn/post/6844903505983963143作者:哆来咪erCSS的...可以认为每个html标签都是一个方块,然后这个方块又包着几个小方块,如同盒子一层层的包裹着,这就是所谓的盒模型。盒模型分为IE盒模型和W3...
  • 其实在文档解析过程中每个元素都会被描述为一个盒模型,然后一个盒子套进另外一个盒子,又会按照某种神秘的规则摆放,最后才形成了井井有条的页面。简单盒模型通常情况下,被更多人认知的盒模型就是简单盒模型,简单...
  • 来源:https://juejin.cn/post/6844903505983963143作者:哆来咪erCSS的...可以认为每个html标签都是一个方块,然后这个方块又包着几个小方块,如同盒子一层层的包裹着,这就是所谓的盒模型。盒模型分为IE盒模型和W3...
  • 其实在文档解析过程中每个元素都会被描述为一个盒模型,然后一个盒子套进另外一个盒子,又会按照某种神秘的规则摆放,最后才形成了井井有条的页面。简单盒模型通常情况下,被更多人认知的盒模型就是简单盒模型,简单...
  • CSS盒子模型与怪异盒模型盒子模型(Box Modle)可以用来对元素进行布局,包括内边距(padding),边框(border),外边距(margin),和实际内容(content)这几个部分。标准盒模型标准盒模型中盒子的大小是指:content + ...
  • 模型使用技巧及相关问题margin相关技巧1、设置元素水平居中: margin:x auto;2、margin负值让元素位移及边框合并理解练习1、制作一个600*100的盒子,边框1像素黑色,距离浏览器顶部100px,水平居中。2、制作下面的...
  • 昨天的章节看过了盒模型的填充(内边距)和边框,以及不占据空间的轮廓,由于 CSS 3 引入了一些相对方便的新属性,这一章节除了继续来看盒模型的(外)边距以及尺寸,也要看看弹性盒子。1 边距Margin (外)边距是...
  • 来源 | ...可以认为每个html标签都是一个方块,然后这个方块又包着几个小方块,如同盒子一层层的包裹着,这就是所谓的盒模型。盒模型分为IE盒模型和W3C标准盒模型...
  • 来源 | ...可以认为每个html标签都是一个方块,然后这个方块又包着几个小方块,如同盒子一层层的包裹着,这就是所谓的盒模型。盒模型分为IE盒模型和W3C标准盒模型...
  • 动画视频:如何理解盒子模型文字解析:在上一节里面我们知道了文档流和网页中的DOM都可以看作是盒子而无论是文档流还是网页状态,要把一些元素比如H1 H2 H3放到另外一个元素中都需要他们属于这个元素的子节点,这个...
  • 在前端程序员眼中,页面其实可以被视为一个个盒子组成的那么,这些盒子是如何构建起整个页面的呢?动画视频:文字解析:在上一节里面我们知道了文档流和网页中的DOM都可以看作是盒子而无论是文档流还是网页状态,要...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,195
精华内容 478
关键字:

盒子模型代码