美文网首页前端大牛养成之路
css居中的书写规范——2017.3.4

css居中的书写规范——2017.3.4

作者: 小白你怎么这么白 | 来源:发表于2017-03-04 22:31 被阅读7次

元素的定位属性

定位模式

选择器{position: 属性值;}

postition属性的常用值

static 自动定位

relative 相对定位,相对于其源文档流的位置进行定位

absolute绝对定位,相对于上一个已将定位的父元素定位

fixed 固定定位,相对于浏览器窗口进行定位

相对定位

.box2{

               position: relative;

               right: -30px;

               top: -30px;

          }

绝对定位

子绝父相

.wrap{

               background-color: #09c;

               width: 400px;

               position: relative;

          }

 .close{

               width: 20px;

               height: 20px;

               position: absolute;

               top: 0;

               right: 0;

          }

z-index层叠等级属性

当对多个元素同时设置定位时,定位元素之间有可能发生重叠

在css中,要想调整重叠定位元素的堆叠顺序,可以对定位元素应用z-index层叠等级属性,其取值可为正整数,负整数和0

z-index的默认值属性值是0,取值越大,定位元素在层叠元素中越居上。

定义靠后的,默认在之前的元素之上。不要滥用z-index;

父容器的z-index会影响子元素的层级级别。

相关文章

  • css居中的书写规范——2017.3.4

    元素的定位属性 定位模式 选择器{position: 属性值;} postition属性的常用值 static 自...

  • CSS综合

    HTML编码规范CSS编码规范 垂直居中代码

  • 非常有用的css规范标准

    CSS图书馆 » HTML & CSS » 推荐大家使用的CSS书写规范、顺序 推荐大家使用的CSS书写规范、顺序...

  • 前端基本开发规范

    一般规范 HTML书写规范 CSS书写规范 JavaScript书写规范 一般规范 文件资源命名 资源(图片、js...

  • css 命名规范

    https://www.zhihu.com/question/19586885 CSS书写顺序 CSS书写规范使用...

  • 目录

    1.1 概述 2.1 文件命名规范 2.2 文件存放位置规范 3.1 HTML书写规范 4.1 CSS书写规范 4...

  • 微网站开发规范

    整体框架布局 JavaScript书写规范 CSS书写规范 整体框架布局采用seajs实现JavaScript的模...

  • css书写规范

    CSS和CSS3书写规范 按照下面顺序来书写css代码。 显示属性: display , list-style ...

  • 推荐大家使用的CSS书写规范、顺序

    推荐大家使用的CSS书写规范、顺序 css书写顺序 1. 位置属性(position, top, right, z...

  • HTML-CSS-JS

    CSS 样式书写规范最佳实践 本文的所列是实践当中得出的一套比较不错的 CSS 书写规范,可以结合自身团队发展出一...

网友评论

    本文标题:css居中的书写规范——2017.3.4

    本文链接:https://www.haomeiwen.com/subject/huojgttx.html