box | 易学教程

margin折叠及hasLayout && Block Formatting Contexts

阅读更多关于 margin折叠及hasLayout && Block Formatting Contexts

margin折叠的产生有几个条件：这些margin都处于普通流中，并在同一个BFC中；这些margin没有被非空内容、padding、border 或 clear 分隔开；这些margin在垂直方向上是毗邻的，包括以下几种情况： 1、一个box的top margin与第一个子box的top margin 2、一个box的bottom margin与最后一个子box的bottom margin，但须在该box的height 为auto的情况下 3、一个box的bottom margin与紧接着的下一个box的top margin 4、一个box的top margin与其自身的bottom margin，但须满足没创建BFC、零min-height、零或者“auto”的height、没有普通流的子box 垂直方向上毗邻的box不会发生折叠的情况：根元素的外边距不会参与折叠一个有clearance的box的上下margin毗邻，它会与紧接着的下一个box发生margin折叠，但折叠后的margin不会再与它们父box的bottom margin折叠折叠边距的计算当两个margin都是正值的时候，取两者的最大值；当 margin 都是负值的时候，取的是其中绝对值较大的，然后，从 0 位置，负向位移；当有正有负的时候，先取出负 margin 中绝对值中最大的，然后，和正

javascript--鼠标拖拽窗口案例（鼠标按下，在鼠标移动过程中，盒子跟着一起移动，鼠标松开，盒子停止移动）

阅读更多关于 javascript--鼠标拖拽窗口案例（鼠标按下，在鼠标移动过程中，盒子跟着一起移动，鼠标松开，盒子停止移动）

界面如图所示：要求：在“信息注册”栏，按下鼠标，然后鼠标在页面移动，在鼠标移动过程中，该窗口跟着鼠标移动，当鼠标松开的时候，窗口停止移动。点击“关闭”，该窗口隐藏。实现思路： 1.页面结构分析：一个大盒子d-box来确定位置，里面放一个小盒子drop（存放“注册信息（可以拖拽”文字和span标签，span存放“关闭”，id为box_close），鼠标在drop中按下，移动时候d-box跟着移动。 2.实现分析： 2.1 获取鼠标在盒子中的位置。通过鼠标在页面中的位置-盒子在页面的位置实现 ①鼠标在页面的位置实现代码： var x=e.pageX || e.clientX + (document.body.scrollLeft || document.documentElement.scrollLeft); var y=e.pageY || e.clientY + (document.body.scrollTop || document.documentElement.scrollTop); 　　②盒子在页面中位置实现代码：　 var box_x=box.offsetLeft; 　 var box_y=box.offsetTop; 　　③鼠标在盒子中的位置实现代码：　 var mouse_in_box_x=x-box_x; 　 var mouse_in_box_y=y-box

CSS3盒模型——box-sizing

阅读更多关于 CSS3盒模型——box-sizing

