css综合
2017-05-10 本文已影响0人
小囧兔
说一说你平时写代码遵守的编码规范
HTML
1.用两个空格键代替tab键。
2.尽可能使用语义化的标签。
3.尽可能减少使用嵌套，使结构简洁明了。
4.定义属性全部用双引号。
5.嵌套元素缩放两个空格。
6.闭合标签。
7.把引入的css写在头部，公共的css放在最前面，便于后面覆盖某些特定样式，js链接放在</body>前面。
CSS
1.声明块的右花括号单独成行
2.: 后面加一个空格
3.每个属性单独一行。
4.每个属性以分号结尾。
5.对于属性值或颜色参数，省略小于 1 的小数前面的 0。
6，颜色值使用十六进制形式，尽可能使用简写的十六进制值，比如#000。
7.0值时不指定单位。
8.声明的顺序是先位置，自身的属性，如宽高，文字相关，最后是其他。
9.将媒体查询放在尽可能相关规则的附近。不要将他们打包放在一个单一样式文件中或者放在文档底部。
10.命名基于功能和内容命名。
垂直居中有几种实现方式，给出代码范例
1.使用上下paddng相等，不管中间加几行字都是居中的。
预览
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.content {
margin: 0 auto;
padding: 30px 0;
width: 600px;
border: 1px solid;
text-align: center;
}
</style>
</head>
<body>
<div class="content">
<p>垂直居中</p>
<p>垂直居中</p>
<p>垂直居中</p>
<p>垂直居中</p>
</div>
</body>
</html>
2.绝对定位垂直居中，比如弹框，并且知道了弹框的宽高。
预览
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.tipbox-bg {
position: fixed;
top:0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,.4);
}
.tipbox {
position: absolute;
left: 50%;
top: 50%;
margin-left: -200px;
margin-top: -150px;
width: 400px;
height: 300px;
background: #fff;
}
.tipbox h1 {
text-align: center;
background: #38B774;
color: #fff;
margin: 0;
}
</style>
</head>
<body>
<div class="tipbox-bg">
<div class="tipbox">
<h1>头部</h1>
</div>
</div>
</body>
</html>
3.使用css3的transform中的translate的属性，此方法有兼容性的问题。
预览
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.tipbox-bg {
position: fixed;
top:0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,.4);
}
.tipbox {
position: absolute;
left: 50%;
top: 50%;
transform:translate(-50%,-50%);
width: 300px;
background: #fff;
}
.tipbox h1 {
text-align: center;
background: #38B774;
color: #fff;
margin: 0;
}
.content {
padding: 50px 0;
text-align: center;
}
</style>
</head>
<body>
<div class="tipbox-bg">
<div class="tipbox">
<h1>头部</h1>
<div class="content">
内容
</div>
</div>
</div>
</body>
</html>
4.vertical-align，针对行内元素和表格，文字的垂直居中。
测试了一下，好像只有div内的所有inline-display元素都是middle才生效。
预览
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box{
width: 500px;
margin: 0 auto;
height: 400px;
border: 1px solid;
text-align: center;
}
.box:after{
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
}
img {
vertical-align: middle;
}
</style>
</head>
<body>
<div class="box">
</div>
</body>
</html>
5.使用display:table-cell
预览
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box{
width: 500px;
height: 400px;
border: 1px solid;
display: table-cell;
vertical-align: middle;
text-align: center;
}
</style>
</head>
<body>
<div class="box">
</div>
</body>
</html>
总结：第五种方法，把改变了块级元素的展现方式，所以box的margin：0 auto；失效了，建议少使用。
