css樣式重置

2022-09-18 10:21:29 字數 1181 閱讀 7195

1.*

缺點:稍微影響效能

優點:不用考慮哪些標籤有預設樣式ula

取消連線下劃線

img問題現象:內容跟容器底部出現縫隙

內聯元素的對齊方式是按照文字基線對齊的,而不是文字底線對齊的

2.寫具體頁面的時候或乙個布局效果的時候

1.寫結構

2.css重置樣式

3.寫具體樣式

3.浮動

概念:脫離文件流,沿著父容器靠左或靠右進行排列

float:felt:左浮動

float:right:右浮動

float注意點

1.只會影響後面元素

2.內容預設提公升半層

3.預設寬度根據內容決定

4.預設排列。主要給塊元素新增,但是也可以給內元素新增

如何清清除浮動:

1.上下排列:clear 表示清除浮動的,left,right,both

2.巢狀排列:

父元素浮動:不推薦,父元素浮動會影響到後面的元素

overflow:hidden(bfc規範),如果子元素想溢位,那麼會受到影響

display:line-block(bfc規範),不推薦,父容器會影響到後面的元素。

設定空標籤:不推薦,會多新增乙個標籤。

after偽類:推薦,是空標籤的加強版

4.css定位

position

static

relative

absolute

fixed

sticky

relative相對定位:

如果沒有定位偏移量,對元素沒有任何影響

不使用元素脫離文件

不影響其他元素

left,top,right,bottom是相對自身當前元素進行偏移的

absolute絕對定位:

使文件脫離文件流

可以使內聯元素具備寬高,寬高由內容決定

如果有定位祖先元素相對定位發生偏移,沒有定位元素相對於整個文件發生便宜

fixed固定定位:

是元素脫離文件流

內聯元素支援寬高,使元素寬高根據內容進行決定

相對於整個瀏覽器視窗進行偏移,不授瀏覽器滾動條影響

sticky粘性定位

在指定位置,進行粘性操作

z-index定位層級

預設層級為零級

巢狀時候的層級問題

css樣式重置

作為一名切圖仔,經常會遇到頭疼的各大瀏覽器相容性問題,確切的說是相容它們 預設 的css樣式表。重置樣式成為我們為我們的網頁梳妝打扮的第一步,也是關鍵性的一步。以前我這樣重置樣式 body,html,div,blockquote,img,label,p,h1,h2,h3,h4,h5,h6,pre,u...

CSS 樣式重置 公共樣式

我的部落格地圖 作為前端工程師,需要不斷的去總結和積累有共性的 這對於開發來說事半功倍。在書寫樣式檔案時,公共樣式和樣式重置 樣式初始化 每次都會用到。1 公共樣式 按鈕公共樣式 btn btn primary btn primaryact btn danger btn warning btn s ...

css的重置樣式

當我們在為多個瀏覽器寫css樣式的時候,因為不同的瀏覽對盒子模型的解析不一樣。所以要實現同乙個效果不得不對 每個瀏覽器寫不同的樣式。造成了前台頁面設計師工作量的大增。想要解決這類問題,就是把它們解析的例子模型不同的元素 的樣式都重置,padding 或者margin都寫成0。那樣我們再來寫的時候,不...