练习中的零碎知识-CSS篇
2020-03-17 16:04:10来源:博客园 阅读 ()
练习中的零碎知识-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
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
上一篇:移动端常见问题(动画演示)
- DIV居中的经典方法 2020-06-13
- CSS中的float和margin的混合使用 2020-06-11
- 循序渐进VUE+Element 前端应用开发(2)--- Vuex中的API、Sto 2020-05-25
- 2020前端练习 —— 超级无敌简易版博客园 2020-05-14
- CSS中的一些细节 2020-04-17
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash