精华内容
下载资源
问答
  • css盒子模型的理解

    2019-09-14 05:32:39
    本文转载于:猿2048网站css盒子模型的理解 盒子模型是相对于块级元素而言的。 什么是块级元素,具有margin,padding等属性,能够改变大小的的元素。这里就提出一个问题,各种元素之间的区别和联系? 盒子模型的...

    本文转载于:猿2048网站css盒子模型的理解

    盒子模型是相对于块级元素而言的。

             什么是块级元素,具有margin,padding等属性,能够改变大小的的元素。这里就提出一个问题,各种元素之间的区别和联系?

    盒子模型的主要属性

    width、height、padding、border、margin

    margin-left ,margin-right都一样。padding-left,也是类似的。

    一张图说明下这五个属性的区别

     1358009-20180322103547178-355235403.png

    转载于:https://my.oschina.net/u/4191619/blog/3097209

    展开全文
  • CSS 对于盒模型的理解

    2020-11-18 11:08:16
    box-sizing 可以设置元素盒子模型;默认为 content-box ; { width: 100px; height: 100px; padding: 20px; margin: 20px; border: 1px solid #ccc; } content-box:这里设置盒子宽度 width 就专指盒子...

    box-sizing 可以设置元素的盒子模型;默认为 content-box ;

    {
        width: 100px;
        height: 100px;
        padding: 20px;
        margin: 20px;
        border: 1px solid #ccc;
    }
    •  content-box:这里设置盒子宽度 width 就专指盒子内容的宽度 width ;

    • border-box:这里设置盒子宽度 width 则等于 border + padding + content ;

     

     

     

     

    展开全文
  • CSS盒子模型理解

    2016-04-01 13:14:13
    盒子模型刚开始接触html的时候对于盒模型的理解还不够清晰,弄清楚后其实发现特别的简单,其实就是想象一个房间,里面放一张床,这个床的位置,通过magin和padding来自己定位。 margin也就是外边距,容器到外边的...

    盒子模型

    刚开始接触html的时候对于盒模型的理解还不够清晰,弄清楚后其实发现特别的简单,其实就是想象一个房间,里面放一张床,这个床的位置,通过magin和padding来自己定位。
    margin也就是外边距,容器到外边的距离
    padding也就是内边距,容器到容器内的距离
    一个完整的盒子是由外边距加内边距加容器加边框的距离


    先上个经典图
    

    盒模型


    举个栗子

    <div class="container">内容</div>
        .container{
                width: 200px;
                height: 100px;
                background-color: yellow;
                text-align: center;
                line-height: 100px;
                padding: 10px;
                margin: 40px;
                display:inline-block;
            }

    栗子

    整个内容区算在灰绿色加绿色里面,padding撑开了容器的大小,margin就是外面橘色的距离
    整个盒子的大小就是
    宽度:外边距40px *2+内边距10px *2+内容宽200px = 300px;
    高度:外边距40px *2+内边距10px *2+内容高100px = 200px;

    其实还是很好理解的

    展开全文
  • 盒子模型对于css的作用可以用下面两个图来比喻 二、理解以及使用 盒子模型的类型分为两类①:W3C标准的盒子模型(标准盒子模型),表示方法box-sizing:content-box,②另一种是IE盒子模型(怪异盒子模型),...

    一、盒子模型在前端中的作用

    盒子模型在css中的作用可以用下面两个图比喻
    在这里插入图片描述在这里插入图片描述

    二、理解以及使用

    盒子模型的类型分为两类①:W3C标准的盒子模型(标准盒子模型),表示方法box-sizing:content-box,②另一种是IE盒子模型(怪异盒子模型),表示方法:boxsizing:border-box。所以盒子模型可以从这两种类型去理解和使用。

    ①标准盒子模型:content-box

    如图设置父级盒子属性为:

    .father{
    			width: 200px;
    			height:200px;
    			border:1px solid black;
    			margin: auto;
    			padding:10px;
    			background: red;
    			box-sizing:border-box;}
    

    如盒子属性示意图和效果图content(内容区域),padding为内边距,border为盒子模型边框,margin为外边框,给父级元素的content(内容区域)拐角增加四个子元素作为参照。
    在这里插入图片描述
    将标准盒子模型的内边距padding由10px改为50px,如图,父元素区域向外扩40px,而content(子元素活动区域不变)
    在这里插入图片描述
    改变边框border与改变padding内边距对标准盒子模型布局效果相同。

    ②怪异盒子模型:border-box

    如图设置父级盒子属性为:

    .father{
    			width: 200px;
    			height:200px;
    			border:1px solid black;
    			margin: auto;
    			padding:10px;
    			background: red;
    			box-sizing:border-box;}
    

    如盒子属性示意图和效果图content(内容区域),padding为内边距,border为盒子模型边框,margin为外边框,给父级元素的content(内容区域)拐角增加四个子元素作为参照。
    在这里插入图片描述在这里插入图片描述
    将怪异盒子模型的内边距padding10px改为40px,子元素/内容区域向内收缩30px,但父元素仍为200px。
    在这里插入图片描述
    怪异盒子模型改变border与改变padding的布局效果相同。
    总结:①怪异盒子模型可以通过改变父级元素的padding或者border而去影响content(内容区域/子元素)的布局,但父级元素布局面积区域不会改变
    ②标准盒子模型不可以通过改变父级元素的padding或者border而去影响content(内容区域/子元素)的布局,父级元素布局面积区域会改变。

    附:此布局中作为参照内容区域中四个子元素使用了flex布局,代码分享如下:

    <style type="text/css">
    		.father{
    			display: flex;
    			flex-wrap:wrap;
    		}
    	
    		.father{
    			width: 200px;
    			height:200px;
    			border:1px solid black;
    			margin: auto;
    			padding:40px;
    			background: red;
    			box-sizing:border-box;
    			
    
    		}
    	
    	    .son{
    			
    			width: 30px;
    			height:30px;
    			line-height: 30px;
    			border:1px solid blue;
    			background: black;
    			box-sizing:border-box;
    			color:white;
    			text-align:center;
    			
    			
    		}
    		.item1{
    			width:100%;
    			display:flex;
    			justify-content:space-between;
    		}
    		.son1 {
    			align-self: flex-start;
    		}
    		.son2{
    			align-self:flex-start;
    		}
    		.item2{
    			width:100%;
    			display:flex;
    			justify-content: space-between;
    		}
    
    		.son3{
    			align-self: flex-end;
    		}
    		.son4{
    			align-self:flex-end;
    		}
    	
    
    		
    	</style>
    </head>
    <body>
    <div class="father">
    	<div class="item1">
    	     <div class="son son1" >1</div>
    	     <div class="son son2" >2</div>
    	</div>
    	<div class="item2">
    		<div class="son son3" >3</div>
    	    <div class="son son4" >4</div>
        </div>
    
    展开全文
  • CSS 理解盒子模型

    2020-12-10 19:13:55
    对于初学者来说,很难说出来,但是对于生活中盒子大家熟悉吧,哈哈,这里提到盒子模型你就可以理解成现实生活中盒子就可以了,不然怎么能起个名字叫“盒子模型”呢 好!既然和现实生活中盒子一样,那我们想...
  • 差异1.盒子宽度IE Box总宽度是: width+padding+border+margin宽度总和 FF Box总宽度就是 width宽度,padding+border+margin宽度在含在width内。...2.FF 和 IE 对 BOX 理解的差异导致相差 2px 设为...
  • 盒模型主要定义四个区域:内容(content)、内边框距(padding)、边框(border)和外边距(margin)。 自从1996年CSS1推出,W3C组织就建议把所有网页上对像都放在一个盒(box)中,设计师可以通过创建定义来...
  • 盒模型,顾名思义,就是类似于一个封装盒子,里面装着你想要叙述内容。一个网页就是由一个一个盒子堆积而成。里面装着HTML索要叙述内容。 简单点理解就是外边距(margin)+边框(border)+填充(padding)+内容...
  • css—盒子模型理解

    2018-02-12 12:56:14
    2、组成:外边距(margin):相邻两个盒子margin,会发生折叠,可为负数边框(border):内边距(padding):实际内容(content):百分比相对于父容器content box 宽度,只有包含块高度不...
  • CSS—盒子模型理解

    2018-02-12 12:22:43
    1、盒子模型作用:盒子模型就是一个盒子,封装周围html元素。允许我们在其他元素和周围...实际内容(content):百分比相对于父容器content box 宽度,只有包含块高度不依赖该元素时,百分比宽度才生效 *IE...
  • CSS盒模型

    2020-02-22 11:22:56
    这个问题对于刚入门学习前端朋友是需要完全理解掌握。以下由我来为你简单介绍盒模型是什么?以及盒模型布局时需要注意事项有哪些? 盒模型由网页设计中几个属性组成:内容(content),内边距(padding)...
  • css 盒子模型

    2019-09-26 22:41:07
    CSS框模型(译者注:也被称为“盒模型”)是网页布局基础 ——每个元素被表示为一个矩形方框,框内容、内边距、边界和外边距像洋葱膜那样,一层包着一层构建起来。浏览器渲染网页布局时,它会算出每个框...
  • 120px,height:120px,因为在正常的理解下,padding是内边距,应该是包括在width里面的,而margin是外边距,所以width=margin-left margin-right width,但是浏览器对于CSS盒模型的解释却并非如此,所以最终我
  • MDN中定义:W3C盒模型CSS 规范一个模块,它定义了一个长方形盒子,每个盒子拥有各自内边距和外边距,并根据视觉格式化模型来对元素进行布局。 自己话来解释一番:盒子模型是相对于块状元素和行内...
  • CSS盒子模型说起

    2017-07-12 06:18:53
    前言 总括: 对于盒子模型,BFC,IFC和外边距合并等概念和问题的总结 原文地址:从CSS盒子模型说起 知乎专栏:前端进击者 博主博客地址:Damonare...​ CSS盒子模型CSS基础中的基础,个人之前对于这块的理解有偏差
  • css盒模型详解

    2019-09-13 09:49:54
    CSS3中设置盒模型: /* 标准模型,宽高等于content *...在实际应用中对于盒模型理解不够透彻话会出现问题。 1 标准模型比如下面问题设置父元素宽度为640px;对顶部搜索栏进行设置,左侧logo和右侧登录按钮进行绝对...
  • 120px,height:120px,因为在正常的理解下,padding是内边距,应该是包括在width里面的,而margin是外边距,所以width=margin-left margin-right width,但是浏览器对于CSS盒模型的解释却并非如此,所以
  • 对于刚入门前端小伙伴,对box-sizing、css盒子模型可能会有疑惑,今天我带领大家彻底搞清楚这两个东东。 要想搞清楚box-sizing和CSS盒子模型,首先要理解这两者各有什么作用。 box-sizing:允许您以特定方式定义...
  • 这些属性我们可以用日常生活中常见事物——盒子作一个比喻来理解,所以叫它盒子模型CSS盒子模型就是在网页设计中经常用到的CSS技术所使用一种思维模型对于是盒子元素,如果没有特殊设置,其默认总是占独立...
  • 这是一篇关于如何简单的理解前端css样式的文章; 对于初学前端css样式的学生来说,理解能力好的当然不是问题, 但对于理解能力相对弱一点的同学来说就需要一些时间来理解或者 一些理解性的开导了; 这个就是...
  • 理解盒子模型是css布局重要内容,对于日常布局工作中bug也能快速地查找理解。只有理解之后才会有创新,做个总结,构建自己知识体系! 2.盒模型element.style { width: 100px; height: 100px; padding: 10...
  • 一、盒模型对于怎么理解盒模型,我们可以把它想象成一个快递盒子,content部分就是你所购买物品,padding部分就是为了防止物品摔坏防护泡沫,border部分就是包裹快递盒子,而margin就是两个快递盒子之间距离...
  • CSS——盒子模型

    2017-10-26 19:49:00
    从上面可以看到,标准盒子模型和IE盒子模型都包含了content、padding、margin、border四个部分组成,不过相对于标准盒子模型,IE盒子模型的content包含了border和padding 浏览器兼容 代码顶部都要加doctype声明,...
  • 认识CSS中盒子模型

    2019-03-05 20:53:00
     CSS中重点,理解盒子模型对于CSS才能有更清晰认识。网页说简单一点其实就是一块一块拼接出来,可以想象成拼图,所有图块拼接在一起就成了一幅图像。如此而言,网页就是拼接后图像,那盒子就是图块了。 ...

空空如也

空空如也

1 2 3 4 5 ... 13
收藏数 254
精华内容 101
关键字:

对于css盒模型的理解