WEB前端第十三課——瀏覽器內核、位置

来源:https://www.cnblogs.com/husa/archive/2020/07/26/13378944.html
-Advertisement-
Play Games

1.瀏覽器內核及首碼 在CSS中新的屬性標準尚未明確的情況下，各瀏覽器廠商對新屬性的支持情況也不相同，這個階段會對屬性加廠商首碼進行區分。 根據不同的瀏覽器內核，CSS首碼有所不同，最基本的瀏覽器內核有四種，其他內核都是基於此四種進行再研發的。 ① Gecko內核，首碼為“-moz-”，火狐瀏覽器 ...


1.瀏覽器內核及首碼

　　在CSS中新的屬性標準尚未明確的情況下，各瀏覽器廠商對新屬性的支持情況也不相同，這個階段會對屬性加廠商首碼進行區分。

　　根據不同的瀏覽器內核，CSS首碼有所不同，最基本的瀏覽器內核有四種，其他內核都是基於此四種進行再研發的。

　　① Gecko內核，首碼為“-moz-”，火狐瀏覽器

　　② Webkit內核，首碼是“-webkit-”，也叫谷歌內核，Chrome瀏覽器最先開發使用，Safari瀏覽器也使用該內核

　　　　　　　　　 目前，國內很多瀏覽器也使用了webkit內核，如360極速、世界之窗、獵豹等

　　③ Trident內核，首碼為“-ms-”，也稱 IE內核

　　④ Presto內核，首碼是“-o-”，目前只有Opera使用

　　代碼實例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS瀏覽器內核</title>
    <style>
        div {
            width: 500px;
            height: 500px;
            background-color:orange;
            border: 36px solid rgba(255,255,255,0.5);
            margin: 60px auto;
            padding: 50px;
            font-size: 200px;
            font-weight: bolder;
            color: rgba(255,255,255,0.5);
            text-align: center;
            -webkit-background-clip: content-box;
            /*屬性值：
            border-box，從邊框開始實現背景
            padding-box，從padding開始實現背景
            content-box，從內容開始實現背景
            text，從文本開始實現背景
　　　　　　　為適應不同瀏覽器，需要同時設置帶有不同瀏覽器內核首碼的屬性
            */
        }

    </style>
</head>
<body>
    <div>馬可波羅</div>
</body>
</html>

2.定位，定義元素相對於正常位置應該出現的位置

　　分類：

　　　　⑴ 普通流定位，Normal

　　　　⑵ 浮動定位

　　　　　　將元素排除在普通流之外，浮動元素不在頁面中占據空間，可以放置在包含框的左邊或者右邊，浮動元素依舊位於包含框內

　　　　　　浮動元素框可以向左或向右移動，直到外邊緣碰到包含框或另一個浮動框的邊框

　　　　　　浮動元素外邊緣不會超過其父元素的內邊緣

　　　　　　浮動元素不會互相重疊、不會上下浮動

　　　　　　行內元素浮動後會變為塊級元素

　　　　　　語法：float: none / left / right;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS浮動定位</title>
    <style>
        div {
            width: 200px;
            height: 200px;
        }
        div.one{ background-color: pink; float: right;}
        div.two{ background-color: hotpink;}
        div.three{ background-color: deeppink;}
    </style>
</head>
<body>
    <div class="one" align="center">1</div>
    <div class="two" align="center">2</div>
    <div class="three" align="center">3</div>
</body>
</html>

　　　　　　清除浮動，是在使用了浮動之後必不可少的，為了網站佈局的效果清除浮動也變的非常麻煩

　　　　　　　　屬性 clear，屬性值：left（清除左浮動）、right（清除右浮動）、both（全部清除）

