CSS常见技巧总结_html/css_WEB-ITnose
程序员文章站
2022-05-25 20:33:23
...
一、CSS背景CSS背景分为背景颜色和背景图片。那么我们什么时候用图片,什么时候用背景图呢?总的原则:对于固定不变的内容,如图标等我们用背景图。对于可变的内容,图片是和内容相关的,我们用图片。背景的属性一般我们在写背景图片的时候,将background-image background-position background-repeat属性合写在一起,如:background:url(XXXX.jpg) 0 0 no-repeat,剩下的背景属性再单独写。注意点:我们在给行内元素设置背景的时候,不要设置竖直方向的padding。因为虽然行内元素设置竖直方向的padding不会影响元素在文档流中的位置,但却会影响背景效果。如下:
Paste_Image.png
可以看到,标签在设置竖直方向padding之后,在文档流中的竖直方向位置没发生改变。但由于设置了背景色,却影响了 二、透明透明我们只要知道opacity和rgba的一个区别就可以了opacity设置透明是里面所有元素都透明,rgba设置透明是只设置颜色透明 三、居中水平居中文本、图片水平居中text-align:centerdiv水平居中margin:0 auto(注意声明doctype)垂直居中单行文本垂直居中:设置line-height等于外层容器高度文本垂直居中:设置上下padding相等图像垂直居中: 块级元素垂直居中:js处理,设置上下外边距等高 本博客版权归 许为 和饥人谷所有,转载需说明来源 声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。 相关文章 相关视频标签的显示效果。小技巧(雪碧图):雪碧图(css sprite)意思是把多个背景图片利用PS或者某些在线工具合成一张大的图片,然后我们利用background-position属性定位图片,以此来减少网络请求。背景色就不详说了,比较简单。
//ie8以上可以使用display:table-cell;vertical-align:middle;
推荐阅读
-
这个表单为何提交不上去?_html/css_WEB-ITnose
-
固定宽度文字换行_html/css_WEB-ITnose
-
CSS3 [attribute^=value] 选择器_html/css_WEB-ITnose
-
css position实现自适应_html/css_WEB-ITnose
-
纯CSS3制作九款可爱复古相机_html/css_WEB-ITnose
-
求教一个js、css结合table鼠标经过变色问题_html/css_WEB-ITnose
-
CSS中的:after和:before的作用是什么_html/css_WEB-ITnose
-
前端开发利器CSS之完美容颜_html/css_WEB-ITnose
-
织梦标签解析,不懂标签什么意思的可以进来看看www.vpincha.cc_html/css_WEB-ITnose
-
纯CSS3实现兔斯基简单害羞表情_html/css_WEB-ITnose