FrontEnd筆記 -- CSS-有解無憂

文章目錄

- - CSS基礎
  - - 簡介
    - 樣式參考方式
    - 樣式選擇器
    - 字體
    - 背景
    - 偽類選擇器
    - 屬性選擇器
    - 關系選擇器
    - 偽元素
    - 小練習
  - CSS浮動布局&盒模型
  - - - 浮動
    - 盒子模型

CSS基礎

簡介

CSS：層疊樣式表，用來美化網頁的，做到結構(html)和樣式(css)分離，

基本語法

selector{
	property : value;
}

selector：選擇器通常是需要改變樣式的HTML元素

樣式參考方式

行間(行內)樣式：直接在標簽上書寫樣式

<!-- 在線運行網站：https://www.runoob.com/runcode-->
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>SimWor</title>
</head>
<body>
	<div>行間樣式測驗</div>
	<div style="color: olive;width: 100px;border: 1px solid blue;">行間樣式測驗</div>
</body>
</html>

內部樣式表：放置在頭部中

<!-- 在線運行網站：https://www.runoob.com/runcode-->
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>SimWor</title>
	<style type="text/css">
		p{
			background-color: #eeeeee;
			font-size: 18px;
			font-style: italic;
		}
	</style>
</head>
<body>
	<p>內部樣式測驗</p>
	<p>內部樣式測驗</p>
</body>
</html>

外部樣式

<!-- simwor.html-->
<!-- 在線運行網站：https://www.runoob.com/runcode-->
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>SimWor</title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
	<span>外部樣式測驗</span>
	<span>外部樣式測驗</span>
</body>
</html>

<!-- style.css-->
span {
	font-size: 15px;
	color: rgba(65, 206, 110, 0.79);
}

匯入外部樣式：先創建一個CSS檔案，再在style標簽中用import匯入，

<!-- simwor.html-->
<!-- 在線運行網站：https://www.runoob.com/runcode-->
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>SimWor</title>
	<style type="text/css">
		@import "style.css"
	</style>
</head>
<body>
	<div class="box">匯入外部樣式測驗</div>
	<div>匯入外部樣式測驗</div>
	<span class="box">匯入外部樣式測驗</span>
</body>
</html>

<!-- style.css-->
.box {
	font-weight: bold;
	font-size: 16px;
}

外部樣式和匯入外部樣式的區別

link是XHTML標簽，除了加載CSS外，還可以定義RSS等其它事務；@import屬于CSS范疇，只能加載CSS；
link參考CSS時，在頁面載入時同時加載；@import需要頁面網頁完全載入以后加載；
link是XHTML標簽，無兼容問題；@import是在CSS2.1提出的，低版本的瀏覽器不支持；
link支持使用Javascript控制DOM去改變樣式；而@import不支持，

樣式選擇器

分類

選擇器	說明
*	用來匹配所有的標簽
標簽選擇器	針對指定的標簽
類選擇器	用來選擇class命名的標簽
id選擇器	用來選擇用id命名的標簽
派出選擇器	根據背景關系確定要選擇的標簽

<!-- simwor.html-->
<!-- 在線運行網站：https://www.runoob.com/runcode-->
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>SimWor</title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
	<p>全匹配：p標簽</p>
	<strong>全匹配：strong標簽</strong>
	<span>標簽匹配：span標簽</span>
	<div class="wrapper">類匹配：div標簽</div>
	<p id="content">id匹配：p標簽</p>
	<ul>
		<li>li01</li>
		<li>li01</li>
	</ul>
	<ul class="list">
		<li>li02</li>
		<li>li02</li>
	</ul>
</body>
</html>

<!-- style.css-->
/* 1. * */
* {
	color: red;
}
/* 2. 標簽選擇器 */
span {
	display: block;
	margin-right: 20px;
	border: 1px solid gray;
}
/* 3. 類選擇器 */
.wrapper {
	color: aqua;
}
/* 4. id選擇器 */
#content {
	color: pink;
}
/* 5. 派出選擇器：類list下的li標簽 */
.list li {
	color: blue;
}