　　　　　　　　常用清除方式：① 結尾處加空div標簽 clear: both，或在下一個元素前加 clear:both ② 浮動元素的父元素定義偽元素“ ::after” ③ 浮動元素的父元素定義“overflow: hidden” ④ 浮動元素的父元素定高

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS浮動定位</title>
    <style>
        div.parent{ border:2px solid red; overflow: hidden}  /*第三種方式：overflow:hidden 或 display:inline-block 或 display:table-cell */
        div.one{ width: 150px; height: 150px; background-color: pink; float: left;}
        div.two{ width: 150px; height: 150px; background-color: hotpink; float: left;}
        div.three{ width: 150px; height: 150px; background-color: deeppink; float: left;}
        /*div.clear{ clear: both;}  第一種方式*/
        /*div.parent::after{
            content: "";
            display: block;
            clear: both;
        }                           第二種方式*/
    </style>
</head>
<body>
    <div class="parent">
        <div class="one" align="center">1</div>
        <div class="two" align="center">2</div>
<!--    <div class="clear"></div>   第一種方式-->
    </div>
    <div class="three" align="center">3</div>
</body>
</html>

　　　　⑶ 相對定位

　　　　⑷ 絕對定位

　　　　⑸ 固定定位

3.display屬性

　　根據CSS規範，每一個網頁元素都有一個display屬性，用於確定該元素的類型

　　每一個元素都有預設的display屬性值，比如 div的預設display屬性值為“ block”（塊級元素），而 span的預設display屬性值為“ inline”（行內元素）

　　塊級元素與行內元素是可以轉換的，即 display屬性值可以設置修改

　　display常用屬性值：

　　　　none，隱藏對象，且不占據空間

　　　　inline，指定對象為內聯元素（行內元素）

　　　　block，指定對象為塊級元素

　　　　inline-block，指定對象為內聯塊級元素，可以設置寬高、margin、padding，但會識別代碼之間的空白！

　　　　table-cell，指定對象作為表格的單元格

　　　　flex，指定對象為彈性盒子

　　另外，visibility:hidden和 opacity:0 也會隱藏對象，但仍然占據物理空間

4.position定位，指定一個元素定位方法的類型

　　屬性值：① static，預設值，元素顯示在正常的內容流中，忽略top、bottom、left、right偏移量及z-index聲明，一般用於去除定位

　　　　　　② relative，生成相對定位的元素，相對於其正常位置進行定位，因此，left:20px會向元素的left位置添加20像素，但其正常位置依然占據

　　　　　　③ fixed，生成固定定位的元素，一旦生成其原始位置不再占據，且不隨瀏覽器界面滾動而改變，元素的位置通過 top、right、bottom、left屬性值進行規定

　　　　　　④ absolute，生成絕對定位的元素，相對於瀏覽器視窗進行偏移，一旦發生偏移，原正常位置不再占有，元素的位置通過 top、right、bottom、left屬性值進行規定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS定位</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: blue;
            left: 50px;
            top: 30px;
            /*position: absolute;*/
            /*position: relative;*/
            position: fixed;
        }
        pre{font-size: 130px;}
    </style>
</head>
<body>
    <div></div>
    <pre>文本內容</pre>
    <pre>文本內容</pre>
    <pre>文本內容</pre>
    <pre>文本內容</pre>
    <pre>文本內容</pre>
</body>
</html>

5.常用居中方式小結

　　文本內容水平居中，text-align:center

　　行內文字垂直居中，line-height=height

　　盒子水平居中，margin:0px  center

　　子元素在父元素內居中，① 父元素定義為彈性盒子，display:flex;   align-items:center;   justify-content:center;     

　　　　　　　　　　　　　② 定義父元素為單元格，display:table-cell;   vertical-align:middle;  子元素中定義水平居中，margin: 0  auto;

　　　　　　　　　　　　　③ 定義父元素為相對位置，position:relative;  定義子元素為絕對位置，position:absolute; left:25%; top:25%;

6.z-index堆疊順序

　　一旦修改了元素的定位方式，在元素可能發生堆疊，使用 z-index屬性可以控制元素重疊的順序

　　z-index屬性：

　　　　① z-index僅能在定位的元素上生效

