一、盒子布局
boder-边框 | 上右下左 |
padding-外边距 | 内容距离边框的距离上右下左 |
margin-外边距 | 边框距离页面的距离 |
none | 定义无边框 |
hiedden | 与none相同。不过应用于表时除外,对于表,hidden用于解决边框冲突 |
dotted | 定义点状边框。在大多数浏览器中呈现为实线 |
dashed | 定义虚线。在大多数浏览器中呈现实线 |
solid | 定义实线 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>盒子布局</title>
<style>
div{
width: 100px;
height: 100px;
background-color: red;
border: 1px solid black;
padding: 20px;
margin-left: 100px;
}
</style>
</head>
<body>
<div>
我是重庆彭于晏
</div>
</body>
</html>
二、元素分类
块级元素------独占一行(自动换行)div p hn hr 可以设置宽度和高度
行内元素(内连)------不会自动换行a span 不可以设置宽度和高度(不起作用)
display可以实现会计元素和行内元素之间互换
属性取值:
none----表示不会被显示,隐藏元素的方式之一
block----将元素变为款及元素,也会自动换行(默认有个换行符)
inline----将元素变为行内元素,元素前后没有换行符
注意:css中隐藏元素的方式:
第一种:display:none;
第二种:width:0;heigth:0;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>元素分类</title>
<style>
div{
width: 100px;
height: 100px;
border: 1px solid black;
/* display: inline; */
}
a{
width: 100px;
height: 100px;
border: 1px solid black;
display: block;
}
.one{
width: 100px;
height: 100px;
background-color: red;
/* display: none;
width: 0;
height: 0; */
}
</style>
</head>
<body>
<div class="one">这是第一个div</div>
<div>这是第二个div</div>
<div>这是第三个div</div>
<a href="#">这是第一个a标签</a>
<a href="#">这是第二个a标签</a>
<a href="#">这是第三个a标签</a>
<a href="#">这是第四个a标签</a>
</body>
</html>
三、浮动布局
通过float属性去设置浮动布局
取值:left none(不浮动)right
注意:如果浮动取值是left的话(左浮),会对后面的元素产生一定的影响
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>浮动布局</title>
<style>
.box1{
width: 200px;
border: 1px;
height: 200px;
background-color: blueviolet;
float: right;
}
.box2{
width: 200px;
height: 200px;
border: 1px;
background-color: blue;
clear:both;
}
.box3{
width: 200px;
height: 200px;
border: 1px;
background-color: brown;
float:left ;
}
</style>
</head>
<body>
<div class="box1">这是一个div</div>
<div class="box2">这是二个div</div>
<div class="box3">这是三个div</div>
</body>
</html>
浮动布局如上面所示
如果要消除这总影响(消除浮动)通过clear属性
none | 默认允许两边都浮动 |
left | 不允许左边浮动 |
right | 不允许右边浮动 |
both | 不允许两侧有浮动 |
四、定位布局
定位就是将指定元素摆放到页面的任意位置,通过定位可以任意摆放元素。
通过position属性来设置元素的定位。
position的取值
值 | 描述 |
static | 与正常流相同,并且为默认值 |
relative | 盒子的位置可以相对其在正常流中的位置出现偏移,对象不可层叠,可根据left、right、top和bottom等属性的值在正常流中偏移。 |
fixed | 固定在屏幕的某个位置,位置通过left、right、top和bottom属性指定,并且不随用户滚动窗口而改变位置。 |
示列代码如下面所示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>定位布局</title>
<style>
.main{
width: 600px;
height: 600px;
border: 1px solid rgb(255, 47, 161);
margin: 200px;
position: relative;
}
.box1{
width: 200px;
border: 1px solid black;
height: 200px;
background-color: blueviolet;
position: absolute;
top: 100px;
left: 200px;
}
.box2{
width: 200px;
height: 200px;
border: 1px solid black;
background-color: blue;
/* position: relative;
left: 200px; */
}
.box3{
width: 200px;
height: 200px;
border: 1px solid black;
background-color: brown;
float:left ;
}
</style>
</head>
<body>
<div class="main">
<div class="box1">中国彭于晏</div>
<div class="box2">重庆彭于晏</div>
<div class="box3">永川彭于晏</div>
</div>
</body>
</html>
五、弹性盒子
弹性盒子由弹性容器和弹性子元素组成。弹性容器通过设置display属性的值为flex而定义为的弹性容器。
设置弹性容器是通过 display 属性进行设置, ---------- display:flex 或则 inline-flex 注意:一个弹性容器可以包含多个弹性元素 弹性盒子只是规定了弹性子元素如何在弹性容器内布局,其他时候(弹性容器外,弹性子元素内)都是正常渲染的。并且默认弹性子元素只在弹性盒子的一行展示,默认每个容器只有一行flex- direction | 指的是弹性容器中子元素的排列方式 |
flex-wrap | 指的是弹性容器中子元素超出父容器时是否换行 |
flex-flow | -flex- direction 和 flex-wrap 的简写 |
align-items | 设置的弹性容器中元素在侧轴 ( 纵轴)的对齐方式 |
justify-content | 设置的弹性容器中元素在主轴(横轴)的对齐方式 |
align-content | - 修改了 flex-flow 的行为,类似于 align-items ,它是对齐的弹性线 |
所示代码如下
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>弹性盒子</title> <style> .flex-contain{ width: 400px; height: 400px; background-color: orange; display: flex; align-items: center; } .flex-item{ width: 100px; height: 100px; background-color: blueviolet; border: 1px solid black; } </style> </head> <body> <div class="flex-contain"> <div class="flex-item">flex-item1</div> <div class="flex-item">flex-item2</div> <div class="flex-item">flex-item3</div> </div> </body> </html>