box-sizing盒模型是CSS3的一个重要属性之一，常常被很多人给忽略了！CSS3出现之前box-sizing盒模型默认的宽高是指内容的宽高，css3之后可以用box-sizing来指定宽高。目前比较火的前端框架Bootstrap,Foundation等国外框架都是全局设置box-sizing:border-box，如果您不再支持低版本浏览器，这个属性对您来说将会相当好用，相信你会爱上他的！语法： box-sizing: content-box|border-box|inherit; content-box：这是由 CSS2.1 规定的宽度高度行为。宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框。 border-box:为元素设定的宽度和高度决定了元素的边框盒。就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。 inherit:规定应从父元素继承 box-sizing 属性的值。提示：IE8以下的浏览器支持content-box,不支持border-box,border-box是CSS3新增加属性！ content-box示例： .test1{ box-sizing:content-box; width:200px; padding:10px;

为RecyclerView打造通用Adapter

阅读更多关于为RecyclerView打造通用Adapter

##RecycleView简单介绍 RecyclerView控件和ListView的原理有非常多相似的地方,都是维护少量的View来进行显示大量的数据。只是RecyclerView控件比ListView更加高级而且更加灵活。当我们的数据由于用户事件或者网络事件发生改变的时候也能非常好的进行显示。和ListView不同的是，RecyclerView不用在负责Item显示相关的功能。全部有关布局、绘制、数据绑定等都被分拆成不同的类进行管理。同一时候RecyclerView控件提供了下面两种方法来进行简化和处理大数量集合: 1.基本使用 RecycleView的基本使用 RecycleView导包(可有可无) dependencies中加入 compile'com.android.support:recyclerview-v7:23.1.1' 在布局文件里定义 <android.support.v7.widget.RecyclerView android:id="@+id/rcv_history" android:layout_width="match_parent" android:layout_height="match_parent"> </android.support.v7.widget.RecyclerView> 3.对其进行初始化 rcv_history =

CSS3弹性盒模型之box-orient & box-direction

阅读更多关于 CSS3弹性盒模型之box-orient & box-direction

Css3引入了新的盒模型——弹性盒模型，其实上一篇文章已经讲到了一个 box-flex ，今天来讲讲另外的两个弹性盒模型属性box-orient 和 box-direction。 1、 box-origent: 水平或垂直分布。 box-origent有两个值：horizional（水平）和vertical（垂直），意思就是元素的排列方式！ css代码如下： body { display: -webkit-box; -webkit-box-orient: horizional ; } 水平排列方式如下： body { display: -webkit-box; -webkit-box-orient: vertical ; } 垂直排列方式如下： 2、 box-direction：反向分布 box-direction也有两个值 normal(正常)和reverse（反向），当然如果使用的时候当然一般都是为了reverse的！该属性的作用就是把本来由1-2-3排列的元素倒过来变成：3-2-1 注意：无论是box-orient还是box-direction都需是在父元素中定义而决定子元素的排列的，而且他们起作用的前提是display:box 必须将display的值设置成box,否则是不会生效的，还有不同浏览器必须加上前缀（-webkit-、-moz-、-o-、-ms- 等等）。 3

JS 瀑布流效果

阅读更多关于 JS 瀑布流效果

JS瀑布流效果 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>JS瀑布流效果</title> <style> * { margin: 0px; padding: 0px; } #container { position: relative; } .box { padding: 5px; float: left; } .box_img { padding: 5px; border: 1px solid #cccccc; box-shadow: 0 0 5px #ccc; border-radius: 5px; } .box_img img { width: 150px; height: auto; } </style> </head> <body> <div id="container"> <div class="box"> <div class="box_img"> <img src="/Scripts/img/img1/1.jpg" /> </div> </div> <div class="box"> <div class="box_img"> <img src="/Scripts/img/img1/2.jpg" /> </div> </div> <div class="box"> <div class

图片无缝滚动

阅读更多关于图片无缝滚动

<!doctype html> <html> <head> <meta charset="utf-8"> <title>图片无缝滚动</title> <style type="text/css"> *{margin:0;padding:0;list-style:none;} #box{width:600px;height:400px;border:3px solid #ff0000;margin:100px auto;position:relative;overflow:hidden;} #box ul{height:400px;position:absolute;} #box ul li{width:600px;height:400px;float:left;z} </style> <script type="text/javascript"> window.onload=function() { //获取要用到的元素 var oDiv=document.getElementById("box"); var oUl=oDiv.getElementsByTagName("ul")[0]; var aLi=oUl.getElementsByTagName("li"); var aA=document.getElementsByTagName("a"); var speed=2; /

css之什么是bfc

阅读更多关于 css之什么是bfc

---【BFC是什么】：　　块级格式上下文，规定了内部盒子如何布局，并且与这个区域外部毫不相干 ---【BFC的规则】：　　1，在内部的BOX会在垂直方向，一个接一个地放置　　2，BFC的区域不会与float.box 重叠　　3，内部的BOX垂直方向的距离由margin决定，同一个BFC内相邻的BOX的magin会重叠　　4，计算BFC高度时，浮动元素也参与计算　　5，BFC就是页面上的一个隔离的独立容器，容器里子元素不会影响到容器外面的元素 ---【BFC的生成条件】：　　1，根元素　　2，float属性部位node 　　3，position 为absolute 或fixed 　　4,overflow 不为visible 　　5,display为inline-block / table-cell / table-caption / inline-flex 来源： https://www.cnblogs.com/zzhqdkf/p/12491652.html

Box-sizing reset

阅读更多关于 Box-sizing reset

### Box-sizing reset 重置盒模型使得元素的宽度`width`和过高度`height`不会受它们的边框`border`和内边距`padding`影响 #### HTML <div class="box">border-box</div> <div class="box content-box">content-box</div> #### CSS html { box-sizing: border-box; } *, *::before, *::after { box-sizing: inherit; } .box { display: inline-block; width: 150px; height: 150px; padding: 10px; background: tomato; color: white; border: 10px solid red; } .content-box { box-sizing: content-box; } #### Demo https://codepen.io/hahazexia/pen/WYKQNV #### Explanation 1. `box-sizing: border-box`使得内边距`padding`和边框`border`的附加值不会影响元素的宽度`width`和高度`height` 2. `box

CSS实现单行、多行文本溢出显示省略号（…）

阅读更多关于 CSS实现单行、多行文本溢出显示省略号（…）

当行省略号： overflow: hidden; text-overflow:ellipsis; white-space: nowrap; //不准换行多行省略号： display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; -webkit-line-clamp用来限制在一个块元素显示的文本的行数。为了实现该效果，它需要组合其他的WebKit属性。常见结合属性： display: -webkit-box; 必须结合的属性，将对象作为弹性伸缩盒子模型显示 -webkit-box-orient 必须结合的属性 ,设置或检索伸缩盒对象的子元素的排列方式来源： https://www.cnblogs.com/xqschool/p/6145877.html

订阅 box