分組

讓多個選擇器(元素)具有相同的樣式，一般用于設定公共樣式，

<!-- simwor.html-->
<!-- 在線運行網站：https://www.runoob.com/runcode-->
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>SimWor</title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
	<h1>h1</h1>
	<div class="box">class box</div>
	<p>p</p>
</body>
</html>

<!-- style.css-->
h1, .box, p {
	color: red;
}
p {
	width: 100px;
	background-color: #999999;
}

繼承

子元素可以繼承父元素的樣式

<!-- simwor.html-->
<!-- 在線運行網站：https://www.runoob.com/runcode-->
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>SimWor</title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
	<div class="extend">這是一段<span>繼承測驗</span></div>
	<div class="override">這是一段<span>覆寫測驗</span></div>
</body>
</html>

<!-- style.css-->
.extend {
	font-size: 28px;
}

.extend span {
	font-weight: bold;
}
.override {
	color: red;
}

.override span {
	color: blue;
}

優先級

總體：外部樣式 < 內部樣式 < 行內樣式

樣式	權重
!important	10000
行內樣式	1000
id選擇器	100
類、偽類選擇器	10
標簽選擇器	1

<!-- simwor.html-->
<!-- 在線運行網站：https://www.runoob.com/runcode-->
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>SimWor</title>
	<link rel="stylesheet" type="text/css" href="style.css">
	<style type="text/css">
		p {
			color: blue;
		}
		strong {
			color: blue!important;
		}
	</style>
</head>
<body>
	<p style="color: yellow;">行內樣式 &gt; 內部樣式</p>
	<p>內部樣式 &gt; 外部樣式</p>
	<strong style="color: yellow;">!important &gt; 行內樣式</strong>
	<div id="content">
		<div class="main_content">
			<h2>復雜情況需依次累加計算權重</h2>			
		</div>
	</div>
</body>
</html>

<!-- style.css-->
p {
	color: red;
}
/* 復雜情況下的優先級判斷 */
#content div.main_content h2 {
	/* 權重：100+1+10+1=112 */
	color: red;
}
#content .main_content h2 {
	/* 權重：100+10+1=111 */
	color: blue;
}

字體

屬性

