2. 程式人生 > 其它 >CSS 內容總結(三)浮動

CSS 內容總結(三)浮動

阿新 • • 發佈：2021-02-09

CSS 內容總結

1.浮動
2.常見網頁佈局
3.清除浮動
4.PS切圖
5.學成線上案例

1.浮動

  • 1.1傳統網頁佈局的三種方式

    網頁佈局的本質——用CSS來擺放盒子到相應位置

    • 普通流（標準流）

      • 標籤按照規定好的預設方式排列

        1. 塊級元素會獨佔一行，從上向下順序排列

          常見元素:div hr p h1-h6 ul ol dl form table

        2. 行內元素會按照順序，從左到右順序排列，碰到父元素邊緣則自動換行

          常見元素：span a i em 等

    • 浮動

      浮動可以改變元素標籤預設的排列方式

      最典型應用：可以讓多個塊級元素一行內排列顯示

      網頁佈局第一準則：多個塊級元素縱向排列找標準流，多個塊級元素橫向排列找浮動

    • 定位

  • 什麼是浮動？（用於建立浮動框，將其移動到一邊，直到左邊緣或右邊緣觸及包含塊或另一個浮動框的邊緣）

    • 語法：選擇器：{ float : 屬性值 }

      屬性值描述
      none元素不浮動（預設值）
      left元素向左浮動
      right元素向右浮動
  • 浮動特性（重點）
    1. 脫離標準流的控制移動到指定位置，（俗稱脫標），浮動的盒子不在保留原先的位置
    2. 如果多個盒子都設定了浮動，則它們會按照屬性值一行內顯示並且頂端對齊排列
    3. 任何元素新增浮動之後,都具有行內塊元素的特性

  • 浮動元素經常和標準流父級搭配使用

    • 先用標準流的父盒子排列上下位置，之後內部子元素採取浮動排列左右位置，符合網頁佈局第一準則

2.常見的網頁佈局 

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      padding: 0;
      margin:
 
 0;
    }

    .title {
      height: 30px;
      width: auto;
      background-color: skyblue;
    }

    .center {
      height: 500px;
      width: 1000px;
      margin: auto;
      margin-top: 2px;
    }

    .top {
      width: 1000px;
      height: 50px;
      background-color: skyblue;
    }

    .under {
      width: 1000px;
      height: 150px;
    }

    .under_t {
      width: 1000px;
      height: 300px;
    }

    .under>div {
      float: left;
      width: 244px;
      height: 148px;
      margin-right: 8px;
      margin-top: 2px;
      background-color: skyblue
    }

    .under .teone {
      margin-right: 0px;
    }

    .under_t>div {
      float: left;
      width: 244px;
      height: 298px;
      margin-right: 8px;
      margin-top: 2px;
      background-color: skyblue
    }

    .under_t .tetwo {
      margin-right: 0px;
    }

    .bottom {
      width: auto;
      height: 91px;
      background-color: skyblue;
      margin-top: 2px;
    }
  </style>
</head>

<body>
  <div class="title"></div>
  <div class="center">
    <div class="top"></div>
    <div class="under">
      <div>18</div>
      <div>28</div>
      <div>38</div>
      <div class="teone">48</div>
    </div>
    <div class="under_t">
      <div>58</div>
      <div>68</div>
      <div>78</div>
      <div class="tetwo">88</div>
    </div>
  </div>
  <div class="bottom"></div>
</body>

</html>

在這裡插入圖片描述

​ 浮動的盒子只會影響它後面的標準流 不會影響前邊的

3.清除浮動

  • 為什麼要清除浮動

    由於父級盒子很多情況下，不方便給高度，但是子盒子浮動又不佔位置，最後父級盒子高度為0時，就會影響下面的標準盒子

  • 解決辦法

    • 策略：閉合浮動

    語法：clear：屬性值

    屬性值描述
    left清除左側浮動
    right清除右側浮動
    both清除左右兩側浮動
    1. 額外標籤法
    2. 父級新增overflow屬性
    3. 父級新增after屬性
    4. 父級新增雙偽元素

4.PS切圖

  • 常見的圖片格式

    • jpg: 產品類
    • gif：動畫類
    • png: 背景透明
    • PSD：前端PS常用

  • 圖層切圖

    選中-》圖層右鍵-》快速匯出png

    合併匯出：

    1. 選中需要的圖層：圖層選單-》合併圖層（ctrl+e）
    2. 圖層右鍵-》快速匯出png

  • 切片切圖

    1. 利用切片工具手動劃出
    2. 檔案選單-》匯出web-》選擇圖片格式（背景透明選png 不透明jpg）-》儲存

  • PS外掛切圖

    安裝Cutterman外掛

    1. 登入
    2. 選中-》匯出

