浏览器默认给边距,去除浏览器默认样式 <!doctype html><html> <head> <title>样式初始化</title> <style> /* *通配符选择器，选择页面中所有元素，内外边距都设为0*/ *{margin:0px;padding:0;} /* 多
注意：盒子只是在垂直方向会有外边距合并现象，对于水平方向是没问题的。 注意:这里是嵌套块元素垂直外边距【margin】的合并
定义和用法 margin 简写属性在一个声明中设置所有外边距属性。该属性可以有 1 到 4 个值。 说明 这个简写属性设置一个元素所有外边距的宽度，或者设置各边上外边距的宽度。 块级元素的垂直相邻外边距会合并，而行内元素实际上不占上下外边距。行内元素的的左右外边距不会合并。同
盒子模型 我们把布局里面的所有东西都可以想象成一个盒子，盒子里面又装着小盒子，小盒子里面又装着小小盒子......所以布局的万物基于盒子。即使一个小小的元素p，也可以把它抽象成为一个盒子。你现在心里有很多疑问，没关系，接着看。 以下是标准的盒子模型。（图片来源） 我们平常给元素加
BFC定义： BFC(Block formatting context)直译为"块级格式化上下文"。 它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。 BFC布局规则特性： 在BFC中 ， 盒子从顶端开始垂直的一个接一个排列 盒子垂直方
盒子模型 页面布局的三大核心，盒子模型，浮动和定位 网页布局过程 先准备好相关网页元素，网页元素基本都是盒子Box 利用CSS设置好盒子样式，然后放到相应位置 往盒子里面装内容 盒子模型的组成 所谓盒子模型：就是把HTML页面中的布局元素看做是一个矩形的盒子，也就是 一个盛装内容的容
1、元素浮动导致高度塌陷问题： <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> .box1{ /*为box1设置一个边框*/ border: 10px red solid; }
一、基本概念 1、基本概念：标准盒模型+怪异盒模型（IE模型） 基本组成：由margin、padding、content组成。 2、标准盒模型和IE模型的区别 标准盒模型中width指的是内容区域content的宽度；height指的是内容区域content的高度。 标准盒模型下盒子的大小 = content + border + pad
css，层叠样式表 CSS层叠性 所谓层叠性是指多种CSS样式的叠加。 是浏览器处理冲突的一个能力,如果一个属性通过两个相同选择器设置到同一个元素上，那么这个时候一个属性就会将另一个属性层叠掉 比如先给某个标签指定了内部文字颜色为红色，接着又指定了颜色为蓝色，此时出现一个标
外边距（margin） margin属性用于设置外边距。 设置外边距会在元素之间创建“空白”， 这段空白通常不能放置其他内容。 margin-top:上外边距 margin-right:右外边距 margin-bottom:下外边距 margin-left:上外边距 margin:上外边距 右外边距 下外边距 左外边 取值顺序跟内边距
一、什么叫框模型 页面元素皆为框（盒子）,定义了元素框处理元素内容，内边距，外边距以及边框的计算方式。 二、外边距 围绕在元素边框外的空白距离（元素与元素之间的距离） 语法：margin，定义4个方向的外边距 1、单边定义：margin-top/right/bottom/left （1）取值：以px为单位， %占父级元素宽度
3.5div标签与盒子模型 描述：div标签与盒子模型 1.以往使用页面布局，使用的是iframe框架或者frameset框架 但是在浏览各大网站的源码时，发现基本上不在使用以上两个框架了！ 引出： 页面布局 — div标签 2.div标签 2.1 它本质上是一个容器，里面可以编写任何其他标签，甚至可以嵌套div
一、什么情况下发生外边距的合并 1）必须处于普通文档流中(不能脱离文档流)，并且处于同一个BFC中 2）相邻的外边距，不能有间隙和边框 3）垂直方向上 二、如何合并 1）兄弟元素之间，外边距合并会去最大的那个外边距而不是取和 2）父子元素之间，外边距合并
CSS 三大特性 css，层叠样式表 CSS层叠性 所谓层叠性是指多种CSS样式的叠加。 是浏览器处理冲突的一个能力,如果一个属性通过两个相同选择器设置到同一个元素上，那么这个时候一个属性就会将另一个属性层叠掉 比如先给某个标签指定了内部文字颜色为红色，接着又指定了颜色为蓝色，
margin: margin:5px auto;意思上下为5,左右平均居中 margin-top: 20px; 上外边距 margin-right: 30px; 右外边距 margin-bottom: 30px;下外边距 mar
行内块元素默认外边距解决方法： 水平方向：给元素浮动 垂直方向：1、给元素vertical-align: top/bottom; 2、将元素转化成块级元素 案例： （1）html <div> <img src="img/t.jpg" alt=""> </div> （2）css div{ border: 1px solid #000; } img{ vertical-alig
有兴趣的可以访问我的github地址：https://github.com/wangzhichao2019/-web- 一、外边距bug： 两嵌套模块的margin-top及margin-bottom问题 <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <title>外边距合并</title> <s
外边距，margin： 垂直外边距的重叠：在网页中相邻的垂直方向的外边距会发生外边距的重叠 所谓的外边距重叠指兄弟元素之间的相邻外边距会取最大值而不是取和。 .box1{margin-bottom:10px;}
首先从概念和属性的角度对三者有个初步认识 padding 设置或返回元素的内边距。 该属性可使用 1 到 4 种值： 如果规定一种值，比如：div {padding: 50px} - 所有四个内边距都是 50px。 如果规定两种值，比如：div {padding: 50px 10px} - 上内边距和下内边距是 50px，左内边距和右内边
原文链接：http://www.cnblogs.com/JoeDZ/archive/2008/10/28/1321097.html 外边距折叠是指垂直方向上相邻的两个外边距被合并为一个外边距的现象。margins 所属的元素可以是相邻关系也可以是嵌套关系。折叠现象只发生在垂直方向上的 margin 之间，水平方向
1.块级元素(block-level) 常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中<div>标签是最典型的块元素。 块级元素的特点： （1）总是从新行开始 （2）高度，行高、外边距以及内边距都可以控制。 （3）宽度默认是容器的100% （4）可以容纳内联元素和其他块元素。 2.行内元素(in
两个或多个块级盒子的垂直相邻边界会重合。结果的边界宽度是相邻边界宽度中最大的值。如果出现负边界，则在最大的正边界中减去绝对值最大的负边界。如果没有正边界，则从零中减去绝对值最大的负边界。注意：相邻的盒子可能并非是由父子关系或同胞关系的元素生成。 但是边界的重叠
原文链接：http://www.cnblogs.com/zq8024/p/5441950.html Position: absolute 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 fixed 生成绝对定位的元素，相
[2019.07.04 学习笔记3] 1.块级元素 独占一行 可控制宽度和高度，以及四个方向的内外边距 可容纳块级元素和行内元素 默认情况下宽度与浏览器宽度一样，与内容无关 2.行内元素 与其他元素位于同一行 不可控制宽度和高度，以及垂直方向的内外边距；只能设置水平方向的内外边距 可容纳文本
盒模型 width height border padding margin 浏览器会给元素一个默认样式，一般我们会重置浏览器默认样式 * {padding: 0; margin: 0} 注意 1 行内元素没有上下外边距 也没有上内边距 2 外边距合并 垂直的块级盒子以最大的外边距为准(外边距塌
