margin

在这次实践中，它抖动得不正常，太不正常，太抖。 其实是我代码上出现了问题，记录一下。 我是怎么设置滑动的呢？ 通过改变view的margin。 然而我在onTouchEvent中怎么控制它滑动的大小呢？ 我获取的是event.getY()。 而event.getY()获取的是相对距离，也就是说坐标是相对于我们手指下的那个view来说的，是相对坐标。 而这个view又跟随着手指的滑动，通过改变margin的方式，margin一旦改变，那么坐标也跟着改变，于是getY就出现了异常。 所以我们不应该用getY()。 而是要用getRawY()。这个方法是相对于屏幕来说的，是绝对坐标。 来源： https://www.cnblogs.com/tangZH/p/11373031.html

一、什么是BFC？(概念) BFC 即 Block Formatting Contexts (块级格式化上下文)，是W3C CSS2.1规范中的一个概念，决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用。 它是一个独立的渲染区域，只有Block-level box参与，它规定了内部的Block-level Box如何布局，并且与外部毫不相干 。通俗一点来讲，可以把BFC看成是一个985或者211的高校。 二、BFC的触发条件 根元素 html标签就是一个bfc float的值不为none overflow的值不为visible display的值为 inline-block/ table-cell/ table-caption/ flex/ inline-flex position的值为absolute或fixed 三、BFC特性及作用（应用场景） 1. Box垂直方向的距离由margin决定，属于同一个BFC的两个相邻box的margin会发生重叠 （应用：可以解释为什么margin上下回重叠，以及解决方法的原因） ### 问题案例 1 ： margin重叠问题 margin塌陷问题 ：在标准文档流中，块级标签之间竖直方向的margin会以大的为准，这就是margin的塌陷现象。可以用 overflow：hidden 产生bfc来解决。 <style> .box1

盒模型对于网页布局是非常重要的，它是网页布局的基石。那么，现在就来了解一下盒模型，从盒子的内部到盒子的外围： 首先是盒子的组成，由四个部分组成，分别是：content（内容区域）；padding（内填充区域）；border（边框区域）；margin（外边距区域），如下图所示： 一、盒子的组成详解 content：盒子中间的内容区域，可以是：文本、图片、视频、小盒子······。 padding：内填充也称补白：长在盒子与内容之间的距离。可以用来控制子元素在盒子内部的位置关系。可以单一方向设置padding上下左右的值，如：padding-left、padding-right、padding-top、padding-bottom。 （注：如果一个盒子没有固定大小（被内容撑开），添加padding 不用减；padding不会对背景图的位置造成影响） border：盒子内容和内填充的边界。其常见的属性值有：border-width（边框的大小）、border-color（边框的颜色）、border-style（边框的类型）。其便捷设置可为border：边框的大小 边框的类型 边框的颜色。（注：属性值与属性值要用空格隔开） margin:盒子与盒子之间的距离。margin 是长在盒子外围的，控制当前元素与其他同级元素的位置关系。单一方向设置其属性值有：margin-right、margin

一、 上中下左固定 - fixed+margin 概括： 如图，此种布局就是顶部、底部和左侧固定不动，只有中间右侧超出可滚动。 html： <header>我是头部position: fixed;z-index: 9;</header> <section class="flexModal fixedLeft"> <nav> <ul> <li>section.flexModal nav ul>li*5</li> <li>栏目一</li> <li>栏目二</li> <li class="active">栏目三</li> <li>栏目四</li> <li>栏目五</li> </ul> </nav> <article> <h3> 内容区域 section.flexModal articel </h3> <p> section{ padding: 60px 0; } </p> <p> section.flexModal{ display: flex; } </p> <p> section.flexModal nav{ width: 200px; } </p> <p> section.flexModal article{ flex: 1; } </p> </article> </section> <footer>底部版权同头部 position: fixed;z-index: 9;<

什么是盒模型？ 概念：盒模型是css布局的基石，它规定了网页元素如何显示和元素间的相互关系。css定义所有的元素都有像盒子一样的外形。 盒模型的组成：content（内容区）+padding（填充区）+border（边框区）+margin（外边界区） content： 元素的宽和高 border : 盒子的边缘 就像是快递盒子的厚度 padding： 作用：用来控制父元素和子元素之间的位置关系，也可以说是用来控制元素和内容之间的位置关系的。 特点1：添加了padding值之后，padding值会把元素原有的大小撑大，即盒模型的大小变大； 如果让元素原本大小不变得话，需要在元素的宽高上减掉所加的padding； 特点2： padding属性对背景图片 是不起作用的，可以说背景图片的位置，是不受padding的影响的。 特点3：背景色会延展到padding区域。如果想保持背景颜色不变的话用padding比较方便 使用方法： 方法一： padding-top:30px; 上填充 padding-right:30px; 右填充 padding-bottom:30px; 下填充 padding-left:30px; 左填充 方法二： padding： 1 2 3 4 1、上 2、右 3、下 4、左 padding： 1 2 3 1、上 2、左和右 3、下 padding： 1 2 1、上和下

