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標簽