CSS三大類元素

時間 2020-07-09

標籤 css 大類元素欄目 CSS 简体版

原文原文鏈接

Note：This article is my study note, without copyright，Most of the English content in the article originates from the
developer.mozilla.org/en-US/docs/Web/CSS

0.1. 行級元素（inline/內聯）

An inline element does not start on a new line and only takes up as much width as necessary.

feature:
        內容決定元素所佔位置
        不可經過CSS改變寬高
        <span></span>
        <strong></strong>
        <em></em>
        <a href=""></a>
        <del></del>

https://developer.mozilla.org/en-US/docs/Web/HTML/Element
前面幾個很常見
<a>  <span>  <em>  <del>  <img>  <label>  <input>  <script>  <strong>  <sub>  <video>  <sup>  
<audio> (if it has visible controls)
<abbr>
<acronym>
<b> 
<bdi>
<bdo>
<big>
<br>
<button>
<i>
<iframe>
<canvas>
<cite>
<code>
<data>
<datalist>
<dfn>
<embed>
<ins>
<kbd>
<map>
<mark>
<meter>
<noscript>
<object>
<output>
<picture>
<progress>
<q>
<ruby>
<s>
<samp>
<select>
<slot>
<small>
<svg>
<template>
<textarea>
<time>
<u>
<tt>
<var>
<wbr>

0.2. 塊級元素（block）

feature:
        獨佔一行
        能夠經過CSS改變寬高
        <div></div>
        <p></p>
        <ul></ul>
        <li></li>
        <ol></ol>
        <form action=""></form>
        <address></address>

https://developer.mozilla.org/en-US/docs/Web/HTML/Block-level_elements
前面幾個很常見
<div>
    Document division.
<table>
    Table.
<form>
    Input form.
<li>
    List item.
<ul>
    Unordered list.
<footer>
    Section or page footer.
<ol>
    Ordered list.
<p>
    Paragraph.
<h1>, <h2>, <h3>, <h4>, <h5>, <h6>
    Heading levels 1-6.
<address>
    Contact information.
<article>
    Article content.
<aside>
    Aside content.
<blockquote>
    Long ("block") quotation.
<details>
    Disclosure widget.
<dialog>
    Dialog box.
<dd>
    Describes a term in a description list.
<dl>
    Description list.
<dt>
    Description list term.
<fieldset>
    Field set label.
<figcaption>
    Figure caption.
<figure>
    Groups media content with a caption (see <figcaption>).
<header>
    Section or page header.
<hgroup>
    Groups header information.
<hr>
    Horizontal rule (dividing line).
<main>
    Contains the central content unique to this document.
<nav>
    Contains navigation links.
<pre>
    Preformatted text.
<section>
    Section of a web page.

0.3. 行級塊元素（inline-block）

<img src="" alt="">
    feature:
        內容決定大小（像inline同樣有沒有？不一樣之處是它能夠設置寬高）
        沒必要同時設置寬高，會等比縮放
        不獨佔一行
        能夠改變寬高

例：img

推薦一篇文章
Learn CSS Layout-----inline-block
有時候爲了填充瀏覽器的寬度而且進行很好的包裝，咱們常用浮動，可是若是使用行內塊元素彷佛更加簡單，基本不須要對要清除浮動的元素作什麼樣式操做。javascript

<style>
      .box {
         float: left;
         width: 200px;
         height: 100px;
         margin: 1em;
         border: 2px red solid;
      }

      .after-box {
         /* 須要操做clear */
         clear: left;
         border: 2px red solid;
      }

      .box2 {
         display: inline-block;
         width: 200px;
         height: 100px;
         margin: 1em;
         border: 2px yellow solid;
      }

   </style>
</head>

<body>
   <div class="box">
      1:I'm floating!
   </div>
   <div class="box">
      2:I'm floating!
   </div>
   <div class="box">
      3:I'm floating!
   </div>
   <div class="box">
      4:I'm floating!
   </div>
   <div class="box">
      5:I'm floating!
   </div>
   <div class="box">
      6:I'm floating!
   </div>
   <div class="after-box">
      I'm using clear so I don't float next to the above boxes.
   </div>

   <div class="box2">
      1:I'm floating!
   </div>
   <div class="box2">
      2:I'm floating!
   </div>
   <div class="box2">
      3:I'm floating!
   </div>
   <div class="box2">
      4:I'm floating!
   </div>
   <div class="box2">
      5:I'm floating!
   </div>
   <div class="box2">
      6:I'm floating!
   </div>
   <div class="after-box">
      I don't have to use clear in this case. Nice!
   </div>

