HTML(WEB)开发day05

最新推荐文章于 2023-07-07 19:00:15 发布

weixin_30719711

最新推荐文章于 2023-07-07 19:00:15 发布

阅读量49

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/520gqk/p/9413645.html

本文详细介绍了CSS中的布局技巧，包括如何使用外边距margin实现盒子的居中效果、解决外边距合并问题的方法、圆角盒子及盒子阴影的实现方式等，并通过实例展示了浮动的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

作者：gqk

外边距实现盒子居中margin　

语法：
.text{ 
 margin:0 auto; 盒子水平居中
}

如果提供全部四个参数值，将按上、右、下、左的顺序作用于四边。
如果只提供一个，将用于全部的四边。
如果提供两个，第一个用于上、下，第二个用于左、右。
如果提供三个，第一个用于上，第二个用于左、右，第三个用于下。

注意：盒子里面的内容居中用text-align:center;

　盒子居中需要满足一下条件：

　　1，必须是块级元素，

　　2，盒子必须指定宽度

外边距合并问题：

注意：使用外边距margin设置元素的垂直外边距的时候，可能会出现外边距的合并，

外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。

合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

案例：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		div{
			background-color: red;
			height: 200px;
			width: 200px;
			margin-bottom: 20px;
		}
		.son{
			margin-top: 30px; /* 此时会按照最大的那个边距设置边距 */
			background-color: blue;
			height: 200px;
			width: 200px;
		}

	</style>
</head>
<body>
	<div class="father">
		1
	</div>
	<div class="son">2</div>
</body>
</html>

　　当一个元素包含在另一个元素中时（假设没有内边距或边框(外边盒子)把外边距分隔开），它们的上和/或下外边距也会发生合并。请看下图

盒子案例：存在问题

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		.father{
			background-color: red;
			height: 200px;
			width: 200px;
		}
		.son{
			background-color: blue;
			height: 100px;
			width: 100px;
			margin-top: 30px; /* 此时外边距 不会将两个盒子分开  因为边距合并了*/
		}

	</style>
</head>
<body>
	<div class="father">
		<div class="son">2</div>
	</div>
	
</body>
</html>

overflow: hidden; 也可以解决此类问题

解决盒子边框合并总结：

　　1，设置外边盒子的边框

　　2，父容器设置overflow: hidden

　　3，父容器设置内边距，padding

padding不会撑开盒子的情况

**子盒子在没有指定宽度的情况下，默认宽度是父盒子的宽度，如果盒子没有指定宽度则padding不会影响盒子的大小，否则会撑开盒子

举例：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		.father{
			background-color: red;
			height: 200px;
			width: 200px;
			padding:20px;
		}
		.son{
			/* padding:20px; 此时不会撑开盒子 */
		}

	</style>
</head>
<body>
	<div class="father">
		<div class="son">2</div>
	</div>
	
</body>
</html>

　圆角盒子　

语法：
border-radius:50% 会使巨型变为 圆

如果只提供一个，将用于全部的于四个角。
如果提供两个，第一个用于上左(top-left)、下右(bottom-right)，第二个用于上右(top-right)、下左(bottom-left)。
如果提供三个，第一个用于上左(top-left)，第二个用于上右(top-right)、下左(bottom-left)，第三个用于下右(bottom-right)。

　　圆角练习：

盒子阴影：

语法：
box-shadow:none | <shadow> [ , <shadow> ]*
说明：
<length>①： 第1个长度值用来设置对象的阴影水平偏移值。可以为负值 
<length>②： 第2个长度值用来设置对象的阴影垂直偏移值。可以为负值 
<length>③： 如果提供了第3个长度值则用来设置对象的阴影模糊值。不允许负值 
<length>④： 如果提供了第4个长度值则用来设置对象的阴影外延值。不允许负值 
<color>： 设置对象的阴影的颜色。 

div:hover {  /*鼠标经过div时候的样子。。。*/
  box-shadow: 0 15px 30px rgba(0,0,0,0.1);
 }

　浮动：之前我们学的所有标签都为标准流，浮动可以将标准改为不标准，

css定位机制：

　　1，标准流

　　2，浮动

　　3，定位

一下布局都是以div块级元素进行布局的：

Float:最早起来是用来控制图片，用来实现文字环绕图片；

后来我们可以使用浮动来进行布局；

浮动的语法：

语法：
float：none | left | right

默认值： none
取值：
none： 设置对象不浮动 
left： 设置对象浮在左边 
right： 设置对象浮在右边

浮动的特性：

浮动脱离了标准流，不会占位置，会影响标准流，浮动只有左右浮动

浮动的元素总是找理它最近的父级元素对齐，但是不会超出内边距的范围

注意：存在父子关系的盒子必须父子，如果有其中一个自己浮动，其它自己都需要浮动，这样才能一行显示；

如果已经给了行内元素添加了浮动，此时不需要再转换这个元素的也可以设置宽高；

版心和布局流

布局的流程：

　　1，确定页面的版心（可视区）

　　2，分析页面之中的行模块，以及每个行模块中的列模块

　　3，制作HTML结构

　　4，CSS初始化

一列固定宽度且居中

两列左窄右宽型

比如小米官网

通栏平均分布型

锤子页面

案例，下章节有道页面的制作：

=----------------------------------只要思想不滑坡，办法总比困难多

转载于:https://www.cnblogs.com/520gqk/p/9413645.html