CSS网页布局：盒子模型

Dr_Noooo 发布于2019-04-23 13:44 / 1941人阅读

摘要：一盒子模型标准盒子模型盒子不论是标准盒模型还是盒子模型，都有四个部分组成，但从上图也可以看出盒子和盒子主要区别在与宽度上的区别中的盒子模型的宽包括中的盒子模型的也包括上面的两个宽度相加的属性是一样的。

一、盒子模型

标准盒子模型（W3C盒子）

不论是标准盒模型还是IE盒子模型，都有content、padding、border、margin四个部分组成，但从上图也可以看出W3C盒子和IE盒子主要区别在与content宽度上的区别

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;

CSS3中增加了box-sizing属性可用于调整盒子

box-sizing属性可以为三个值之一：content-box（default），border-box，padding-box。

content-box，border和padding不计算入width之内默认的标准盒子

padding-box，padding计算入width内

border-box，border和padding计算入width之内，其实就是IE盒子了

云服务器 GPU云服务器盒子模型 html盒子的布局 css布局 css布局教程

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/2267.html

H5多列布局

摘要：多列布局基本概念多列布局类似报纸或杂志中的排版方式，上要用以控制大篇幅文本。在网页制作时采用层叠样式表技术，可以有效地对页面的布局字体颜色背景和其它效果实现更加精确的控制。多列布局基本概念 1、多列布局类似报纸或杂志中的排版方式，上要用以控制大篇幅文本。 2、跨列属性可以控制横跨列的数量 /*列数*/ -webkit-column-count: 3; /*分割线*/ -webkit...

Jingbin_ 2019-08-29 16:15 评论0 收藏0
H5多列布局

摘要：多列布局基本概念多列布局类似报纸或杂志中的排版方式，上要用以控制大篇幅文本。在网页制作时采用层叠样式表技术，可以有效地对页面的布局字体颜色背景和其它效果实现更加精确的控制。多列布局基本概念 1、多列布局类似报纸或杂志中的排版方式，上要用以控制大篇幅文本。 2、跨列属性可以控制横跨列的数量 /*列数*/ -webkit-column-count: 3; /*分割线*/ -webkit...

mayaohua 2019-08-02 11:08 评论0 收藏0
《CSS世界》笔记一：流/元素/尺寸

摘要：一流体布局引出的几种网页布局方式布局方式描述特点场景静态布局，传统设计，网页上的所有元素的尺寸一律使用作为单位。世界中，提出了流体布局的概念所谓流体布局，指的是利用元素流的特性实现的各类布局效果。下一篇：《CSS世界》笔记二：盒模型四大家族写在前面初读《CSS世界》还是在深圳，属于换工作前的充能。那时候除了工作，其他时间基本都在这本书里了，因为它的确吸引人。之前看过《CSS揭密》...

hizengzeng 2019-08-30 15:54 评论0 收藏0
CSS 布局方式

摘要：中间左栏右栏清除浮动如下图缺点结构不正确多了一层标签布局左栏中间右栏如下图缺点兼容性问题参考文章 W3C标准由万维网联盟制定的一系列标准，包括：结构化标准语言（HTML和XML）表现标准语言（CSS）行为标准语言（DOM和ECMAScript） CSS中的定位机制在CSS中存在三种定位机制：标准文档流（Normal flow）浮动（Floats）绝对定位（Abs...

LancerComet 2019-08-29 15:27 评论0 收藏0
前端面试（知识点）整理（一）

摘要：接受个参数事件类型，是否冒泡，是否阻止浏览器的默认行为触发上绑定的自定义事件触发元素上绑定事件事件的委托代理的原理以及优缺点。委托代理事件是那些被绑定到父级元素的事件，但是只有当满足一定匹配条件时才会被挪。一、页面布局 1.问题：假设高度已知，请写出三栏布局，其中左栏、右栏宽度各为300px，中间自适应。解决方案一：使用浮动布局` Document ...

zhichangterry 2019-08-22 11:06 评论0 收藏0