CSS常用记录
1、两个div在一行排列
.fl {float: left;} .fr {float: right;}左右
2、设置版心，margin: 0 auto;上下外边距为0，左右自动，加上宽，则可以居中显示
.w {
width: 1190px;
margin: 0 auto;
}
3、清除默认边距
* {
margin: 0;
padding: 0;
}
blockquote,body,button,dd,dl,dt,fieldset,form,h1,h2,h3,h4,h5,h6,hr,
input,legend,li,ol,p,pre,td,textarea,th,ul {
margin: 0;
padding: 0;
}
有默认边距的元素：body,ul,body,h1-h6... ...
4、ul去除前面的点，并且使元素横着排列
- aaaaa
- bbbbb
- ccccc
- ddddd
ul {
list-style-type: none;
}
li{
float: left;
}5、去掉a标签的下划线
a {text-decoration: none;}
6、居中，文字在div中水平居中、竖直居中
你好div { width: 200px; height: 50px; line-height: 50px; text-align: center; background-color: skyblue; }
水平居中：text-align: center。竖直居中：height与line-height设置一样
7、小竖线可以用li来代替，如下宽为1，高位10的竖线
.space {
width: 1px;
height: 10px;
background-color: #cccccc;
margin: 10px 12px;
}
8、点击图标跳转
9、相对定位（relative）与绝对定位（absolute）
父元素：relative
子元素：absolute
子元素的位置相对于父元素，而不是浏览器左上角，子元素不占用空间，仿佛浮动
父元素
子元素
.p {
width: 300px;
height: 200px;
background-color: skyblue;
position: relative;
}
.c {
width: 100px;
height: 100px;
background-color: slateblue;
position: absolute;
bottom: 0;
right: 0;
}
效果如图：
10、去掉点击input、button时默认出现的边框
input,button {
border: 0;
outline: none;/*去掉鼠标点击的边框*/
}
11、鼠标经过，改变背景色
ul li:hover {
background-color: #5e5959;
}
ul a:hover {
color: #e2231a;
}
12、透明度
rgba(red, green, blue, alpha)
alpha 参数是介于 0.0（完全透明）和 1.0（完全不透明）之间的数字。
13、鼠标经过变成手的形状
cursor: pointer;
14、设置圆形:宽高一样、border-radius设置为50%
width: 300px;
height: 300px;
border-radius: 50%;
15、文字不换行、溢出部分隐藏、超出部分显示省略号
你好，123456789
.p {
width: 100px;
height: 100px;
background-color: skyblue;
white-space: nowrap; /*强制不换行*/
overflow: hidden; /*溢出部分隐藏*/
text-overflow: ellipsis; /*超出的部分显示省略号*/
}
16、使div居页面中间
如果没有transform: translate(-50%,-50%);则只是让div的左上角居页面中间，translate属性分别是水平移动、垂直移动，负号是相反方向。
18、:nth-child、:nth-last-child选择器
.box :nth-child(1) {/*选择.box下第一个子元素*/
background-color: yellow;
}
.box :nth-last-child(2) {/*选择.box下倒数第二个子元素*/
background-color: yellow;
}
19、使a标签有宽度、文字居中，span标签换行。display: block 行元素转块级元素
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>测试title>
head>
<body>
<div class="box">
<a href="#">链接a>
<span>2span>
div>
body>
<style>
.box {
width: 200px;
height: 100px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
background-color: skyblue;
}
a {
width: 100px;
display: block;
background-color: red;
text-align: center;
}
span {
display: block;
}
style>
html>
20、div与img之间有缝隙的问题
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>测试title>
head>
<body>
<div class="box">
<img src="1.png" alt="">
div>
body>
<style>
.box {
background-color: skyblue;
}
style>
html>
/*去掉img与div间的缝隙*/
img {display: block;}
或
img {vertical-align: top;}
21、元素的两种隐藏方式
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>测试title>
head>
<body>
<div>这是divdiv>
<span>这是spanspan>
body>
<style>
div {
width: 200px;
height: 100px;
background-color: skyblue;
display: none;/*隐藏方式一，不占据页面位置*/
display: block;/*取消隐藏方式一*/
visibility: hidden;/*隐藏方式二，占据页面位置*/
visibility: visible;/*取消隐藏方式二*/
}
span {
width: 100px;
height: 50px;
background-color: aqua;
}
style>
html>
22、外边距合并
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>测试title>
head>
<body>
<div id="father">
<div id="son">div>
div>
body>
<style>
#father {
width: 300px;
height: 100px;
background-color: skyblue;
}
#son {
width: 200px;
height: 50px;
background-color: aqua;
margin-top: 50px;
}
style>
html>
整个外部div也向下移动了，并不是子div距离外边框移动，如下：
产生原因就是父div与子div的外边距合并了，所以都向下移动了，解决办法是给父div加边框
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>测试title>
head>
<body>
<div id="father">
<div id="son">div>
div>
body>
<style>
#father {
width: 300px;
height: 100px;
background-color: skyblue;
border: 1px solid skyblue;
}
#son {
width: 200px;
height: 50px;
background-color: aqua;
margin-top: 50px;
}
style>
html>
23、使div不因增加了padding而增加宽高
box-sizing: border-box