CSS常用属性

一、如何饮用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(相对定位/绝对定位)

  1. position: static; 是預設值。任何套用 position: static; 的元素「不會被特別定位」在頁面上特定位置,而是照著瀏覽器預設的配置自動排版在頁面上,所有其他的屬性值都代表該元素會被定位在頁面上。

  2. position: relative; 写在父元素上
    position: absolute;写在子元素上

  • 在一個設定為 position: relative 的元素內設定 top 、 right 、 bottom 和 left 屬性,會使其元素「相對地」調整其原本該出現的所在位置,而不管這些「相對定位」過的元素如何在頁面上移動位置或增加了多少空間,都不會影響到原本其他元素所在的位置。

  • 如果套用 position: absolute 的元素,其上層容器並沒有「可以被定位」的元素的話,那麼這個元素的定位就是相對於該網頁所有內容(也就是 <body> 元素)最左上角的絕對位置,看起來就是這張網頁的絕對位置一樣,所以當你的畫面在捲動時,該元素還是會隨著頁面卷动。

  1. position: fixed;
  • 固定定位(position: fixed)的元素會相對於瀏覽器視窗來定位,這意味著即便頁面捲動,它還是會固定在相同的位置。和 relative 一樣,我們會使用 top 、 right 、 bottom 和 left 屬性來定位。

参考资料:学习css版面配置(不翻墙的话可能还是打不开)*

这些都非常都基础,css中还有伪类、盒模型、动画模块、弹性布局等~这一个星期专攻css!!!coding!!!

加油!
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,715评论 1 92
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 28,522评论 1 45
  • 选择器的权重 选择器的权重:类型选择器(元素选择器):0001class选择器:0010id选择器:0100层级(...
    GHope阅读 4,819评论 0 16
  • 家长们对于近期遇到的居住证问题有所争论,美吖我搜集各方资料整理了现在家长们居住证遇到的问题,以及如何应对新政策的变...
    赛吖科技阅读 3,051评论 0 0
  • “今日待办清单”是一个谎言 易效能:每天都完成计划,才能计划自己的未来。/所谓迷茫,就是才华配不上梦想。 1、今日...
    竹叶青青_550c阅读 2,350评论 0 0

友情链接更多精彩内容