css重點知識和bug解決方法

来源:https://www.cnblogs.com/xbwk/archive/2019/12/21/12075886.html
-Advertisement-
Play Games

1.圖片向下撐大3像素問題 在一個盒子裡面放一張圖片,預設情況下,圖片會向下撐大3像素,有以下幾種解決方法: 1.1 給圖片添加display:block; 1.2 給圖片添加 float:left; 1.3 給圖片添加 vertical-align:middle; 1.4 給他的父元素加font- ...


1.圖片向下撐大3像素問題

在一個盒子裡面放一張圖片,預設情況下,圖片會向下撐大3像素,有以下幾種解決方法:

1.1 給圖片添加display:block;

1.2 給圖片添加 float:left;

1.3 給圖片添加 vertical-align:middle;

1.4 給他的父元素加font-size:0;

2.如何實現一張未知寬高的圖片在一個盒子裡面做水平垂直居中?

給父元素添加寬高,添加行高 添加 text-align:center
                    給圖片添加 :vertical-align:center

3.元素的類型分類哪幾種?各自都有什麼特點?

 塊元素            獨占一行,豎著排,能設置寬高
 行內元素            預設情況下文本一行顯示,不能設置寬高
 行內塊狀元素        inline-block,既有行內元素的特點又有塊狀元素的特點
 可變元素            添加float:left 相當於display:block

4.如何實現一個元素消失和出現?

display:none  display:block
                    opcity:0; opcity:1; 

 5.單行文本溢出顯示省略號怎麼實現?
                        添加width;
                        white-space:nowrap;
                        overflow:hidden;
                        text-overflow:ellipsis;

6.定位的屬性值有哪幾個?分別有什麼特點?
                position:absolute          絕對定位,  脫離文檔流    
                在有父元素或者父元素沒有設置定位的情況下,它的參照物是整個瀏覽器
                如果父元素設置了相對定位,那麼它的參照物就是它的父元素        
                position:relative         相對定位,  不脫離文檔流
                它的參照物是它原來的位置
                position:fixed          固定定位,   脫離文檔流
                position:sticky          粘性定位        脫離文檔流
                它的參照物是整個瀏覽器

 7.樣式引入的方式有哪幾種
                    外部引入            <link rel="stylesheet" type="text/css" href=""/>        
                    <style>
                         @import url("global.css")
                        </style>
                    內部引入            <style></style>
                    行內樣式引入        <div style="">

8.transition過渡動畫使用的過程中要註意一些什麼?
                1.必須跟hover一起使用
                2.在hover的時候添加過渡,滑鼠滑上去有過渡效果,移開就沒有
                    給他本身加的時候,滑鼠滑上去有過渡效果,移開也有

9.用邊框寫出一個箭頭超右的三角形
            div{
                border-top:10px solid transparent
                border-right:10px solid transparent
                border-bottom:10px solid transparent
                border-left:10px solid red
                width:0;
                height:0;
            }

 10.可以取負值的css屬性有哪些?
            text-indent
            z-index
            margin-top
            margin-left
            background-position
            left right bottom top
            text-shadow
            box-shadow等等

11.一個未知寬高的盒子在另一個盒子裡面 水平垂直居中 的3種方法:(不用做計算)

(1).box{
                width:500px;
                height:500px;
                position:relative;
            }
            .box1{
                width:200px;
                height:200px;
                position:absolute;
                left:0;
                right:0;
                bottom:0;
                left:0;
                margin:auto;
            }

(2).box{
                width:500px;
                height:500px;
                display:flex;                 //彈性盒
                justify-content:center;  //水平居中
                align-items:center;       //垂直居中
            }
            .box1{
                width:200px;
                height:200px;
            }

(3)box{
                width: 500px;
                height: 500px;
                background: red;
                position: relative;
            }
            .box1{
                width: 200px;
                height: 200px;
                background: green;
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translate(-50%,-50%);
            }

12.當子元素使用margin-top,導致父元素整個下移的解決方案:
                    overflow:hidden
                    把margin改成padding
                    border-top:1px solid rgba(0,0,0,0)
                    給父元素或者子元素浮動

13.子元素都設置float,父元素沒有設置高度,出現高度塌陷的問題,解決方案:
                    1.給父元素設置height 遇到自適應用不了,
                    2.添加overflow:hidden/auto
                    3.給浮動的元素下麵添加一個空盒子,給空盒子添加 clear:both;
                    4.萬能清除法
                        .clear:after{
                            content:"";
                            clear:both;
                            display:block;
                            height:0;
                            overflow:hidden;
                            visibility:hidden;
                        }
                        .clear{
                            zoom:1;
                        }
                    5. 給父元素也添加float
                    6.  給父元素添加display:table

 14.透明度的屬性是什麼?請也寫上它的相容寫法?
                    opcity:0.3;
                    filter:alpha(opcity=30)

