一:
1css三大特性
继承性 重叠性 优先级
继承性:text-/font-/line-
a标签的颜色不具有继承性,标题标签的字体大小不具有继承性
!2元素类别
块元素:div,p,h1-h6
块元素特征:自动继承直接父元素的宽度,不继承时没有宽高,换行
行内块:img,input,select,textarea
行内块元素特征:一个完整的行内块元素有默认的宽高,不换行,可设置宽高
行内:a,span,ins,u,del,s,i,em,伪元素
行内元素特征:不可设置宽高,不换行
二:
常规布局:
一般适用pc端
流式布局:
宽度百分比,单位rem,一般适用于移动端
响应式布局:
一种页面在pc端和移动端上显示效果不一样,
pc端上:
默认的样式,
平板上:
@media only screen and (max-width:980px){
}
这里面的代码具有继承性,所以没写的还是pc端样式,需要改变的需要注意权重问题
手机上:
@media only screen and (min-width:320px) and (max-width:768px){
}
只需要在注意权重的情况下写不同就行了,其实原理就是代码的重叠性,
栅格布局(bootstrap):
1直接父元素为类名container
2用栅格参数实现在不同设备中网页效果不一样
.col-xs-值/.col-sm-/.col-md-/.col-lg-
3栅格参数中各个值相加为12
col-md-offset-3:列偏移
col-md-push-:往最后
col-md-pull-往最前