塊級(jí)元素和行內(nèi)元素分別有哪些?動(dòng)手測(cè)試并列出四條以上的特性區(qū)別鸣皂。
塊級(jí)元素:
div抓谴;h暮蹂;p寞缝;hr癌压;form;ul荆陆;ol滩届;dl;pre被啼;table帜消;li;dt浓体;dd泡挺;tr;td命浴;th娄猫;
行內(nèi)元素:
em;strong生闲;span媳溺;a;br碍讯;img悬蔽;button;input捉兴;label蝎困;select;textarea倍啥;code难衰;script;
每個(gè)元素有一個(gè)display屬性逗栽,值為“block”的就是塊級(jí)元素盖袭,值為“inline”的就是行內(nèi)元素。
塊級(jí)元素可以包含塊級(jí)元素和行內(nèi)元素彼宠,而行內(nèi)元素只能包含文字和行內(nèi)元素鳄虱。
塊級(jí)元素占據(jù)一整行空間,而行內(nèi)元素只占據(jù)自身寬度空間凭峡。
塊級(jí)元素可設(shè)置寬高拙已,而行內(nèi)元素?zé)o效。
如圖:
什么是CSS繼承摧冀?那些屬性能繼承倍踪,哪些不能系宫?
css繼承,特定的css屬性會(huì)向下傳遞給子元素建车。
能繼承的扩借,例如:
文本屬性,font-size,font-family,font-weight,line-height;
列表屬性缤至,list-style-image,list-style-position,list-style-type,list-style;
color屬性
不能繼承的潮罪,例如:
文本屬性,vertical-align,text-decoration,text-shadow,white-space,unicode-bidi;
背景屬性领斥,background,background-color;
盒模型屬性嫉到,width,height,margin,border,padding;
如何讓塊級(jí)元素水平居中?如何讓行內(nèi)元素水平居中?
使用“margin: 0 outo;”可以使塊級(jí)元素水平居中
對(duì)行內(nèi)元素所在的父級(jí)塊元素使用“text-align: center;”月洛,可使行內(nèi)元素居中
用 CSS 實(shí)現(xiàn)一個(gè)三角形
使用 {
height: 0;
width: 0;
border-top: 20px solid transparent;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-bottom: 20px solid blue;
}可以實(shí)現(xiàn)向上的三角形何恶。
單行文本溢出加 ...如何實(shí)現(xiàn)?
使用 {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
可以實(shí)現(xiàn)。
px, em, rem 有什么區(qū)別嚼黔?
px细层,固定單位
em,相對(duì)單位隔崎,相對(duì)于父元素的字體大小
rem今艺,相對(duì)單位,相對(duì)于根元素的字體大小
解釋下面代碼的作用?為什么要加引號(hào)? 字體里\5b8b\4f53代表什么?
body{
font: 12px/1.5 tahoma,arial,'Hiragino Sans GB','\5b8b\4f53',sans-serif;
}
給body元素中的字體設(shè)置爵卒,字體大小12px虚缎,行高為字體的1.5倍高度,字體選擇可以有tahoma,arial,Hiragino Sans GB,\5b8b\4f53,sans-serif,從左到右優(yōu)先選擇钓株。
加引號(hào)是因?yàn)檫@個(gè)字體名字中間有空格实牡,加空格表示一個(gè)整體。
\5b8b\4f53代表宋體轴合。
代碼題