前端学习之CSS（04）布局

最新推荐文章于 2024-07-26 08:00:00 发布

Duing_

最新推荐文章于 2024-07-26 08:00:00 发布

阅读量191

点赞数 1

分类专栏： css 文章标签： css

本文链接：https://blog.csdn.net/J_Du_pro/article/details/106015608

版权

css 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

CSS布局与定位

概述
内容

盒子模型
页面元素的大小
边框
与其他元素的距离
定位机制
文档流
浮动定位
层定位

盒子模型

注：页面上的区域、图片、导航、段落，都可以是盒子，占据着一定的空间。

盒子模型组成

content内容
height高度
width宽度
border边框
padding内边距：边框和内容之间的空白距离。
margin外边距：两个边框之间的距离。
图例：
一个盒子的实际宽度、高度 = content+padding+border+margin
案例：
代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style type="text/css">
			#box{
				width:100px;
				height: 100px;
				padding: 20px;
				border: 1.5px solid;
				margin: 10px;
			}
		</style>
	</head>
	<body>
		<div id="box">
			内容内容内容内容内容内容内容内容内容
			内容内容内容内容内容内容
		</div>
	</body>
</html>

效果：
在这里插入图片描述

overflow属性

取值：
hidden：超出部分不可见
scroll：显示滚动条
auto：如果有超出部分的话，显示滚动条。
案例：

border属性

border-width：px、thin（细）、medium（中）、thick（粗）
border-style：dashed（横虚线）、dotted（点虚线）、solid（实线）、double（双实线）
border-color：颜色
border：width style color
案例
代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style type="text/css">
			.box{
				width:100px;
				height: 50px;
				border-top: double red;
				border-bottom: medium solid blue;
				border-left: thick dashed yellow;
				border-right: thick dotted green;
				margin: 20px;
			}
		</style>
	</head>
	<body>
		<div class="box">
			内容内容内容
			内容内容内容
		</div>
	</body>
</html>

效果：
在这里插入图片描述

padding和margin

对浏览器默认的设置清零

*{
	padding: 0;
	margin: 0;
}

取值：px，%（相对于外层盒子的宽度和高度）

内边距	外边距	方向
padding: 5px;	margin: 10%;	上右下左
padding-top: 5px;	margin-top: 10%;	上
padding-right: 5px;	margin-right: 10%;	右
padding-bottom: 5px;	margin-bottom: 10%;	下
padding-left: 5px;	margin-left: 10%;	左

top和bottom，right和left默认相等，如下
margin: 1px;（margin: 1px 1px 1px 1px;）
margin: 1px 2px;（margin: 1px 2px 1px 2px;）
margin: 1px 2px 3px;（margin: 1px 2px 3px 2px）
margin的合并：垂直方向合并，水平方向不合并。

水平居中

图片文字水平居中：text-align: center;
div水平居中：margin: # auto;（左侧和右侧取值设为auto，浏览器根据外层区域的宽度以及当前div区域的宽度自动将div区域水平居中）

案例

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style type="text/css">
			#imglist{
				text-align: center;
				font-size: 5px;/*增加图片间文字间隙*/
			}
			#imglist img{
				height: 100px;
				width: 100px;
				margin: 5px auto;
				border: 2px dotted gray;
				padding: 5px;
			}
		</style>
	</head>
	<body>
		<div id="imglist">
			<img src="image/huoying.jpg" >
			<img src="image/huoying.jpg" >
			<img src="image/huoying.jpg" >
		</div>
	</body>
</html>

效果：

声明：CSS定位将在下一篇博客中学习。

Duing_

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端学习之CSS（04）布局

CSS布局与定位概述内容盒子模型页面元素的大小边框与其他元素的距离定位机制文档流浮动定位层定位盒子模型注：页面上的区域、图片、导航、段落，都可以是盒子，占据着一定的空间。盒子模型组成content内容height高度width宽度border边框padding内边距：边框和内容之间的空白距离。margin外边距：两个边框之间的距离。图例：一个盒子的实际宽度、高度 = content+padding+border+margin案例：代码：&
复制链接

扫一扫

专栏目录