html css 簡單講解 2
阿新 • • 發佈：2020-12-19
文字、文字、背景屬性。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
div{
/*1 .文字屬性 */
/* 字型大小 */
font-size: 50px;
/* 字型樣式 */
font-family: "微軟雅黑";
/* 斜體樣式 */ 列表屬性、顯示屬性。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
/* 列表屬性 */
ol{
list-style-type: circle;
list-style-image: url(../img/bk.png);
/* 設定圖片的位置,在外面,和在裡面*/
list-style-position: inside;
}
div{
width: 120px;
height: 50px;
border: solid 2px red;
/*none,隱藏且不佔位置。 block，塊級標籤；inline，行級標籤，寬高屬性會失效；inline-block，行級塊，保留寬高屬性。 */
display: inline-block;
}
</style>
</head>
<body>
<div>盒子1</div>
<div>盒子2</div>
<hr />
<ol>
<li>zsf</li>
<li>liuyifei</li>
<li>fengjie</li>
</ol>
</body>
</html>
outline，輪廓屬性。繪製於 border 邊框邊緣的外圍，可起到突出元素的作用。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{
width: 200px;
height: 250px;
/* 邊框屬性 */
border: solid 2px red;
/*輪廓屬性*/
outline: dashed 5px blue;
/*outline-color: blue;
outline-style: dashed;
outline-width: 8px;*/
}
</style>
</head>
<body>
<div>輪廓屬性</div>
</body>
</html>
float，浮動屬性。
浮動的框可以向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動框的邊框為止。由於浮動框不在文件的普通流中，所以文件的普通流中的塊框表現得就像浮動框不存在一樣。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.div1 {
width: 400px;
}
.wh {
width: 150px;
height: 100px;
}
.div2 {
width: 150px;
height: 120px;
background-color: red;
float: left;
}
.div3 {
background-color: green;
float: left;
}
.div4 {
background-color: blue;
float: left;
}
</style>
</head>
<body>
<div class="div1">
<div class="div2">div2</div>
<div class="div3 wh">div3</div>
<div class="div4 wh">div4</div>
</div>
<h1>顯示在哪裡</h1>
</body>
</html>
上面程式碼由於父元素未設定高度，子元素又都是浮動的，所以 h1 和 div1 同行顯示。要想顯示 div1 的塊級元素特性有三種方式。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.div1 {
border: solid;
width: 400px;
/* 1 */
/*height: 400px;*/
/* 2 清除浮動*/
/*overflow: hidden;*/
}
.wh {
width: 150px;
height: 100px;
}
.div2 {
width: 150px;
height: 120px;
background-color: red;
float: left;
}
.div3 {
background-color: green;
float: left;
}
.div4 {
background-color: blue;
float: left;
}
</style>
</head>
<body>
<div class="div1">
<div class="div2">div2</div>
<div class="div3 wh">div3</div>
<div class="div4 wh">div4</div>
<!-- 3 清除浮動 -->
<div style="clear: both;"></div>
</div>
<h1>顯示在哪裡</h1>
</body>
</html>
position 定位屬性。
relative，相對定位。元素框偏移某個距離，元素仍保持其未定位前的形狀，它原本所佔的空間仍保留。
absolute，絕對定位。元素框從文件流完全刪除，並相對於設定了定位屬性的包含塊進行定位，否則相對於 body 元素定位。
fixed 固定定位。元素框的表現類似於將 position 設定為 absolute，不過其包含塊是視窗本身。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div {
border: solid;
}
.div1 {
position: relative;
width: 500px;
height: 420px;
left: 100px;
top: 100px;
}
.div11 {
margin: 50px;
width: 300px;
height: 220px;
}
.div111 {
position: absolute;
width: 100px;
height: 100px;
left: 0;
top: 0;
}
.div2 {
position: fixed;
width: 100px;
height: 100px;
right: 10px;
bottom: 10px;
}
</style>
</head>
<body>
<div class="div1">
div1
<div class="div11">
div11
<!-- 相對於設定了 position的 div1 定位 -->
<div class="div111">div111</div>
</div>
</div>
<div class="div2">div2</div>
</body>
</html>
盒子模型。
border，邊框。border-style，邊框的樣式；border-color，邊框的顏色，border-width，邊框的寬。
margin，外間距，四個方向的距離。margin-top、margin-bottom、margin-left、margin-right。
padding，內間距。padding-top、padding-bottom、padding-left、padding-right。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div {
width: 100px;
height: 100px;
border: solid 2px red;
outline: dashed 2px blue;
margin: 50px;
padding: 50px;
background-color: red;
/* 圓角 */
border-radius: 25px;
/* 元素加陰影 */
box-shadow: 10px 30px 10px blue;
}
</style>
</head>
<body>
<div>div</div>
</body>
</html>