padding属性设置一个元素的内边距，padding 区域指一个元素的内容和其边界之间的空间，该属性不能为负值。四个外边距属性设置分别是： padding-top， padding-right， padding-bottom 和 padding-left 1、指定一个值时 该值指定内容到四个边的内边距 padding: 50px; marginPadding1.png 2、指定两个值时 第一个值指定内容到上下两边的内边距 第二个指定内容到左右两边的内边距 padding: 50px 20px; padding2.png 3、指定三个值时第一个指定内容到上边的内边距.第二个指定内容到左右两边 第三个指定内容到下边的距离 padding: 50px 20px 10px; padding3.png 4、指定四个值时分别为上 右 下 左（顺时针顺序） padding: 50px 20px 10px 5px; padding4.png 以上的样式设定了这个控件的宽度为200px、高度为200px，在改变margin和padding时内容区的大小是不变的 作者：FisherJiam 链接：https://www.jianshu.com/p/73deb2ae7992 来源：简书 著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。 来源： https://www.cnblogs

盒模型理解 盒模型 margin外边距 padding内填充 border边框 本人对盒模型的理解 盒模型 盒模型包括margin、border、padding、content四个部分，主要的设置属性是margin、border、padding。 盒子模型又分为两种W3C和IE盒子。 W3C的元素宽度=content的宽度 IE的元素宽度=content+padding+border margin外边距 margin是为了让两个盒子（同级的盒子）之间，产生一定距离。或者是让盒子的周围产生间距。 margin有以下几个特点： 是长在盒子外围的。 控制当前元素 与 其他同级元素的位置关系。 不会改变盒子内部的大小。 是可以设置负值的。 margin可以设置1~4个值： 一个值：四个方向的大小； 两个值：第一个是上下边距，第二个是左右边距； 三个值：第一个是上边距，第二个上左右边距，第三个是下边距； 四个值：从第一个值开始按上右下左的顺时针顺序，设置四个边距。 margin能分别设置四个方向的值：margin-top、margin-right、margin-bottom、margin-left。并且可以为负值。 padding内填充 padding是为了让盒子和文本之间产生间距，或者是添加空白空间。 padding的特点： padding是长在 内容 和 盒子之间的距离。

文档对象模型（Document Object Model，DOM）是一种用于HTML和XML文档的编程接口。它给文档提供了一种结构化的表示方法，可以改变文档的内容和呈现方式。我们最为关心的是，DOM把网页和脚本以及其他的编程语言联系了起来。DOM属于浏览器，而不是JavaScript语言规范里的规定的核心内容。 一、查找元素 1、直接查找 document.getElementById 根据ID获取一个标签 document.getElementsByName 根据name属性获取标签集合 document.getElementsByClassName 根据class属性获取标签集合 document.getElementsByTagName 根据标签名获取标签集合 2、间接查找 parentNode // 父节点 childNodes // 所有子节点 firstChild // 第一个子节点 lastChild // 最后一个子节点 nextSibling // 下一个兄弟节点 previousSibling // 上一个兄弟节点 parentElement // 父节点标签元素 children // 所有子标签 firstElementChild // 第一个子标签元素 lastElementChild // 最后一个子标签元素 nextElementtSibling //

盒模型是css布局的基石，它规定了网页元素如何显示以及元素间相互关系。css定义所有的元素都可以拥有像盒子一样的外形和平面空间。 HTML文档中可以将每个元素都看作是长方形的盒子。而CSS盒模型规定了元素框处理元素内容content、内边距padding、边框border和外边距margin的方式。如图： 代码演示： 如图这个盒子宽widht:500px,高height：200px,外边距padding：100px，边框border：5px, 外间距margin：100px;所以这个盒子的大小为710px*410px 因为盒子本身的大小是这样计算的： width: width + padding-left + padding-right + border-left + border-right height: height + padding-top + padding-bottom + border-top + border-bottom 通过盒模型我们更容易理解 标准盒模型： 何为padding内边距？ 1,、padding内边距是在盒子里面，在盒子与内容之间，控制子元素在父元素里面的位置关系。 2、padding会把盒子撑大，如果想让盒子保持原有的大小：在宽高基础上减掉。（ 如果一个元素是被内容撑开的，没有设置固定的宽高，padding直接撑开。不用减掉） 注意

1、什么是盒模型？ 其实CSS盒模型是在CSS技术所使用的一种思维模型。 首先知道在网页中，一个元素占有空间的大小由哪几个部分构成，包括元素的内容（content），元素的内边距（padding），元素的边框（border），元素的外边距（margin）四个部分。这四个部分占有的空间中，有的部分可以显示相应的内容，而有的部分只用来分隔相邻的区域或区域。 由里向外content->padding->border->margin 。4个部分一起构成了css中元素的盒模型。换言之，内容就是盒子里面装的东西；而填充就是怕盒子里的东西损坏而添加的抗震材料；边框就是指盒子本身了；至于边界则说明盒子之间的距离。如图1-1所示： 图1-1盒模型 2、盒模型的两种模式 两种模式分别为：标准模式和怪异模式。如图所示2-1和2-2所示： 图2-1标准模式 图2-2怪异模式 不同点：标准模式会被设置的 padding撑开，而怪异模式则相当于将盒子的大小固定好，再将内容装入盒子。盒子的大小并不会被 padding所撑开。（以下采用标准模式） 3、如何设置盒模型的属性？ 例子如图3-1显示： 图3-1例子 运行结构如图3-2： 图3-2运行结果（选中状况下，颜色有误差） 1）内边距padding a、单一方向上设置 padding-left:10px; padding-right: 10px; padding