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

    千次阅读 2019-01-30 12:29:50
    div盒子模型 1.盒子模型简介以及兼容问题  我们通常所说的盒子模型分为W3C盒子模型和IE盒子模型。W3C 盒子模型的范围包括 margin、border、padding、content,并且 content 部分不包含其他部分。 IE 盒子模型的...

    div盒子模型


    1.盒子模型简介以及兼容问题

     我们通常所说的盒子模型分为W3C盒子模型和IE盒子模型。W3C 盒子模型的范围包括 margin、border、padding、content,并且 content 部分不包含其他部分。 IE 盒子模型的范围也包括 margin、border、padding、content,和标准 W3C 盒子模型不同的是:IE 盒子模型的 content 部分包含了 border 和 pading。理解这一点有助于我们在使用过程中对盒子盒子模型的布局可以有更好的把握。

    我们平时采用的是标准 W3C 盒子模型,规定采用W3C标准盒子模型就是在网页的顶部加上 DOCTYPE 声明。如果不加 DOCTYPE 声明,那么各个浏览器会根据自己的行为去理解网页,即 IE 浏览器会采用 IE 盒子模型去解释你的盒子,而 FF 会采用标准 W3C 盒子模型解释你的盒子,所以网页在不同的浏览器中就显示的不一样了。反之,如果加上了 DOCTYPE 声明,那么所有浏览器都会采用标准 W3C 盒子模型去解释你的盒子,网页就能在各个浏览器中显示一致了。

    注释:符合W3C的标准网站未必兼容所有浏览器。谷歌浏览器和火狐浏览器是最接近符合W3C标准的浏览器。我们建设网站一致是按照W3C的标准来进行的,目前各大浏览器的发展形势也基本趋同符合W3C标准,不过最值得一提的就是IE浏览器依然存在不少兼容问题。所以,通常开发者们处理兼容问题主要对象还是IE浏览器。也就是说,W3C的标准网站需要处理一下IE浏览器的兼容,才能达到我们目的。关于兼容问题建议去两个网站上看看,内容简单清楚,易理解。一个是C论坛,一个是W3school.com.cn再赠送一个解决IE兼容问题的视频,地址:http://www.tudou.com/programs/view/zxXqnQIeu9E

    网页中的盒子模型;我们常常要控制盒子模型的宽度width:   

    w3c中的盒子模型的宽:包括margin+border+padding+width;

        width:margin*2+border*2+padding*2+width;

        height:margin*2+border*2+padding*2+height;

    iE中的盒子模型的width:也包括margin+border+padding+width;

    网页中的盒子模型;我们常常要控制盒子模型的宽度width:   

    w3c中的盒子模型的宽:包括margin+border+padding+width;

        width:margin*2+border*2+padding*2+width;

        height:margin*2+border*2+padding*2+height;

    iE中的盒子模型的width:也包括margin+border+padding+width;

    上面的两个宽度相加的属性是一样的。不过在ie中content的宽度包括padding和border这两个属性;

    例如一个盒子模型如下:margin:20px,border:10px,padding:10px;width:200px;height:50px;

    如果用w3c盒子模型解释,那么这个盒子模型占用的

     宽度为:20*2+10*2+10*2+200=280px;

      高度:20*2+10*2+20*2+50=130px;

     盒子的实际宽度大小为:10*2+10*2+200=240px;

     实际高度:10*2+10*2+50=90px;

    用ie的盒子模型解释 :盒子在网页中占据的大小为20*2+200=240px; 高:20*2+50=90px;

    盒子的实际大小为:宽度:200px, 高度:50px;

    我们常常理解的盒子模型是w3c这样的盒子模型

    网页中的盒子模型;我们常常要控制盒子模型的宽度width:   

    w3c中的盒子模型的宽:包括margin+border+padding+width;

        width:margin*2+border*2+padding*2+width;

        height:margin*2+border*2+padding*2+height;

    iE中的盒子模型的width:也包括margin+border+padding+width;

    上面的两个宽度相加的属性是一样的。不过在ie中content的宽度包括padding和border这两个属性;

    例如一个盒子模型如下:margin:20px,border:10px,padding:10px;width:200px;height:50px;

    如果用w3c盒子模型解释,那么这个盒子模型占用的

     宽度为:20*2+10*2+10*2+200=280px;

      高度:20*2+10*2+20*2+50=130px;

     盒子的实际宽度大小为:10*2+10*2+200=240px;

     实际高度:10*2+10*2+50=90px;

    用ie的盒子模型解释 :盒子在网页中占据的大小为20*2+200=240px; 高:20*2+50=90px;

    盒子的实际大小为:宽度:200px, 高度:50px;

    我们常常理解的盒子模型是w3c这样的盒子模型

    上面的两个宽度相加的属性是一样的。不过在ie中content的宽度包括padding和border这两个属性;

    例如一个盒子模型如下:margin:20px,border:10px,padding:10px;width:200px;height:50px;

    如果用w3c盒子模型解释,那么这个盒子模型占用的

     宽度为:20*2+10*2+10*2+200=280px;

      高度:20*2+10*2+20*2+50=130px;

     盒子的实际宽度大小为:10*2+10*2+200=240px;

     实际高度:10*2+10*2+50=90px;

    用ie的盒子模型解释 :盒子在网页中占据的大小为20*2+200=240px; 高:20*2+50=90px;

    盒子的实际大小为:宽度:200px, 高度:50px;

    我们常常理解的盒子模型是w3c这样的盒子模型

    2.div盒子模型理解误区:如果规定了固定的width,height再设置padding那么是content缩小border的长和高不变还是content不变而新添加的padding把border的长和高撑大?(这里所说的border的长高变化主要是想要描述除过margin后整个div的大小是否发生了变化)

    理解了第一部分的盒子模型及兼容问题后实际是这个理解误区自然也就没有了,在采用W3C标准的情况下应该是content不变而新添加的padding把border的长和高撑大也就是说除过margin后整个div的大小发生变化,在IE的标准下应该是border的长和高不变应为content包含了content 部分包含了 border 和 pading实际上也就是说除过margin后整个div的大小不会发生变化。

     

     

    展开全文
  • DIV盒子模型

    千次阅读 2014-01-19 21:46:26
    DIV盒子模型: 从外到内依次包括: margin:外边距、 border:边框、 padding:内补白、 content:内容。 内外距离区别: 其实说白了 padding就是内容与边框的空隙。 margin 则是模块与模块的空隙。 图解: ...

    DIV盒子模型:

    从外到内依次包括:

    margin:外边距、

    border:边框、

    padding:内补白、

    content:内容


    内外距离区别:

    其实说白了
    padding就是内容与边框的空隙。
    margin 则是模块与模块的空隙。
    图解:
    http://images.cnblogs.com/cnblogs_com/cchyao/%E6%A0%87%E5%87%86W3C%E7%9B%92%E5%AD%90%E6%A8%A1%E5%9E%8B%E5%92%8CIE%E7%9B%92%E5%AD%90%E6%A8%A1%E5%9E%8BCSS%E5%B8%83%E5%B1%80%E7%BB%8F%E5%85%B8%E7%9B%92%E5%AD%90%E6%A8%A1%E5%9E%8B/1.JPG

    以下是W3C标准的盒子示例:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    	<head>
    		<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
    		<title>DIV+CSS</title>
    		
    		<style type="text/css">
    			.div1{
    				width:300px;
    				height:300px;
    				background:yellow;
    				border:2px solid red;
    				padding:10px 20px 30px 40px;  /*上、右、下、左 顺序*/
    			}
    			#div1{
    				width:300px;
    				height:300px;
    				background:#c09;
    				border:2px solid yellow;
    				margin:10px 20px 30px 40px;   /*上、右、下、左 顺序*/
    			}
    		</style>
    	</head>
    	<body>
    		<!--div的实际宽度为:div宽度+padding宽度*2+border宽度*2+margin宽度*2-->
    		<div class="div1">DIV内补白padding,距离边框的空隙。会撑开盒子。</div>
    		<div id="div1">DIV外部边距margin,距离外部元素的空隙(外边距)。</div>
    	</body>
    </html>



    展开全文
  • H5div盒子模型例子

    2018-04-27 17:52:58
    H5div盒子模型例子H5div盒子模型例子H5div盒子模型例子H5div盒子模型例子
  • DIV布局十大技巧以及div盒子模型效果图!很容易的,一看就能明白!
  • div盒子模型设置为圆形

    千次阅读 2019-01-31 05:43:00
    div盒子模型设置为圆形 圆形边框 宽高必须相等才能设为圆形 border-radius:50% // 圆形 倒角 border-radius:1px 1px 1px 1px // 倒角 &lt;wiz_tmp_tag id="wiz-table-range-border...

    div盒子模型设置为圆形

    圆形边框
    • 宽高必须相等才能设为圆形
      • border-radius:50% // 圆形
    • 倒角
      • border-radius:1px 1px 1px 1px // 倒角

    <wiz_tmp_tag id="wiz-table-range-border" contenteditable="false" style="display: none;">

     
     
     
     
    posted @ 2019-01-31 05:43 kasi 阅读(...) 评论(...) 编辑 收藏
    展开全文
  • 2.html-div盒子模型

    千次阅读 2018-05-30 08:32:19
    div盒子模型div标签是划分标签 、分区标签可以放置宽度 高度 及各类css样式边框线border:1px solid red分别为边框的宽度 边框样式 边框颜色分别写:border-width border-color border-style border-topborder-...

    div盒子模型

    1. div标签是划分标签 、分区标签
    2. 可以放置宽度 高度 及各类css样式

    边框线

    1. border:1px solid red分别为边框的宽度 边框样式 边框颜色
    2. 分别写:border-width border-color border-style border-top
    3. border-style
    • solid 实线
    • dotted 点线
    • dashed 虚线
    • double 双线

    小三角

    设置宽度0 高度0 边框其他的颜色设置为透明 transparent

    颜色值

    1. 英文的颜色
    2. 十六进制颜色 #ccffee (1 2 3 4 5 6 7 8 9 0 a b c d e f )
    3. rgb三颜色 r是红 g是绿色 b是蓝色 0-255深浅色
    4. rgba a是alpha 是透明色 0-1 0完全透明 1完全不透明

    外边距

    1. 边框以外的距离 叫外边距
    2. 上右下左四个值
    3. 上 左右 下 三个值
    4. 上下 左右 两个值
    5. 上下左右都相等 一个值

    内边距

    1. 内容与边框之间的距离 2.能扩大盒子的大小
    2. 不支持 auto

    盒子的计算

    1. 盒子宽度:border-left+border-right+width+padding-left+padding-right
    2. 盒子高度:border-top+border-bottom+height+padding-top+padding-bottom

    外边距合并

    1. 父元素与子元素之间垂直方向发生了合并
    2. 两个兄弟合并 合并之后取两者之间的最大值
    3. 在水平方向不会发生合并
    4. 父子级发生合并解决
    • 给父级加padding
    • 给父级加边框
    展开全文
  • 7:div盒子模型:把HTML 页面中的布局元素看作一个矩形的盒子,即一个装东西的容器 盒子结构: 内容:(content) 边框:(border)使用方式:border(边框) 11px(粗细) solid(实线) gold;(颜色) (solid:实线,...
  • 相信每一个从事web开发的人对盒子模型都有一个特殊的理解吧,本文也有一个理解并附有示例代码,喜欢的朋友可以参考下
  • 6、div盒子模型

    2020-08-16 15:55:51
    一、盒子模型 1、模型图 Content:盒子里面的内容; Border:盒子的边框; Padding:内容与边框的距离; Margin:盒子与盒子之间的距离。 2、<div>标签的快捷操作 3、<div>标签各个属性的用法 width、...
  • 前端 div盒子模型

    2020-05-06 22:22:36
    修饰div的css样式 height width border-radius margin 外边距 padding 内边距 box-sizing: border-box; 设置○的时候常用 border-style : solid 实线 dotted点 dashed 虚线 box-shadow : x y 2px(模糊距离) 2px(模糊...
  • div盒子模型(标准盒子模型,IE模型、弾性模型) 布局实例解析 问题1:如使得右下位置的内容div在向上拉动的过程中与顶部的导航栏保持一定的距离? 问题2:顶部导航侧部导航的基本实现思路以及原...
  • 03-第三章样式+div盒子模型 初识css样式 CSS(Cascading Style Sheets):层叠样式表 样式定义如何显示 HTML 元素css语法 CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明。 行内样式: style ...
  • 从零开始前端学习[3]:css+div盒子模型 css的样式 div盒子模型 提示: 作者:章飞_906285288 博客地址:http://blog.csdn.net/qq_29924041 css样式Css样式指的的对于html标签样式的设计,html等于是框架,Css...
  • 转载于:https://www.cnblogs.com/szj666/p/11312997.html
  • <div class="box2" panerTitle="控制面板" panelHeight="" panelWidth="300" showStatus="收缩" panelUrl=""> panerTitle:box2添加左上角标题,可为随意文本 showStatus:若为“收缩”,即可为可改变显示或者隐藏...
  • 初识css之div盒子模型

    2019-03-03 10:41:29
    说到css,就不得不说到盒子这个重要的布局模块了 ...box model"这一术语是用来设计和布局时使用。 ... 盒模型允许我们在其它元素和周围元素边框...下面的图片说明了盒子模型(Box Model): CSS box-model 不同...
  • java div盒子模型练习

    2020-02-20 22:12:59
  • div盒子模型的容积

    2017-08-27 21:37:00
    div在web开发中是使用的最广泛的标签之一,常常用来定位布局,但是我们如何知道div的具体的面积是多大呢? div分为四个部分:margin、border、padding、conten 一般div的实际宽高=margin+border+padding+conten ...

空空如也

空空如也

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

div盒子模型