zoukankan      html  css  js  c++  java
  • 02-CSS基础与进阶-day5_2018-09-03-22-10-39

    08盒模型之margin.html

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style type="text/css">
           div {
                  width: 200px;
                  height: 200px;
                  background-color: pink;
                  padding: 4px;
                 /*  margin: 20px; */
                  /* margin-top: 10px;
                  margin-right: 20px;
                  margin-bottom: 30px;
                  margin-left: 40px; */
                  margin: 20px auto; /*左右auto 这样可以让块级带有宽度的盒子水平居中对齐*/
           }
           span {
                 margin: 0 auto; /*无效 因为span是行内元素*/
           }
    
           header {
                  margin: 0 auto; /*无效 因为没设置宽度*/
                  width: 400px;
           }
        </style>
    </head>
    <body>
        <div></div>
        <header>头部</header>
        <span>span</span>
    </body>
    </html>
  • 相关阅读:
    14 循环结构
    12.Maps
    11 Lists
    10 正则表达式
    8 Operator overloading
    9 Strings
    7 数据类型
    6 GPath
    4 练习: 使用eclipse开发
    5 类、对象、方法
  • 原文地址:https://www.cnblogs.com/HiJackykun/p/11048277.html
Copyright © 2011-2022 走看看