CSS综合
2017-07-08 本文已影响0人
谨言_慎行
1.说一说你平时写代码遵守的编码规范
-
命名技巧
- 语义化标签优先
- 基于功能命名、基于内容命名、基于表现命名
- 简略、明了、无后患
-
书写规范
- tab 用两个空格表示
- css的 :后加个空格， {前加个空格
- 每条声明后都加上分号
- 换行，而不是放到一行
- 颜色用小写，用缩写, #fff
- 小数不用写前缀, 0.5s -> .5s；0不用加单位
- 尽量缩写， margin: 5px 10px 5px 10px -> margin: 5px 10px
2.垂直居中有几种实现方式，给出代码范例
- 设置父元素上下padding相等 代码链接
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
.box{
width: 700px;
border: 1px solid;
background-color: white;
padding-top: 20px;
padding-bottom: 20px;
}
.box1 {
width: 300px;
height: 300px;
border: 1px solid;
background-color: red;
}
</style>
</head>
<body>
<div class="box">
<div class="box1">
</div>
</div>
</body>
</html>
效果图
image.png
- 绝对定位 代码链接
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
.box {
width: 600px;
height: 800px;
border: 1px solid;
position: absolute;
}
.box1{
width: 200px;
height: 200px;
border: 1px solid;
background-color: red;
position: absolute;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -100px;
}
</style>
</head>
<body>
<div class="box">
<div class="box1">
</div>
</div>
</body>
</html>
效果图
image.png
- vertical-align: middle 代码链接
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
.box {
border: 1px solid;
}
.box1 {
width: 100px;
height: 300px;
border: 1px solid;
background-color: red;
display: inline-block;
vertical-align: middle;
}
.box2 {
width: 10px;
height: 30px;
border: 1px solid;
background-color: green;
display: inline-block;
vertical-align: middle;
}</style>
</head>
<body>
<div class="box">
<div class="box1"></div>
<div class="box2"></div>
</div>
</body>
</html>
效果图
image.png
- display: table-cell 代码链接
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
.box {
border: 1px solid;
width: 200px;
height: 300px;
display: table-cell;
vertical-align: middle;
text-align: center;
}
.box1 {
width: 100px;
height: 200px;
border: 1px solid;
background-color: red;
vertical-align: middle;
display: inline-block;
}
</style>
</head>
<body>
<div class="box">
<div class="box1"></div>
<div class="box2"></div>
</div>
</body>
</html>
效果图
image.png
3.实现如下效果，每种效果都只使用一个html 标签来实现 效果范果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
.box {
width: 200px;
height: 100px;
border: 1px solid;
}
.box:before {
content: "";
display: inline-block;
width: 0px;
height:0px;
border: 10px solid transparent;
border-bottom: 10px solid gray;
position: relative;
left: 10px;
top: -20px;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
.box {
width: 200px;
height: 100px;
border: 1px solid;
}
.box:before {
content: "";
display: inline-block;
width: 0px;
height:0px;
border: 10px solid transparent;
border-top: 10px solid red;
border-right: 10px solid red;
float: right;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
.box {
width: 200px;
height: 100px;
border: 1px solid;
}
.box:before {
content: "";
display: inline-block;
width: 10px;
height: 10px;
border-top: 1px solid;
border-left: 1px solid;
transform: rotateZ(45deg);
position: relative;
top: -12px;
left: 10px;
background-color: white;
}
</style>
</head>
<body>
<div class="box">
</div>
</body>
</html>
