1.元素块居中
设置元素块的位置相对父元素居中
margin:0px auto; <!–设置外边框的左右尺寸为‘自动’–>
2.css显示特性
display属性是用来设置元素的类型及隐藏的,常用属性有:
2.1 none 元素隐藏且不占位置
2.2 inline 元素以行内元素(内联元素)显示
2.3 block 元素以块元素显示
举例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
/* 设置display属性,将块元素转化成内联元素(行内元素) */
div{
display: inline;
}
a{
/* 设置display属性,将内联元素转化成块元素 */
display:block;
}
p{
/* 设置display属性,将元素隐藏起来 */
display:none;
width: 200px;
height: 200px;
background:gold;
}
</style>
</head>
<body>
<div>这是第一个div</div>
<div>这是第二个div</div>
<a href="#">这是一个链接</a>
<a href="#">这是另一个链接</a>
<p>
这是第一个p标签
</p>
</body>
</html>
效果:
3.css元素溢出
当子元素的尺寸超过父元素的尺寸时,需要设置父元素显示溢出的子元素的方式,设置的方法是通过overflow属性来设置
overflow设置项:
(1)visible 默认值。内容不会被修改,会呈现在父元素框之外
(2)hidden 内容会被修改,并且其余内容不会显示在父元素框外部
(3)scroll 不会显示在父元素矿外部,但是可以通过父元素的滚动条来查看溢出的内容
(4)auto 如果内容溢出父元素框,则显示滚动条,否则不显示滚动条
举例:
<style>
.d1{
width: 150px;
height: 100px;
border:2px solid black;
float:left;
margin-left:10px;
}
/* 父元素设置overflow属性
visible:默认设置,显示超出部分
hidden:将超出的部分隐藏
scroll:不管是否超出,都会显示滚动条,可以通过滚动条显示超出的部分
auto:根据子元素具体是否超出父元素,智能显示滚动条 */
.visible{overflow:visible;}
.hidden{overflow:hidden;}
.scroll{overflow:scroll;}
.auto{overflow:auto;}
.d2{
width: 100px;
height: 200px;
background: gold;
}
</style>
<body>
<div class="d1 visible">
<div class="d2">这是visible样式</div>
</div>
<div class="d1 hidden">
<div class="d2">这是hidden样式</div>
</div>
<div class="d1 scroll">
<div class="d2">这是scroll样式</div>
</div>
<div class="d1 auto">
<div class="d2">这是auto样式</div>
</div>
</body>
效果图:
4.表格元素及相关样式
(1)<table>标签:声明一个表格
(2)<tr>标签:定义表格中的一行
(3)<td>标签:定义一行中的一个普通单元格
(4)<th>标签:定义一行中的一个表头单元格
表格相关样式属性
border-collapse:collapse; 设置表格的边线合并
举例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
table{
width: 500px;
height: 200px;
border:2px solid black;
/* 设置表格的边线合并 */
border-collapse:collapse;
}
th{
border:1px solid black;
/* 设置每个单元格的宽度为总宽度的20%,
否则单元格默认宽度会根据填写内容自动调整 */
width:20%;
background:hotpink;
}
td{
border:1px solid black;
text-align:center;
}
</style>
</head>
<body>
<!-- 快捷创建 table>(tr>td*5)*4 -->
<table>
<tr>
<th>序号</th>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<th>班级</th>
</tr>
<tr>
<td>1</td>
<td>张三</td>
<td>男</td>
<td>20</td>
<td>python-12</td>
</tr>
<tr>
<td>2</td>
<td>李四</td>
<td>男</td>
<td>24</td>
<td>python-13</td>
</tr>
<tr>
<td>3</td>
<td>张红</td>
<td>女</td>
<td>22</td>
<td>python-12</td>
</tr>
</table>
</body>
</html>
效果:
5.定位
5.1.文档流
是指盒子按照html标签编写的的顺序依次从上到下,从左到右排列,块元素占一行,行内元素在一行之内从左到右排列,先写的先排列,后写的排后面,每个盒子都占据自己的位置。
5.2.关于定位
5.2.1.使用css和position属性来设置元素的定位类型,position的设置有relative、absolute、fixed,具体如下:
(1)relative 生成相对定位元素,依然占据原有文档流,一般是将父级设置相对定位,子级设置绝对定位,子级就以父级作为参照来定位,否则子级相对body来定位
举个栗子(代码只写了关键内容):
......
<style>
.com{
width: 300px;
height: 300px;
border:1px solid black;
margin:0px auto;
}
.com div{
width: 200px;
height: 70px;
margin:10px;
}
.box1{
background:blueviolet;
/* 设置相对定位relative */
position:relative;
left:30px;
top:30px;
}
.box2{
background: greenyellow;
}
.box3{
background: violet;
}
</style>
........
<div class="com">
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
</div>
.......
效果:
(2)absolute 生成绝对定位元素,元素脱离文档流,不占据文档流的位置,可以理解为漂浮在文档流的上方,相对于上一个设置了定位的父级元素来进行定位,如果找不到,则相对于body元素进行定位
举个栗子:
......
<style>
.con{
width: 300px;
height: 300px;
border:1px solid black;
/* 父级设置为相对定位,不设置偏移,子级就能相对父级设置绝对定位 */
position:relative;
}
.con div{
width: 200px;
height: 70px;
}
.box1{
background:green;
/* 设置绝对定位 absolute */
position:absolute;
left:30px;
top:30px;
}
.box2{
background: blue;
}
.box3{
background:hotpink;
}
</style>
......
<body>
<div class="con">
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
</div>
......
效果:
(3)fixed 固定定位,元素脱离文档流,不占据文档流位置,相对于浏览器窗口进行定位
举个栗子:
......
<style>
.com{
width: 300px;
height: 300px;
border:1px solid black;
}
.com div{
width: 200px;
height: 70px;
margin:10px;
}
.box1{
background:hotpink;
position:fixed;
left:150px;
top:70px;
}
.box2{
background:brown;
}
.box3{
background: wheat;
}
</style>
......
<body>
<div class="com">
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
</div>
......
效果:
5.2.2.定位元素的偏移
定位的元素还需要用left、right、top、bottom来设置相对于参照元素的偏移值
5.2.3.定位元素的层级
定位元素是浮动在正常的文档流之上的,可以用z-index属性来设置层级
格式:
z-index: n;
数字n越大,元素越靠上,n值较大的默认遮挡较小的