text-align: center的作用是什么冶忱,作用在什么元素上?能讓什么元素水平居中
讓行內元素水平居中拔第;作用在塊級元素上点寥;能讓行內元素水平居中艾疟。IE 盒模型和W3C盒模型有什么區(qū)別?
寬度的計算標準不一樣:
IE盒模型:width=border.width+padding.width+content.width;外面的margin不變
W3C盒模型:width=content.width;*{ box-sizing: border-box;}的作用是什么敢辩?
讓所有的元素的盒子模型是按照IE盒模型進行計算的line-height: 2和line-height: 200%有什么區(qū)別?
line-height:是對單行文本起作用的蔽莱,可繼承的。
line-height:2戚长;相對于自身文本大小的兩倍盗冷;而這個倍數(shù)能被基礎,下面的行號就是按照字體的大小2來計算的
line-height:200%:相對于父元素的200%同廉,即繼承父元素的font-size仪糖,然后再乘以2得出結果;先是計算出值來迫肖,然后這個值被繼承锅劝,不變。如line-height:200%蟆湖;font-size=16px;則這個行高才16200%=32px,然后這個值被繼承故爵,不管下面的字體會有多大了。所以有時候字體的大小超過行高時會堆積上來隅津。-
inline-block有什么特性诬垂?如何去除縫隙?高度不一樣的inline-block元素如何頂端對齊?
三個特性:一伦仍、有行內元素的性質:大小是隨內容的大小而設定的结窘,不占據(jù)一行;二充蓝、有塊級元素的特性:可以設置寬高晦鞋;
三、有間隙;
去縫隙:span標簽并行寫在一起悠垛;span格式寫的不一樣;設置font-size:0娜谊;然后再設置font-size确买。<title>JS Bin</title>
<style> span{ display: inline-block; border:1px solid #f0f; font-size:10px; } div{ font-size:0; } </style> <div> <span>ggggggggggggggg</span> <span>ddddddddddffff</span> </div>
頂端對齊:vertical-align:top;
CSS sprite 是什么?
稱為精靈圖纱皆,也叫”雪碧圖“湾趾,是一種png的圖片格式。用一張.png格式圖片來放置所有的小圖標派草,然后引用這一張圖片搀缠,設置background-position來顯示不同的圖標。這樣可以減少向服務器的請求數(shù)量近迁,提高加載速度艺普。讓一個元素"看不見"有幾種方式?有什么區(qū)別?
visibility:hidden;(隱藏看不見鉴竭,但是它還是在的歧譬,占據(jù)空間,只是我們看不見)
opacity:0搏存;同上
background:rgb(0 0 0 0.1)同上background-color:rgba(0, 0, 0, 0.1)同上
display:none瑰步;完全消失,不存在了璧眠。
代碼
一缩焦、
<title>JS Bin</title>
<style>
div{
width: 100px;
height: 100px;
background-image: url("http://7xpvnv.com2.z0.glb.qiniucdn.com/f754722e-f087-4014-9711-15a36bb3ac0b");
background-size:100px 200px;
background-repeat: no-repeat;
}
div:hover{
background-position: 0px -100px;
}
</style>
<div>
</div>
二、
<title>JS Bin</title>
<style>
@font-face {
font-family: 'komo'; /* project id 241314 */
src: url('//at.alicdn.com/t/font_5fckcrmzd6zgp66r.eot');
src: url('//at.alicdn.com/t/font_5fckcrmzd6zgp66r.eot?#iefix') format('embedded-opentype'),
url('//at.alicdn.com/t/font_5fckcrmzd6zgp66r.woff') format('woff'),
url('//at.alicdn.com/t/font_5fckcrmzd6zgp66r.ttf') format('truetype'),
url('//at.alicdn.com/t/font_5fckcrmzd6zgp66r.svg#iconfont') format('svg');
}
div{
font-family: komo;
font-size: 100px;
font-style: normal;
}
div:hover{
color: red;
}
</style>
<div class="komo">
</div>
**嚴禁轉載责静,違者必究袁滥!