CSS 基础

最新推荐文章于 2024-11-15 11:24:51 发布

Dormiveglia-flx

最新推荐文章于 2024-11-15 11:24:51 发布

阅读量138

点赞数

分类专栏： HTML5+ES6-ES13+CSS3 文章标签： css 前端 html ui css3

本文链接：https://blog.csdn.net/sugerfle/article/details/125971258

版权

HTML5+ES6-ES13+CSS3 专栏收录该内容

34 篇文章 0 订阅

订阅专栏

本文介绍了CSS中使div元素快速实现上下左右居中的方法，利用flex布局和margin自动属性。接着详细讲解了CSS标准盒子模型，通过示例展示了盒子高度的计算方式，并对比了margin与padding的区别。最后，概述了HTML在浏览器上的渲染过程，从HTML到DOM树，再到渲染树、布局计算、UI渲染，直至用户可见界面。

摘要由CSDN通过智能技术生成

CSS 基础

一 div 快速上下左右居中的方式

       <div class="div1">
		   <div class="div2">
		      div 快速上下左右居中的方式
		   </div>
		</div>

<style>
	  .div1{
	    display:flex
	  }
	  
	  .div2{
	    margin:auto
	  }
	  
	</style>

二 CSS盒子模型(去除IE)：

标准盒子模型即：margin border padding content

       <div style="height:300px;background-color: green;">
		   <div>CSS盒子模型(去除IE)：标准盒子模型即：margin border padding content 例子：</div>
		   <div style="background-color: lightblue;
				margin:50px;
				border:10px solid red;
				padding:30px;
				height:100px;">
		       盒子内容content:此时盒子的高度是180  即：30*2(padding*2) + 10*2(border*2) + 100(content) = 180
			   在标准盒子模型中：盒子的高度 = border + padding + content  与 margin无关
		   </div>
		</div>

margin与padding有什么区别？作用对象不同，margin是作用于外界的，而padding是作用于自身的

三 html是怎么在浏览器上渲染的？：

<div style="background-color: green;width:100%;height:200px;margin-top:50px" >
		   html是怎么在浏览器上渲染的？
		   
		   HTML--->DOM树  
		                   ---> render tree  ---> 计算布局信息  ---> UI引擎渲染 ---> 用户所见界面
		   CSS--->CSS结构体
</div>