content

padding

border

margin

可以理解为在商场上看到的电视机。

电视机------content

装电视机的箱子边框有粗细------border

电视机与箱子之间的泡沫-------padding

一台电视机与另一台电视机的距离-----margin

content为电视机，padding为电视机与箱子之间的泡沫，border为装电视机的箱子厚度，margin当前这台电视机与其他电视机的距离

position

relative        相对   相对原来的位置移动   原位置保留

absolute       绝对　相对最近的非标准流盒子移动　原位置不保留，被填充    变为块级框

static           默认　left right不生效了

fixed　　　　相对窗口本身

inherit         继承

css盒子模型和定位的更多相关文章

  1. css盒子模型，定位，浮动

    1.盒子模型 Margin(外边距) - 清除边框外的区域,外边距是透明的. Border(边框) - 围绕在内边距和内容外的边框. Padding(内边距) - 清除内容周围的区域,内边距是透明的. ...

  2. {前端CSS} 语法 Css的几种引入方式 css选择器 选择器的优先级 CSS属性相关 背景属性 边框 CSS盒子模型 清除浮动 overflow溢出属性　　定位（position）z-index

    前端CSS CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素,给HTML设置样式,让它更加美观. 当浏览器读到一个样式表,它就会按照这个样式表来对文 ...

  3. 深入理解CSS盒子模型

    在CSS中浮动.定位和盒子模型,都是很核心的东西,其中盒子模型是CSS很重要基石之一,感觉还是很有必要把CSS盒子模型相关知识更新一下...... CSS盒子模型<BoxModel>示意图 ...

  4. 每天学点前端——基础篇1：css盒子模型，绝对定位和相对定位

    什么是css盒子模型(Box Model)? W3C中解释为:规定了元素框处理元素内容.内边距.边框和外边距的方式: MDN:文档中的每个元素被描绘为矩形盒子.渲染引擎的目的就是判定大小,属性--比如 ...

  5. 几个容易出错的css盒子模型细节

    css是前端必须掌握的技能之一.其中的box模型,如图所示: 大体就是border.margin.padding和content,概念挺好理解.但当盒子模型与其他属性一块使用时产生的现象,或许您还难以 ...

  6. <转>HTML+CSS总结/深入理解CSS盒子模型

    原文地址:http://www.chinaz.com/design/2010/1229/151993.shtml 前言:前阵子在做一个项目时,在页面布局方面遇到了一点小问题,于是上stackoverf ...

  7. 聊聊css盒子模型

    css盒子模型原理: 在网页设计中常听的属性名:内容(content).填充/内边距(padding).边框(border).外边距(margin), CSS盒子模式都具备这些属性. 这些属性我们可以 ...

  8. CSS盒模型和定位的类型

    此文根据Steven Bradley的<How Well Do You Understand CSS Positioning?>所译,整个译文带有我自己的理解与思想,如果译得不好或不对之处 ...

  9. [Web 前端] CSS 盒子模型，绝对定位和相对定位

    cp : https://blog.csdn.net/web_yh/article/details/53239372 一.盒子模型: 标准模式和混杂模式(IE).在标准模式下浏览器按照规范呈现页面:在 ...

随机推荐

  1. python读取Excel文件。

    #!/usr/bin/python # -*- coding: utf-8 -*- from bs4 import BeautifulSoup import urllib.request import ...

  2. 【BZOJ】1443: [JSOI2009]游戏Game

    [算法]博弈论+二分图匹配(最大流) [题解]方格图黑白染色得到二分图, 二分图博弈:当起点不属于某个最大匹配时,后手必胜. 问题转化为那些点不属于某个最大匹配. 先找到一个最大匹配,非匹配点加入答案 ...

  3. 20155209 2016-2017-2 《Java程序设计》第九周学习总结 ## 教材学习内容总结

    教材学习内容总结 JDBC API 允许用户访问任何形式的表格数据,尤其是存储在关系数据库中的数据. 执行流程: •连接数据源,如:数据库. •为数据库传递查询和更新指令. •处理数据库响应并返回的结 ...

  4. json和jsonp的使用区别

    json和jsonp的使用区别 一．    跨域请求的概念 JavaScript出于安全方面的考虑,不允许跨域调用其他页面的对象. 二．    json和jsonp JSON是一种基于文本的数据交换方 ...

  5. mysql 案例 ~ 分析执行完的大事务

    一 简介:今天咱们来聊聊如何定位以及执行完的大事务 二 目的:通过分析binlog脚本来定位执行的大事务 三 分析脚本 mysqlbinlog --base64-output=decode-rows ...

  6. DSO windowed optimization 代码 (3)

    4 Schur Complement 部分信息计算 参考<DSO windowed optimization 公式>,Schur Complement 部分指 Hsc(\(H_{X\rho ...

  7. MySQL内连接、外连接、交叉连接

    外连接: 左连接:left join 或 left outer join 以左边的表为基准,如果左表有数据,而右表没有数据,左表的数据正常显示,右表数据显示为空. 创建user表,用于记录用户 use ...

  8. motor的使用

    # -*- coding: utf-8 -*- # @Time : 2018/11/18 10:41 PM # @Author : cxa # @File : motordb.py # @Softwa ...

  9. mysql系列十一、mysql优化笔记：表设计、sql优化、配置优化

    可以从这些方面进行优化: 数据库(表)设计合理 SQL语句优化 数据库配置优化 系统层.硬件层优化 数据库设计 关系数据库三范式 1NF:字段不可分; 2NF:有主键,非主键字段依赖主键; 3NF:非 ...

  10. 使用命令行登陆数据库配置文件修改 解决ora12528

    下面是问题解决: ORA-12528: TNS:listener: all appropriate instances are blocking new connections 1:修改listene ...