第四章 CSS布局与定位(上)

最新推荐文章于 2021-11-23 11:33:54 发布

DwightYu

最新推荐文章于 2021-11-23 11:33:54 发布

阅读量128

点赞数

分类专栏： Web前端开发

本文链接：https://blog.csdn.net/DwightYu/article/details/110663370

版权

Web前端开发专栏收录该内容

10 篇文章 1 订阅

订阅专栏

一.布局与定位概述

1.盒子模型

页面元素大小

边框

与其他元素的距离

2.定位机制

文档流

浮动定位

层定位

二.盒子模型

页面上区域、图片、导航、列表、段落，都可以是盒子

1.组成元素: 1.content内容

2.height高度

3.width宽度

4.padding内边距

padding-left:40px;

padding-right:40px;

5.border边框

border-left:40px;

border-right:40px;

6.margin外边距

2.overflow属性

hidden 超出部分不可见

scroll 显示滚动条

auto 如果有超出部分，overflow属性取值

3.border属性

border-width:px、thin、medium、thick

border-style:dashed（横线）、dotted（点组成）、double、solid(实线)

border-color:颜色

border:width、style、color

4.margin属性

px、em等...

垂直方向合并,水平方向不合并

-水平居中图片，文字水平居中 text-align=center

-div水平居中 margin:0,auto

三.CSS的定位机制

1.概述有了盒子之后怎么放在页面之中？找到他的位置、确定他的位置。

2.分类文档流、浮动定位、层定位

一.文档流定位

元素分类:block、inline、inline-block

元素类型转换：display属性

1.block元素特点（<div>、<p>、<h1>..<h6>、<ol>、<ul>、<table>、<form>）

独占一行

元素的height、width、margin、padding都可以设置

将元素显示为block元素

display:block;

}

2.inline元素特点（<span>、<a>）

不单独占用一行

width、height不可以设置

width就是它包含的文字或图片的宽度，不可改变

display:inline;

3.inline-block元素特点

不单独占用一行

元素的height、width、margin、padding都可以设置

例如：<img>

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>mysite</title>
	<style>
		*{
			padding: 0;
			margin: 0;
		}
		#nav{
			width: 300px;
			margin: 100px auto;
			font-size:0;
		}
		a{
			display: inline-block;
			width:80px;
			height: 30px;
			font-size: 14px;
			text-align: center;
			line-height: 30px;
			text-decoration: none;
			border-bottom: 1px solid #ccc;
		}
		a:hover{
			color: white;
			background-color:#ccc;
			border:1px solid;
			border-left-color:orange;
			border-top-color:orange;
			border-right-color:orange;
		}
	</style>
</head>
<body>
	<div id="nav">
		<a href="#">链接1</a>
		<a href="#">链接2</a>
		<a href="#">链接3</a>
	</div>
</body>
</html>

DwightYu

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
第四章 CSS布局与定位(上)

一.布局与定位概述1.盒子模型页面元素大小边框与其他元素的距离2.定位机制文档流浮动定位层定位二.盒子模型页面上区域、图片、导航、列表、段落，都可以是盒子组成元素:1.content内容 2.height高度 3.width宽度 4.padding内边距 ...
复制链接

扫一扫

专栏目录