练习中的零碎知识-CSS篇

2020-03-17 16:04:10来源:博客园 阅读 ()

新老客户大回馈,云服务器低至5折

练习中的零碎知识-CSS篇

1.这两个数值相等时,文字垂直居中

height:""; line-height:""; text-align:center;

2.使背景图上下充满居中

1.background:url()no-repead 0 0/100% 100%;
2.background:url() 0% 0% / cover no-repeat fixed;

3.避免设置的border边框占盒子的位置

box-sizing:border-box;

4.(1)大盒子定位时,若要相对于整个页面垂直居中(可微调值)

left:0; right:0; margin:auto;

(2)小盒子定位时,若要相对于它的父元素垂直居中(可微调值)

方法1: left:1/2父元素宽度; top:1/2父元素宽度; margin-right:-1/2小盒子宽度; margin-top:-1/2小盒子宽度;
方法2: left:1/4父元素宽度; top:1/4父元素宽度;

5.将元素显示为行内块状元素,设置该属性后,其他的行内块级元素会排列在同一行

display:inline-block;

6.在同一行内有不同高度内容的元素时,通常要设置对齐方式来使元素顶部对齐。

vertical-align: top;

7.找第三个元素如

.header .nav a:nth-child(3){}

8.做一排广告栏时,左浮动float:left;时,可加

.clearfix::after{ content: ""; display: block; clear: both; }

9.在一个CSS文件导入另一个CSS文件

@import"文件名.css"

10.设置边框阴影

box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3);


原文链接:https://www.cnblogs.com/YC-Yanchu/p/12510847.html
如有疑问请与原作者联系

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:移动端常见问题(动画演示)

下一篇:移动端性能优化(HTML性能优化)