　　　　② z-index屬性值為數值，數值越大表示堆疊越高，即離用戶越近

　　　　③ 可以設置為負值，表示離用戶更遠，一般不建議設置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS定位</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: blue;
            left: 100px;
            top: 100px;
            /*position: absolute;*/
            position: relative;
            /*position: fixed;*/
        }
        div:first-child{
            background-color: deeppink;
            left: 0px;
            top: 0px;
            z-index: 2;
        }
        div:last-child{
            background-color: darkorange;
            left: 200px;
            top: 200px;
            z-index: 3;
        }
        div:nth-child(2){
            z-index: 1;
        }
    </style>
</head>
<body>
    <div></div>
    <div></div>
    <div></div>
</body>
</html>

　　


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • Redis服務之簡介與部署
    Redis是什麼？redis是一款基於BSD協議，開源的非關係型資料庫（nosql資料庫），作者是義大利開發者Salvatore Sanfilippo在2009年發佈，使用C語言編寫；redis是基於記憶體存儲，而且是目前比較流行的鍵值資料庫（key-value database），它提供將記憶體通過... ...
  • CentOS 8 安裝 MariaDB
    MariaDB 資料庫管理系統是 MySQL 的一個分支，主要由開源社區在維護，採用 GPL 授權許可。開發這個分支的原因之一是：甲骨文公司收購了 MySQL 後，有將 MySQL 閉源的潛在風險，因此社區採用分支的方式來避開這個風險。MariaDB完全相容mysql，使用方法也是一樣的。 系統環境 ...
  • iOS----------數據安全與加密
    參考：https://juejin.im/entry/58b93af3ac502e006c0820c9 1.常見的加密方式：Base64、MD5、AES、EDS、RSA HTTPS 以及SSL/TSL 什麼是SSL？SSL(Secure Sockets Layer, 安全套接字層)，因為原先互聯網上 ...
  • 前端程式員學好演算法系列（五）棧和隊列
    1.棧的基礎使用，js中數組直接可以作為棧使用，棧遵循先進後出的原則，即js可以使用push()和pop() 比較容易的實現一個棧 20. 有效的括弧給定一個只包括 '('，')'，'{'，'}'，'['，']' 的字元串，判斷字元串是否有效。 有效字元串需滿足： 左括弧必須用相同類型的右括弧閉合。 ...
  • CSS選擇器區別
    （一）單一 |【1】屬性選擇器 | | | | | | | |p[alt]|選擇具有att屬性的 |p元素 | |p[alt="val"] |選擇att屬性值 |等於val的p | |p[alt^="val"] |匹配att屬性值 |以val開頭的p | |p[alt$="val"] |匹配att屬 ...
  • 美拍視頻去水印下載，分享一個美拍短視頻批量去水印解析網站
    美拍短視頻按作者批量下載，去水印的方法教程，很多做自媒體搬運或者要下載美拍短視頻上面的素材，都需要批量下載美拍無水印短視頻。這裡教大家如何按作者批量下載美拍無水印短視頻，並自動修改MD5消重。此文分享的是一個線上的網站工具，不需要下載任何軟體，直接在瀏覽器里打開工具網址就可以使用的。 其實不僅僅是支 ...
  • 前端程式員學好演算法系列（四）鏈表
    24. 兩兩交換鏈表中的節點給定一個鏈表，兩兩交換其中相鄰的節點，並返回交換後的鏈表。 你不能只是單純的改變節點內部的值，而是需要實際的進行節點交換。 示例: 給定 1->2->3->4, 你應該返回 2->1->4->3. 解題：我們定義4個指針如上進行節點交換，1.給head添加一個虛擬頭節點t ...
  • JS函數高級
    原型與原型鏈 所有函數都有一個特別的屬性: prototype : 顯式原型屬性 所有實例對象都有一個特別的屬性: __proto__ : 隱式原型屬性 顯式原型與隱式原型的關係 函數的prototype: 定義函數時被自動賦值, 值預設為, 即用為原型對象 實例對象的__proto__: 在創建實 ...
