三、CSS基础（2）
2021-01-06 13:28
标签：css position ble 上下左右 块元素 display 特性 padding alt 一、CSS三大特性 1. css层叠性 层叠性是指多种CSS样式的叠加，如果出现样式冲突，会按照CSS书写的顺序，以最后的样式为准。 2. css继承性 书写CSS样式表时，子标签会继承父标签的某些样式，如文本颜色和字号。想要设置一个可继承的属性，只需将它应用于父元素即可。 3. css优先级 二、CSS盒子模型 1. 盒子边框 2.盒子内边距 3. 盒子外边距 4. 嵌套块元素垂直外边距合并 5. 盒子居中对齐、圆角、阴影 6. 盒子浮动 三、CSS练习 1. 背景 2. 购物车 3. 背景半透明 4. 表格细边框 5. 新浪导航栏 6. 三、CSS基础（2） 标签：css position ble 上下左右 块元素 display 特性 padding alt 原文地址：https://www.cnblogs.com/sharef/p/10346005.htmlDOCTYPE html>
html lang="en">
head>
meta charset="UTF-8">
title>标题title>
style>
/*盒子边框：border （border-width | border-style | border-color）*/
div {
width: 100px;
height: 100px;
border-width: 1px;
border-color: pink;
border-style: solid; /* none | hidden | dotted 点线| dashed 虚线| solid 实线| double 双实线*/
/*border: 1px solid pink; 连写*/
}
style>
head>
body>
div>div>
body>
html>
DOCTYPE html>
html lang="en">
head>
meta charset="UTF-8">
title>标题title>
style>
div {
/*注：padding会撑开带有 width 和height的盒子，若父盒子给定了宽度，则会撑开，若子盒子没有给定宽度，用的默认的，则不会撑开*/
width: 80px; /*实际宽度 100px*/
height: 30px; /*实际高度 50px*/
border: 1px solid pink;
/*盒子内边距padding（设置上下左右的边距）*/
padding: 10px;
}
a {
height: 26px;
background-color: #ccc;
display: inline-block;
line-height: 26px;
text-decoration: none;
color: #fff;
/*内边距：padding-top、padding-bottom、padding-left、padding-right*/
padding: 2px; /*不方便给宽度时可以使用padding*/
}
style>
head>
body>
div>文本信息div>
a href="#">首页a>
a href="#">移动客户端a>
body>
html>
DOCTYPE html>
html lang="en">
head>
meta charset="UTF-8">
title>标题title>
style>
div {
width: 100px;
height: 100px;
margin: 5px;
border: 1px solid pink;
}
style>
head>
body>
div>div>
div>div>
body>
html>
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 solid pink;*/
overflow: hidden;
}
.son {
width: 50px;
height: 30px;
background-color: gray;
margin: 10px;
}
style>
head>
body>
div class="father">
div class="son">div>
div>
body>
html>
DOCTYPE html>
html lang="en">
head>
meta charset="UTF-8">
title>标题title>
style>
div {
width: 100px;
height: 100px;
margin: 0 auto; /* 盒子水平居中的常用写法，上下是0， 左右auto*/
border: 1px solid pink;
text-align: 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>
div>盒子内容div>
body>
html>
DOCTYPE html>
html lang="en">
head>
meta charset="UTF-8">
title>标题title>
style>
div {
/*浮动 left | right | none：可以使多个块元素如div在一行展示；可以让元素默认转换为行内块元素*/
float: left;
}
.up {
width: 100px;
height: 50px;
background-color: pink;
}
.down {
width: 120px;
height: 70px;
background-color: gray;
float: right;
}
style>
head>
body>
div class="up">div>
div class="down">div>
body>
html>
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;
}
*/
/* div {
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;
}*/
div {
width: 500px;
height: 5000px;
/*背景相关属性简写：书写顺序无严格要求*/
background: transparent url(baidu.png) repeat-y scroll 50% 0;
}
style>
head>
body>
div>
div>
body>
html>
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>
DOCTYPE html>
html lang="en">
head>
meta charset="UTF-8">
title>标题title>
style>
body {
background-color: pink;
}
div {
width: 200px;
height: 500px;
color: #fff;
/*设置背景透明度：red、green、blue、alpha（透明度 0-1）*/
background: rgba(0, 0, 0, 0.2);
}
style>
head>
body>
div>div>
body>
html>
DOCTYPE html>
html lang="en">
head>
meta charset="UTF-8">
title>标题title>
style>
table {
width: 100px;
height: 50px;
border: 0.5px solid black;
}
td {
border: 0.5px solid black;
text-align: center;
}
table, td {
border-collapse: collapse; /* 合并表格边框 */
}
style>
head>
body>
table cellspacing="0" cellpadding="0">
tr>
td>1.1td>
td>1.2td>
tr>
tr>
td>2.1td>
td>2.2td>
tr>
table>
body>
html>
DOCTYPE html>
html lang="en">
head>
meta charset="UTF-8">
title>标题title>
style>
.nav {
height: 50px;
border-top: 3px solid #ff8500;
border-bottom: 1px solid #edeef0;
background-color: #fcfcfc;
}
.nav a {
height: 50px;
line-height: 50px;
display: inline-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>
div class="nav">
a href="#">首页a>
a href="#">新闻客户端a>
a href="#">设为首页a>
a href="#">奔跑吧a>
div>
body>
html>