Python-html css 盒模型
阿新 • • 發佈：2018-12-24
位置 cti meta 繼承 display doc aci -s font
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>html基礎復習</title>
</head>
<body>
<!-- 前端: 用戶可見的所有界面均是前端(PC端/移動端) -->
<!-- html: 頁面架構搭建 | css: 頁面布局樣式 | js: 頁面交互渲染 -->
<!-- 編輯器: webstrom | sublime | atom | pycharm -->
<!-- 標簽: <字母開頭 + 合法字符(數字|-)> => (標簽具有作用域,有頭有尾) <abc> | <num1> | <nav-title> -->
<!-- 指令: <!doctype html> 註釋 -->
<!-- 轉移字符: ≷ -->
<!-- 基本標簽: div | span | hn | p | ul>li | hr | br | form>input | table>tr>th(td) | a | img | b | i | meta | link | script | style -->
<!-- 分類: 單雙 | dispaly -->
<!-- inline: span | b | i | a -->
<!-- inline-block: img | input -->
<!-- block: div | hn | p | ul | hr | br -->
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css復習</title>
</head>
<body>
<!-- 1.css三種引入: 行間式 | 內聯式 | 外聯式 -->
<!-- 選擇器 作用域 樣式塊 -->
<!-- 2.長度單位: px | em | rem | cm | mm | vw | vh | in -->
<!-- 3.顏色: rgb(0, 255, 189) | rgba(0,0,0, 0~1) | red | #000000~#FFFFFF -->
<!-- 4.文本樣式 -->
<style>
span {
font: 900 normal 30px/100px ‘首選字體‘, ‘備用字體1‘, ‘備用字體2‘;
text-align: center;
color: red;
text-decoration: underline;
letter-spacing: 3px;
word-spacing: 10px;
text-indent: 2em;
}
</style>
<!-- 5.選擇器 -->
<style type="text/css">
/*選擇器： css連接html標簽的橋梁，建立連接後就可以控制標簽樣式*/
/*標簽 類 id*/
/*組合選擇器*/
/*偽類選擇器*/
/*優先級：*/
/*基礎選擇器： !important > id > 類[屬性] > 標簽 > 通配*/
/*組合選擇器: 權重(同類型個數比較)*/
.b > .s {}
.b .s {}
.b + .s {}
.b.s {}
.b[class] {}
#ss { font-size: 50px; }
span.s2 { font-size: 40px; }
[class] { font-size: 35px; }
.s1 { font-size: 30px; }
span { font-size: 20px!important; }
/* 標簽名 | . | # */
/*後代"空格"(子代) | 兄弟"~"(相鄰) | 群組"," | 交集"緊挨著"*/
/* [屬性名="屬性值"] */
</style>
<span class="s1 s2" id="ss" style="font-size: 60px;">12345</span>
<style type="text/css">
/* 偽類選擇器 */
/* :link :hover(鼠標懸浮) :active(鼠標點擊中) :visited */
/* :nth-child() 先位置後類型 :nth-of-type() 先類型後位置 */
/* :not() */
/* :before(盒子渲染前) :after(盒子渲染後) :focus(表單標簽獲取焦點) */
p:nth-child(3) { font-size: 100px }
p:nth-of-type(2n) { font-size: 50px }
</style>
<div class="box">
<span>span</span>
<p>pp1</p>
<p>pp2</p>
</div>
<!-- 6.精靈圖 -->
<style type="text/css">
.pg {
width: 200px;
height: 200px;
border: 1px solid black;
position: absolute;
top: 10px;
left: calc(50vw - 100px);
}
.pg {
background: url(‘img/bg.png‘) no-repeat;
/*將背景圖片的具體位置移至顯示區域*/
background-position: -300px -350px;
}
</style>
<div class="pg"></div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>盒模型復習</title>
<style type="text/css">
abc {
display: inline-block;
}
.box {
background: orange;
/*文本類型的樣式具有繼承關系*/
font-size: 30px;
font-weight: 900;
/*inline-block不會繼承*/
text-decoration: underline;
text-indent: 2em;
line-height: 60px;
}
</style>
</head>
<body>
<!-- 文本屬性通過擁有繼承關系: 子標簽沒有設置文本屬性時,值會從父級中獲取(父級如果沒有設置,會找到html) -->
<div class="box">
<span>inline</span>
<div>block</div>
<abc>inline-block</abc>
</div>
<!-- 1.盒子的四個組成部分 -->
<!-- content | padding | border | margin -->
<!-- display: inline | inline-block | block -->
<!-- content: 提高給內容(文本,圖片,子標簽整個盒子)的顯示區域 -->
<!-- padding: 介於border與content之間的距離, 可以撐開border與content之間的距離, 沒有自身顏色(透出背景顏色),只有區域 -->
<!-- 註: padding-top可以將自身與自身第一個子級分離 -->
<style type="text/css">
.p {
width: 20px;
height: 20px;
background: red;
}
.b {
width: 100px;
padding-bottom: 100px;
border-bottom: 1px solid black;
}
.c {
background: pink;
/*border: 1px solid black;*/
border-style: solid;
padding-left: 32px;
padding-bottom: 32px;
margin-left: 32px;
/*text-indent: 2em;*/
}
</style>
<div class="b">
<div class="p"></div>
</div>
<div class="c">123</div>
<!-- border: 邊框, 有寬度顏色樣式, 如果給顏色設置透明也可以透出背景顏色 -->
<!-- margin: 控制盒子位置 => 盒模型布局 -->
<!-- 2.邊界圓角 -->
<style type="text/css">
.bj {
width: 100px;
height: 100px;
background: pink;
}
.bj {
/*border-radius: 20px;*/
/*border-radius: 40%;*/
/*border-radius: 10px 30px 50px;*/
border-radius: 10px / 50px;
}
</style>
<div class="bj"></div>
<!-- 3.display -->
<!-- 4.margin布局 -->
<!-- i) margin-top | margin-left 完成自身布局, 右下兩個方向影響兄弟 -->
<style type="text/css">
.hh {
width: 30px;
height: 30px;
background: black;
/*display: inline-block;*/
float: left;
/*自身動,控制自身布局*/
/*margin-top: 30px;*/
/*margin-left: 30px;*/
/*右兄弟動,輔助兄弟布局*/
margin-right: 100px;
/*下兄弟動,輔助兄弟布局*/
/*margin-bottom: 30px;*/
}
.xx {
width: 30px;
height: 30px;
background: red;
/*display: inline-block;*/
float: left;
}
</style>
<div class="hh"></div>
<div class="xx"></div>
<!-- ii) 上下間距會重疊取大值, 左右間距會疊加 -->
<!-- 坑1: 父子聯動 坑2: 上兄弟下margin和下兄弟上margin重疊取大值 -->
<style type="text/css">
.x, .z {
width: 50px;
height: 50px;
background: blue;
}
.x {
/*margin-bottom: 40px;*/
}
.z {
margin-top: 10px;
background: yellow;
}
.y {
width: 10px;
height: 10px;
background: red;
/*margin-top: 10px;*/
}
/*坑1解決方案*/
.y {
/*方案1*/
/*float: left;
margin-top: 10px;*/
/*方案2*/
/*position: relative;*/
position: absolute;
/*top: auto;*/
/*top: 20px;*/
margin-top: 20px;
}
.z {
/*position: relative;*/
}
</style>
<div class="x"></div>
<div class="z">
<div class="y"></div>
</div>
</body>
</html>
Python-html css 盒模型