带你彻底了解display:inline-block和box-sizing:border-box

最新推荐文章于 2022-04-01 21:29:41 发布

漫游者码农

最新推荐文章于 2022-04-01 21:29:41 发布

阅读量1k

点赞数 1

分类专栏： css3学习

本文链接：https://blog.csdn.net/xu2034029667/article/details/103230538

版权

css3学习专栏收录该内容

12 篇文章 0 订阅

订阅专栏

本文写作的目标是对css的盒模型进行科普性阐述，也是自己学习css这么长时间的关于盒模型的一个积累。当然，这篇文章还会涉及到讨论盒模型时最经常遇到的两个问题。最后将会给出一些关于css3中的box-sizing属性的说明和用法。

重要的事情说三遍：

developer.mozilla.org是一个学习的好网站，一定要重视最基础的东西

<!DOCTYPE html>
<html>
	<head>
		<meta charset="{CHARSET}">
		<title></title>
	</head>
	<style>
		body{
			width: 500px;
			height: 500px;
			/*background: #cccccc;*/
			border: 5px solid black;
		}
		.box {
  border: 5px solid rebeccapurple;
  background-color: lightgray;
  padding: 40px;
  margin: 40px;
  width: 300px;
  height: 150px;
}

.alternate {
  box-sizing: border-box;
}
.container{
	border:5px solid blue;
	/*height: 100%;*/
}
.box {
  margin-top: -40px;
  margin-right: 30px;
  margin-bottom: 40px;
  margin-left: 4em;
}
  .one {
  margin-bottom: 50px;
}

.two {
  margin-top: 30px;
}
  span {
  margin: 20px;
  padding: 20px;
  width: 80px;
  height: 50px;
  background-color: lightblue;
  border: 2px solid blue;
}
.inline-block{
	display: inline-block;
}
.links-list {
	display: flex;
	list-style: none;
	border: 1px solid black;
}
   .links-list a {
  background-color: rgb(179,57,81);
  color: #fff;
  text-decoration: none;
  padding: 1em 2em;
  display: inline-block;
  
}

.links-list a:hover {
  background-color: rgb(66, 28, 40);
  color: #fff;
}
   
	</style>
	<body>
		<!--1.盒子模型 标准盒模型，和IE盒子模型，出现兼容差异，体现在padding和border,
		解决这个问题，出现替代盒子模型，ie8以上，可以解决这个差异问题，box-sizing:border-box;
		统一成替代盒子模型，-->
		<!--<div class="box">I use the standard box model.</div>
<div class="box alternate">I use the alternate box model.</div>-->
<!--2.这里外边距，始终是额外空间，至于他改变父元素的属性，是扩展还是缩小
	如果父元素占地大小未确定，那么负值缩小父，正值扩大，如果确定则不会影响，表现像是x,y轴上的位移
	同时无论怎么给margin-right和margin-bottom都不会影响自身位置，只有left和top影响
-->
<!--<div class="container">
  <div class="box">Change my margin.</div>
</div>
    -->
    <!--3.理解外边距的一个关键是外边距折叠的概念。如果你有两个外边距相接的元素，这些外边距将合并为一个外边距，即最大的单个外边距的大小。-->
    <!--<div class="container">
  <p class="one">I am paragraph one.</p>
  <p class="two">I am paragraph two.</p>
</div>-->
<!--4任何元素的内边距都可以改变-->


<!--5以上外边距，边框，内边距在块状盒子里，都是起到作用的，其中一些在内联盒子，同样起作用
	重中之重，是完全不会改变外界空间，像是重新生出一些空间，因而出现重叠，总之
	完全不会压缩，扩大父元素 ，还有一点是他的宽度，高度始终是自动auto
	行内元素，主要是padding一直起到作用，将周围元素，特点生出空间，不会挤占周围空间，
	（尤其是垂直方向没什么影响，水平方向，影响文档流之中的同行元素，仅仅影响一行
	margin同样如此，影响水平一行外围空间）
	甚至达到一个，绝对定位的效果
-->
<!--6由5可以看到，高度宽度，没有改变，尤其是垂直高度，完全没有挤开上下元素，
如果希望高度宽度起作用，同时又不会占据整行，自身换行，由此出现行内块元素，
这样以来完全起到作用-->
<!--<p>
    I am a paragraph and this is a <span class="inline-block">span</span> inside that paragraph. A span is an inline element and so does not respect width and height.
</p>     -->
<!--7常见引用中，导航栏，一般给与padding填充，同时覆盖在父ul上，为了解决这个问题，
正好用inline-block ，挤开空间，从而让ul均匀覆盖-->
    <nav>
  <ul class="links-list">
    <li><a href="">Link one</a></li>
    <li><a href="">Link two</a></li>
    <li><a href="">Link three</a></li>
  </ul>
</nav>  
	</body>
</html>