链接的伪类
| 伪类 | 说明 |
|---|---|
| ：link | 未访问的链接 |
| ：visited | 已访问的链接 |
| ：hover | 鼠标悬停状态 |
| ：active | 激活的链接 |
伪类的顺序
：link>:visited>:hover>:active
<style>
/* 访问之前*/
a:link{
color: deeppink;
}
/*访问过的伪类*/
a:visited{
color: yellow;
}
/*鼠标悬停伪类*/
a:hover{
color: red;
}
/*鼠标激活伪类*/
a:active{
color: green;
}
</style>
</head>
<body>
<a href="#">百度</a>
</body>
css的盒子模型
-
盒子模型用来放网页中的各种元素
-
网页设计中的内容，如文字，图片等元素，都可是盒子（DIV嵌套）
边框属性
4个方向来表示（上、右、下、左） -
边框宽度：
border-width：thin | medium | thick |长度值 -
边框颜色：
border-color：颜色 | transpartant (透明色) -
边框样式：
border-style:值 | none | hidden
不同方向表示：
border-[left | right | top | bottom ]-width
border-[left | right | top | bottom ]-color
border-[left | right | top | bottom ]-style
边框缩写：
border：[宽度] | [样式] | [颜色]
不同方向：
border-top： [宽度] | [样式] | [颜色]
border-left： [宽度] | [样式] | [颜色]
border-right： [宽度] | [样式] | [颜色]
border-bottom： [宽度] | [样式] | [颜色]
<style type="text/css">
/* p{width:150px;height:100px;background-color: #ececec;line-height: 100px;
border-width:medium;border-color: #0099ee;border-style:solid;} */
p{width:150px;height:100px;background-color: #ececec;line-height: 100px;}
/* .one{border-top-width: 5px;
border-top-color: blue;
border-top-style: solid;}
.two{border-top-width:5px;
border-top-color: yellow;
border-top-style: dotted;
border-right-width: 10px;
border-right-color: pink;
border-right-style: solid;
border-left-width: 10px;
border-left-color: greenyellow;
border-left-style: dashed;
border-bottom-width: 5px;
border-bottom-color:purple;
border-bottom-style: double;}*/
/*缩写边框属性*/
.one{border:10px blue solid;}
.two{border-top: 5px yellow dashed;
border-right:10px pink solid;
border-left:10px greenyellow dotted;
border-bottom:5px purple double;}
</style>
</head>
<body>
<!--border属性--->
<!-- <p>边框属性border</p> -->
<!--border属性不同方向设置-->
<p class="one">边框属性border</p>
<p class="two">边框属性border</p>
</body>
内边距属性：padding
元素内容与边框之间的距离。
padding-top：长度值 | 百分比
padding-right：长度值 | 百分比
padding-bottom：长度值 | 百分比
padding-left：长度值 | 百分比
说明：padding值不能为负值。
内边距属性缩写
padding：值1； //4个方向都为值1
padding：值1 值2； //上下=值1，左右=值2
padding：值1 值2 值3； // 上=值1，左右=值2，下=值3
padding：值1 值2 值3 值4； //上=值1，右=值2，下=值3，左=值4
.one{width:300px;height:300px;background-color: #acacac;padding-top:20px;
padding-left:30px;padding-bottom: 50px;padding-right: 40px;}
.content1{width:100px;height:100px;background-color: #ececec;padding-top:10px;
padding-left:5px;}
.two{width:300px;height:300px;background-color: #acacac; padding:20px 10px 10px 8px;}
.content2{width:100%;height:100%;background-color: #ececec;}
.six{width:300px;height:300px;background-color: #acacac;margin-top: 30px;}
</style>
</head>
<body>
<div class="one"><div class="content1">padding属性</div></div>
<br/>
<br/>
<br/>
<!----padding内边距缩写-->
<!-- <div class="two"><div class="content2">padding属性缩写</div></div> -->
外边距属性：margin
设置元素与元素之间的距离。
margin-top: 长度值 |百分比 |auto
margin-right: 长度值 |百分比 |auto
margin-bottom: 长度值 |百分比 |auto
margin-left: 长度值 |百分比 |auto
说明：值可以为负值。
margin值为auto时，实现水平方向居中显示效果。
- 垂直方向，两个相邻元素都设置外边距，外边距会发生合并
- 合并后外边距高度=margin-top和margin-bottom中取最大值
box-sizing：border-box（转为盒内边框），只有设置宽和高时box-sizing才有效
<style>
*{
margin: 0;
padding: 0;
}
html,body{
width: 100%;
height: 100%;
border: 1px solid silver;
box-sizing: border-box;/*在设置宽和高有效*/
}
/*盒子模型中 上下放置的元素 之间的外间距不累加 取最大值*/
/*盒子模型中 左右放置的元素 之间的外间距累加*/
.block_left{
width: 300px;
height: 300px;
border: 5px solid black;
/*设置外间距*/
margin:100px;
float: left;
/*设置内间距*/
/*padding: 100px;*/
/*上 右 下 左*/
/*padding: 100px 100px 100px 100px;*/
/*padding: 100px 60px 20px;*/
/*padding: 100px 60px;*/
padding: 100px;
box-sizing: border-box;
}
.block_right{
width: 300px;
height: 300px;
border: 5px solid black;
box-sizing: border-box;
/*设置外间距*/
margin:100px;
float: left;
}
</style>
</head>
<body>
<div class="block_left">
我是文本内容
</div>
<div class="block_right">
</div>
盒子模型计算
盒子在页面中所占宽度（width）=左边距+左边框+左填充+内容宽度+右边距+右边框+右填充
盒子在页面中所占高度（height）=上边距+上边框+上填充+内容高度+下边距+下边框+下填充
<head lang="en">
<meta charset="UTF-8">
<title>盒子模型计算</title>
<style type="text/css">
div{width:68px;
height:48px;
margin: 10px;
padding:5px;
border:1px red solid; }
</style>
</head>
<body>
<!--页面总占宽100px,高80px，其中margin:10px; padding:5px; border:1px-->
<div>盒子模型计算</div>
</body>
盒子实际小案例
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>盒子应用</title>
<style type="text/css">
body,p,div{margin:0px;padding:0px;font-family: "微软雅黑";}
.course{width:220px;background-color:#f2f4f6;border:1px #ececec solid; margin:0 auto;}
.list1{width:100%;height:90px;background-color: #040410;padding-top:60px;}
.content{font-size: 20px;color:white;font-weight:bold;text-align: center;}
.list2{font-size:16px;border-bottom:1px white solid;margin:0px 15px;padding:10px 5px 5px 5px;
line-height:1.5em; }
.special{border-bottom-style:none;}
span{color:#93999f;font-size:12px;}
</style>
</head>
<body>
<div class="course">
<div class="list1">
<p class="content">前端课程排序</p>
</div>
<div class="list2">
<p>HTML和CSS基础课程</p>
<span>99999人在学</span>
</div>
<div class="list2">
<p>HTML和CSS基础课程</p>
<span>99999人在学</span>
</div>
<div class="list2 special">
<p>HTML和CSS基础课程</p>
<span>99999人在学</span>
</div>
</div>
</body>
</html>
结果展示
294
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
