CSS——01CSS 的學習思路

10-14

CSS——01CSS 的學習思路

1.無樣式前

<html lang="en"><head> <meta charset="UTF-8"> <title>01無樣式前</title></head><body bgcolor="yellow"> <h1><center><font color="red">標題</font></center></h1></body></html>

2.有樣式

<html lang="en"><head> <meta charset="UTF-8"> <title>02有樣式</title> <style> body{ background:yellow; } h1{ color:red; text-align:center; } </style></head><body bgcolor="yellow"> <h1>標題</h1></body></html>

3.引入

3.1 列印時添加樣式：media = "print"

只會在列印時顯示該樣式

<head> <meta charset="UTF-8"> <title>03引入css</title> <link rel="stylesheet" href="style.css" media="print"/> //只會在列印時顯示該樣式</head>

3.2 引入

<head> <meta charset="UTF-8"> <title>03引入css</title> <link rel="stylesheet" href="style.css"/> //引入</head>

4.圖文混排

4.1 圖文混排 float:left

無圖文混排

img{ width:100px; height:100px; float:left; //圖文混排}

圖文混排

5.不正交

5.1 上下margin合併

div{ border:1px solid blue; height:100px; margin:10px; }

5.1.1 消除合併margin

5.1.1.1 兩個父子元素之間有margin。可以通過border隔開

<div stylex="border-top:1px solid green;">隔開</div>

5.1.1.2 display:table; display:flex;

<div stylex="display:table;">隔開</div> <div stylex="display:flex;">隔開</div>

margin隔開與未隔開

5.2 display與小圓點影響

默認display:list-item，display改成其它小圓點不顯示

默認display:list-item

li{ display:inline; //默認list-item }

修改display

5.3 position可以改變display

元素display為inline或inline-block，position改為absolute，display會變為block。

查看：F12——》computed

<html lang="en"><head> <meta charset="UTF-8"> <title>08position可改變display</title> <style> .parent{ background:green; height:100px; position:relative; } .child{ display:inline; //或者inline-block,觀查這裡的屬性 border:1px solid red; position:absolute; //設置這裡會影響元素display bottom:0; right:0; } </style></head><body> <div class="parent"> <div class="child">內聯樣式</div> </div></body></html>

display改為block

5.4 transform影響position:fixed

由於做變形所以把所有內容變形，即使fix定位也要一起變形，那就改為相對於父元素定位

<html lang="en"><head> <meta charset="UTF-8"> <title>09transform影響</title> <style> .parent{ background:green; height:100px; position:relative; transform:scale(0.9); } .child{ display:table; border:1px solid red; position:fixed; //觀查該元素 bottom:0; right:0; } </style></head><body> <div class="parent"> <div class="child">內聯樣式</div> </div></body></html>

child元素改為相對於父元素定位

5.5 float影響inline元素

文字會找浮動元素根源環繞它。

<html lang="en"><head> <meta charset="UTF-8"> <title>09transform影響position:fixed</title> <style> .parent{ background:green; height:100px; } .float{ background:rgba(255,0,0,0.5); width:100px; height:60px; float:left; } .child{ width:300px; height:50px; background:white; } </style></head><body> <div class="parent"> <div class="float">浮動元素</div> <div class="child">你好</div> </div></body></html>

文字會找浮動元素根源環繞它

6.布局

布局

Float布局：兩欄、三欄

Flex布局：兩欄、三欄

7.水平居中

水平居中

8.垂直居中

垂直居中

垂直居中要點不需要寫父元素高度