一.布局与定位概述
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元素
a{
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>