一、如何饮用CSS属性到HTML中？
- 用
<style>标签 - style属性
-
<link>标签引入到css文件当中 - 在css文件中引入css文件
二、display属性
可以强制切换块级元素/内联元素。
display: inline; (内联元素，宽高由自己决定，不独占一行)
display: block; (块级元素，宽度可以设置，高度由元素大小决定，独占一行)
display: none; (display:none; 通常會搭配 JavaScript 一起使用)
display: inline-block; (使用 display: inline-block 的元素就像 display: inline 的元素一樣，但你可以設定 width 與 height 屬性)
学习资源：学习css版面配置（不翻墙的话可能打不开）
三、float属性
在设置float属性后，可能会出现无法意料的bug，这时候需要在设置了folat元素的父元素上设置clearfix秘技。秘技如下：
.clearfix::after {
content: " ";
display: block;
clear: both;
}
再复述三遍：
- 把
clearfix写到所有浮动元素的父级元素上。 - 把
clearfix写到所有浮动元素的父级元素上。 - 把
clearfix写到所有浮动元素的父级元素上。
四、position(相对定位/绝对定位)
-
position: static;是預設值。任何套用 position: static; 的元素「不會被特別定位」在頁面上特定位置，而是照著瀏覽器預設的配置自動排版在頁面上，所有其他的屬性值都代表該元素會被定位在頁面上。 -
position: relative;写在父元素上
position: absolute;写在子元素上
-
在一個設定為 position: relative 的元素內設定 top 、 right 、 bottom 和 left 屬性，會使其元素「相對地」調整其原本該出現的所在位置，而不管這些「相對定位」過的元素如何在頁面上移動位置或增加了多少空間，都不會影響到原本其他元素所在的位置。
-
如果套用 position: absolute 的元素，其上層容器並沒有「可以被定位」的元素的話，那麼這個元素的定位就是相對於該網頁所有內容（也就是 <body> 元素）最左上角的絕對位置，看起來就是這張網頁的絕對位置一樣，所以當你的畫面在捲動時，該元素還是會隨著頁面卷动。
position: fixed;
- 固定定位（position: fixed）的元素會相對於瀏覽器視窗來定位，這意味著即便頁面捲動，它還是會固定在相同的位置。和 relative 一樣，我們會使用 top 、 right 、 bottom 和 left 屬性來定位。
参考资料：学习css版面配置（不翻墙的话可能还是打不开）*
这些都非常都基础，css中还有伪类、盒模型、动画模块、弹性布局等～这一个星期专攻css！！！coding！！！
加油！
网友评论