CSS核心的幾個概念
盒模型、position、float。他們是css的基礎,之間看似獨立卻又相輔相成。
元素型別
塊級元素、內聯元素
他們之間有以下區別:
1、塊級元素獨佔一行,除非顯示的修改display屬性。而內聯元素都會在一行內顯示。
2、塊級元素可以設定width、height屬性,而內聯元素不行。
3、塊級元素的width預設為100%,而內聯元素則根據自身的內容或子元素來決定寬度 。
內聯元素不可以設定高度,但可以通過設定display:block;來達到效果。這時元素將以塊級形式呈現。
當display:inline;時,元素以內聯形式呈現。
要讓元素在行內顯示,又能設定高度,可以設定:display:inline-block;
盒模型
頁面上顯示的每個元素都可以看做一個盒子,即盒模型。
盒模型由四部分組成:content->padding->border->margin
元素寬度的計算…
另外兩種特殊情況
絕對定位、浮動(position、float)
1、position
這個屬性決定了元素將如何定位。大致有以下五種:
·static:預設值,元素相當於沒有定位,在頁面佔據位置,不能使用top、right、botton、left移動元素。
·relative:相對定位,沒有定位,在頁面佔據位置,可以使用top、right、botton、left移動元素。
·absolute:絕對定位,相對於最近一級的定位不是static的父元素進行定位,元素在頁面不佔據位置,可以使用top、right、botton、left移動元素。
·fixed:絕對定位,相對於瀏覽器視窗進行定位,其餘和absolute一樣。
·inhenit:從父元素繼承position的值。
2、float
顧名思義,就是把元素浮動起來,取值共四個:left、right、none、inherit。
最初的float是用來實現文字環繞的,現在它的應用非常廣泛。
css學習資料大全:http://www.imooc.com/article/3450
相關文章
- Web教程:7個CSS核心概念WebCSS
- 天翼雲分散式快取服務(Redis)的幾個核心概念分散式快取Redis
- vue(23)Vuex的5個核心概念Vue
- css幾個居中的方法CSS
- 網路時延的幾個概念
- CSS核心概念一把梭-基礎部分CSS
- ECS的核心概念
- 計算機網路的 89 個核心概念計算機網路
- CSS幾個有趣的屬性分享CSS
- CSS效能優化的幾個技巧CSS優化
- 核心概念
- 幾個作業系統的基本概念作業系統
- 33 個 JavaScript 核心概念系列(四): == 與 ===JavaScript
- Spark 的核心概念 RDDSpark
- Laravel中的核心概念Laravel
- 機器學習中比較重要的幾個概念機器學習
- 函數語言程式設計的幾個概念函數程式設計
- ES 核心概念
- Redux 核心概念Redux
- Kubernetes核心概念
- 【RabbitMQ】核心概念MQ
- Java Thread 類相關的幾個核心方法Javathread
- webpack (1)——核心概念的理解Web
- Android最全螢幕適配的幾個重要概念(三)Android
- 一文搞懂應用架構的3個核心概念應用架構
- 計算機網路的 166 個核心概念,你知道嗎?計算機網路
- 前端工程師分享幾個CSS技巧前端工程師CSS
- Laravel核心概念剖析Laravel
- RPC核心概念理解RPC
- Hyperledger Fabric 核心概念
- Webpack核心概念解析Web
- 幾個超級實用的css程式碼片段CSS
- 【前端詞典】幾個有益的 CSS 小知識前端CSS
- 物件導向思想的核心概念物件
- ElasticSearch核心概念和文件的CRUDElasticsearch
- vuex 中的核心概念及原理Vue
- 33 個 JavaScript 核心概念系列(一): 資料型別JavaScript資料型別
- CSS 中重要的層疊概念CSS
- Docker_02 核心概念Docker