前端基础总结-布局-css元素

一:

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-往最前