CSS常见样式(二)

1、背景图像

background           
background-color                    //背景颜色
background-image:url()             //背景图片
注意:同时使用背景图片和背景颜色的时候,背景图片总是在背景颜色的上面,所以当图像结束的时候,颜色就显示出来
background-position    //背景位置
默认值为:0% 0%      第一个值是水平位置,第二个是垂直位置,默认位置为左上角
background-repeat       //背景图片重复
分别可以设置:repeat-x、repeat-y、no-repeat
background-size         //设置背景图片大小
设置的值可以是像素(px),可以是百分比,可以是contain/cover

2、CSS sprite雪碧图

将一些小的图标或者精灵放在一张图片上,通过对background-position的设置,达到切换不同小图片的目的

3、隐藏or透明

opacity:0 //透明度为0,整体
display:none //消失,不用占位置
background-color :rgba(0,0,0,0.2) //只是背景色的透明

4、inline-block

既有inline特性(不占据一整行,宽度由内容宽度决定),又有 block特性(可设置宽高,内外边距)

5、line-height

line-height:2     //本身文字位置占据高度的两倍
line-height:200%    //继承父元素文字高度的两倍

6、盒模型

标准盒模型和IE盒模型(宽高均包含content、padding、border)

CSS3新样式box-sizing

  • box-sizing:content-box //标准盒模型
  • box-sizing:border-box //IE盒模型
最后编辑于 :
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,384评论 1赞 92
  • 1. text-align: center的作用是什么,作用在什么元素上?能让什么元素水平居中 (1)作用:CSS...
    黄同学2019阅读 465评论 0赞 0
  • 1. text-align: center的作用是什么,作用在什么元素上?能让什么元素水平居中 text-alig...
    饥人谷_流水阅读 272评论 0赞 0
  • 1.text-align: center的作用是什么,作用在什么元素上?能让什么元素水平居中? text-alig...
    饥人谷_DanaeJJ阅读 708评论 0赞 0
  • 1 有时候,我们回顾往事,你会发现某一天的某个时刻是你站在十字路口的那一瞬间。 迈出一步,就走上了与另外一边完全不...
    汪扬先森阅读 468评论 0赞 2

友情链接更多精彩内容