zoukankan      html  css  js  c++  java
  • css内外边距属性

    盒子模型:

    所有HTML元素可以看作盒子,在CSS中,"box model"是用来设计和布局时 使用。

    CSS盒模型本质上是一个盒子, 封装周围的HTML元素, 它包括:边距,边框,填充和实际内容。

    外边距属性:设置对象四边的外部边距

    • 内联块级元素和块级元素的可以设置外边距。
    • 内联元素可以设置左、右两边的外边距;若要设置上、下两边的外边距,必须先使该元素变为块级元素或内联块级元素。
    • 如果提供全部四个参数值,将按上、右、下、左的顺序作用于四边。
    • 如果提供两个,第一个用于上、下,第二个用于左、右。
    • 如果提供三个,第一个用于上,第二个用于左、右,第三个用于下。

    内边距属性:设置对象四边的外部边距

    • 设置内联块级元素和块级元素的内边距。
    • 行内元素可以设置左、右两边的内边距;若要设置上、下两边的内边距,必须先使该元素变为块级或内联块级元素。
    • 改变padding的值,就改变了content的大小
    • 而改变margin的值,则不改变content的大小
     1 <style type="text/css">
     2     #container{
     3         border: 2px black solid;
     4         width: 700px;
     5         height: 800px;
     6     }
     7     #child{
     8         border: 2px black solid;
     9         width: 400px;
    10         height: 400px;
    11         margin: 100px auto;/* 设置外边距 */
    12         padding: 100px;/* 设置内边距 */
    13     }
    14 </style>
    15 </head>
    16 <body>
    17     
    18     <div id="container">
    19         <div id="child">div1</div>
    20     </div>
    21 </body>
  • 相关阅读:
    django之session配置
    django之基于cookie和装饰器实现用户认证
    django之分页插件
    python小程序之并发连接
    django之模版的自定义函数
    django之母版的继承
    jQuery 模态对话框示例
    python学习笔记10 ----网络编程
    python 学习笔记9(面向对象)
    python 学习笔记8 (模块)
  • 原文地址:https://www.cnblogs.com/-maji/p/7647392.html
Copyright © 2011-2022 走看看