CSS盒子的日常使用

css, 盒子, 日常, 使用, 玩转

　　玩转div中盒子模型其实很简单。说起盒子模型，相信大驾都不陌生，这在网站站点制作中经常遇到，但咱们在网页制作中却会经常遇到一些小的问题，网页变形了、错位了、没有按咱们的意图来摆放了，等等，这就是咱们对字还有一些知识或功能没有知识清楚，现在咱们就来仔细认识下，帮助大驾共同学习。
　　
　　说白了，CSS盒子也是装东西的，比如咱们要将文字内容、图片布局网页中，那就需要像盒子一样装着。这个时候咱们对其对象设置css高度(cssheight)、css宽度(csswidth)、css边框(cssborder)、css边距(cssmargin)、填充（csspadding）,即可实现像盒子一样的长方形、正方形平面盒子。
　　
　　通常咱们这样：
　　
　　一组<div></div>、<span></span>等类似这种语法标签组叫1个盒子。因为咱们对其设置了高度(height)、宽度(width)、边框(border)、边距(margin)、填充（padding）等属性后即可呈现出盒子一样的长方形或正方形。所以咱们CSS盒子模型因此而得来。
　　
　　日常使用CSS盒子：
　　
　　咱们说将什么内容放入一个盒子里，咱们就要想到是放入<div></div>里，脑海里就要这个概念。
　　
　　假如咱们说设置一个宽度为100px盒子，咱们就要知道如下一个概念：
　　
　　Css样式具体代码如下：
　　
　　.yangshi{width:100px;}
　　
　　对应html具体代码如下：
　　
　　<divclass="yangshi">内容</div>
　　
　　这个时候咱们可以将<divclass="yangshi">内容</div>看作为一个盒子。
　　
　　1、盒子模型的height和width属性，指的是content区的高和宽，而不是整个盒子的。2、div为块级元素，span为行级元素。3、行内元素之间的水平距离为左元素的右margin和右元素的左margin之和。4、块元素之间的竖直距离为上元素的下margin和下元素的上margin的最大值。5、设置了float属性的块级元素脱离标准流，其下方的块级元素会占领其原来的位置，只是下方块级元素中的文字会被该块挤开，形成一个文字环绕该块效果。如果想清除浮动的影响，设置clear属性，该属性有3个值：left、both、right。6、如果一个父类盒子中所有子类盒子均设置为浮动（float），该父盒子的高度几乎为零，如果想让父盒子的告诉何内部子盒子的高度自适应，在父盒子内部的下方添加一个div，设置其CSS属性为{clear:both;margin:0;padding:0}7、盒子的定位，position属性的取值有四个。static:盒子按标准流进行布局。relative:相对定位，盒子相对原来标准位置偏移指定距离，相对盒子仍在标准流中，其后的盒子仍以标准方式对待它。
　　
　　怎么样才算是选择了“标准W3C盒子模型”呢？很简单，就是在网页制作的顶部加上DOCTYPE声明。如果不加DOCTYPE声明，那么各个浏览器会根据自己的行为去理解网页，即IE浏览器会采用IE盒子模型去解释您的盒子，而FF会采用标准W3C盒子模型解释您的盒子，所以网页在不同的浏览器中就显示的不一样了。反之，如果加上了DOCTYPE声明，那么所有浏览器都会采用标准W3C盒子模型去解释您的盒子，网页就能在各个浏览器中显示一致了。
　　
　　其实说起来简单，但做起来就没有这么容易了，只有咱们把它们这间的各种关系搞清楚了，咱们才会达到自己想要的效果，怎么样才能搞明白呢，就要咱们不矢余力地多多练习，在练习中发现要点，在实践中才能创造一个良好合理的网页效果。网站站点制作 , 网页制作

名站网址导航于 2020-7-22 20:56 移动 @版权声明名站网址导航声明： 1.该文观点仅代表作者本人，名站网址导航系信息发布平台，名站网址导航仅提供信息存储空间服务。 2.名站网址导航所发布的一切资源、破解补丁、注册机和注册信息及软件的解密分析文章等仅限用于学习和研究目的；不得将上述内容用于商业或者非法用途，否则，一切后果请用户自负。本站信息来自网络，版权争议与本站无关。您必须在下载后的24个小时之内，从您的电脑中彻底删除上述内容。如果您喜欢该网站程序，请支持正版软件，购买注册，得到更好的正版服务。 3.如有侵权请邮件与咱们联系删除或处理（邮箱：[email 988365@gmail.com] ），本站将立即改正，谢谢。