1.圖片向下?lián)未?像素問(wèn)題

在一個(gè)盒子里面放一張圖片，默認(rèn)情況下，圖片會(huì)向下?lián)未?像素，有以下幾種解決方法：

1.1給圖片添加display:block；

1.2給圖片添加float:left；

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

1.4 給他的父元素加font-size：0；

2.如何實(shí)現(xiàn)一張未知寬高的圖片在一個(gè)盒子里面做水平垂直居中？

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

3.元素的類型分類哪幾種？各自都有什么特點(diǎn)？

塊元素 獨(dú)占一行，豎著排，能設(shè)置寬高
行內(nèi)元素 默認(rèn)情況下文本一行顯示，不能設(shè)置寬高
行內(nèi)塊狀元素 inline-block,既有行內(nèi)元素的特點(diǎn)又有塊狀元素的特點(diǎn)
可變?cè)?添加float：left 相當(dāng)于display：block

4.如何實(shí)現(xiàn)一個(gè)元素消失和出現(xiàn)？

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

5.單行文本溢出顯示省略號(hào)怎么實(shí)現(xiàn)？
添加width；

white-space：nowrap；overflow：hidden；text-overflow：ellipsis；

6.定位的屬性值有哪幾個(gè)？分別有什么特點(diǎn)？
position:absolute 絕對(duì)定位， 脫離文檔流
在有父元素或者父元素沒有設(shè)置定位的情況下,它的參照物是整個(gè)瀏覽器
如果父元素設(shè)置了相對(duì)定位,那么它的參照物就是它的父元素
position:relative 相對(duì)定位， 不脫離文檔流
它的參照物是它原來(lái)的位置
position:fixed 固定定位， 脫離文檔流
position:sticky 粘性定位 脫離文檔流
它的參照物是整個(gè)瀏覽器

7.樣式引入的方式有哪幾種
外部引入

內(nèi)部引入

行內(nèi)樣式引入

8.transition過(guò)渡動(dòng)畫使用的過(guò)程中要注意一些什么？
1.必須跟hover一起使用
2.在hover的時(shí)候添加過(guò)渡，鼠標(biāo)滑上去有過(guò)渡效果，移開就沒有,給他本身加的時(shí)候，鼠標(biāo)滑上去有過(guò)渡效果，移開也有

9.用邊框?qū)懗鲆粋€(gè)箭頭超右的三角形

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.可以取負(fù)值的css屬性有哪些？
text-indent
z-index
margin-top
margin-left
background-position
left right bottom top
text-shadow
box-shadow等等

11.一個(gè)未知寬高的盒子在另一個(gè)盒子里面 水平垂直居中 的3種方法：(不用做計(jì)算)

(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.當(dāng)子元素使用margin-top，導(dǎo)致父元素整個(gè)下移的解決方案：
overflow:hidden
把margin改成padding
border-top:1px solid rgba(0,0,0,0)
給父元素或者子元素浮動(dòng)

13.子元素都設(shè)置float，父元素沒有設(shè)置高度，出現(xiàn)高度塌陷的問(wèn)題，解決方案：
1.給父元素設(shè)置height 遇到自適應(yīng)用不了，
2.添加overflow：hidden/auto
3.給浮動(dòng)的元素下面添加一個(gè)空盒子，給空盒子添加 clear：both；
4.萬(wàn)能清除法

.clear:after{ content:""； clear：both； display：block； height：0； overflow:hidden; visibility:hidden;}.clear{ zoom:1;}

5. 給父元素也添加float
6. 給父元素添加display：table

14.透明度的屬性是什么？請(qǐng)也寫上它的兼容寫法？
opcity:0.3;
filter:alpha(opcity=30)

15.什么是BFC？BFC的觸發(fā)條件有哪些？
bfc直譯為塊級(jí)格式化上下文，是一個(gè)獨(dú)立的渲染區(qū)域。具有BFC特性的元素可以看作是一個(gè)隔離了的獨(dú)立容器，容器里面的內(nèi)容不會(huì)影響到外面的元素
使用了float:left/right position為absolute/fixed display為inline-block,table-cell,table-caption,flex,inline-flex,overflow為hidden,auto等等 都是BFC

16.如何解決margin上下值發(fā)生重疊的問(wèn)題？
給任何一個(gè)子元素添加一個(gè)父元素，并讓這個(gè)父元素成為bfc區(qū)域里面的元素，所以就需要給父元素添加overflow:hidden/auto/scroll;display:inline-block/flex;等。

17.怪異盒是怎么產(chǎn)生的？它有什么特點(diǎn)？如何由W3C標(biāo)準(zhǔn)盒模型變成怪異盒模型？
產(chǎn)生原因：DOCTYPE的缺失在IE8以下會(huì)觸發(fā)怪異盒模式
特點(diǎn)：padding值不會(huì)計(jì)算在元素原有的寬高之上
border值不會(huì)計(jì)算在元素原有寬高之上
變成怪異盒模型：添加屬性box-sizing:border-box;
box-sizing:content-box;默認(rèn)值

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

font-family：字體樣式
font-weight：字體的粗細(xì)
font-size：字體的大小
font-style：字體的類型

2、文本系列屬性
text-indent：文本縮進(jìn)
text-align：文本水平對(duì)齊
line-height：行高
letter-spacing：單詞之間的間距
text-transform：控制文本小：uppercase、lowercase、capitalize
color：文本顏色
列表
list-style

19.圖片整合是用什么技術(shù)實(shí)現(xiàn)的？圖片整合技術(shù)有哪些優(yōu)勢(shì)？

css Sprites
用background-position 來(lái)進(jìn)行背景圖片定位技術(shù)

20.移動(dòng)端布局的方式有哪些？
流式布局 等比縮放布局或混合布局 等比縮放布局可以用rem vw來(lái)實(shí)現(xiàn)

21.transition和animation之間有什么共同點(diǎn)和不同點(diǎn)？
相同點(diǎn)：都是隨著時(shí)間改變?cè)氐膶傩灾?br />不同點(diǎn)：

1.transition需要跟hover一起使用
2.animation不需要觸發(fā)任何事件

22.em和rem是什么？移動(dòng)端為什么要用rem這個(gè)單位？

em是相對(duì)于最近的父元素的字號(hào)大小，1em=16px
rem 是 root em是相對(duì)于根元素字號(hào)的大小， 1rem=16px

23.響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)有哪些特點(diǎn)？

1、網(wǎng)站必須建立靈活的網(wǎng)格基礎(chǔ)；
2、引用到網(wǎng)站的圖片必須是可伸縮的
3、不同的顯示風(fēng)格，需要在Media Query上設(shè)置不同的樣式
4、meta標(biāo)簽

點(diǎn)擊【右上角，關(guān)注 子瑜說(shuō)IT 】持續(xù)更新IT資訊以及web前端開發(fā)教學(xué)

6年阿里云全棧工程師福利：網(wǎng)頁(yè)制作，網(wǎng)站開發(fā)，web前端開發(fā)，從最零基礎(chǔ)開始的的HTML+CSS+JavaScript。jQuery，Ajax，node，angular框架等到移動(dòng)端小程序項(xiàng)目實(shí)戰(zhàn)【視頻＋工具＋電子書＋系統(tǒng)路線圖】都有整理，分享給每一位對(duì)編程感興趣的小伙伴，每晚8點(diǎn)講解web前端技術(shù)！

獲取方式：

右上角有私信，請(qǐng)私信發(fā)我：01 即可獲取！加入前端學(xué)習(xí)

總結(jié)

以上是生活随笔為你收集整理的auto errored after 报错解决_css重点知识和bug解决方法的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。