整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
)CSS 标准盒子模型(Box Model)
在网页中所有HTML元素可以看作盒子,在CSS中,"box model"术语是用来设计和布局时使用的;CSS盒模型本质上是一个盒子,封装周围的HTML元素包括:外边距(margin)边框(border)内边距(padding)实际内容(content)四个属性,所以布局时每个元素所占的总宽高是这4个属性的总和;比如宽度:总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距
1.1Margin(外边距)清除边框外的区域,外边距是透明的
1.2Border(边框)围绕在内边距和内容外的边框
1.3Padding(内边距)清除内容周围的区域,内边距是透明的
1.4Content(内容)盒子里填充的内容比如文本,图像等
标准盒子模型
宽度为100px的div
根据盒子模型得出该元素的总宽度为:100+(20+20)+(15+15)+(15+15)(由里至外)因此如果想在此div中放置一个宽度为100px的元素,此元素的总宽度必须小于等于100px
2)DIV+CSS布局
Div+CSS布局就是将网页内容用<div>分割为块,之后使用css设置每个块的大小,位置等
DIV+CSS布局最重要的是灵活运用float(浮动)属性,其值:1)left 2)right 3)both
clear属性作用是清除浮动,其值为:1)left 2)right 3)both
d2向右浮动 float:right
因为div是块级元素,如果都没有脱离文档流div就会按照从上到下的顺序放置
d2设置为右浮动其他两个div位置的变化:
1)d1没有脱离文档流会占据一行,所以d2只能浮动到d1下面的右面如上图所示
2)d2脱离文档流,d3自动填充到d2的位置
d1,d2全部设置为右浮动
1)当d1,d2都设置为右浮动时:因为css中d1在d2上面先设置,因此d1在右侧,如果d2在d1上面先设置样式,则d2在右侧,d1在左侧,自己测试不再截图
2)当d1,d2都设置为右浮动时:d3就会跑到上图中d2的位置
3)如果3个div都设置左或右浮动,当3个width加一起<=100%就会在第一行显示(d1,d2,d3)
<style type="text/css">
#d1 {
margin: 0px;
background-color: red;
padding: 0px;
width: 50%;
height: 100px;
float:right;
}
#d2 {
margin: 0px;
background-color: yellow;
padding: 0px;
width: 50%;
height: 100px;
float:right;
}
#d3 {
margin: 0px;
background-color: green;
padding: 0px;
width: 50%;
height: 100px;
}
</style>d2清除左浮动,d3设置为右浮动
当d2清除了左浮动,d3设置为右浮动,就会如上图所示;如果d2清除的是右浮动,d2就会在d1上面,d3就会定位在d1下面的右面,自己测试不再截图
当d2清除了左浮动,如果想要d2紧挨着d1(与d1在一行上),可以通过position脱离文档流设置其上下左右属性使其定位在d1右侧,自己测试
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>div+CSS布局</title>
<style type="text/css">
#d1 {
margin: 0px;
background-color: red;
padding: 0px;
width: 30%;
height: 100px;
float:left;
}
#d2 {
margin: 0px;
background-color: yellow;
padding: 0px;
width: 40%;
height: 100px;
clear: left;
}
#d3 {
margin: 0px;
background-color: green;
padding: 0px;
width: 30%;
height: 100px;
float: right;
}
</style>
</head>
<body>
<div id="d1"><span style="font-size: 50px;">d1</span></div>
<div id="d2"><span style="font-size: 50px;">d2</span></div>
<div id="d3"><span style="font-size: 50px;">d3</span></div>
</body>
</html>DIV+CSS布局综合运用position+上下左右属性与float属性为网页进行布局
注意:浏览器的兼容性问题,特别是使用IE内核的浏览器对W3C的规范不怎么遵守
许多方法可以将HTML元素与CSS对齐，但是一起使用或单独使用它们并不是那么容易。开发人员所面临的困难之一就是试图将元素集中在页面中间。
因此，在本文中，我将展示一些最常用的方法，即通过使用不同的CSS属性在水平和垂直方向上居中图像。
让我们开始使用3个不同的CSS属性将图像水平居中。
使图像水平居中的第一种方法是使用text-align属性。但是，仅当图像位于块级容器（例如<div>）内时，此方法才有效：
使图像居中的另一种方法是使用margin：auto属性（用于左边距和右边距）。但是，单独使用margin：Auto将不适用于图像。如果需要使用margin：auto，则还必须使用2个其他属性。
margin-auto属性对内联级别的元素没有任何影响。由于<img>标签是一个内联元素，因此我们需要先将其转换为块级元素：
其次，我们还需要定义宽度。因此，左右边缘可以占用其余的空白空间并自动对齐，可以这样解决问题（除非我们给出100％的宽度）：
将图像水平居中的第三种方法是使用display：flex。同样，我们对容器使用text-align属性，它也会使用display：flex。但是，仅使用display：flex是不够的。容器还必须具有一个称为justify-content的附加属性。
justify-content属性与display：flex一起使用，我们可以使用它水平放置图像的中心。最后，图像的宽度必须小于容器的宽度，否则，它会占用100％的空间，然后我们就无法对其进行集中化。
1、Display: Flex
对于垂直对齐，使用display：flex确实很有帮助。考虑到我们的容器的高度为800px，但图像的高度仅为500px：
现在，在这种情况下，向容器中添加一行代码（align-items：center）就可以了：
如果将align-items属性与display：flex一起使用，就会将元素垂直放置。
2、位置：绝对和变换属性
垂直对齐的另一种方法是一起使用position和transform属性。这个有点复杂，所以让我们一步一步地做。
步骤1：定义绝对位置
首先，我们将图像的定位行为从静态更改为绝对：
同样，它应该位于相对放置的容器内，因此我们添加一个位置：相对于其容器的div。
步骤2：定义顶部和左侧属性
其次，我们定义图像的顶部和左侧属性，并设置为50％。这会将图像的起点（左上角）移到容器的中心：
步骤3：定义变换属性
在第二步的时候已经将图像的一部分移出容器。因此，我们需要将其取回内部。在图像上定义转换属性，并在其X和Y轴上添加负50％可以达到目的：
还可以使用其他方法进行水平和垂直居中，我这里只尝试了最常用的方法。希望这篇文章可以帮助你了解如何在页面中心对齐图像。
多程序员朋友，在用CSS进行边距调整时，老分不清楚外边距margin和内边距padding的区别，在我部门，就有两个迷糊虫。于是我上网找了一幅图，一副不可描述的图(你可不要想歪了)，他们一看就完全明白了，现在分享给你。
在什么场景中使用padding，在什么场景中使用margin，这是一个学问。你掌握了，学问就有了。
这是用padding的学问
（1）需要在border内侧添加空白，在文字与边框留有距离时；
（2）空白处需要背景色时；
（3）上下相连的两个盒子之间的空白希望等于两者之和时，比如15px+20px的padding，将得到35px的空白。
这是用margin的学问
（1）需要在border外侧添加空白时;
（2）空白处不需要有背景色时;
(3）上下相连的两个盒子之间的空白需要相互抵消时，比如15px+20px的margin，将得到20px的空白。
在CSS中，通过外边距margin属性，可设置元素周围的空间。可用margin统一指定4边，也可用margin-top等属性，特指其中一边。这种方案，在CSS中是很常见的。padding和margin的作用不同，但用法是一样的。为了区分效果，我只在一个div中用了padding，通过比较，一目了然。
在CSS表文件ys2.css中的代码
/*单独指定一个边距*/
.one-margin {
margin-left: 100px;
}
/*4个边距*/
.four-margin {
background: cadetblue;
width: 400px;
height: 200px;
margin: 10px 20px 30px 50px;
}
/*加上padding*/
.use-padding {
background: cadetblue;
width: 400px;
height: 200px;
margin: 10px 20px 30px 50px;
padding-top: 20px;
}在HTML文件中的代码
<div class="big-div">
<h1 class="one-margin">margin用法</h1>
<div class="four-margin">
margin一个值：4个边距;<br/>
margin两个值：上下边距、左右边距;<br/>
margin三个值：上边距、左右边距、下边距;<br/>
margin四个值：上边距、右边距、下边距、左边距。
</div>
<div class="use-padding">
padding一个值：4个边距;<br/>
padding两个值：上下边距、左右边距;<br/>
padding三个值：上边距、左右边距、下边距;<br/>
padding四个值：上边距、右边距、下边距、左边距。<br/>
为了区分margin和margin，我只用 padding-top,你能看出效果么?
</div>
</div>输出结果
好了，有关CSS边距的内容，老陈讲完了，如果觉得对你有所帮助，希望老铁能转发点赞，让更多的人看到这篇文章。你的转发和点赞，就是对老陈继续创作和分享最大的鼓励。
一个当了10年技术总监的老家伙，分享多年的编程经验。想学编程的朋友，可关注：老陈说编程。分享Python，前端(小程序)、App和嵌入式方面的干货。关注我，没错的。
#前端##HTML5##CSS##程序员##Web#
*请认真填写需求信息，我们会在24小时内与您取得联系。
