目录
1..盒子布局
border:
dotted | 定义点状边框 |
dashed | 虚线,但是大多浏览器为实现 |
solid | 实线 |
double | 定义双线 |
padding:
auto | 浏览器计算内边距。 |
length | 规定以具体单位计的内边距值,比如像素、厘米等。默认值是 0px。 |
% | 规定基于父元素的宽度的百分比的内边距。 |
写法:
(1)padding:1px 5px 12px 3px;
表示:
上内边距是 10px,右内边距是 5px,下内边距是 15px,左内边距是 20px
(2)padding:10px 5px 15px;
表示:
上内边距是 10px,右内边距和左内边距是 5px,下内边距是 15px
(3)padding:12px 15px;
表示:
上内边距和下内边距是 12px,右内边距和左内边距是 15px
(5)padding:6px;
表示:
四边的边距为6px
margin:
margin与padding的属性相同。
写法也相同,效果也相同。
图片展示
2.元素的分类
块元素:总是在新行上开始。
内联元素:和其他元素在一行。
白话一点的话
块级元素:独占一行,能自动换行,可以设置长和高。例如div、p、和hn(n可以去1、2等等)和nav、footer、address等等。
内联元素:不能自动换行,设置长和高不起作用.例如span、修饰字体<b>和<i>标签等等
dispaly:
none | 此元素不被显示 |
block | 此元素显示为块级元素,此元素前后会有换行符 |
inline | 默认元素显示为内联元素,元素前后无换行符 |
介绍
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
a{
width: 200px;
height:200px;
display: block;
text-decoration: none;
}
</style>
</head>
<body>
<div class="one">1</div>
<div class="two">2</div>
<div class="there">3</div>
<a href="#">a</a>
<a href="#">a</a>
<a href="#">a</a>
</body>
</html>
效果
本来a是内联元素并不会换行,也不能设置长和宽。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.one{
width: 200px;
height:200px;
background-color: yellow;
}
.two{
width: 200px;
height:200px;
background-color: red;
}
.there{
width: 200px;
height:200px;
background-color: blue;
display: none;
}
</style>
</head>
<body>
<div class="one">1</div>
<div class="two">2</div>
<div class="there">3</div>
<a href="#">a</a>
<a href="#">a</a>
<a href="#">a</a>
</body>
</html>
效果
明显看出3图标的方块不见了,说明div转变为了内联元素
css的隐藏元素的方式
width:0; height:0;
display:0;
3.浮动布局
float:
left | 向左浮动 |
right | 向右浮动 |
none |
不浮动
|
clear:
left | 在左侧不允许浮动元素 |
right | 在右侧不允许浮动元素 |
both | 在两侧不允许浮动元素 |
none | 允许浮动元素 |
4.定位布局
position:
absolute | 生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 |
fixed | 生成绝对定位的元素,相对于浏览器窗口进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 |
relative | 生成相对定位的元素,相对于其正常位置进行定位。 因此,"left:20" 会向元素的 LEFT 位置添加 20 像素。 |
static | 默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。 |
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
.main{
width: 300px;
height: 300px;
border: 1px solid black;
margin: 200px;
/* position: relative; */
}
.one{
width: 100px;
height:100px;
background-color: yellow;
position: absolute;
left: 200px;
top: 100px;
}
.two{
width: 100px;
height:100px;
background-color: red;
}
.there{
width: 100px;
height:100px;
background-color: blue;
}
</style>
</head>
<body>
<div class="main">
<div class="one">1</div>
<div class="two">2</div>
<div class="there">3</div>
</div>
</body>
</html>
(1)效果
(2)效果
当前我们把 /* position: relative; */打开
得到如下
(3)效果
如果我们把margin:200px;关掉,那么图像没有办法先上面移动的空间,将会得到如下