码迷,mamicode.com
首页 > Web开发 > 详细

CSS定位

时间:2017-11-02 20:06:13      阅读:210      评论:0      收藏:0      [点我收藏+]

标签:tle   左右   index   doctype   静态   bottom   居中   lin   reset   

CSS定位

  position既是一个模块也是一个属性。

  

position-static

  也叫静态定位/常规定位/自然定位——定位中的一股清流-回归本真

  

作用

使元素定位于 常规/自然流 中

(块、行垂直排列下去、行内水平从左到右)

特点

(1)忽略top、bottom、left、right或者z-index声明

(2)两个相邻的元素如果都设置了外边距,那么最终外边距=两者外边距中最大的

(3)具有固定width和height值的元素,如果把左右外边距都设置为auto,则左右外边距会

自动扩大占满剩余宽度,造成的效果就是这个块水平居中

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>position-static</title>
    <link rel="stylesheet" type="text/css" href="reset.css">
    <style type>
        .block{
            position: static;

            width: 50px;
            height: 50px;

            line-height: 50px;
            text-align: center;
            border:2px solid blue;
            box-sizing: border-box;
        }
        .block:nth-child(1){
            border:2px solid green;
            margin: 10px;
        }
        .block:nth-child(2){
            border:2px solid red;
            margin: 30px;
        }
        .block:nth-child(3){
            border:2px solid green;
            margin-left: auto;
            margin-right: auto;
        }
    </style>
</head>
<body>
    <div class="block">
        A
    </div>
    <div class="block">
        B
    </div>
    <div class="block">
        C
    </div>
    <div class="block">
        D
    </div>
</body>
</html>

  position-relative

CSS定位

标签:tle   左右   index   doctype   静态   bottom   居中   lin   reset   

原文地址:http://www.cnblogs.com/jhl123/p/7773816.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!