1 元素显示模式转换
2 demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
a {
display: block;
background-color: #55585a;
height: 40px;
width: 230px;
font-size: 14px;
color: #fff;
text-decoration: none;
text-indent: 2em;
}
a:hover {
background-color: #ff6700;
}
</style>
</head>
<body>
<a href="#">手机 电话卡</a>
<a href="#">电视 盒子</a>
<a href="#">笔记本 平板</a>
</body>
</html>
3.背景
3.1 背景颜色
background-color 颜色;
3.2 背景图片
background-image:none/url("url")
类似于,这其中的大部分都是由背景图片完成的
3.3 背景平铺
repeat是平铺,repeat-x是延x轴平铺
3.4 背景位置
3.5 背景图像固定
background-attachment
3.6 背景色半透明
4 css三大特性
4.1 层叠性
遵循就近原则
谁离得近就是谁
4.2 继承性
!!!行高的继承
4.3 优先级
5 盒子模型
5.1 组成
5.2 边框 border
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
height: 500px;
width: 500px;
border-width: 5px;;
border-style:solid;
}
</style>
</head>
<body>
<div></div>
</body>
border-style:
实线边框:solid
点线边框:dotted
虚线边框:dashed
边框颜色:border-color:
边框的简写:
border:1px solied red
没有顺序
边框可以分开写:
eg:
上边框:
border-top:5px dotted yellow
下边框同理
border-bottom
5.3 表格的细线边框
将表格里面的td之间的边框合并
5.4 内边距 (padding)
<style>
div {
height: 60px;
width: 60px;
padding-left: 20px;
padding-right: 20px;
padding-top: 20px;
padding-bottom: 20px;
border-top: 5px dotted yellow
}
</style>
</head>
<body>
<div>做个情绪稳定的和真诚的人</div>
</body>
就是设置盒子中内容cottont和边框之间的距离
padding简写:
demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.nav
{
border-top:5px solid red ;
border-bottom: 1px solid blue;
height: 30px;
padding: 5px 5px;
}
a{
display: inline-block;
background-color: yellow;
text-decoration: none;
}
.fir:hover
{
background-color: aqua;
}
.beauty
{
width: 1900px;
height: 900px;
background-image: url("美女.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center center;
}
</style>
</head>
<body>
<div class="nav">
<a href="#" class="fir">情绪稳定</a>
<a href="#">真诚</a>
<a href="#">接受落差</a>
</div>
<div class="beauty">
</div>
</body>
</html>
5.5 外边距(margin)
控制盒子与盒子之间的距离
设置盒子居中 margin:0 auto;
关于嵌套盒子的塌陷问题,我们可以用边框将父类包起来,或者为父类元素添加overflow:hidden 或者加padding
5.6 清除内外边距
这是我们css的第一段代码
方便布局
*{
padding:0;
margin:0
}