1.项目实战笔记
- 标签内如果文字不垂直居中，与行高有关系，行高与高度值相等的话，会使内容垂直居中； 如果一个标签整体不垂直居中，则通过上下margin值来调节；
- 通过行高与高度的变化，调节内容在垂直方向的位置，两者相等，则垂直居中，不等，则上下移动；
- a标签必须重新设置颜色；
- 父容器的高度是不会继承给后代，而行高会继承，所以在父容器中若高度与行高不相同，那只有行高会继承给子元素，这样子元素就默认高度与行高值相同，不会继承父元素的高度；所以必须重新设置高度；
- 在页面开发中logo一般放在h1标签中，用a链接添加图片，即达到logo可点击效果；
<div class="logo">
<h1><a href="#" target="_blank"><img src="images/logo01.png" alt="logo图标"/></a></h1>
</div>
- 页面开发时，当前选中状态用类选择器选中，用交集选择器设置；
- 图片添加用img添加，则图片不会居中显示，会按原尺寸大小填充；用background填充背景图片；
- 透明度
- rgba（255,255,255,0.4）；
- opacity处理，但是兼容性问题；
- opacity: 0.4;
- filter:alpha(opacity=40);//兼容IE6,7浏览器；
- 居中方法
- 设置宽度，然后margin:0 auto;
- 设置绝对定位和宽度，然后left：50%，margin-left:-宽度/2
- line-height会实现继承
- 编写页面时，遵循由外向内，先写外部，再逐步向内部写；
- 容器内部设置padding时，宽度与高度都应该减去相应的数值；
- 项目开发中除了用无序列表（ul-li）,也可用有序列表（ol-li）；
- background-color在没有高度的时候，不能设置；
- 当设置行高为0时，内容文字会在整个区域的顶部，通过调节行高值来使内容文字在区域的右上角显示（也可以用sup标签）；
2.重置样式代码
/*重置样式start*/
/*去除所有元素的margin及padding*/
*{
margin: 0;
padding: 0;
}
/*去除a标签中的默认下划线及默认颜色*/
a{
text-decoration: none;
color: #444866;
}
/*去除li元素前的小圆点及数字序号*/
li{
list-style: none;
}
/*去除图片的默认边框*/
img{
border: 0;
}
/*去除文本框的聚焦边影*/
input{
outline: none;
}
/*重置样式end*/
3.清除浮动的伪类设置
/*设置清除浮动的clear伪类元素*/
.clearfix::after{
display: block;
height: 0;
content:"";
clear: both;
}
4.遮罩层的设置
<style>
body,html{
width: 100%;
height: 100%;
}
.shadow{
width: 100%;
height: 100%;
background-color: rgba(0,0,0,.8);
position: absolute;
left: 0;
top: 0;
}
.login{
position: absolute;
width: 200px;
height: 100px;
background-color: #fff;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -50px;
}
</style>
<body>
<div class="shadow">
<div class="login">
这是一个遮罩层
</div>
</div>
</body>
- 第二种方法：固定定位+display:flex+margin:auto(display:flex必须配合margin:auto;才能实现上下左右同时居中)
<style>
.shadow{
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-color: #333333;
display: flex;
}
.login{
width: 200px;
height: 100px;
background-color: #fff;
margin: auto;
}
</style>
<body>
<div class="shadow">
<div class="login">
这是一个用固定定位实现的水平垂直居中
</div>
</div>
</body>
- 创建一个html模板
- file-setting-Editor-Code style-live templates-点击"+"-选择live templates-填写内容及简写码-点击define-选择该模板的应用场景：比如html-点击apply-点击OK;
