html/css  盒子布局 Margin 、Padding 、border 以及 清除浮动的知识 （学习HTML过程中的小记录）

作者：王可利（Star·星星）

width     是“宽度”的意思，CSS中width指的是内容的宽度，而不是盒子的宽度。

Height    是“高度”的意思，CSS中height指的是内容的高度，而不是盒子的高度

Padding  是“内边距”的意思

Border    是“边框”

Margin    是“外边距”

真实占有的宽度 = 左边的border +左边的 padding + width +右边的border +右边的padding；

认识->padding padding

内边距，padding背景颜色一定和内容区域一样，background-color将填充border以内所有的区域

padding-right：10px；

padding-left：20px；

padding-top：30px；

padding-bottom：40px；

认识->margin

margin-left：100px；

margin-top：100px；

margin-right；100px；

margin-bottom：100px；注意：使用的时候与float会有相互的影响，可以使用clear：both，清除浮动

margin：0 auto   这个盒子居中，不是居中文本，必须是有明确width padding本质上指父子关系，margin是兄弟关系

border 边框的三要素：粗细。线性、颜色 dashed、dotted、solid、double、groove、ridge、inset、outset

浮动FLOAL

注意清楚float的方法：

1. clear：both（表示当前自己内部的元素不受其他盒子的影响）

2. overflow：hidden（超出范围内就隐藏）

3. 浮动的元素，只能被有高度的盒子高度，就是说，如果盒子内部有浮动，那么浮动就会在一定的范围内互相影响（加高方法）

html/css 盒子布局 Margin 、Padding 、border 以及 清除浮动的知识 （学习HTML过程中的小记录）的更多相关文章

  1. css007 margin padding border

    css007 margin padding border 1.理解盒模型(盒模型:就是把一些东西,包括html各种标签都包含在一个 看不见的盒子里) 1/在web浏览器中任何标签都是一个盒子,内容的周 ...

  2. CSS那些事儿-阅读随笔3（清除浮动）

    浮动主要是由浮动(float)属性导致的页面错位现象,清除浮动不仅能解决页面错位的现象,还可以解决子元素浮动导致父元素背景无法自适应子元素高度的问题.在CSS样式中,主要利用clear属性中的both ...

  3. css盒子模型、边框border、外边距margin、填充padding、轮廓outline

    盒子模型:盒子默认的宽度为容器的宽度,也可以自省设定宽度,高度根据内容适应,也可以自行设定高度.min-height设定最小高度 一个盒子包括外边距.边框.内边距和实际内容 Margin(外边距):清 ...

  4. css盒子布局,浮动布局以及显影与简单的动画

    08.05自我总结 一.盒子布局 1.盒子布局的组成 margin border padding content 2.margin margin是外边距,控制盒子的显示位置相对于他的上一级 left. ...

  5. CSS -- 盒子模型 margin 的特点

    margin在使用过程中具有如下的两个特点: 1.垂直外边距塌陷 --给子元素设置margin-top的时候,如果父元素也随着margin-top改变位置 解决方式: 给父元素设置边框 给父元素设置o ...

  6. css样式margin padding border

  7. margin padding border

    Difference between margin and padding? Remember these 3 points: The Margin is the extra space around ...

  8. css系列教程--margin padding column(完结)

    margin/margin-left/margin-right/margin-top/margin-bottom设置边距属性margin:0;--所有外边距0margin:0 1px;--margin ...

  9. 盒子布局、标签特性display、浮动、定位position

    盒子模型布局: 盒子模型:每个标签都是一个盒子 盒子在页面显示在大小是:自身宽度+边框+边距(内边框+外边距) 如果一个盒子设置了边框,则边框需要被加两遍.若果设置了边距则内外边距根据设置情况要被加两 ...

随机推荐

  1. 洛谷P1983 车站分级

    P1983 车站分级 297通过 1.1K提交 题目提供者该用户不存在 标签图论贪心NOIp普及组2013 难度普及/提高- 提交该题 讨论 题解 记录 最新讨论 求帮忙指出问题! 我这么和(diao ...

  2. noip2007 树网的核

    P1099 树网的核 112通过 221提交 题目提供者该用户不存在 标签动态规划树形结构2007NOIp提高组 难度提高+/省选- 提交该题 讨论 题解 记录   题目描述 设T=(V, E, W) ...

  3. Javascript中的Bind 、Call和Apply

    看以下代码: var bind = Function.prototype.call.bind(Function.prototype.bind); 第一眼看上去,我能猜出它究竟是用来做什么的.它把x.y ...

  4. 【Python】django安装

    官方下载:https://www.djangoproject.com/download/ 报错 [root@test Django-]# python setup.py install Traceba ...

  5. Oracle笔记 十二、PL/SQL 面向对象oop编程

    ------------------------抽象数据类型----------- --创建地址类型,一定要加as object,还可以在类型中加过程或方法 create or replace typ ...

  6. Linux内核中ioremap映射的透彻理解

    几乎每一种外设都是通过读写设备上的寄存器来进行的,通常包括控制寄存器.状态寄存器和数据寄存器三大类,外设的寄存器通常被连续地编址.根据CPU体系结构的不同,CPU对IO端口的编址方式有两种: (1)I ...

  7. C++ builder 2010 操作Excel表格的编程实现

    //--------------------------------------------------------------------------- #include <vcl.h> ...

  8. hbase 新增节点

    关于Hbase的集群管理 http://www.linuxidc.com/Linux/2012-07/65909.htm 1.如果只增加集群的存储量,建议增加Hadoop datanode节点. 方法 ...

  9. 《深入剖析Tomcat》读书笔记（一）

    一.Tomcat Tomcat,全名Apache Tomcat,最初是由Sun发起,后来捐赠给ASF,是Apache Jakarta下的一个子项目.Tomcat是对Servlet API定义的容器的一 ...

  10. NodeJs 中的Crypto 加密模块

    加密技术通常分为两大类:“对称式”和“非对称式”. 对称式加密: 就是加密和解密使用同一个密钥,通常称之为“Session Key ”这种加密技术在当今被广泛采用,如美国政府所采用的DES加密标准就是 ...