邊框模型
真正決定一個元素的表現形式，是由其邊框模型決定的
由圖所示
藍色框即為内容
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>