1.完整的meta设置:
width=device-width 约束视口为出厂视口
initial-scale=1.0 默认视口1.0倍
minimum-scale=1.0 允许最小的视口1.0倍
maximum-scale=1.0 允许最大的视口1.0倍
user-scalable=no 不允许用户缩放视口
2.百分比布局:
1).子盒子占父盒子的百分比,无视父盒子的padding
比如:
<div>
<p></p>
</div>
div{width:600px;padding-left:100px;}
p{width:50%;}
此时p应该是300px宽度,因为无视父亲的padding。
2). 而padding,都参考父亲的width。注意,竖直方向上的padding也是看父亲的width,而不是height。
例如:
<div>
<main></main>
</div>
div{
width:800px;
padding-left:400px;
padding:153px 234px 341px;
}
padding全都是父盒子宽度的百分之多少
p{
width:50%; //400px
height:100px;
padding-left:10%; //80px
paading-right:10%; //80px
padding-top:10%; //80px
padding-bottom:10%; 80px
}
3).margin,一律参考父亲width,不参考父亲的margin和height。
例如:
<div>
<main></main>
</div>
div{
width: 200px;
height: 600px;
border: 10% solid #000;
}
p{
margin: 10%;
}
总结: 无论margin、padding、width、height,无论竖直方向还是水平方向,参考的都是父亲的width。 4)边框带来的麻烦。 因为边框不能用百分比来写,所以会带来麻烦。
1
→ float: left;width:50%; border:1px solid red;2
→ float: left;width:50%; border:1px solid red; div{
width: 80%;
height: 200px;
margin: 0 auto;
background-color: #eee;
}
p{
float: left;
width: 50%;→ 这里不能轻松减去2px
height: 200px;
background: orange;
border: 1px solid #000;
}
解决方法:CSS3中增加了calc函数:
div{
width: 80%;
height: 200px;
margin: 0 auto;
background-color: #eee;
}
p{
float: left;
**width: calc(50% - 2px);→ CSS3中增加了calc函数**
height: 200px;
background: orange;
border: 1px solid #000;
}
5).原来的盒模型都是外扩的有了padding和margin之后,css3新的盒模型,加上box-sizing: border-box;属性,盒模型就是内减的,这个属性兼容性很好,兼容到IE8,其他高级浏览器都兼容。
6)新的弹性盒属性display:box;和display:flex;
当div设置了display:box;的时候,子盒子自动就会并排!不要写浮动,写了浮动反而出错。
浏览器会自动检测总份数,每个份数占多少,你自己占了几份。不用需要计算8.3333%、16.666%了。这个属性能够颠覆百分比写法!CSS中从此不出现百分号了。并且这个属性足够优秀,margin能够自动减去,border也能自动减去。
这个属性还有一个分支display:flex;给父盒子添加的属性。
可以使用flex-direction来设置方向,值有四个:row、row-reverse、column、column-reverse;
flex-wrap : wrap;来设置自动换行;
设置对齐方式:justify-content:flex:end;justify-content:flex:space-between;,justify-content:flex:space-around;
设置顺序:
<div>
<p>A</p> → order:5;
<p>B</p> → order:1;
<p>C</p>
<p>D</p>
<p>E</p>
<p>F</p> → order:2
</div>
flex-grow属性当空间多余是否外延:1是 0否(默认)
flex-shrink属性当空间不足是否缩小:1是(默认) 0否
用flex-basis:25%;属性表示占有多少面积,和width一致。
7)固比固:
三个盒子并排撑满父亲,两头的盒子固定120px尺寸,中间的盒子撑满剩余部分。
方法1:
<div>→ 相对定位,携带padding
<p>A</p> → 绝对定位,top:0;left:0;
<p>B</p>→ width:100%;
<p>C</p>→ 绝对定位,top:0;right:0;
</div>
方法2:在display:-webkit-box;
<div>→ display:-webkit-box;
<p>A</p> → width:120px; 没有box-flex属性
<p>B</p>→ -webkit-box-flex:任意数值。
<p>C</p>→ width:120px; 没有box-flex属性
</div>
8)高度的等比例变化:
a.插入图片法:
一般来说,需要高度等比例变化的盒子,都是携带图片的,因为不希望图片变形,所以盒子要等比例变化。
而img标签天生具有等比例的性质。盒子约束图片的宽度,图片反着影响盒子的高度。
比如现在要制作三个1:1:1的盒子并排,并且他们的宽高比都是1:1,也就是正方形。
<div>→ width:80%; overflow:hidden;
<p>→ float:left;width:33.33%;
<img src="images/yangyang.png" alt="">→ width:100%;height:auto;
</p>
<p>→ float:left;width:33.33%;
<img src="images/liyifeng.png" alt="">→ width:100%;height:auto;
</p>
<p>→ float:left;width:33.33%;
<img src="images/xiaoming.png" alt=""> → width:100%;height:auto;
</p>
</div>
图片的height会算出小数,但是盒子不会自动撑满为小数,此时会有白边,最简单的方法就是给img加上一个vertical-align: middle;属性和overflow:hidden;
b.padding法,将图片放在padding里面;
<div>
<p><img src="images/liyifeng.png" alt=""></p>
<p><img src="images/liyifeng.png" alt=""></p>
<p><img src="images/liyifeng.png" alt=""></p>
</div>
竖直方向的padding参考的是父亲的width,所以padding的参考和width的参考统一了,所以就能够制作高度等比例变化的盒子了!
盒子高度设置为0,width:33.3%;padding-top:33.3%;这两个参考的都是父盒子的宽度,所以值是一样的,然后再给子盒子设置width:100%;height:100%;
div{
width: 80%;
margin: 0 auto;
border: 1px solid #000;
overflow: hidden;
}
div p{
float: left;
width: 33.333%;
padding-top: 33.333%;
height: 0px;
border: 1px solid #000;
box-sizing:border-box;
position: relative;
}
div p img{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
c).CSS3中增加了rem单位,是绝对单位,表示html根元素的字号的多少倍。
rem的使用:首先增加根字号
html{
font-size: 20px;
}
<script type="text/javascript">
set();
window.onresize = set;
function set(){
//窗口此时的宽度
var windowWidth = document.documentElement.clientWidth;
//倍数
var rate = windowWidth / 600;
//设置此时的字号
document.documentElement.style.fontSize = 20 * rate + "px";
}
</script>
<script type="text/javascript">
function setHTMLFontSise(){
var windowWidth = document.documentElement.clientWidth;
//判断视口宽度是不是已经大于了最大版心
if(windowWidth > 540){
document.documentElement.style.fontSize = "20px";
}else if(windowWidth < 320){
document.documentElement.style.fontSize = 320 / 540 * 20 + "px";
}else{
document.documentElement.style.fontSize = windowWidth / 540 * 20 + "px";
}
}
window.onresize = setHTMLFontSise;
setHTMLFontSise();
</script>
背景定位、background-size都能够用rem写:
.logo{
border: 1px solid #000;
width: 5rem;
height: 4rem;
background: url(images/icons.png) no-repeat -8rem -3rem;
background-size: 15rem 10rem;
}
9)移动端注意事项:
手机中的图片一般都要缩小2倍~3倍使用,这样可以充分利用手机的高清屏幕,让图片更清晰。
10)文字溢出自动省略号
单行省略号:
div{
/*溢出加省略号*/
text-overflow:ellipsis;
/*设置文本不换行,即使横向溢出,也不换行*/
white-space: nowrap;
/*隐藏*/
overflow: hidden;
}
多行省略号,五个属性缺一不可:
section{
/*溢出加省略号*/
text-overflow:ellipsis;
/*隐藏*/
overflow: hidden;
/*必须自己是弹性盒*/
display: -webkit-box;
/*设置行数是3行*/
-webkit-line-clamp: 3;
/*垂直排列*/
-webkit-box-orient: vertical;
}