一、css中实现元素隐藏的几种方法
1.opsition:0;
通过透明实现元素隐藏，视觉上隐藏但仍然存在
2.display:none;
标签消失，不占页面位置，不显示
3.display:block;
独占一行，可设置宽高，块显示
二、如何进行元素转换
1. 行元素：（a，span，b，ins）
可以同别的元素在一行显示，但不可以设置宽高
行内块：（img，input）
可以同别的元素在一行显示，可设置宽高
块：（div，p，h1，li）
独占一行，可设置宽高
2.如何将行元素转换为行内块、块？
（1） 行元素转换为块
div{
display:block;
}（2）转换为行内块
div{
display:inline-block;
}三、 定位
1.定位
(1)静态static：
所有的标签默认都是静态的static，无法改变位置（即使加top/right/bottom/left等参数也不会影响）
默认标签为：position: static;
(2)相对定位relative：
用处:在相对于标签原来的位置做移动relative,设置此属性之后仍然处在文档流中，不影响其他元素的布局
用法:把默认静态定位改为相对定位position: relative;
然后相对原来位置调整位置top/right/bottom/left
(3)绝对定位absolute：
概念:相对于已经定位过的父标签做移动(如果没有父标签那么就以body为参照),本质脱离文档流
用处:当不知道页面其他标签的位置和参数，只知道一个父标签的参数，基于该标签进行位置调整
用法：
1)首先在使用绝对定位时，该标签的父标签不可以是静态标签， 父标签要设置position: relative;或position: absolute;否则标签会以body为位置参照
2)然后把该标签的默认静态定位改为绝对定位position: absolute;
3)最后以父标签位置做参照调整位置top/right/bottom/left
(4)固定定位fixed
概念：相对于浏览器窗口固定在某个位置,本质脱离文档流
用处：如右下侧回到顶部
用法：position: fixed; 写了fixed之后 定位就是依据浏览器窗口，上下滑动位置不变然后以浏览器为参照调整位置top/right/bottom/left
标签由static变为relative或absolute，它的性质就从原来没有定位的标签变成了已经定位过的标签
3.相对定位relative例子代码
<html>
<head>
<style>
body{
margin: 0;
}
#d1{
height: 500px;
width: 500px;
background-color: burlywood;
}
#d2{
background-color: aquamarine;
height: 300px;
width: 300px;
position: relative;
top: 50px;
right: 30px;
}
</style>
</head>
<body>
<div id="d1">
<div id="d2">
今天星期五
</div>
</div>
</body>
</html>
4.绝对定位absolute例子代码：
<html>
<head>
<style>
body{
margin: 0;
}
#d1{
height: 500px;
width: 500px;
background-color: burlywood;
position: relative;
/*f父标签不可以是静态标签，要改relative或absolute*/
}
#d2{
background-color: aquamarine;
height: 300px;
width: 300px;
position: absolute;
top: 50px;
right: 30px;
}
</style>
</head>
<body>
<div id="d1">
<div id="d2">
明天周六放假
</div>
</div>
</body>
</html>四、弹性布局
这种布局方式是把HTML网页中每一个元素都看成1个能够进行自由伸缩的盒子模型
任何一个html中的元素都可以指定为flex盒子模型。
1.首先要让这个盒子变成弹性盒子
div{
display: flex;
}2.然后再让这个盒子中的元素左右居中
div{
justif-content:center;
}3.最后让这个盒子中的元素上下居中
div{
align-items:center;
}注意点：
- 当元素设为 Flex 布局元素以后，当前flex盒模型元素的子元素的
float、clear和vertical-align属性将失效，因为flex布局本身也提供了替代的属性。