屬性	說明	設定
font-size	字號	{number+px}:固定值尺寸像素；{number+%}:其百分比是基于父物件字體的尺寸大小
font-family	字體	{Courier, “Courier New”, monospave}:第一個瀏覽器支持的字體生效，都不支持使用瀏覽器默認字體
font-style	樣式	normal:正常；italic:斜體，對于沒有斜體變數的特殊字體使用oblique；oblique:傾斜的字體
font-weight	加粗	bold、bolder、lighter、{100-900}:400=normal,700=bold
color	顏色	color=blue、rgb(100,14,200)、{#345678}
line-height	行高	{number+px}:指定行高為長度像素；{numer}:指定行高為字體大小的倍數
text-decration	修飾	underline(下劃線)、line-through(貫穿線)、overline(上劃線)
text-align	對齊	left、center、right
text-tansform	大小寫	capitalize(單詞首字母大寫)、uppercase(全部大寫)、lowercase
text-indent	縮進	{number+px}:首行縮進number像素；{number+em}:首行縮進number字符

<!-- simwor.html-->
<!-- 在線運行網站：https://www.runoob.com/runcode-->
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>SimWor</title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
	<p>十九屆五中全會提出了“<span>十四五</span>”時期經濟社會發展主要目標和2035年遠景目標，強調中國社會主義現代化國家建設進入高質量發展的新階段，黨政領導干部是推動新目標實作的中堅力量，而政績考核會深刻影響和塑造他們的政績觀和發展觀，政績考核同干部任用掛鉤，也是領導干部最看重的評價，如果政績考核的定位、內容和方式不轉變和改進，那么就很難真正使黨政領導干部樹立新發展理念并推動高質量發展，因此，改進和創新考核機制，強化高質量發展的政績導向，才能使新發展理念貫徹落實，</p>
	<div>
		Today is a good day!
	</div>
</body>
</html>

<!-- style.css-->
p {
	font-size: 20px;
	font-family: 微軟雅黑,宋體;
	font-style: italic;
	line-height: 1.5;
	text-align: center;
	text-indent: 2em;
}
p span {
	font-weight: bolder;
	color: red;
	text-decoration: underline;
}
div {
	text-transform: uppercase;
}

復合屬性

font: [font-style] [font-variant] [font-weight] font-size[/line-height] font-family;

屬性值的位置順序不可顛倒
除了font-size和font-family之外，其它任何屬性可以省略
font-variant：small-caps(把段落設定為小型大寫字母字體)

<!-- simwor.html-->
<!-- 在線運行網站：https://www.runoob.com/runcode-->
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>SimWor</title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
	<p>Today is a good day!十九屆五中全會提出了“十四五”時期經濟社會發展主要目標和2035年遠景目標，強調中國社會主義現代化國家建設進入高質量發展的新階段，黨政領導干部是推動新目標實作的中堅力量，而政績考核會深刻影響和塑造他們的政績觀和發展觀，政績考核同干部任用掛鉤，也是領導干部最看重的評價，如果政績考核的定位、內容和方式不轉變和改進，那么就很難真正使黨政領導干部樹立新發展理念并推動高質量發展，因此，改進和創新考核機制，強化高質量發展的政績導向，才能使新發展理念貫徹落實，</p>
</body>
</html>

<!-- style.css-->
p {
	font: italic small-caps bolder 18px/1.5 宋體;
}

背景

屬性	說明
background-color	背景色（transparent/color）
background-image	背景圖（url）
background-repeat	背景影像鋪排方式（repeat/no-repeat/repeat-x/repeat-y）
background-position	設定物件的背景影像位置{x-number/top/center/bottom} {y-number/left/center/right}
background-attachment	背景影像滾動位置（scroll/fixed）
background	復合寫法：color image repeat attachment position

<!-- simwor.html-->
<!-- 在線運行網站：https://www.runoob.com/runcode-->
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>SimWor</title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
	<p>Today is a good day!十九屆五中全會提出了“十四五”時期經濟社會發展主要目標和2035年遠景目標，強調中國社會主義現代化國家建設進入高質量發展的新階段，黨政領導干部是推動新目標實作的中堅力量，而政績考核會深刻影響和塑造他們的政績觀和發展觀，政績考核同干部任用掛鉤，也是領導干部最看重的評價，如果政績考核的定位、內容和方式不轉變和改進，那么就很難真正使黨政領導干部樹立新發展理念并推動高質量發展，因此，改進和創新考核機制，強化高質量發展的政績導向，才能使新發展理念貫徹落實，</p>
</body>
</html>

<!-- style.css-->
body {
	background-color: gray;
	background-image: url(https://cn.bing.com/th?id=OHR.EsskastanieD_ZH-CN9736686128_1920x1080.jpg&rf=LaDigue_1920x1080.jpg&pid=hp);
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-position: center center;
	height: 2000px;
	/*background: gray url(some-url) no-repeat fixed center center; */
}

偽類選擇器

偽類：專門用來表示元素的一種特殊狀態

偽類選擇器	說明
a:link	未訪問狀態
a:visited	已訪問狀態
a:hover	滑鼠懸停狀態
a:active	用戶激活（單擊）
input:focus	表單獲得焦點時觸發樣式
selector:first-child	選擇元素的第一個子元素
selector:last-child	選擇元素的最后一個子元素

<!-- simwor.html-->
<!-- 在線運行網站：https://www.runoob.com/runcode-->
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>SimWor</title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
	<a href="#">多變的偽類選擇器</a>
	<input type="text">
	<ul>
		<li>aaa</li>
		<li>bbb</li>
		<li>ccc</li>
	</ul>
</body>
</html>

<!-- style.css-->
a:link {
	color: red;
}
a:visited {
	color: blue;
}
a:hover {
	color: yellow;
}
a:active {
	color: green;
}
input:focus {
	outline: 1px solid #f00;
}
ul li:first-child {
	color: red;
}
ul li:nth-child(2) {
	color: green;
}
ul li:last-child {
	color: blue;
}

屬性選擇器

寫法	說明
屬性名	包含有指定屬性名的元素
屬性名=值	屬性名的值為指定值的元素
屬性名~=值	屬性名的值包含指定值的元素
屬性名^=值	屬性名以指定值開頭的元素
屬性名$=值	屬性名以指定值結尾的元素

<!-- simwor.html-->
<!-- 在線運行網站：https://www.runoob.com/runcode-->
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>SimWor</title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
	<div class="content" title="內容">content0</div>
	<div class="content">content1</div>
	<form>
		<input type="text" name="account">
		<input type="text" name="usr">
	</form>
	<div class="box public">public</div>
	<div class="box private">private</div>
</body>
</html>

<!-- style.css-->
div.content[title] {
	font-weight: bolder;
}
input[name=usr] {
	background-color: #eee;
}
div[class~=public] {
	font-size: 30px;
}

關系選擇器

選擇器	說明
空格	后代選擇器
>	只選擇兒子元素
+	只選擇兄弟元素

<!-- simwor.html-->
<!-- 在線運行網站：https://www.runoob.com/runcode-->
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>SimWor</title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
	<h1>
		<strong>關系1</strong>
		<span>
			<strong>關系2</strong>
		</span>
	</h1>
	<ul>
		<li>aaa</li>
		<li>bbb</li>
		<li>ccc</li>
	</ul>
</body>
</html>

<!-- style.css-->
/* 后代選擇器 */
h1 strong {
	color: red;
}
/* 兒子選擇器 */
h1>strong {
	background-color: black;
}
/* 兄弟選擇器 */
ul li+li {
	list-style-type: none;
	color: red;
}

偽元素

用于向

偽元素與偽類的區別

css引入偽類和偽元素概念是為了格式化檔案樹以外的資訊，
偽類用于當已有元素處于某個狀態時，為其添加對應的樣式，這個狀態是根據用戶行為而動態改變的，它只有處于dom樹無法描述的狀態時才能為元素添加樣式，所以將其稱為偽類，
偽元素用于創建一些不再檔案樹中的元素，并為其添加樣式，比如說，我們可以通過 :before 來在一個元素前增加一些文本，并為這些文本添加樣式，雖然用戶可以看到這些文本，但是這些文本實際上不存在于檔案樹中，

偽類和偽元素的特點

偽元素和偽類都不會出現在源檔案或檔案樹中；
偽類允許出現在選擇器的任何位置，而一個偽元素只能跟在選擇器的最后一個簡單選擇器后面；
偽元素名和偽類名都是大小寫不敏感的
有些偽類是互斥的，而其它的可以同時用在一個元素上，（在規則沖突的情況下，常規層疊順序決定結果）

偽元素的使用

偽元素	說明
::before	在元素之前添加內容
::after	在元素之前添加內容
::first-letter	在元素第一個字母前添加內容
::first-line	在元素第一行前添加內容
::selection
::placeholder
::backdrop

<!-- simwor.html-->
<!-- 在線運行網站：https://www.runoob.com/runcode-->
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>SimWor</title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
	<p>偽類用于當已有元素處于某個狀態時，為其添加對應的樣式，這個狀態是根據用戶行為而動態改變的，它只有處于dom樹無法描述的狀態時才能為元素添加樣式，所以將其稱為偽類，</p>
</body>
</html>

<!-- style.css-->
p::before {
	content: "Today is a good day!"
}
p::first-letter {
	font-size: 30px;
	font-family: 黑體;
	color: blue;
}
p::first-line {
	text-decoration: underline;
}
p::after {
	content: ".....";
}

小練習

練習一

目標
html

<!-- 在線運行網站：https://www.runoob.com/runcode-->
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>SimWor</title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
	<!-- 開發思路：先整體，再區域；從上至下開發 -->
	<div class="wrapper">
		<h1>文字翻轉，一個很酷的文字工具</h1>
		<p><span class="summary">摘要</span>：文字翻轉，一個很酷的文字工具，它可以把字母上下翻轉180°！我們很高興向你介紹這一款生成器，之前有些生成器只能翻轉小寫字母，但現在這個強大的生成器，連大寫字母也可以成功翻轉！</p>
		<p>文字翻轉，一個很酷的文字工具，它可以把字母上下翻轉180°！我們很高興向你介紹這一款生成器，之前有些生成器只能翻轉小寫字母，但現在這個強大的生成器，連大寫字母也可以成功翻轉！文字翻轉，一個很酷的文字工具，它可以把字母上下翻轉180°！我們很高興向你介紹這一款生成器，之前有些生成器只能翻轉小寫字母，但現在這個強大的生成器，連大寫字母也可以成功翻轉！</p>
		<p>文字翻轉，一個很酷的文字工具，它可以把字母上下翻轉180°！我們很高興向你介紹這一款生成器，之前有些生成器只能翻轉小寫字母，但現在這個強大的生成器，連大寫字母也可以成功翻轉！</p>
		<p>文字翻轉，一個很酷的文字工具，它可以把字母上下翻轉180°！我們很高興向你介紹這一款生成器，之前有些生成器只能翻轉小寫字母，但現在這個強大的生成器，連大寫字母也可以成功翻轉！</p>
		<p>文字翻轉，一個很酷的文字工具，它可以把字母上下翻轉180°！我們很高興向你介紹這一款生成器，之前有些生成器只能翻轉小寫字母，但現在這個強大的生成器，連大寫字母也可以成功翻轉！</p>
		<ul>
			<li><a href="#">文字翻轉，一個很酷的文字工具</a></li>
			<li><a href="#">它可以把字母上下翻轉180°</a></li>
			<li><a href="#">我們很高興向你介紹這一款生成器</a></li>
			<li><a href="#">連大寫字母也可以成功翻轉</a></li>
		</ul>
	</div>
</body>
</html>

* {
	margin: 0;
	padding: 0;
}
body {
	padding: 10px 0;
	font-family: 微軟雅黑;
}
.wrapper {
	width: 640px;
	border: 1px solid #ccc;
	padding: 20px;
	margin: 0 auto; /* 左右居中 */
}
h1 {
	font-size: 20px;
	font-weight: normal;
	text-align: center;
	margin: 10px 0 20px; /*上邊距為10，左右為0，下邊距為29*/
}
p {
	font-size: 14.8px;
	text-indent: 2em;
	margin: 1.5em 0; /* 上下邊距為1.5個字符距離，左右為零*/
	line-height: 1.5em;
}
h1+p {
	border-top: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
	padding: 10px 0;
	text-indent: 0;
	color: #005fdd;
	font-size: 12px;
}
.summary {
	color: red;
}
ul {
	list-style-type: none; /* 取消串列裝飾 */
	text-indent: 2em;
	font-size: 12px;
}

ul li {
	line-height: 2em;
}
a {
	color: #666;
	text-decoration: none;
}
a:hover {
	color: blue;
	text-decoration: underline;
}

練習二

效果

在這里插入圖片描述

html

<!-- 在線運行網站：https://www.runoob.com/runcode-->
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>SimWor</title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
	<!-- 開發思路：先整體，再區域；從上至下開發 -->
	<div class="content">
		<h1>花瓣搜索</h1>
		<p>面對文字居多的頁面，除了上面介紹的方法之外，還可以參考海報創意設計風格，通過對文字的重組排版，選擇性的突出內容，往往給人驚艷的感覺，參考花瓣搜索：文字排版，里面的創意排版靈感非常不錯的，</p>
		<section class="review">
			<h3>文章導讀：</h3>
			<!-- href中的#表示錨點，實作的是頁內跳轉 -->
			<a href="#title1">除了上面介紹的方法之外</a>
			<a href="#title2">往往給人驚艷的感覺</a>
		</section>
		<p>面對文字居多的頁面，除了上面介紹的方法之外，還可以參考海報創意設計風格，通過對文字的重組排版，選擇性的突出內容，往往給人驚艷的感覺，參考花瓣搜索：文字排版，里面的創意排版靈感非常不錯的，面對文字居多的頁面，除了上面介紹的方法之外，還可以參考海報創意設計風格，通過對文字的重組排版，選擇性的突出內容，往往給人驚艷的感覺，</p>
		<p>面對文字居多的頁面，除了上面介紹的方法之外，還可以參考海報創意設計風格，通過對文字的重組排版，選擇性的突出內容，往往給人驚艷的感覺，參考花瓣搜索：文字排版，里面的創意排版靈感非常不錯的，</p>
		<p>面對文字居多的頁面，除了上面介紹的方法之外，還可以參考海報創意設計風格，通過對文字的重組排版，選擇性的突出內容，往往給人驚艷的感覺，參考花瓣搜索：文字排版，里面的創意排版靈感非常不錯的，面對文字居多的頁面，除了上面介紹的方法之外，還可以參考海報創意設計風格，通過對文字的重組排版，選擇性的突出內容，往往給人驚艷的感覺，</p>
		<p>面對文字居多的頁面，除了上面介紹的方法之外，還可以參考海報創意設計風格，通過對文字的重組排版，選擇性的突出內容，往往給人驚艷的感覺，參考花瓣搜索：文字排版，里面的創意排版靈感非常不錯的，</p>
		<section>
			<h2><a id="title1">除了上面介紹的方法之外</a></h2>
			<p>面對文字居多的頁面，除了上面介紹的方法之外，還可以參考海報創意設計風格，通過對文字的重組排版，選擇性的突出內容，往往給人驚艷的感覺，面對文字居多的頁面，除了上面介紹的方法之外，還可以參考海報創意設計風格，通過對文字的重組排版，選擇性的突出內容，往往給人驚艷的感覺，</p>
		</section>
		<section>
			<h2><a id="title2">往往給人驚艷的感覺</a></h2>
			<p>面對文字居多的頁面，除了上面介紹的方法之外，還可以參考海報創意設計風格，通過對文字的重組排版，選擇性的突出內容，往往給人驚艷的感覺，參考花瓣搜索：文字排版，里面的創意排版靈感非常不錯的，</p>
		</section>
		<p>面對文字居多的頁面，除了上面介紹的方法之外，還可以參考海報創意設計風格，通過對文字的重組排版，選擇性的突出內容，往往給人驚艷的感覺，參考花瓣搜索：文字排版，里面的創意排版靈感非常不錯的，面對文字居多的頁面，除了上面介紹的方法之外，還可以參考海報創意設計風格，通過對文字的重組排版，選擇性的突出內容，往往給人驚艷的感覺，</p>
		<p>面對文字居多的頁面，除了上面介紹的方法之外，還可以參考海報創意設計風格，通過對文字的重組排版，選擇性的突出內容，往往給人驚艷的感覺，參考花瓣搜索：文字排版，里面的創意排版靈感非常不錯的，</p>
		<p>面對文字居多的頁面，除了上面介紹的方法之外，還可以參考海報創意設計風格，通過對文字的重組排版，選擇性的突出內容，往往給人驚艷的感覺，參考花瓣搜索：文字排版，里面的創意排版靈感非常不錯的，面對文字居多的頁面，除了上面介紹的方法之外，還可以參考海報創意設計風格，通過對文字的重組排版，選擇性的突出內容，往往給人驚艷的感覺，</p>
		<p>面對文字居多的頁面，除了上面介紹的方法之外，還可以參考海報創意設計風格，通過對文字的重組排版，選擇性的突出內容，往往給人驚艷的感覺，參考花瓣搜索：文字排版，里面的創意排版靈感非常不錯的，</p>
	</div>
</body>
</html>

* {
	margin: 0;
	padding: 0;
}
body {
	font-family: 微軟雅黑;
}
.content {
	width: 700px;
	border: solid 1px #ccc;
	margin: 10px auto;
	padding: 25px 25px 0;
	background-color: #f9fbf9;
}
h1 {
	font-size: 30px;
	margin: 25px 0 15px;
	font-family: 黑體;
	text-align: center;
}
.review h3 {
	font-size: 14.7px;
}
h2 {
	font-style: italic;
}
p {
	line-height: 1.5em;
}
h2, p {
	margin: 1.2em 0;
	text-indent: 2em;
	font-size: 14.7px;
}
h1+p {
	font-size: 12px;
	color: #666;
	line-height: 1.5em;
	border: 1px solid #ccc;
	background-color: #fff;
	padding: 7px;
	text-indent: 0;
}
h1+p::first-letter {
	font-size: 38px;
	font-weight: bold;
	float: left; /* 設定浮動 */
	clear: none; /* 不允許浮動方向*/
}
a[href^='#'] {
	line-height: 1.5em;
	font-size: 12px;
	text-decoration: none;
	color: #36f;
	display: block;
}
a[href^='#']:hover {
	color: #f60;
}

CSS浮動布局&盒模型

浮動

浮動就是讓塊級標簽不獨占一行（把塊級元素排列在一行），

浮動的原理：讓元素脫離檔案流，不占用標準流，

產生浮動

值	描述
left	元素向左浮動
right	元素向右浮動
none	默認值，元素不浮動
inherit	規定應從父元素繼承float屬性的值

<!-- 在線運行網站：https://www.runoob.com/runcode-->
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>SimWor</title>
	<style type="text/css">
		.wrapper {
			width: 600px;
			margin: 0 auto;
			border: 1px solid #666;
		}
		.box1, .box2 {
			width: 200px;
			height: 150px;
		}
		.box1 {
			background-color: red;
			float: left;
		}
		.box2 {
			background-color: blue;
			float: right;
		}
	</style>
</head>
<body>
	<div class="wrapper">
		<div class="box1">box1</div>
		<div class="box2">box2</div>
	</div>
</body>
</html>

消除浮動

浮動后，后面的元素不管是塊級還是行級元素，不會顯示在下一行，

清除浮動：讓后面的元素自動掉到下一行，

方式一：添加空標簽并設定樣式

方法	說明
clear:left	清除左浮動
clear:right	清楚右浮動
clear:both	清楚左右浮動
clear:	左右浮動都不清除

<!-- 在線運行網站：https://www.runoob.com/runcode-->
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>SimWor</title>
	<style type="text/css">
		.wrapper {
			width: 600px;
			margin: 0 auto;
			border: 1px solid #666;
		}
		.box1, .box2, .box3 {
			width: 200px;
			height: 150px;
		}
		.box1 {
			background-color: red;
			float: left;
		}
		.box2 {
			background-color: blue;
			float: right;
		}
		.clear {
			clear: both;
		}
		.box3 {
			background-color: yellow;
		}
	</style>
</head>
<body>
	<div class="wrapper">
		<div class="box1">box1</div>
		<div class="box2">box2</div>
		<!-- 清楚浮動方式一：添加空標簽 -->
		<div class="clear"></div>
		<div class="box3">box3</div>
	</div>
</body>
</html>

方式二（首選）：在要清除浮動的父級添加樣式（overflow: hidden;）

overflow: hidden 超出部分隱藏

<!-- 在線運行網站：https://www.runoob.com/runcode-->
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>SimWor</title>
	<style type="text/css">
		.wrapper {
			width: 600px;
			margin: 0 auto;
			border: 1px solid #666;
			overflow: hidden;
		}
		.box1, .box2, .box3 {
			width: 200px;
			height: 150px;
		}
		.box1 {
			background-color: red;
			float: left;
		}
		.box2 {
			background-color: blue;
			float: right;
		}
		.box3 {
			background-color: yellow;
		}
	</style>
</head>
<body>
	<div class="wrapper">
		<div class="box1">box1</div>
		<div class="box2">box2</div>
	</div>
	<div class="box3">box3</div>
</body>
</html>

在要清除的父級添加偽元素，并設定樣式

<!-- 在線運行網站：https://www.runoob.com/runcode-->
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>SimWor</title>
	<style type="text/css">
		.wrapper {
			width: 600px;
			margin: 0 auto;
			border: 1px solid #666;
		}
		/* 在要清除的父級添加偽元素，并設定樣式 */
		.wrapper:after {
			content: "";
			display: block;
			clear: both;
		}
		.box1, .box2, .box3 {
			width: 200px;
			height: 150px;
		}
		.box1 {
			background-color: red;
			float: left;
		}
		.box2 {
			background-color: blue;
			float: right;
		}
		.box3 {
			background-color: yellow;
		}
	</style>
</head>
<body>
	<div class="wrapper">
		<div class="box1">box1</div>
		<div class="box2">box2</div>
	</div>
	<div class="box3">box3</div>
</body>
</html>

小練習

效果

在這里插入圖片描述
2. 代碼

<!-- 在線運行網站：https://www.runoob.com/runcode-->
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>SimWor</title>
	<style type="text/css">
		.info-show {
			width: 600px;
			padding: 20px;
			border: 1px solid #ccc;
			margin: 100px auto;
			overflow: hidden;
		}
		.head-sculpture {
			float: left;
			text-align: center;
			margin-right: 40px;
		}
		.head-sculpture .photo {
			width: 200px;
			height: 300px;
			border: 1px solid #ccc;
			vertical-align: middle;
			background-color: #eee;
			padding: 10px 0 0 20px;
		}
		.description {
			width: 300px;
			height: 300px;
			border: 1px solid #ccc;
			float: left;
			padding: 10px 0 0 20px;
		}
	</style>
</head>
<body>
	<div class="info-show">
		<div class="head-sculpture">
			<div class="photo">頭像</div>
			<div class="name">姓名</div>
		</div>
		<div class="description">描述</div>
	</div>
</body>
</html>

盒子模型

每個元素都是一個盒子，一個盒子由margin（外邊距），border（邊框線），padding（內邊距）和content（內容）組成，

外邊距：指元素邊框線之外的距離，系統默認外邊距為8px

屬性	說明
margin-left	左邊距
margin-right	右邊距
margin-top	上邊距
margin-bottom	下邊距
margin	可以用來設定任意一個邊距，可以帶一到四個引數

margin	說明
margin: 10px;	表示上下左右都是邊距都是10px
margin: 10px 20px;	表示上下邊距為10px，左右邊距為20px
margin: 10px 20px 30px;	表示上邊距為10px，左右邊距為20px，下邊距為30px
margin: 10px 20px 30px 40px	表示上邊距為10px，右邊距為20px，下為30px，左為40px（順時針上 -> 右 -> 下 -> 左）

內邊距：指元素的文本內容與邊框之間的距離

屬性和說明與外邊距類似

邊框

屬性	說明
border-width

、

轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/217069.html

標籤：其他

上一篇：Python新建專案自動添加介紹和utf-8編碼

下一篇：從規范的角度決議物件 — 原始值轉換