1.塊級(jí)元素和行內(nèi)元素分別有哪些铡原?動(dòng)手測(cè)試并列出幾條不同的地方碍扔。
- 塊級(jí)元素block:
<p>,<div>,<form>,<ul>,<ol>,<li>,<table>,<tr>,<td>,<th>,<hx>,<hr/>
- 行內(nèi)元素inline:
<em>,<strong>,<span>,<img>,<input>,<select>,<textarea>,<label>,<a>
- 行內(nèi)元素和塊狀元素的區(qū)別:
塊狀元素可以包含塊狀元素和行內(nèi)元素,但是行內(nèi)元素只能包含行內(nèi)元素撑教。
塊狀元素獨(dú)占一行凌停,行內(nèi)元素只占據(jù)他本身大小。
塊狀元素可以設(shè)置width,height圈盔。行內(nèi)元素不能設(shè)置高寬豹芯。
塊狀元素的可以設(shè)置margin,padding;行內(nèi)元素設(shè)置的margin-top和margin-bottom不生效,padding-top和padding-bottom看上去會(huì)撐開行內(nèi)元素驱敲,但是本身位置并沒(méi)有變大铁蹈。
2.什么是CSS繼承,哪些可以繼承众眨,哪些不可以繼承握牧。
CSS的繼承指的是子元素在不設(shè)置樣式的時(shí)候,采用父元素設(shè)置的樣式娩梨。
可以繼承的屬性有:letter-spacing沿腰、word-spacing、white-space狈定、line-height颂龙、color、font纽什、font-family措嵌、font-size、font-style稿湿、font-variant铅匹、font-weight押赊、text-decoration饺藤、text-transform、direction流礁、list-style涕俗、list-style-type、list-style-position神帅、list-style-image再姑、text-indent和text-align
不可以繼承的屬性:display、margin找御、border元镀、padding绍填、background、height栖疑、min-height讨永、max-height、width遇革、min-width卿闹、max-width、overflow萝快、position锻霎、left、right揪漩、top旋恼、bottom、z-index奄容、float蚌铜、clear、table-layout嫩海、vertical-align冬殃、page-break-after、page-bread-before和unicode-bidi叁怪。
3.如何讓塊狀元素水平居中审葬?如何讓行內(nèi)元素水平居中。
-
塊狀元素的水平居中:
- margin:0 auto;
對(duì)于不定寬塊狀元素可以使用這種方法奕谭,讓他自適應(yīng)元素父元素寬度涣觉,水平居中。
- margin:0 auto;
- 絕對(duì)定位加負(fù)margin(margin:0 auto;)的方法血柳。
- 絕對(duì)定位加transform法官册,或者直接transform方法。
- 彈性盒子方法难捌。
為父元素設(shè)置display:flex;
參考:http://www.w3school.com.cn/cssref/pr_transform.asp
-
行內(nèi)元素水平居中的方法膝宁。
直接為父元素設(shè)置text-align:center;
4.用CSS實(shí)現(xiàn)一個(gè)三角形
用CSS實(shí)現(xiàn)三角形,原理是利用border的顯示效果根吁,配合transparent;
5.單行文本溢出加...如何實(shí)現(xiàn)员淫。
屬性text-overflow的值設(shè)置為text-overflow:ellipsis;
http://www.w3school.com.cn/cssref/pr_text-overflow.asp
6.px, em, rem 有什么區(qū)別?
px,相對(duì)長(zhǎng)度單位击敌。像素px是相對(duì)于顯示器屏幕分辨率而言的介返。但是不適合做響應(yīng)式或者移動(dòng)端設(shè)計(jì),不支持縮放。
em,相對(duì)單位圣蝎,相對(duì)于父元素設(shè)置的字體大小刃宵。由于可能實(shí)際開發(fā)中有多層嵌套,換算較為麻煩徘公,支持縮放组去。
rem,相對(duì)長(zhǎng)度單位步淹,但是是相對(duì)于html的根元素來(lái)?yè)Q算从隆,不用多次換算,支持縮放缭裆。較為推薦使用做移動(dòng)端或響應(yīng)式開發(fā)键闺。
7.解釋下面代碼的作用?為什么要加引號(hào)? 字體里\5b8b\4f53代表什么?
字體大小為12px,行高為字體的大小的1.5倍澈驼。從左到右辛燥,依次查詢字體,沒(méi)有第一種就加載第二種缝其,以此類推挎塌,直到瀏覽器默認(rèn)字體。
引號(hào)代表的是字符串内边,因?yàn)橹虚g有空格榴都,如果沒(méi)有查詢到這種字體可能加載出來(lái)的就是亂碼,字體中\(zhòng)5b8b\4f53代表的"宋體"unicode碼漠其,也是為了防止瀏覽器沒(méi)有查到中文的宋體嘴高,直接采用unicode碼比較靠譜。