上一次写了拖拽,其实主要还是想实现拖拽之后实现自动排列,跟手机屏幕那样移动图标可以自动排列,先看效果: ? 很常见的一个效果,先说一下思路: 每一个元素都是绝对定位,初始化的时候是通过js去排列。...定义了一个数组,每个元素的字段: {el: elArr[i], sort: i, index: i} el是这个元素,用于排列,也就是改变top和left,sort是元素排列的位置,index是当前元素的...} }; elList[item.index].sort = moveIndex; moveItem(elList); } } //排列
行内元素 行内元素:span,strong,em,br,img,input,label,select,textarea,cite 块级元素 块级元素:div,p,from,ul,li,ol,dl,address...embed, hr, img, input, keygen, link, meta, param, source, track, wbr 行内元素与块级元素的区别 1.从显示效果看块级元素会独占一行,其宽度自动填满其父元素宽度...,行内元素不会独占一行,相邻的行内元素会排列在一行,直至一行排不开,才会换行,其宽度随元素的内容而变化。...3)块级元素可以设置margin 和 padding,行内元素的水平方向的padding-left,padding-right,margin-left,margin-right 都产生边距效果,但是竖直方向的...(水平方向有效,竖直方向无效)
默认情况下,block元素宽度自动填满其父元素宽度。 block元素可以设置width,height属性。块级元素即使设置了宽度,仍然是独占一行。...---- inline inline元素不会独占一行,多个相邻的行内元素会排列在同一行里,直到一行排列不下,才会新换一行,其宽度随元素的内容而变化。...inline元素的margin和padding属性,水平方向的padding-left, padding-right,margin-left, margin-right都产生边距效果; 但竖直方向的padding-top...之后的内联对象会被排列在同一行内。 比如我们可以给一个link(a元素)inline-block属性值,使其既具有block的宽度高度特性又具有inline的同行特性。...而且块级元素即使设置宽度也还是独占一行 块级元素可以设置margin和padding属性,行内元素水平方向的margin和padding如margin-left、padding-right,可以产生边距效果,但是竖直方向的如
其中li标签必须嵌套在ul标签或ol标签中; dt标签和dd标签必须嵌套在dl标签里面,并且dt标签必须位于dd标签前面; tr标签和td标签必须嵌套在table标签里面,其中td标签必须位于tr...行内元素与块级元素 块级元素:div , p , form, ul, li , ol, dl, form, address, fieldset, hr, menu, table 行内元素:span..., strong, em, br, img , input, label, select, textarea, cite, 1)块级元素会独占一行,其宽度自动填满其父元素宽度 行内元素不会独占一行...,相邻的行内元素会排列在同一行里,知道一行排不下,才会换行,其宽度随元素的内容 而变化 2) 块级元素可以设置 width, height属性,行内元素设置width, height无效 3)...行内元素的水平方向的padding-left,padding-right,margin-left,margin-right都产生边距效果,但是竖直方向的padding-top,padding-bottom
-- 当我转换成汉字后 旋转过程 汉字会出现竖直排列的情况……但英文字符串就没这个问题 但是 如果英文中间添加了空格 就会出现和汉字相同的情况…… 调整a nav li 的宽度无果 -->...-- 问题抽象:弹性盒子在盒子宽度变小时 自动把汉字和多个英文单词换行 --> 首页...line line1"> <script src="script.<em>js</em>...translateY(5.5px); } nav.active .icon .line2 { transform: rotate(765deg) translateY(-5.5px); } script.<em>js</em>
class="red ft10">内容1 内容2 id选择器 id选择器的使用方式和类选择器基本一致,id选择器一般配合后期的JS...完全实现结构和样式相分离 需要引入 最多,强烈推荐 控制整个站点(多) 标签的三种显示模式 块级元素 可设置宽和高 独占一行 默认宽度是父级标签的宽度 p这种段落标签不要嵌套块级元素 代表标签:div,p,ol,li...默认情况下,block元素宽度自动填满其父元素宽度。 block元素可以设置width,height属性。块级元素即使设置了宽度,仍然是独占一行。...display:inline inline元素不会独占一行,多个相邻的行内元素会排列在同一行里,直到一行排列不下,才会新换一行,其宽度随元素的内容而变化。...inline元素的margin和padding属性,水平方向的padding-left, padding-right, margin-left, margin-right都产生边距效果;但竖直方向的padding-top
行内、块状元素区别: (1).块级元素会独占一行,其宽度自动填满其父元素宽度;行内元素不会独占一行,相邻的行内元素会排列在同一行里,直到一行排不下,才会换行,其宽度随元素的内容而变化。...3).块级元素可以设置margin 和 padding;行内元素的水平方向的padding-left,padding-right,margin-left,margin-right 都产生边距效果,但是竖直方向的...(水平方向有效,竖直方向无效); 块级元素和行内元素有哪些,我就不在这一一说明。 块级元素和行内元素间如何相互转化,大家可以思考一下。 规范 1. 标签以及标签属性小写。 2....14. css、js尽量使用文件引入的形式,不要使用内联。 15. 使用link将css文件引入,并置于head中。使用script将js文件引入,并置于body底部。
dropdown-toggle">菜单 金牛 狮子 效果如下: ? ...默认的按钮组是水平排列的,为其设置btn-group-vertical类可以将其设置为竖直排列的,示例如下: 竖直排列的按钮组 金牛 狮子 摩羯 无
Android 4.0 布局-->GridLayout 网格布局 以行列单元格的形式展示内部控件排列,可以实现类似计算机键盘效果 ,也可以实现可自动变行的标签群效果 使用GridLayout ,有效减少了布局的深度...LinearLayout 的使用,额外添加了一些特有的属性 先来看下GridLayout的一些属性介绍 1、 android:orientation="horizontal|vertical" 内部控件是水平排列的还是竖直排列的...使用方法一致 2、 android:columnCount="4" android:rowCount="4" 内部控件 一行或者一列的显示条目个数,即一行/列 最多显示几条,这里是4条,当内部子控件数目多于时,自动换行.../列显示 ,使用此功能方便了实现了自动换行标签群的功能 3、子控件属性 android:layout_row = “3” Android:layout_column = “3” 用于设置该控件的位置...layout_columnSpan = “2” android:layout_gravity="fill" 设置某控件跨越多行或多列,前一个设置表明该控件跨越的行数或列数,后一个设置表明该控件填满所跨越的整行或
块级元素 独占一行,在默认情况下,其宽度自动填满其父元素的宽度 块级元素可以设置width、height属性 块级元素即使设置了宽度也是独占一行,块级元素可以设置margin、padding属性 行内元素...行内元素不会独占一行,相邻的行内元素会排列在同一行里,直到行排不下,就自动换行,其宽度随内容而变化 行内元素的width、height属性则无效 水平方向的padding、margin会产生边距效果,...竖直方向的padding、margin不会产生边距效果 行内置换元素 浏览器依据元素的标签和属性来决定元素的具体显示内容 img、input、textarea、select、object属于行内置换元素...元素脱离文档流,但因为没有设置属性导致无法具体定位,紧跟在上个元素之后,但下个元素排列时会忽略此元素。 ?...每个元素都有默认的display值 行内元素有: (强调的语气) 块级元素有: <li
默认情况下,block元素宽度自动填满其父元素宽度。 block元素可以设置width,height属性。块级元素即使设置了宽度,仍然是独占一行。...display:inline inline元素不会独占一行,多个相邻的行内元素会排列在同一行里,直到一行排列不下,才会新换一行,其宽度随元素的内容而变化。...inline元素的margin和padding属性,水平方向的padding-left, padding-right, margin-left, margin-right都产生边距效果;但竖直方向的padding-top...对于老式浏览器(主要针对IE6,7,8),需要使用css3-mediaqueries.js。... 2.
务必在bootstrap.min.js 之前引入 --> 1.设置栅栏式布局...--水平排列的表单 control-label:表示文本采用右对齐 --> ...-- 纵向导航栏:nav-tabs ,nav-pills(使导航呈现胶囊状),nav-stacked(使水平导航变为竖直导航),nav-justified(实现导航均等宽度排列) --> 关于我 那些年 碎碎念</li
: green;} a b cflex-grow 属性的默认值为 0,如果没有显示定义该属性,是不会拥有分配剩余空间权利的上面的例子中...="flex"> a b cflex-shrink 属性的默认值为 1,如果没有显示定义该属性,将会自动按照默认值 1 在所有子项宽度相加之后计算比率来进行空间收缩上面的例子中...,效果如下图所示:flex-direction 属性flex-direction 属性,定义子项的排列方向,默认是水平方向 row,竖直方向为 column取值子项排列方式rowflex 容器的 main...flex-start从行首开始排列,每行第一个弹性元素与行首对齐,同时所有后续的弹性元素与前一个对齐flex-end从行尾开始排列,每行最后一个弹性元素与行尾对齐,其他元素将与后一个对齐center伸缩元素向每行中点排列...当弹性容器只有一行时无效,当设置 flex-wrap:wrap; 并出现换行 多行 才生效,该属性与在 main 轴上对齐方式的 justify-content 属性类似值描述stretch拉伸所有行来填满剩余空间
特性: 弹性子元素默认是在同一行按照从左到右的顺序并排排列 弹性容器像块元素一样填满可用宽度,但是弹性子元素不一定填满其弹性容器的宽度 弹性子元素高度相等,该高度由它们的内容决定 还可以用 display...它会跟其他行内元素一起流式排列,但不会自动增长到 100% 的宽度。内部的弹性子元素跟使用 display: flex 创建的 Flexbox 里的弹性子元素行为一样。...子元素按照主轴线排列,主轴的方向为主起点(左)到主终点(右)。垂直于主轴的是副轴。方向从副起点(上)到副终点(下)。这些轴的方向可以改变。...加起来的宽度不一定正好填满弹性容器的宽度,可能会有留白。这时候,flex-grow 就是用来决定这些留白的。...弹性容器的高度由弹性子元素决定,它们会正好填满容器。在垂直的弹性盒子里,子元素的 flex-grow 和 flex-shrink 不会起作用,除非有“外力”强行改变弹性容器的高度。
例1: image.png 图中是一个div元素,可以看到设置了背景色之后,它的宽度自动填满了它所在的容器。...例2: image.png 我们设置左右定位值left:0; right:0;,它的宽度同样自动填充填满了它所在的容器,只不过它的容器是它的第一个父级相对定位元素。...以上两个例子是比较常见的,没有设置宽高也会自动填充所在容器。 若刚才的两个例子,如果设置了width或heigth,自动填充特性就会被覆盖。...2.绝对定位元素实现垂直居中: image.png 子元素设置了top:0;right:0;bottom:0;left:0;之后,没有设置宽高,absolute元素也自动填满了容器。...">列表1 列表2 列表3 </body
>item1 item2 item3 item4 item5 <script...在github上搜索iscroll,打开第一个,找到src下面的core.js。 1. 思路 首先既然要下拉,肯定会触发touchstart、touchmove以及touchend事件。...在default文件夹中有一个handleEvent.js。 好了,这个梗先告一段落。还是继续看源码。在handleEvent.js中,有这么一段东西。...h表示水平方向,v表示竖直方向。我们是要向下滑动,所以我们关注的是竖直方向。看第二个条件判断,如果是竖直方向,那么将水平方向的deltaX值变为0。这样做的目的是保持绝对的竖直方向。
默认情况下,block元素宽度会自动填满其父元素的宽度。 block元素可以设置width,height属性。块级元素及时设置了宽度,仍然是独占一行。...display:inline inline元素不会独占一行,多个相邻的行内元素会排列在同一行里,直到一行排列不下,才会新换一行,其宽度随元素的内容而变化。...inline元素的margin和padding属性,水平方向的padding-left、padding-right、margin-left、margin-right都产生边距效果,但竖直方向上的padding-top...之后的内联元素会被排列在同一行内。比如可以给一个link(元素)inline-block属性,使其既有block的宽度高度特性、又具有inline的可同行性。
DOCTYPE html> ...bootstrap/NewFolder1/bootstrap.min.css" rel="stylesheet" /> C 普通竖直按钮组...>C D 导出.xls格式 <a href="物流订单导出模板?
谈起Wookmark我想做过前端的大侠都不会觉得陌生,它就是远近闻名的流布局jQuery插件,这个插件使用起来非常简单,需要引入两个js: jquery实例:Wookmark使用方法 引入核心文件 写入JS初始化 $('#tiles li').wookmark(); 参数 $('.myElements').wookmark({ align...fillEmptySpace – 如果为 "true",在每一列的底部会用一个空白的item填满对齐。
/* 盒容器 */ display:flex; /* 弹性盒模型:给哪个元素设置后,哪个元素就是盒容器*/ flex 独占一行 inline-flex 行内 /* 给盒容器的属性:用来宏观调控项目的排列...默认交叉轴从上往下) wrap-reverse 交叉轴从下往上 /* 轴复合属性 */ flex-flow:row wrap; justify-content:flex-start; /* 定义主轴上项目的排列方式...center 主轴项目居中对齐 space-between 主轴项目两端对齐 space-around 主轴项目两侧间隔相等 align-content:strench; /* 定义多行的情况下交叉轴项目的排列方式...{ /* 子元素为盒项目 */ flex-grow:1; /* 项目从容器空白处各分得均匀等份来填满容器 */ 0 不均分(默认) 1 均分 flex-shrink:1; /* 当容器宽度不够时,对应缩小项目宽度...-- 块标签-->
领取专属 10元无门槛券
手把手带您无忧上云