關於html和css一些問題的實現方法

2021-10-09 16:19:33 字數 1441 閱讀 7191

// 強制元素顯示尺寸,超出部分用…代替?

overflow: hidden;

white-space: nowrap;

text-overflow: ellipsis;

display: inline-block;

// 元素如何設定水平垂直居中?

不知道寬高:

1.元素display:flex,水平垂直居中;

2.元素絕對定位,絕對定位時left和top都是50%;transform:translate(-50%,-50%);

知道寬高:

3.元素高固定,margin: 高度/2 auto;

4.知道某元素的寬高,絕對定位時left和top都是50%;

margin-top:-height/2,marign-left:-width/2;

// 如何限制父元素每行顯示n個子元素,超出的自動換行?

父元素如果沒有特別宣告一般都是會換行的。區別是每行顯示多少子元素。

根據每行顯示數給子元素設定寬度就可以了。例如每行顯示4個子元素,可以給子元素設定寬度為25%;那麼效果就是每行4個。

// 父元素下有多個子元素,如何設定讓子元素高度等於父元素?

1、給父級元素設定:display: flex; align-items: stretch;

2、子元素:height: inherit;

元素滾動條的樣式自定義?

::-webkit-scrollbar-track-piece

::-webkit-scrollbar 

::-webkit-scrollbar-thumb

// css給元素設定背景色同時設定背景圖,同時背景圖的底色也是背景色?

元素background:可以設定背景圖和背景色,但是要求背景圖必須是透明的才能用;

// 父元素使用了flex布局,子元素寬度或高度使用固定值值時無效?

子元素設定寬高時加上屬性 flex: none;

// 樣式如何使用**查詢(即根據螢幕尺寸配置不同樣式)?

在style標籤裡配置完整的樣式表:

@media only screen and (max-width: 799px) {}

@media only screen and (max-width: 799px) and (min-wdith: 979px) {}

@media only screen and (min-width: 980px) {}

// 如何覆蓋ui庫元件的預設樣式?

1 自定義樣式檔案,然後在main.js檔案匯入。

2 在要改變的樣式上加 ! important ;就可以了(!importtant是權重最高的樣式,除了行內樣式

使用el-table時表頭和內容錯位如何解決?

body .el-table th.gutter

.el-table

}

html和css學習中遇到的一些問題

表現與結構分離 頁面載入更快,結構更加清晰,頁面顯示簡潔 修改維護更加方便 易於優化seo搜尋引擎 href hypertext reference 在當前檔案和引用資源檔案之間建立聯絡,載入的時候不會影響其他資源的載入。important 行內樣式 id選擇器 類選擇器 萬用字元 繼承樣式 在設定...

關於面試的一些問題

面試過程中,面試官會向應聘者發問,而應聘者的回答將成為面試官考慮是否接受他的重要依據。對應聘者而言,了解這些問題背後的 貓膩 至關重要。本文對面試中經常出現的一些典型問題進行了整理,並給出相應的回答思路和參 讀者無需過分關注分析的細節,關鍵是要從這些分析中 悟 出面試的規律及回答問題的思維方式,達到...

關於Labview的一些問題

第一章 虛擬儀器及 labview入門 1 虛擬儀器概述 虛擬儀器 virtual instrumention 是基於計算機的儀器。計算機和儀器的密切結合是目前儀器發展的乙個重要方向。粗略地說這種結合有兩種方式,一種是將計算機裝入儀器,其典型的例子就是所謂智慧型化的儀器。隨著計算機功能的日益強大以及...