HTML和CSS面试问题总结,html和css面试总结
html和css
w3c 規(guī)范
結(jié)構(gòu)化標(biāo)準(zhǔn)語言
樣式標(biāo)準(zhǔn)語言
行為標(biāo)準(zhǔn)語言
1) 盒模型
常見的盒模型有w3c盒模型(又名標(biāo)準(zhǔn)盒模型)box-sizing:content-box和IE盒模型(又名怪異盒模型)box-sizing:border-box。
標(biāo)準(zhǔn)盒子模型：寬度=內(nèi)容的寬度(content)+ border + padding + margin
低版本IE盒子模型：寬度=內(nèi)容寬度(content+border+padding)+ margin
2)css3 新特性
常問：
word-wrap 文字換行
text-overflow 超過指定容器的邊界時(shí)如何顯示
text-decoration 文字渲染
text-shadow文字陰影
gradient漸變效果
transition過渡效果 transition-duration：過渡的持續(xù)時(shí)間
transform拉伸，壓縮，旋轉(zhuǎn)，偏移等變換
animation動(dòng)畫
audio音頻
vadio視頻
RGBA和透明度
css3 邊框
border-radius 圓角
box-shadow 盒子陰影
border-image 邊框圖片
css3 背景
background-image 背景圖片
background-size 背景大小
background-origin 背景圖像的位置區(qū)域
background-clip 背景剪裁屬性是從指定位置開始繪制
css選擇器及優(yōu)先級(jí)
!important
內(nèi)聯(lián)樣式
ID選擇器
類選擇器 屬性選擇器 偽類選擇器
元素選擇器 關(guān)系選擇器 偽元素選擇器
通配選擇器
CSS選擇器有哪些？哪些屬性可以繼承？
CSS選擇符：
id選擇器(#myid)、
類選擇器(.myclassname)、
標(biāo)簽選擇器(div, h1, p)、
相鄰選擇器(h1 + p)
子選擇器(ul > li)、
后代選擇器(li a)、
通配符選擇器(*)、
屬性選擇器(a[rel=”external”])、
偽類選擇器(a:hover, li:nth-child)
可繼承的屬性：
font-size,
font-family,
color
不可繼承的樣式：
border,
padding,
margin,
width,
height
BFC
BFC是塊級(jí)格式化上下文。
BFC應(yīng)用:
防止margin重疊
清除內(nèi)部浮動(dòng)
自適應(yīng)兩欄布局
防止字體環(huán)繞
BFC的生成條件：
根元素
float值不為none
overflow的值不為visible
display的值為inline-block,table-cell,table-caption
position的值為absolute，fixed
圖片整合技術(shù)的優(yōu)勢(shì)
減少對(duì)服務(wù)器的請(qǐng)求次數(shù)
減少圖片體積，提高加載速度
元素垂直水平居中
1。不需要知道寬和高
position：absolute；top:0；left:0；right:0；bottom:0;margin:auto;
2。 需要知道寬和高
position:absolute;top:50%;left:50%;margin-top:+/-50%(自身高度的50%)；margin-left:+/-50%;
3。彈性盒
display:flex;
align-items:center;
justify-conter:center;
4.。 元素水平居中
margin:0 auto;
css定位方式
position：static;//默認(rèn)定位
position：relative;//相對(duì)定位 (參照物是自身,不脫離文檔流)
position:absolute;//絕對(duì)定位 (參照物是父元素，遵循就近原則，尋找父元素及其爺爺元素中設(shè)置 position:relative 屬性進(jìn)行定位，脫離文檔流；如果都不設(shè)置定位屬性，就以根元素進(jìn)行定位。)
position:fixed;//固定定位 (參照物是可視區(qū)窗口，脫離文檔流)
position:sticky;
rem和em的區(qū)別
總而言之，就是瀏覽器把誰轉(zhuǎn)化成“px”
rem 依據(jù)的是html的font-size值。1rem=16px
em 依據(jù)的是父元素的font-size值。
清除浮動(dòng)
方法一:clear:both
clear:both;
方法二:萬能清除浮動(dòng)
.clean{
content:'.';
height:0;
display:block;
clear:both;
overflow:hiddden;
visibility:hidden;
}
瀏覽器內(nèi)核
Trident IE瀏覽器
Gecko Firefox瀏覽器
Webkit Chrome Safari
Blink Chrome Opera
移動(dòng)端1像素問題
一般來說，在pc端瀏覽器中，設(shè)備像素比dpr等于1,1個(gè)css像素就等于1個(gè)物理像素；但是在retina屏幕中，dpr普遍是2或者3 ，1個(gè)css像素不在等于一個(gè)物理像素，因此在實(shí)際設(shè)計(jì)稿中粗不少。
偽元素+scale
.box{
width:100%;
height:1px;
margin:20px 0;
position:relative;
}
.box::after{
content:'';
position:absolute;
bottom:0;
width:100%;
height:1px;
transform:scaleY(0.5);
transform-origin:0 0;
background:red;
}
border-image
div{
border-width:1px 0px;
-webkit-border-image:url(xxx.png) 2 0 stretch;
border-image:url(xxx.png) 2 0 stretch;
}
常見的布局方式
圣杯布局
body{
min-width: 550px;
}
#container{
padding-left: 200px;
padding-right: 150px;
}
#container .column{
float: left;
}
#center{
width: 100%;
}
#left{
width: 200px;
margin-left: -100%;
position: relative;
right: 200px;
}
#right{
width: 150px;
margin-right: -150px;
}
centerleftright2. 雙飛翼布局
body {
min-width: 500px;
}
#container {
width: 100%;
}
.column {
float: left;
}
#center {
margin-left: 200px;
margin-right: 150px;
}
#left {
width: 200px;
margin-left: -100%;
}
#right {
width: 150px;
margin-left: -150px;
}
centerleftrightlink 與 @import 的區(qū)別
a.從屬關(guān)系區(qū)別
@import是 CSS 提供的語法規(guī)則，只有導(dǎo)入樣式表的作用；link是HTML提供的標(biāo)簽，不僅可以加載 CSS 文件，還可以定義 RSS、rel 連接屬性等
b.加載順序區(qū)別
加載頁面時(shí)，link標(biāo)簽引入的 CSS 被同時(shí)加載；@import引入的 CSS 將在頁面加載完畢后被加載。
c.兼容性區(qū)別
@import是 CSS2.1 才有的語法，故只可在 IE5+ 才能識(shí)別；link標(biāo)簽作為 HTML 元素，不存在兼容性問題。
d.DOM可控性區(qū)別
可以通過 JS 操作 DOM ，插入link標(biāo)簽來改變樣式；由于DOM方法是基于文檔的，無法使用@import的方式插入樣式。
qb扛把子
發(fā)布了23 篇原創(chuàng)文章 · 獲贊 2 · 訪問量 1039
私信
關(guān)注
標(biāo)簽：width,border,面試,html,position,margin,選擇器,css,left
來源： https://blog.csdn.net/qq_45927123/article/details/104044533
總結(jié)
以上是生活随笔為你收集整理的HTML和CSS面试问题总结,html和css面试总结的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 女人梦到被求婚预兆什么
- 下一篇： plotly django_使用Plot