盒子模型：

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

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

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

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

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

  • 设置内联块级元素和块级元素的内边距。
  • 行内元素可以设置左、右两边的内边距；若要设置上、下两边的内边距，必须先使该元素变为块级或内联块级元素。
  • 改变padding的值，就改变了content的大小
  • 而改变margin的值，则不改变content的大小
 <style type="text/css">

     #container{

         border: 2px black solid;

         width: 700px;

         height: 800px;

     }

     #child{

         border: 2px black solid;

         width: 400px;

         height: 400px;

         margin: 100px auto;/* 设置外边距 */

         padding: 100px;/* 设置内边距 */

     }

 </style>

 </head>

 <body>

     <div id="container">

         <div id="child">div1</div>

     </div>

 </body>

css内外边距属性的更多相关文章

  1. CSS 内外边距 float positio属性

    一.外边距和内边 margin:            用于控制元素与元素之间的距离 外边距:margin的最基本用途就是控制元素周围空间的间隔,从视觉角度上达到相互隔开的目的. padding:   ...

  2. CSS margin 外边距 属性的位置关系

    padding:内边距 margin :外边距 margin:10px; 所有 4 个外边距都是 10px ******************************************* ma ...

  3. [Web 前端] 013 css 内外边距

    1. css 内间距 也称:"内补白"或"内补丁" 参数 释义 padding 检索或设置对象四边的内部边距,如 padding:10px; padding:5 ...

  4. CSS Margin(外边距)

    CSS Margin(外边距)属性定义元素周围的空间. Margin margin清除周围的元素(外边框)的区域.margin没有背景颜色,是完全透明的 margin可以单独改变元素的上,下,左,右边 ...

  5. CSS：CSS margin(外边距)

    ylbtech-CSS:CSS margin(外边距) 1.返回顶部 1. CSS margin(外边距) CSS margin(外边距)属性定义元素周围的空间. margin margin 清除周围 ...

  6. css - 盒子内外边距

    css - 盒子内外边距 元素内边距 内边距是指元素包含的内容离元素边框之间的间距,padding会撑大盒子.在浏览器中显示的元素宽高包含了padding. div{     width:200px; ...

  7. 0019 盒子模型（CSS重点）：边框、内外边距、布局稳定性、PS

    typora-copy-images-to: media 第01阶段.前端基础.盒子模型 盒子模型(CSS重点) css学习三大重点: css 盒子模型 . 浮动 . 定位 主题思路: 目标: 理解: ...

  8. css关于内外边距的详细解释

    贴图吧,图一眼明了. 无效果时候有 只有一个<div>啦啦啦</div> 只有padding时候有: padding详细设计时: 解释:padding是对内的,如padding ...

  9. Android UI系列-----长度单位和内外边距

    这篇随笔将会记录一下在控件布局时,设定距离的三种长度单位:px.dp.sp以及内外边距的属性 1.三种长度单位 ①px:px是我们常见的一种距离单位,它表示的是一个单位像素,我们经常说我们手机或者电脑 ...

随机推荐

  1. React 的组件与 this.props对象

    1.组件 React 允许将代码封装成组件,然后像插入普通 HTML 标签一样,在网页中插入这个组件.React.createClass 的方法就是用于生成一个组件类. 2.this.props对象 ...

  2. Python3+unittest使用教程

    一.直接使用TestCase 注意所有测试方法都需要以test开头.代码如下: import unittest class Test1(unittest.TestCase): @classmethod ...

  3. 干货！一篇文章集合所有Linux基础命令

    1 文件{ls -rtl # 按时间倒叙列出所有目录和文件 ll -rttouch file # 创建空白文件rm -rf 目录名 # 不提示删除非空目录(-r:递归删除 -f强制)dos2unix ...

  4. 基于Live555实现RtspServer及高清高分辨率和高码率视频传输优化

    基于Live555实现RtspServer及高清高码率视频传输优化 最近做了一些pc和嵌入式平台的RTSP服务器项目,大多数的要求是简单但是功能全面,并且性能还要强劲.综合考虑后,基本都是在基于liv ...

  5. 微信为什么不能下载apk 微信不能打开App下载地址的问题

    此方法可以实现微信内置浏览器跳转到手机其它浏览器,现在网上其它的方法都只是一个页面,让访问者自己手动点右上角浏览器打开,而这个不同,是可以直接自动跳转的.       <?php   error ...

  6. Day5_Py模块_1

    1. time & datetime模块 ----------------------------------------------------------- >>> im ...

  7. springboot秒杀课程学习整理1-6

    1)活动模型设计 配饰秒杀的模型(promoModel)id promoName startDate(建议使用joda-time) endDate itemId promoItemPrice 数据库( ...

  8. arp嗅探（windows）

    本次实验环境:windows本次实验工具:cain汉化版1.点击配置,嗅探器里选一个适配器,点击确定. 2.点击 3.扫描mac地址 4.点击ARP->嗅探器->添加到列表5.点击开始嗅探 ...

  9. const修饰指针+volatile +restrict

    const这块的难点 const修饰指针有以下的几种形式 ,不同的形式 它的意义不一样. 形式1: int a=23: const int *p=&a: a是int型,&a是int * ...

  10. elasticsearch基本使用

    elasticsearch 是java对lucence的封装,所以需要事先安装java. 它适用于全文索引,便捷的分布式,主要原理就是倒排索引.一般搜索某个关键字,是通过在一篇篇文章中查找这个关键字, ...