5.學成線上

  • CSS屬性書寫順序

在這裡插入圖片描述

相關推薦

CSS 內容總結(三)浮動

CSS 內容總結 1.浮動 2.常見網頁佈局 3.清除浮動 4.PS切圖 5.學成線上案例 1.浮動 1.1傳統網頁佈局的三種方式 網頁佈局的本質——用CSS來擺放盒子到相應位置

CSS 內容總結(五)高階技巧

技術標籤：css CSS 內容總結 1.精靈圖 2.字型圖示 3.CSS三角 4.使用者介面樣式 5.vertical-align 屬性應用

CSS知識點總結

給自己時間，不要焦急，一步一步來，一日一日過， 請相信生命的韌性是驚人的，跟自己向上的心去合作，不要放棄對自己的愛護。

CSS 知識總結

註釋：/* */ CSS reset （去除預設樣式） *{ margin: 0; padding: 0; box-sizing: border-box; } ul,ol {

css的clear清除浮動

清除前 清除後 程式碼 <!DOCTYPE html> <html> <head> <meta charset=\"utf-8\">

tomcat內容總結

tomcat的安裝以及配置環境變數 1.tomcat的官網下載地址：http://tomcat.apache.org/ tomcat有很多版本，有解壓版 和 安裝版，還分windows （還分為32位和64位版）和

Django---子框架drf內容總結

目錄1 restful規範--10條2 django上寫符合restful規範的介面3 drf寫介面4 APIView--》繼承了原生View---》get，post方法5 Request物件：request.request,request.data，重寫了__getattr_，request.method-->去原生re

CSS 定位總結

目錄元素顯示模式元素模式元素顯示模式轉換CSS定位機制靜態定位static相對定位relative絕對定位absolute固定定位fixed粘性定位sticky定位小結一圖流

3.前端CSS—盒子模型和浮動

目錄一、CSS盒子模型1.1 content(內容區域)1.2 padding(內填充)1.3 border(邊框)1.4 margin(外邊距)二、塊級元素、行內元素和行內塊級元素的轉換關係2.1 display:inline 轉化為行內元素2.2 display:block 轉化為塊級

CSS知識點（三）

知識點一：外邊距 1、回顧盒子模型包含：內容、內邊距、邊框、外邊距 2、定義：盒子的邊框與其他元素或者瀏覽器邊緣之間的距離

CSS BFC 總結

CSS BFC 總結 01BFC 簡介 BFC(Block Formatting Context)塊格式化上下文 BFC 是一個獨立的區域，是塊盒子的佈局發生的的區域，也是浮動元素和其他元素互動的區域。

LINUX核心命令實戰總結三——檔案和目錄操作命令二

1.1 ln：硬連結與軟連結 【功能說明】 ln 命令可以理解為英文單詞link的縮寫，其功能是建立檔案間的連結，連結包括硬連結和軟連結。

CTF知識點總結(三）

命令執行 https://www.cnblogs.com/wangtanzhi/p/12246386.html 空格繞過方式： $IFS ${IFS} $IFS$數字

CSS元素水平方向浮動

CSSFloat(浮動) 什麼是 CSS Float（浮動）？ CSS 的 Float（浮動），會使元素向左或向右移動，其周圍的元素也會重新排列。

java設計模式總結(三) ---- 十一種行為型模式

1 模板方法模式 理解：把執行過程的方法按照一定的順序進行放在同一個方法中，對這些過程進行統一管理

css動畫總結

一、瀏覽器渲染過程 1.解析html構建dom樹 2.解析css構建cssom 3.將dom樹和cssom結合成渲染樹

css專案總結

技術標籤：csscss3 少用的css程式碼 盒子陰影 語法 box-shadow: h-shadow v-shadow blur spread color inset;

面試總結之-美團面試總結(三)

技術標籤：面試面試總結設計模式面試 三面 1、照例自我介紹和專案介紹； 2、上來就讓我手撕一個單例模式。。。答：

CSS盒子模型與浮動

技術標籤：筆記css CSS盒子模型與浮動 CSS盒子模型說明內邊距（padding）外邊距（margin）邊框（border）練習小三角製作聖誕樹製作

CSS頁面效果_浮動幽靈

技術標籤：頁面設計csscss3html <!DOCTYPE html> <html lang="en"> <head>