随便记录一点东西......

最新推荐文章于 2022-08-04 08:13:36 发布

qq_37957971

最新推荐文章于 2022-08-04 08:13:36 发布

阅读量296

点赞数

分类专栏： css3 html5 文章标签：面向对象与面向过程 div居中自适应布局响应式布局

本文链接：https://blog.csdn.net/qq_37957971/article/details/84996153

版权

html5 同时被 2 个专栏收录

11 篇文章 0 订阅

订阅专栏

css3

3 篇文章 0 订阅

订阅专栏

1、面向对象与面向过程的区别：

1）面向对象是以“对象”为中心的编程思想。
面向过程是一种以事件为中心的编程思想，即分析出解决问题的步骤，然后用函数把这些步骤实现，并按顺序调用。

2）面向对象是将事物高度抽象化，它必须先建立抽象模型，之后直接使用模型就可以了。
面向过程是一种自顶向下的编程。

3）面向对象的优缺点：
优点：易维护、易复用、易扩展，由于面向对象有封装性、继承性、多态性，可以设计出低耦合的系统，是系统更加灵活、更加易于维护。
缺点：性能比面向过程低。

4）面向过程的优缺点：
优点：性能比面向对象高，因为类调用时需要实例化，开销比较大，比较消耗资源，例如单片机、嵌入式开发、Linux/Unix等一般采用面向过程开发，性能是最重要的因素。
缺点：没有面向对象易维护、易复用、易扩展。

具体的例子解释可参考博客：https://blog.csdn.net/jerry11112/article/details/79027834 描述得生动形象、通俗易懂。

2、图标与图片的区别

图标与图像的标准不同。它们是有标准尺寸的（通常很小）：1616,3232,48*48…
一个图标是由几个图像组成。其中每一个具有不同的大小和颜色数（单色，16色，256色，16.8M）。
图标有一个很重要的特性是允许看到屏幕后面的背景图标的图像，即透明度。

3、四种盒子居中的方法

1）使用CSS3新增属性table-cell

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>使用CSS3新增属性table-cell</title>
	<!-- 给外层div设置
	        display: table-cell;
			vertical-align: middle;
			text-align: center; 
		 给内层div设置display: inline-block;-->
	<style>
		.outer{
			display: table-cell;
			vertical-align: middle;
			text-align: center;
			width: 200px;
			height: 200px;
			border: 1px solid red;
		}
		.inner{
			display: inline-block;
			width: 50px;
			height: 50px;
			background-color: pink;
		}
	</style>
</head>
<body>
    <div class="outer">
    	<div class="inner"></div>
    </div>
</body>
</html>

效果图：

使用CSS3新增属性table-cell
2）使用flex布局

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>使用flexbox布局</title>
	<!-- 直接在父元素上使用flexbox布局 -->
	<!-- 给外层div设置display: flex;justify-content: center; 内层div设置align-self: center;-->
	<style>
		.outer{
			display: flex;
			/*flex-direction: column;*/
			justify-content: center;
			width: 600px;
			height: 300px;
			background-color: pink;
		}
		.inner{
			align-self: center;
			width: 50%;
			height: 50%;
			background-color: lightblue;
		}
	</style>
</head>
<body>
	<div class="outer">
    	<div class="inner"></div>
    </div>
</body>
</html>

效果图：

使用flex布局
3）使用position定位法

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>使用position定位法</title>
	<!-- 给外层div设置相对定位，内层div设置绝对定位，并且宽高为外层div的50%,设置top和left的值为25% -->
	<style>
		.outer{
			position: relative;
			width: 600px;
			height: 300px;
			background-color: darkorange;
		}
		.inner{
			position: absolute;
			width: 50%;
			height: 50%;
			top: 25%;
			left: 25%;
			background-color: lightblue;
		}
	</style>
</head>
<body>
	<div class="outer">
    	<div class="inner"></div>
    </div>
</body>
</html>

效果图：

使用position定位法
4、通过transform方法

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>通过transform方法</title>
	<!-- 给内层div设置transform: translate(50%,50%); -->
	<style>
		.outer{
			width: 600px;
			height: 300px;
			background-color: teal;
		}
		.inner{
			width: 50%;
			height: 50%;
			background-color: pink;
			transform: translate(50%,50%);/*以自己为参考点*/
		}
	</style>
</head>
<body>
	<div class="outer">
    	<div class="inner"></div>
    </div>
</body>
</html>

效果图：
通过transform方法
关于盒子居中是面试或笔试时通常会遇到的问题。当然还有其他种实现方法，这里我只总结了四种。之后用到其他方法了再来补充吧。

4、使用CSS实现三栏自适应布局（左右div固定宽度，中间div宽度自适应）

