背景
background //简写属性 作用是将背景属性设置在一个声明中
background-attachment //背景图像是否固定或者随着页面的其余部分滚动
background-color //设置元素的背景颜色
background-image //把图像设置为背景
background-position //设置背景图像的起始属性
background-repeat //设置背景图像是否及如何重复
background-size //CSS3的属性 背景的大小（兼容性）
//background-position：默认对于左上角的偏移
x y
x%y%
top | center | bottom | left | center | right
//background-repeat
no-repeat: 背景图片在规定位置
repeat-x： 图片横向重复
repeat-y：图片纵向重复
repeat：全部重复
//background-size
100px 100px
contain
cover
background-color: #F00;
background-image: url(background.gif);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: 0 0;
//可以缩写为一句
background: #f00 url(background.gif) no-repeat fixed 0 0;
<div class="box"></div>
.box{
width: 200px;
height: 150px;
border: 1px solid;
background: #0f0 url(https://www.google.com.hk/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png) center center no-repeat;
background-size: 200px 100px;
background-size: contain;
background-size: hover;
}
//如果窗口不展示（比如div很小）背景图片也不展示
隐藏or透明
opacity: 0 //透明度为0，整体
visibility: hidden // 和opacity: 0 类似
display: none //消失 不占用位置
background-color: rgba(0, 0, 0, 0.2) //只是背景色透明
inline-block
既呈现inline特性（不占据一整行，宽度由内容宽度决定）
又呈现block特性（可以设置宽高， 内外边距）
缝隙问题
//居中的一种方式
//空隙是因为下面的html 之间由空白字符
<span class="box">hello</span>
<span class="box">hello</span>
//去掉缝隙<span class="box">hello</span><span class="box">hello</span>
body{
text-align: center;
}
.box{
border: 1px solid;
width: 100px;
height: 50px;
display: inline-block;
}
//去掉缝隙的方式
<div class="wrap">
<span class="box">hello</span>
<span class="box">hello</span>
</div>
body{
text-align: center;
}
.wrap{
font-size: 0; //将wrap中的字体设为0
}
.box{
border: 1px solid;
width: 100px;
height: 50px;
display: inline-block;
font-size: 14px;
}
<div class="wrap">
<span class="box">hello</span>
<span class="box">hello</span>
</div>
body{
text-align: center;
}
.wrap{
font-size: 0; //将wrap中的字体设为0
}
.box{
border: 1px solid;
width: 100px;
height: 50px;
display: inline-block;
font-size: 14px;
//vertical-align: top 顶端对齐
//vertical-align: bottom 底部对齐
//vertical-align: middle
}
.b1{
padding: 40px;
}
.b2{
padding: 10px;
font-size: 80px;
} //这种情况 按照文字底部基线对齐
line-height
line-height: 2
line-height: 100%
height = line-height 来垂直居中当行文本
题目1：text-align: center的作用是什么，作用在什么元素上？能让什么元素水平居中
作用：使文本水平居中，该属性能让块级元素内的inline元素和inline-block元素水平居中。
题目2：IE 盒模型和W3C盒模型有什么区别?
W3C标准盒模型的padding、border所占的空间不在
width height范围内
IE盒模型中width height
包括content尺寸+padding+border
题目3：*{ box-sizing: border-box;}的作用是什么？
设置所有CSS的盒模型遵从IE盒模型的标准，此时在
CSS设置的属性中，width将包括内容宽度 + 内边距宽度 +
边框宽度，不再遵循默认W3C盒模型的标准
好处: 无论如何改动border与padding的值，都不会导致
box总尺寸发生变化，也就不会打乱页面整体布局。
题目4：line-height: 2和line-height: 200%有什么区别?
line-height: 2 ：设置行高为本身文字高度的两倍（推荐）。
line-height: 200% ：设置行高为父元素文字高度的两倍。
题目5：inline-block有什么特性？如何去除缝隙？高度不一样的inline-block元素如何顶端对齐?
inline-block
既呈现inline特性(不占据一整行 宽度由内容宽度决定)
又呈现block特性(可设置宽高 内外边距)
缝隙问题 对边距合并产生影响
顶端对齐: 可以给inline-block元素添加 vertical-align: top
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
body{
text-align: center;
}
.wrap{
font-size: 0;
}
.box{
border: 1px solid;
width: 100px;
display: inline-block;
font-size: 14px;
vertical-align: top;
}
.b1{
padding: 40px;
}
.b2{
padding: 10px;
font-size: 80px;
}
</style>
</head>
<body>
<div class="wrap">
<span class="box b1">hello</span>
<span class="box b2">hello</span>
</div>
</body>
</html>
题目6：CSS sprite 是什么?
CSS精灵图
指的是将不同的图片/图标合并在一张图上
使用CSS sprite可以减少网络请求，提高网页加载性能
题目7：让一个元素"看不见"有几种方式？有什么区别?
opacity: 0 //透明度为0，整体
visibility: hidden // 和opacity: 0 类似
display: none //消失 不占用位置
background-color: rgba(0, 0, 0, 0.2) //只是背景色透明
网友评论