web前端开发css盒模型 css盒子模型有几种
2023-10-07 02:32:15 | 我爱编程网
什么是css盒子模型
css盒子模型又称为框模型，盒子的最内部是元素的实际内容即元素内容，紧挨着元素框外部的是内边距，其次是边框，然后最外层是外边距，这几部分共同组成了盒子模型
盒子模型是html+css中最核心的基础知识，理解了这个重要的概念才能更好的排版，进行页面布局。下面是总结的关于css盒子模型的知识，希望对大家有所帮助。
一、css盒子模型概念
CSS css盒子模型又称框模型 (Box Model) ，包含了元素内容（content）、内边距（padding）、边框（border）、外边距（margin）几个要素。如图：
图中最内部的框是元素的实际内容，也就是元素框，紧挨着元素框外部的是内边距padding，其次是边框（border），然后最外层是外边距（margin），整个构成了框模型。通常我们设置的背景显示区域，就是内容、内边距、边框这一块范围。而外边距margin是透明的，不会遮挡周边的其他元素。
那么，元素框的总宽度 = 元素（element）的width + padding的左边距和右边距的值 + margin的左边距和右边距的值 + border的左右宽度；
元素框的总高度 = 元素（element）的height + padding的上下边距的值 + margin的上下边距的值 ＋ border的上下宽度。
二、css 外边距合并（叠加）
两个上下方向相邻的元素框垂直相遇时，外边距会合并，合并后的外边距的高度等于两个发生合并的外边距中较高的那个边距值，如图：
比较容易理解，所以在页面中有时候遇到实际情况是需要考虑这个因素的。当然外边距合并其实也有存在的意义，如下图：
需要注意的是：只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。
css reset 中也会经常用到
* {
margin : 0;
padding : 0;
}三、box-sizing属性介绍
box-sizing属性是用户界面属性里的一种，之所以介绍它，是因为这个属性跟盒子模型有关，而且在css reset中有可能会用到它。
box-sizing : content-box|border-box|inherit;(1) content-box ,默认值，可以使设置的宽度和高度值应用到元素的内容框。盒子的width只包含内容。
即总宽度=margin+border+padding+width
(2) border-box , 设置的width值其实是除margin外的border+padding+element的总宽度。盒子的width包含border+padding+内容
即总宽度=margin+width
很多CSS框架，都会对盒子模型的计算方法进行简化。
(3) inherit , 规定应从父元素继承 box-sizing 属性的值
关于border-box的使用：
1、一个box宽度为100%，又想要两边有内间距，这时候用就比较好
2、全局设置 border-box 很好，首先它符合直觉，其次它可以省去一次又一次的加加减减，它还有一个关键作用——让有边框的盒子正常使用百分比宽度。
四、实际开发中遇到的和框模型相关的应用及小问题。
1、margin越界（第一个子元素的margin-top和最后一个子元素的margin-bottom的越界问题）
以第一个子元素的margin-top 为例：
当父元素没有边框border时，设置第一个子元素的margin-top值的时候，会出现margin-top值加在父元素上的现象，解决方法有四个：
（1）给父元素加边框border （副作用）
（2）给父元素设置padding值 （副作用）
（3）父元素添加 overflow：hidden （副作用）
（4）父元素加前置内容生成。（推荐）
以第四种方法为例：
.parent {
width : 500px;
height : 500px;
background-color : red;
}.parent : before {
content : " ";
display : table;}.child {
width : 200px;
height : 200px;
background-color : green;
margin-top : 50px;}
<div class="parent">
<div class="child"></div> </div>2、 浏览器间的盒子模型。
（1）ul标签在Mozilla中默认是有padding值的，而在IE中只有margin有值。
（2）标准盒子模型与IE模型之间的差异：
标准的盒子模型就是上述介绍的那种，而IE模型更像是 box-sizing : border-box; 其内容宽度还包含了border和padding。解决办法就是：在html模板中加doctype声明。
3、用盒子模型画三角形
<!DOCTYPE html><html>
<head>
<style>
.triangle {
width : 0;
height: 0;
border : 100px solid transparent;
border-top : 100px solid blue; /*这里可以设置border的top、bottom、left、right
四个方向的三角*/
}
</style>
</head>
<body>
<div class="triangle"></div>
</body></html>页面显示结果为：
css盒子模型有几种
CSS盒子模型是用于布局和定位网页元素的基本概念。它描述了一个元素在网页中的尺寸、边框、内边距和外边距之间的关系。
每个HTML元素都可以被看作是一个矩形的盒子，其中包含内容、内边距、边框和外边距。CSS盒子模型定义了这些组成部分的尺寸和相互关系。
在CSS中，有两种盒子模型：标准盒子模型和IE盒子模型。
1、标准盒子模型（Standard Box Model）
标准盒子模型是CSS的默认盒子模型。在标准盒子模型中，一个元素的总宽度（width）和总高度（height）由内容区域（content）、内边距（padding）、边框（border）组成。换句话说，元素的宽度和高度不包括内边距和边框。
标准盒子模型的计算公式： 我爱编程网
总宽度 = 内容宽度（width） + 左内边距（padding-left） + 右内边距（padding-right） + 左边框宽度（border-left） + 右边框宽度（border-right）总高度 = 内容高度（height） + 上内边距（padding-top） + 下内边距（padding-bottom） + 上边框宽度（border-top） + 下边框宽度（border-bottom）
2、IE盒子模型（IE Box Model）
IE盒子模型是早期Internet Explorer浏览器（IE5及以下版本）采用的盒子模型。在IE盒子模型中，元素的总宽度和总高度包括了内容区域（content）、内边距（padding）和边框（border）。
IE盒子模型的计算公式：
总宽度 = 内容宽度（width） + 左内边距（padding-left） + 右内边距（padding-right） + 左边框宽度（border-left） + 右边框宽度（border-right）总高度 = 内容高度（height） + 上内边距（padding-top） + 下内边距（padding-bottom） + 上边框宽度（border-top） + 下边框宽度（border-bottom）
现在的浏览器中，默认使用的是标准盒子模型。如果你希望使用IE盒子模型，可以通过设置CSS的box-sizing属性为border-box来实现。
.element { box-sizing: border-box;}
这将使元素采用IE盒子模型，使元素的宽度和高度包括了内边距和边框。
几个容易出错的css盒子模型细节-jerrylsxu
css是前端必须掌握的技能之一。其中的box模型，如图所示：
大体就是border、margin、padding和content，概念挺好理解。但当盒子模型与其他属性一块使用时产生的现象，或许您还难以回答上来。下面来看看几个容易搞错的css盒子模型细节。
问题一：嵌套块级元素时，子元素margin的参考标准是？具体来说就是父元素的content-box，padding-box还是border-box？
来看以下的例子：
#box3
{
width:400px;
height:400px;
margin:20px;
padding:20px;
border:20px solid;
background-color:#ccc;
overflow:hidden;
}
#box3_3
{
width:200px;
height:200px;
margin:20px;
padding:20px;
border:20px solid #0f0;
background-color:#f00;
}
可以清楚看到，子元素margin以包含元素content-box为参考
问题二：overflow:hidden隐藏的是超出哪里的部分呢？具体来说就是超出content-box，padding-box还是margin-box会被隐藏？
依然来看一个例子，css如下：
#box1
{
width:100px;
height:100px;
margin:20px;
padding:20px;
border:20px solid;
background-color:#ccc;
overflow:hidden;
}
#box1_1
{
width:200px;
height:200px;
background-color:#f00;
}
通过以上例子可以知道。overflow:hidden，隐藏超出padding-box的部分
问题三：position:absolute定位参考点是什么？
我们都知道，当给一个元素应用position:absolute绝对定位后。会以最近拥有定位属性的父元素为定位参考。同时可以通过left和top指定相对父元素的偏移距离。那么这个左上角具体是指父元素哪里呢？元素本身又以哪个点来定位呢？
#box2
{
position:relative;;
width:400px;
height:400px;
margin:20px;
padding:20px;
border:20px solid;
background-color:#ccc;
}
#box2_2
{
position:absolute;
left:auto;
top:auto;
width:100px;
height:100px;
padding:20px;
border:10px solid #0f0;
background-color:#f00;
}
子元素有margin 子元素无margin left/top为默认值 left/top为0
通过点击上面的按钮，可以得到以下结论：
元素自身的参考点是最外围的盒子，即margin-box，无margin则为border-box，以此类推。
left/top指定值后，参照父元素的padding-box左上角
left/top为默认值，子元素还在原来的位置上，即相对于父元素的content-box左上角
问题四：元素的背景覆盖到哪个区域，border-box？padding-box还是margin-box？
这里要区分background-color和background-image两种情况。
1.对于背景颜色，颜色会填满border-box。
2.对于背景图片，默认会填充padding-box。左上方从padding-box的区域开始填充，右侧和下侧会超出到border-box的区域，但不会超出到margin-box
3.在css3中，可以通过background-originr更改背景图片的填充区域
来看以下css，
#box4
{
width:100px;
height:100px;
margin:20px;
padding:20px;
border:20px dotted;
background-color:#ccc;
overflow:hidden;
}
#box5
{
width:400px;
height:300px;
margin:20px;
padding:20px;
border:20px dotted;
background-color:lightblue;
background-image:url('');
background-repeat:no-repeat;
overflow:hidden;
}
background-origin:border-boxpadding-boxcontent-box
以上就是我爱编程网为大家带来的web前端开发css盒模型 css盒子模型有几种，希望能帮助到大家，了解更多相关信息，敬请关注我爱编程网。
总结几种常见的div+css布局实例学习前端html和css技术，最重要的是在于实践，无论朋友们看了多少的教程，视频课程或者是相关的书籍，只有亲手去实践才会对这些有全新的认识。有时看别人代码一眼能看懂，自己却无从下手写起；有时不能理解的技术知识与问题，怎么思考也想不明白等等。本篇文章就给朋友们介绍一下各种常见的div+css布局方式和实践技巧。DIV+CSS布局相关内容1.DIV+
web前端开发需要掌握哪些知识1.HTML知识要点：web工作原理、HTML4及HTML5、常见标签、相对路径与绝对路径、HTML5标签2.CSS+布局知识要点：CSS基本语法、基本选择器、复合选择器、背景图片、盒子模型、精灵图、常见网页布局、浮动定位、Flex布局、响应式布局、移动端适配、网页动画、CSS3新特性、Less预处理器3.ECMA基础知识要点：ECMA基本语
Web前端开发知识点之CSS的使用方式今天小编要跟大家分享的文章是关于Web前端开发知识点之CSS的使用方式。本文章小编从与HTML的结合方式、CSS语法、选择器以及盒子模型四个方面进行讲解。下面来和小编一起看一看吧！一、与HTML的结合方式CSS与HTML的结合方式一共有三种，分别是：外部样式、内部样式和内联样式。①外部样式当样式需要应用于很多页面时，外部样
web前端开发都需要学什么？Web前端开发技术是一个先易后难的过程，主要包括三个要素：HTML、CSS和JavaScript，这就要求前端开发工程师不仅要掌握基本的Web前端开发技术，网站性能优化、SEO和服务器端的基础知识，而且要学会运用各种工具进行辅助开发以及理论层面的知识，包括代码的可维护性、组件的易用性、分层语义模板和浏览器分级支持等。简单来说你需要学习div+css基本知识
web前端开发要怎么学?要学前端就要想了解前端是什么，用官方的定义，就是网站前台部分，运行在PC端，移动端等浏览器上展现给用户浏览的网页。用我们的话来说，前端就是网页给访问网站的人看的内容和页面，而前端开发顾名思义就是这些内容的制作，也就是代码的实现。而要实现这些代码，就要用到HTML，CSS及JavaScript三大基础知识。目前看来。论趋势如何发展，它们都是整个前端开发的三大基石
Web前端工程师要掌握的CSS技巧今天小编要跟大家分享的文章是关于Web前端工程师要掌握的CSS技巧。正在从事web前端工作的小伙伴们快来和小编一起看一看吧，希望本篇文章能够对正在从事web前端工作的小伙伴们有所帮助。1、元素的margin的top、bottom及padding的top、bottom使用百分比作为单位时，其是相对父元素的宽度width的而不是我们想象的高度height
web前端开发需要掌握哪些知识1.HTML知识要点：web工作原理、HTML4及HTML5、常见标签、相对路径与绝对路径、HTML5标签2.CSS+布局知识要点：CSS基本语法、基本选择器、复合选择器、背景图片、盒子模型、精灵图、常见网页布局、浮动定位、Flex布局、响应式布局、移动端适配、网页动画、CSS3新特性、Less预处理器3.ECMA基础知识要点：ECMA基本语
WEB前端开发Web前端开发是从网页制作演变而来的,名称上有很明显的时代特征。在互联网的演化进程中,网页制作是Web1.0时代产物,那时网站的主要内容是静态的,用户使用网站的行为也以浏览为主。网页不再只是承载单一的文字和图片,各种富媒体让网页的内容更加生动,网页上软件化的交互形式为用户提供了更好的使用体验,这些都是基于前端技术实现的。就小规模公司而言,一个技术员都得会这几样技能,这样很锻炼
-
android开发还是web前端开发好 javaweb开发和安卓开发哪个前途好些2023-10-08 16:59:01
-
js 原生javascript实现动态引入外部js和css文件2023-06-27 20:13:22
-
Web前端主要包括哪些技术？小白求解答2023-10-20 12:30:40
-
web前端培训学费多少？2023-10-20 12:29:36
-
前端开发，能说说你的理解吗？2023-10-20 12:21:24
-
女生适合学习web前端开发吗？2023-10-20 12:12:43