前端基础总结-布局-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-往最前

 

 

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值