一周排行
    -Advertisement-
    Play Games
  • Dapr Outbox 執行流程
    Dapr Outbox 是1.12中的功能。 本文只介紹Dapr Outbox 執行流程，Dapr Outbox基本用法請閱讀官方文檔 。本文中appID=order-processor，topic=orders 本文前提知識：熟悉Dapr狀態管理、Dapr發佈訂閱和Outbox 模式。 Outbo ...
  • Advanced .Net Debugging 7：托管堆與垃圾收集
    引言 在前幾章我們深度講解了單元測試和集成測試的基礎知識，這一章我們來講解一下代碼覆蓋率,代碼覆蓋率是單元測試運行的度量值,覆蓋率通常以百分比表示，用於衡量代碼被測試覆蓋的程度，幫助開發人員評估測試用例的質量和代碼的健壯性。常見的覆蓋率包括語句覆蓋率（Line Coverage）、分支覆蓋率（Bra ...
  • C#S7.NET實現西門子PLCDB塊數據採集的完整步驟
    前言 本文介紹瞭如何使用S7.NET庫實現對西門子PLC DB塊數據的讀寫，記錄了使用電腦模擬，模擬PLC，自至完成測試的詳細流程，並重點介紹了在這個過程中的易錯點，供參考。 用到的軟體： 1.Windows環境下鏈路層網路訪問的行業標準工具（WinPcap_4_1_3.exe）下載鏈接：http ...
  • WPF控制項：密碼框綁定MVVM
    從依賴倒置原則（Dependency Inversion Principle, DIP）到控制反轉（Inversion of Control, IoC）再到依賴註入（Dependency Injection, DI）的演進過程，我們可以理解為一種逐步抽象和解耦的設計思想。這種思想在C#等面向對象的編 ...
  • Python中的私有屬性與私有方法
    關於Python中的私有屬性和私有方法 Python對於類的成員沒有嚴格的訪問控制限制，這與其他面相對對象語言有區別。關於私有屬性和私有方法，有如下要點： 1、通常我們約定，兩個下劃線開頭的屬性是私有的（private）。其他為公共的（public）； 2、類內部可以訪問私有屬性（方法）； 3、類外 ...
  • C++ 訪問說明符詳解：封裝數據，控制訪問，提升安全性
    C++ 訪問說明符 訪問說明符是 C++ 中控制類成員（屬性和方法）可訪問性的關鍵字。它們用於封裝類數據並保護其免受意外修改或濫用。 三種訪問說明符： public：允許從類外部的任何地方訪問成員。 private：僅允許在類內部訪問成員。 protected：允許在類內部及其派生類中訪問成員。 示 ...
  • static_cast與dynamic_cast到底是什麼？
    寫這個隨筆說一下C++的static_cast和dynamic_cast用在子類與父類的指針轉換時的一些事宜。首先，【static_cast，dynamic_cast】【父類指針，子類指針】，兩兩一組，共有4種組合：用 static_cast 父類轉子類、用 static_cast 子類轉父類、使用 ...
  • C語言數據結構：雙向鏈表的增刪操作
    /******************************************************************************************************** * * * 設計雙向鏈表的介面 * * * * Copyright (c) 2023-2 ...
  • @ComponentScan註解的實現，Spring掃描包的過程
    相信接觸過spring做開發的小伙伴們一定使用過@ComponentScan註解 @ComponentScan("com.wangm.lifecycle") public class AppConfig { } @ComponentScan指定basePackage，將包下的類按照一定規則註冊成Be ...
  • opensips開啟python支持
    操作系統 ：CentOS 7.6_x64 opensips版本： 2.4.9 python版本：2.7.5 python作為腳本語言，使用起來很方便，查了下opensips的文檔，支持使用python腳本寫邏輯代碼。今天整理下CentOS7環境下opensips2.4.9的python模塊筆記及使用 ...
所有分類