注：css

凡是帶有inline的都具備文字特性
    當4張圖片並排展現時；中間會有空格（見JS詞法分析）
    此到處理空格時雖然可使用margin，可是不建議，
    最好把img標籤不換行寫在一塊兒就能夠

緣由：
由於在向服務器上傳代碼是會進行壓縮，系統會自動刪掉空格，以後再往瀏覽器上顯示時會呈現負邊框的效果

附：html

開發對於重複性高的元素，每每先定義CSS功能，再選配組合
通配符經常使用來初始化標籤，由於標籤經常帶有開發者不須要的東西

You can change the visual presentation （視覺呈現） of an element using the CSS display property. For example, by changing the value of display from "inline" to "block", you can tell the browser to render the inline element in a block box rather than an inline box, and vice versa （反之亦然）. However, doing this will not change the category and the content model of the element. For example, even if the display of the span element is changed to "block", it still would not allow to nest a div element inside it.

0.4. Conceptual differences

In brief, here are the basic conceptual differences between inline and block-level elements:java

0.4.0.1. Content model

Generally, inline elements may contain only data and other inline elements. You can't put block elements inside inline elements.web

0.4.0.2. Formatting

By default, inline elements do not force a new line to begin in the document flow. Block elements, on the other hand, typically cause a line break to occur (although, as usual, this can be changed using CSS).canvas

0.5. 盒子模型：

組成部分：
1.盒子壁 border
2.內邊距 padding
3.盒內容 width+height
margin+border+padding+content(=width+height)瀏覽器

padding:100px,150px,100px;其中150px表明左右方向
padding: 10px 60px;分別表明上下左右

同時須要注意盒模型的計算問題，它的 realwidth 和 realheight 不包括 margin
ruby

0.6. 層模型

推薦文章 :MDN——position服務器

絕對定位的特色：

當一個元素絕對定位以後將會跑到向上一層，原來的一層的那個位置能夠有新元素

<div id="qwe"> </div>
       <div id="rerere"></div>

#qwe {
         width: 100px;
         height: 100px;
         background-color: red;
         opacity: 0.5;
         position: absolute;
      }

      #rerere {
         width: 150px;
         height: 150px;
         background-color: green;
      }

效果圖以下
若是第一個div沒有絕對定位，兩個會分開展現
ide

==注==：對於多層嵌套的絕對定位

absolute會脫離原來位置與最近的可定位(relative)的父級進行定位，若是沒有就相對於文檔（邊框）進行定位
==附==：若是是相對定位呢？那麼它只相對於原來 本身的位置進行定位
原來的位置相對於新的座標即爲left、right的值
在通常開發中，使用relative參照，使用absolute進行定位

<div id="we">
          <div id="ui">
             <div id="jk"></div>
          </div>
       </div>

#we {
         position: relative;
         width: 200px;
         height: 200px;
         background-color: green;
      }

      #ui {
         position: relative;
         margin-left: 100px;
         width: 100px;
         height: 100px;
         background-color: red;
      }

      #jk {
         position: absolute;
         left: 50px;
         width: 50px;
         height: 50px;
         background-color: yellow;
      }

relative定位的特色
它相似於絕對定位，可是會保留原有位置不被佔用，
相同的是它一樣提高了一層

除開使用絕對和相對定位，還可使用position: sticky;定位，這種定位方式在給出的連接裏面有很好的demo能夠查看，他就像落在你電腦屏幕上的蒼蠅，無論你的界面上下滑動，他都會浮在那個點上，按照本身的定位顯示（我我的表述的不必定正確）

Types of positioning
定位元素是其計算的位置值爲相對、絕對、固定、粘滯的元素。

