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
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類