边框模型
真正决定一个元素的表现形式，是由其边框模型决定的
由图所示
蓝色框即为内容
width:70px 表示内容的大小
红色框即为边框
内容到边框之间的距离，即为内边距 5px
灰色框，是指边框与其他元素之间的距离，即为外边距：10px
.box{
width:70px;
padding:5px;
margin: 10px;
}
内容宽度70px
内边距：5px
外边距：10px
超链状态
伪类，所谓的伪类即被选中的元素处于某种状态的时候
超链状态有4种
link - 初始状态，从未被访问过
visited - 已访问过
hover - 鼠标悬停于超链的上方
active - 鼠标左键点击下去，但是尚未弹起的时候
<style>
a:link {color: black}
a:visited {color: green}
a:hover {color:yellow}
a:active {color: red}
</style>
<a href="http://www.12306.com">超链的不同状态</a> 光标放上去之后
2021-07-22 初学CSS布局 (loading......) 点击但未回弹时 2021-07-22 初学CSS布局 (loading......) 2021-07-22 初学CSS布局 (loading......)
CSS代码
div.menu {
width: 80px;
border: 1px solid rgb(156, 152, 152);
margin-top: 30px;
position: absolute;
left: 80px;
top: 50px;
}
div.menu a {
display: block;
color: #888;
cursor: pointer;
padding: 10px 0px 10px 20px;
text-decoration: none;
}
div.menu a:hover{
background-color: rgb(224, 222, 57);
color: rgb(173, 26, 0);
} HTML代码
<!DOCTYPE html>
<html lang="ch">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" type="text/css" href="./下拉列表.css">
</head>
<body>
<div class="menu">
<a href="https://www.bilibili.com/">bilibili</a>
<a href=
<a href=
<a href="https://www.zhihu.com/hot">知乎</a>
</div>
</body>
</html> 内联(inline)是不换行，但是不能指定大小
块级(block)时能指定大小，但是会换行
有时候，需要元素处于同一行，同时还能指定大小，这个时候，就需要用到内联-块级 inline-block
line-height 适合单独一行垂直居中
padding 借助设置相同的上下内边距，实现垂直居中效果，可以用在多行文本上
<style>
#d {
line-height: 120px;
}
div{
border:solid 4px lightskyblue;
}
</style>
<div id="d" align="center">line-height 适合单独一行垂直居中</div> <style>
#d {
padding: 30 30;
}
div{
border:solid 1px lightskyblue;
}
</style>
<div id="d">多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 </div> <style>
#div1
{
position: relative;
height: 300px;
width: 100%;
background-color: pink;
}
#div2
{
position: absolute;
bottom: 0;
height: 30px;
width: 100%;
background-color: skyblue;
}
</style>
<div id="div1">
<div id="div2"> 无论粉色div高度如何变化，蓝色div都会贴在下面
</div>
</div>