相對定位的元素是其計算的位置值是相對的元素。 top和bottom屬性指定垂直於其正常位置（即沒有進行定位時的位置）的偏移量； left和right屬性指定水平偏移量。
絕對定位元素是其計算的位置值是絕對值或固定值的元素。 top，right，bottom和left屬性指定距元素 包含塊 的邊緣的偏移量。（包含塊是元素相對於其放置的祖先。）若是元素具備邊距，則將它們添加到偏移量中。該元素爲其內容創建一個新的塊格式化上下文（BFC）。
粘性放置的元素是其計算的位置值爲粘性的元素。它被視爲相對定位，直到其包含的塊在其流根（或在其中滾動的容器）內超過指定的閾值（例如，將top設置爲auto之外的值），在此點將其視爲「卡住」，直到達到其包含塊的相對邊緣。
大多數狀況下，將高度和寬度設置爲auto的絕對定位元素的大小調整爲適合其內容的大小。可是，能夠經過指定頂部和底部並保留未指定的高度（即自動）來使未替換且絕對定位的元素填充可用的垂直空間。一樣，能夠經過指定左側和右側並保持width爲auto來填充可用的水平空間。

0.6.1. Syntax

The position property is specified as a single keyword chosen from the list of values below.

static

根據正常的流程放置元素，top, right, bottom, left, z-index 無效。

relative

正常流程放置元素，而且基於top, right, bottom, left相對於自身（這個自身就是沒有relative定位時的位置）偏移。

absolute

該元素從常規文檔流中刪除，而且在頁面佈局中沒有爲該元素建立空間。它相對於（relative ）其最接近的祖先（若是有）定位。不然，它相對於初始包含塊放置（相對於文檔（邊框）進行定位）。它的最終位置由top，right，bottom和left的值肯定。

fixed

該元素從常規文檔流中刪除，而且在頁面佈局中沒有爲該元素建立空間。它相對於由視口創建的初始包含塊定位，除非其祖先之一的transform，perspective或filter屬性設置爲除其餘屬性外（參見CSS Transforms Spec），在這種狀況下，祖先的行爲與包含塊。（請注意，瀏覽器與透視圖和過濾器不一致，致使包含塊的造成。）其最終位置由top，right，bottom和left的值肯定。
此值始終建立一個新的堆棧上下文。在打印文檔中，元素在每頁上放置在相同位置。

sticky

根據文檔的正常流將元素定位，而後相對於其最近的滾動祖先和包含塊（最近的塊級祖先）偏移，包括與表格相關的元素，基於top，right，bottom和left的值。該偏移量不會影響任何其餘元素的位置。

0.7. 僞類選擇器

a:hover {
         /*hover以前爲一個選擇器就行*/
         text-decoration: none;
         background-color: rgb(58, 90, 151);
         color: #fff;
         font-size: 16px;
         font-weight: bold;
         font-family: arial;
         border-radius: 12px;
      }

0.8. 附：廣告定位（即fixed）

聯繫上文，此處使用fixed做爲包含塊，裏面的元素就會相對於它進行定位

<div id="wai">
         <div id="zhong">
            <div id="nei">50px</div>
            100px
         </div>寬高200px
      </div>

#wai {
         position: fixed;
         left: 50%;
         top: 50%;
         /* margin-left: -100px;
         margin-top: -100px; */
         transform: translate(-50%, -50%);
         /* 設置margin或者transform都可讓其達到居中的效果，可是後者更方便 */
         width: 200px;
         height: 200px;
         background-color: rgb(20, 221, 80);
      }

      #zhong {
         /* 中間的元素使用relative是爲了讓最裏面的元素相對中間元素定位 */
         /* 沒有的話一樣，就相對於最外層fixed元素定位 */
         position: relative;
         margin-left: 100px;
         width: 100px;
         height: 100px;
         background-color: red;
      }

      #nei {
         position: absolute;
         left: 50px;
         width: 50px;
         height: 50px;
         background-color: yellow;
      }

1. css--元素分類
2. CSS元素分類
3. CSS元素類型
4. CSS 僞類與僞元素
5. css僞類和僞元素
6. CSS僞類與僞元素
7. css僞類與僞元素
8. CSS僞類和僞元素
9. CSS 僞類僞元素
10. 所有CSS僞類/元素
更多相關文章...
• jQuery Mobile CSS 類 - jQuery Mobile 教程
• CSS 指南 - 網站建設指南
• Kotlin學習（二）基本類型
• JDK13 GA發佈：5大特性解讀

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。