1）使用CSS3新特性

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>使用CSS3新特性</title>
	<!-- 在外围包裹一层div，设置为display:flex;中间center元素设置flex:1;
	盒模型默认是紧挨着的，所以使用margin控制外边距。 -->
	<style>
		.box{
			display: flex;
			width: 100%;
			height: 100px;
		}
		.left,.right{
			width: 200px;
			height: 200px;
			margin:10px;
			background-color: pink;
		}
		.center{
			flex:1;
			height: 200px;
			margin: 10px;
			background-color: lightgreen;
		}
	</style>
</head>
<body>
    <div class="box">
		<div class="left">我是左边</div>
		<div class="center">我是中间</div>
		<div class="right">我是右边</div>
	</div>	
</body>
</html>

效果图：

使用CSS3新特性
2）绝对定位法

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>绝对定位法</title>
	<!-- 左右两边元素使用absolute绝对定位，中间使用margin属性留出左右元素的宽度，center即可自适应宽度 -->
	<style>
		html,body{
			margin: 0px;
			width:100%;
		}
		.left,.right{
			width: 200px;
			height: 200px;
			background-color: pink;
			position: absolute;
		}
		.left{
			left:0px;
		}
		.right{
			right: 0px;
		}
		.center{
			margin: 2px 210px;
			background-color: lightblue;
			height: 200px;
		}
	</style>
</head>
<body>
	<div class="left">我是左边</div>
	<div class="right">我是右边</div>
	<div class="center">我是中间</div>
</body>
</html>

效果图：
绝对定位法
3）自身浮动法

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>自身浮动法</title>
	<!-- 左右两边元素分别浮动，中间元素设置margin属性指定左右外边距进行自身定位。 -->
	<style>
		.left,.right{
			width: 200px;
			height: 200px;
			background-color: pink;
		}
		.left{
			float: left;
		}
		.right{
			float: right;
		}
		.center{
			margin: 0px 210px;
			height: 200px;
			background-color:#aaa;
		}
	</style>
</head>
<body>
	<div class="left">我是左边</div>
	<div class="right">我是右边</div>
	<div class="center">我是中间</div>
</body>
</html>

效果图：自身浮动法
4）margin负值法

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>圣杯布局：margin负值法</title>
	<!-- 首先需要在center元素外部包含一个div，这个div要设置float属性使其形成一个BFC，并设置宽度，而且这个宽度与left元素的margin负值进行配合 -->
	<style>
		.wrap{
			width: 100%;
			height: 100px;
			background-color: #fff;
			float: left;
		}
		/*后代选择器使用空格，选中子元素，也可以选中孙子元素*/
		.wrap .center{
			margin: 0px 210px;
			height:100px;
			background-color: lightblue;
		}
		/*多选择器使用逗号，同时选中多个*/
		.left,.right{
			float:left;
			width: 200px;
			height: 100px;	
		}
		.left{
			margin-left: -100%;
			background-color: lightpink;
		}
		.right{
			margin-left: -200px;
			background-color: darkorange;
		}
	</style>
</head>
<body>
	<div class="wrap">
		<div class="center">中间</div>
	</div>
	<div class="left">左边</div>
	<div class="right">右边</div>
</body>
</html>

效果图：
margin负值法（圣杯布局）
运行后，可调整浏览器屏幕大小来检验是否实现自适应布局。
关于三栏自适应布局也是面试和笔试经常会遇到的题。

4、关于响应式布局

以下是摘自百度百科：
1）概念：简而言之，就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。

2）说到响应式布局，就不得不提起CSS3中的Media Query（媒介查询），这可是个好东西，易用、强大、快捷……Media Query是制作响应式布局的一个利器，使用这个工具，我们可以非常方便快捷的制造出各种丰富的实用性强的界面。

3）CSS3中的Media Query（媒介查询）是什么？
通过不同的媒介类型和条件定义样式表规则。媒介查询让CSS可以更精确作用于不同的媒介类型和同一媒介的不同条件。媒介查询的大部分媒介特性都接受min和max用于表达”大于或等于”和”小于或等于”。如：width会有min-width和max-width媒介查询可以被用在CSS中的@media和@import规则上，也可以被用在HTML和XML中。通过这个标签属性，我们可以很方便的在不同的设备下实现丰富的界面，特别是移动设备，将会运用更加的广泛。

未完待续…

今晚就先记录到这里了。(‘-ωก̀ )好困…

qq_37957971

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
随便记录一点东西......

1、面向对象与面向过程的区别：1）面向对象是以“对象”为中心的编程思想。面向过程是一种以事件为中心的编程思想，即分析出解决问题的步骤，然后用函数把这些步骤实现，并按顺序调用。2）面向对象是将事物高度抽象化，它必须先建立抽象模型，之后直接使用模型就可以了。面向过程是一种自顶向下的编程。3）面向对象的优缺点：优点：易维护、易复用、易扩展，由于面向对象有封装性、继承性、多态性，可以设计出低耦...
复制链接

扫一扫