html和css

w3c 規范

結構化標準語言

樣式標準語言

行為標準語言

1) 盒模型

常見的盒模型有w3c盒模型(又名標準盒模型)box-sizing:content-box和IE盒模型(又名怪異盒模型)box-sizing:border-box。

標準盒子模型：寬度=內容的寬度(content)+ border + padding + margin

低版本IE盒子模型：寬度=內容寬度(content+border+padding)+ margin

2)css3 新特性

常問：

word-wrap 文字換行

text-overflow 超過指定容器的邊界時如何顯示

text-decoration 文字渲染

text-shadow文字陰影

gradient漸變效果

transition過渡效果 transition-duration：過渡的持續時間

transform拉伸，壓縮，旋轉，偏移等變換

animation動畫

audio音頻

vadio視頻

RGBA和透明度

css3 邊框

border-radius 圓角

box-shadow 盒子陰影

border-image 邊框圖片

css3 背景

background-image 背景圖片

background-size 背景大小

background-origin 背景圖像的位置區域

background-clip 背景剪裁屬性是從指定位置開始繪制

css選擇器及優先級

!important

內聯樣式

ID選擇器

類選擇器 屬性選擇器 偽類選擇器

元素選擇器 關系選擇器 偽元素選擇器

通配選擇器

CSS選擇器有哪些？哪些屬性可以繼承？

CSS選擇符：

id選擇器(#myid)、

類選擇器(.myclassname)、

標簽選擇器(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是塊級格式化上下文。

BFC應用:

防止margin重疊

清除內部浮動

自適應兩欄布局

防止字體環繞

BFC的生成條件：

根元素

float值不為none

overflow的值不為visible

display的值為inline-block,table-cell,table-caption

position的值為absolute，fixed

圖片整合技術的優勢

減少對服務器的請求次數

減少圖片體積，提高加載速度

元素垂直水平居中

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;//默認定位

position：relative;//相對定位 (參照物是自身,不脫離文檔流)

position:absolute;//絕對定位 (參照物是父元素，遵循就近原則，尋找父元素及其爺爺元素中設置 position:relative 屬性進行定位，脫離文檔流；如果都不設置定位屬性，就以根元素進行定位。)

position:fixed;//固定定位 (參照物是可視區窗口，脫離文檔流)

position:sticky;

rem和em的區別

總而言之，就是瀏覽器把誰轉化成“px”

rem 依據的是html的font-size值。1rem=16px

em 依據的是父元素的font-size值。

清除浮動

方法一:clear:both

clear:both;

方法二:萬能清除浮動

.clean{

content:'.';

height:0;

display:block;

clear:both;

overflow:hiddden;

visibility:hidden;

}

瀏覽器內核

Trident IE瀏覽器

Gecko Firefox瀏覽器

Webkit Chrome Safari

Blink Chrome Opera

移動端1像素問題

一般來說，在pc端瀏覽器中，設備像素比dpr等于1,1個css像素就等于1個物理像素；但是在retina屏幕中，dpr普遍是2或者3 ，1個css像素不在等于一個物理像素，因此在實際設計稿中粗不少。

偽元素+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;

}

centerleftright

2. 雙飛翼布局

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;

}

centerleftright

link 與 @import 的區別

a.從屬關系區別

@import是 CSS 提供的語法規則，只有導入樣式表的作用；link是HTML提供的標簽，不僅可以加載 CSS 文件，還可以定義 RSS、rel 連接屬性等

b.加載順序區別

加載頁面時，link標簽引入的 CSS 被同時加載；@import引入的 CSS 將在頁面加載完畢后被加載。

c.兼容性區別

@import是 CSS2.1 才有的語法，故只可在 IE5+ 才能識別；link標簽作為 HTML 元素，不存在兼容性問題。

d.DOM可控性區別

可以通過 JS 操作 DOM ，插入link標簽來改變樣式；由于DOM方法是基于文檔的，無法使用@import的方式插入樣式。

qb扛把子

發布了23 篇原創文章 · 獲贊 2 · 訪問量 1039

私信

關注

標簽：width,border,面試,html,position,margin,選擇器,css,left

來源： https://blog.csdn.net/qq_45927123/article/details/104044533

總結

以上是生活随笔為你收集整理的HTML和CSS面试问题总结,html和css面试总结的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。