15.什麼是BFC?BFC的觸發條件有哪些?
                bfc直譯為塊級格式化上下文,是一個獨立的渲染區域。具有BFC特性的元素可以看作是一個隔離了的獨立容器,容器裡面的內容不會影響到外面的元素
                使用了float:left/right position為absolute/fixed  display為inline-block,table-cell,table-caption,flex,inline-flex,overflow為hidden,auto等等 都是BFC

16.如何解決margin上下值發生重疊的問題?
                給任何一個子元素添加一個父元素,並讓這個父元素成為bfc區域裡面的元素,所以就需要給父元素添加overflow:hidden/auto/scroll;display:inline-block/flex;等。

17.怪異盒是怎麼產生的?它有什麼特點?如何由W3C標準盒模型變成怪異盒模型?
                產生原因:DOCTYPE的缺失在IE8以下會觸發怪異盒模式
                特點:padding值不會計算在元素原有的寬高之上
                border值不會計算在元素原有寬高之上
                
                變成怪異盒模型:添加屬性box-sizing:border-box;
                box-sizing:content-box;預設值

18.哪些屬性可以被繼承?
                1、字體系列屬性

                    font-family:字體樣式
                    
                    font-weight:字體的粗細
                    
                    font-size:字體的大小
                    
                    font-style:字體的類型
                    
                    2、文本系列屬性
                    
                    text-indent:文本縮進
                    
                    text-align:文本水平對齊
                    
                    line-height:行高
                    
                    letter-spacing:單詞之間的間距
                
                    text-transform:控制文本小:uppercase、lowercase、capitalize
                    
                    color:文本顏色
                    
                列表
                    list-style

 19.圖片整合是用什麼技術實現的?圖片整合技術有哪些優勢?
                css Sprites
                用background-position 來進行背景圖片定位技術

 20.移動端佈局的方式有哪些?
                流式佈局 等比縮放佈局或混合佈局    等比縮放佈局可以用rem vw來實現

 21.transition和animation之間有什麼共同點和不同點?
                    相同點:都是隨著時間改變元素的屬性值
                    不同點:1.transition需要跟hover一起使用
                        2.animation不需要觸發任何事件

22.em和rem是什麼?移動端為什麼要用rem這個單位?
                    em是相對於最近的父元素的字型大小大小,1em=16px
                    rem 是 root em是相對於根元素字型大小的大小, 1rem=16px

23.響應式網頁設計有哪些特點? 
                1、網站必須建立靈活的網格基礎;  
                2、引用到網站的圖片必須是可伸縮的
                3、不同的顯示風格,需要在Media Query上設置不同的樣式 
                4、meta標簽 


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

-Advertisement-
Play Games
更多相關文章
  • 流處理中時間本質上就是一個普通的遞增欄位(long型,自1970年算起的微秒數),不一定真的表示時間。 watermark只是應對亂序的辦法之一,大多是啟髮式的,在延遲和完整性之間抉擇。(如果沒有延遲,就不夠完整;如果有延遲,極端情況就是批處理,當然完整性足夠高) org.apache.flink. ...
  • percona-toolkit中pt-online-schema-change工具安裝和使用 pt-online-schema-change介紹 使用場景:線上修改大表結構 在資料庫的維護中,總會涉及到生產環境上修改表結構的情況,修改一些小表影響很小,而修改大表時,往往影響業務的正常運轉,如表數據量 ...
  • 1、數據準備 SET FOREIGN_KEY_CHECKS=0; -- -- Table structure for `admin` -- DROP TABLE IF EXISTS `admin`; CREATE TABLE `admin` ( `a_id` int(11) NOT NULL AUT ...
  • 資料庫2.0 \ \ \ "MySQL存儲引擎介紹" "MySQL基礎數據類型" "MySQL表的完整性約束" "MySQL資料庫初識" "MySQL的庫表詳細操作" "MySQL的邏輯查詢語句的執行順序" "MySQL單標查詢" "MySQL多表查詢" "MySQL練習題及答案" ...
  • 1. 索引 索引支持查詢的有效地提高效率。沒有索引,MongoDB必須掃描集合的每個文檔,以選擇與查詢語句匹配的文檔。這種掃描效率很低,需要MongoDB處理大量的數據。 索引是特殊的數據結構,以易於遍歷的形式存儲數據集的一小部分。 索引存儲特定欄位或一組欄位的值,按照索引中指定的欄位值排序。 1. ...
  • 同事邀我寫一篇前端技術發展史,用於新員工培訓。在查資料寫正式文檔之前,我要先寫下自己的所知所感,以免到時分不清 什麼東西是自己的、什麼東西是別人的。 ...
  • 前段 \ \ \ "HTML" "CSS" "JavaScript" "BOM和DOM" "jQuery" "BootStrap" ...
  • 通過 HTML DOM,JavaScript 能夠訪問和改變 HTML 文檔的所有元素。 HTML DOM(文檔對象模型) 當網頁被載入時,瀏覽器會創建頁面的文檔對象模型(Document Object Model)。 HTML DOM 模型被結構化為對象樹: 對象的 HTML DOM 樹 通過這個 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 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 ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...