三、CSS基础（2）
更新时间：2020-09-13 11:22:30 来源： 阅读量：
【摘要】 三、CSS基础（2）考必过小编为大家整理了关于三、CSS基础（2）的信息，希望可以帮助到大家！
三、CSS基础（2）
标签：csspositionble上下左右块元素display特性paddingalt
一、CSS三大特性
1. css层叠性
层叠性是指多种CSS样式的叠加，如果出现样式冲突，会按照CSS书写的顺序，以最后的样式为准。
2. css继承性
书写CSS样式表时，子标签会继承父标签的某些样式，如文本颜色和字号。想要设置一个可继承的属性，只需将它应用于父元素即可。
3. css优先级
二、CSS盒子模型
1. 盒子边框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标题</title>
<style>
/*盒子边框：border （border-width | border-style | border-color）*/
p {
width: 100px;
height: 100px;
border-width: 1px;
border-color: pink;
border-style: sopd; /* none | hidden | dotted 点线| dashed 虚线| sopd 实线| double 双实线*/
/*border: 1px sopd pink; 连写*/
}
</style>
</head>
<body>
<!-- p是一个典型的盒子 -->
<p></p>
</body>
</html>
2.盒子内边距
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标题</title>
<style>
p {
/*注：padding会撑开带有 width 和height的盒子，若父盒子给定了宽度，则会撑开，若子盒子没有给定宽度，用的默认的，则不会撑开*/
width: 80px; /*实际宽度 100px*/
height: 30px; /*实际高度 50px*/
border: 1px sopd pink;
/*盒子内边距padding（设置上下左右的边距）*/
padding: 10px;
}
a {
height: 26px;
background-color: #ccc;
display: inpne-block;
pne-height: 26px;
text-decoration: none;
color: #fff;
/*内边距：padding-top、padding-bottom、padding-left、padding-right*/
padding: 2px; /*不方便给宽度时可以使用padding*/
}
</style>
</head>
<body>
<p>文本信息</p>
<a href="#">首页</a>
<a href="#">移动客户端</a>
</body>
</html>
3. 盒子外边距
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标题</title>
<style>
p {
width: 100px;
height: 100px;
margin: 5px;
border: 1px sopd pink;
}
</style>
</head>
<body>
<p></p>
<p></p>
</body>
</html>
4. 嵌套块元素垂直外边距合并
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标题</title>
<style>
/*嵌套块元素垂直外边距合并 解决方案
1. 为父元素定义1px的上边框或上内边框(会增大盒子，一定要减去边框距离)
2. 为父元素添加 overflow:hidden*/
.father {
width: 100px;
height: 50px;
background-color: pink;
/*border: 1px sopd pink;*/
overflow: hidden;
}
.son {
width: 50px;
height: 30px;
background-color: gray;
margin: 10px;
}
</style>
</head>
<body>
<p class="father">
<p class="son"></p>
</p>
</body>
</html>
5. 盒子居中对齐、圆角、阴影
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标题</title>
<style>
p {
width: 100px;
height: 100px;
margin: 0 auto; /* 盒子水平居中的常用写法，上下是0， 左右auto*/
border: 1px sopd pink;
text-apgn: center; /*让盒子内容如文字、行内元素、行内块元素、居中对齐*/
/*盒子圆角*/
/*border-radius: 100%; 盒子宽高相同时，100%则表示一个圆*/
border-radius: 10px; /*或指定圆角半径*/
/*border-radius: 10px 15px 20px 25px; 或分别指定四个圆角的半径*/
/*盒子阴影：h-shadow水平阴影的位置，允许负值（必需）；v-shadow 必需；blur 模糊距离（可选）；spread 阴影的尺寸（可选）；color 阴影的颜色（可选）；inset将外部阴影outset改为内部阴影（可选）*/
box-shadow: 2px 2px 20px 2px pink;
}
</style>
</head>
<body>
<p>盒子内容</p>
</body>
</html>
6. 盒子浮动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标题</title>
<style>
p {
/*浮动 left | right | none：可以使多个块元素如p在一行展示；可以让元素默认转换为行内块元素*/
float: left;
}
.up {
width: 100px;
height: 50px;
background-color: pink;
}
.down {
width: 120px;
height: 70px;
background-color: gray;
float: right;
}
</style>
</head>
<body>
<p class="up"></p>
<p class="down"></p>
</body>
</html>
三、CSS练习
1. 背景
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标题</title>
<style>
/* body {
背景颜色
background-color: pink;
背景图片：body中的内容将显示在背景图片之上
background-image: url(baidu.png);
是否平铺：默认repeat背景图像在纵向和横向上平铺|no-repeat背景图像不平铺|repeat-x背景图像在横向上平铺|repeat-y背景图像纵向平铺
background-repeat: repeat-y;
}
*/
/* p {
width: 500px;
height: 5000px;
background-color: purple;
background-image: url(baidu.png);
background-repeat: no-repeat;
背景图片平铺位置：水平、垂直，可以跟方位名词 top、bottom、right、left、center，也可以跟实际px值
background-position: center top;
设置背景图片是否随滚动条滚动：scroll|fixed
background-attachment: fixed;
}*/
p {
width: 500px;
height: 5000px;
/*背景相关属性简写：书写顺序无严格要求*/
background: transparent url(baidu.png) repeat-y scroll 50% 0;
}
</style>
</head>
<body>
<p>
</p>
</body>
</html>
2. 购物车
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标题</title>
<style>
a {
width: 100px;
height: 80px;
background: url(test.png) no-repeat;
display: block;
}
a:hover {
background-position: left bottom; /*鼠标经过时切换背景图片对齐方式:即切换为登录*/
}
</style>
</head>
<body>
<a href="#"></a>
</body>
</html>
3. 背景半透明
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标题</title>
<style>
body {
background-color: pink;
}
p {
width: 200px;
height: 500px;
color: #fff;
/*设置背景透明度：red、green、blue、alpha（透明度 0-1）*/
background: rgba(0, 0, 0, 0.2);
}
</style>
</head>
<body>
<p></p>
</body>
</html>
4. 表格细边框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标题</title>
<style>
table {
width: 100px;
height: 50px;
border: 0.5px sopd black;
}
td {
border: 0.5px sopd black;
text-apgn: center;
}
table, td {
border-collapse: collapse; /* 合并表格边框 */
}
</style>
</head>
<body>
<table cellspacing="0" cellpadding="0">
<tr>
<td>1.1</td>
<td>1.2</td>
</tr>
<tr>
<td>2.1</td>
<td>2.2</td>
</tr>
</table>
</body>
</html>
5. 新浪导航栏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标题</title>
<style>
.nav {
height: 50px;
border-top: 3px sopd #ff8500;
border-bottom: 1px sopd #edeef0;
background-color: #fcfcfc;
}
.nav a {
height: 50px;
pne-height: 50px;
display: inpne-block;
color: #4c4c4c;
text-decoration: none;
/*上下0px，左右18px*/
padding: 0px 18px;
/*padding：10px 20px 30px; 上 10px，左右20px，下30px*/
/*padding: 10px 20px 30px 40px; 上右下左*/
font-size: 14px;
}
.nav a:hover {
background-color: #edeef0;
color: #ff8500;
}
</style>
</head>
<body>
<p class="nav">
<a href="#">首页</a>
<a href="#">新闻客户端</a>
<a href="#">设为首页</a>
<a href="#">奔跑吧</a>
</p>
</body>
</html>
6.
三、CSS基础（2）
标签：csspositionble上下左右块元素display特性paddingalt
以上就是三、CSS基础（2）的内容，更多资讯请及时关注考必过网站，最新消息小编会第一时间发布，大家考试加油！
上一篇：CSS-浮动与父级边框塌陷问题
下一篇：1初始化项目并且引入scss