css 系列1

04-14

引入css的4種方法

style 屬性

<div style="height:100px;background-color: red;"></div>

style 標籤
在head標籤內容中添加

<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>JS Bin</title> <style> div{ height: 100px; background-color: red; } </style> </head><body><div></div></body></html>

link 標籤引入
i 創建一個a.css文件，並添加內容

div{

height: 100px;

background-color: red;

}

ii 在head中添加

import
該方法是在一個css文件中引入另一個css文件，語法為

@import url("b.css")

（以下觀點屬個人理解）

水平布局

導航欄

<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>JS Bin</title> <style> a{ text-decoration:none; } ul{ list-style-type: none; } ul>li{ float:left; margin:20px; } </style> </head><body> <nav> <ul> <li><a href="#">HOME</a></li> <li><a href="#">ABOUT</a></li> <li><a href="#">CONTACT</a></li> </ul> </nav></body></html>

導航欄.png

在導航條下面加一個div

div{ width: 100px; height: 100px; background-color: grey; }

未清除浮動效果

未清楚浮動.png

清楚浮動效果

2018-04-10 10-24-12 的屏幕截圖.png

所以在給元素添加float後都有可能帶來一些問題，所以我們需要清除浮動帶來的影響。
清除浮動的辦法有很多種，我們只用以下一種方法
i 給浮動元素的父元素的類加 clearfix
ii clearfix 的css代碼具體實現.clearfix::after{

content:;
display:block;
clear:both;
}

垂直布局

個人理解

整個網頁就是在做一個垂直布局，而水平布局就是在整體的縱向垂直布局上做一塊內容的橫向水平布局

各塊的垂直布局

2018-04-10 10-45-56 的屏幕截圖.png

可以看到導航欄部分和所有div做整體的垂直布局
而導航欄這一塊裡面又做了水平布局
所以我覺得瀏覽器的布局就是整體在做垂直布局，但是又有水平布局組合的複雜布局

實用且好用的工具推薦

工具推薦