带"layout"的属性是指整个控件而言的，是与父控件之间的关系，如 layout_gravity 在父控件中的对齐方式, layout_margin 是级别相同的控件之间的间隙等等； 不带"layout...3）android:layout_gravity是相对与它的父元素说的，说明元素显示在父元素的什么位置。...这里代表LinearLayout线性布局放在窗体的中间位置 注意有一点：android:layout_gravity 和 android:gravity 的区别 从名字上可以看到，android:gravity...LinearLayout保持其所包含的 widget或者是container之间的间隔以及互相对齐(相对一个控件的右对齐、中间对齐或者左对齐)。...// 距离上面的组件间隙 也就是距离 android:background="@drawable/btn_food_list" /> // 设置控件的背景图片
:背景图片 url("路径") background-repeat:平铺方式 默认x方向和y方向都平铺 属性:repeat,no-repeat,repeat-x,repeat-y (4...)长度宽度属性 width: height: (5)列表属性 list-style-type:列表项前的小标志 list-style-image:列表项前的小图片 url("") (6)显示属性...display:是否让标签元素显示 属性:none(消失),block(显示),inline(覆盖) (7)浮动元素 div是行元素 float:浮动方向 left,right 缺点：会对父元素和相邻元素没有设置浮动的...造成不可预测的后果 属性：clear:both /left/right 清除浮动 5.css的盒子模型 border:盒子的边框 padding:盒子内部的间隙 margin...:盒子外部与其他元素的间隙 border: border-width:边框宽度 border-style:边框的线型 border-color:边框颜色 padding padding
; 测量 单个盒子的宽高为 228 x 270 ; 水平方向上 , 模块之间的间隔 15 像素 , 垂直方向上 , 模块之间的间隔 也是 15 像素 ; 2、处理列表间隙导致意外换行问题...样式如下 : /* 网格商品展示 */ .box-bd { /* 处理列表间隙导致意外换行问题 一排有 5 个 228x270 的盒子 , 其中间隙 15 像素 228 * 5 +...5 个 228x270 的盒子 , 其中间隙 15 像素 228 * 5 + 15 * 4 = 1200 像素 , 但是最后一个盒子右侧添加 15 像素的右边距地话 , 会导致最后一个元素掉到第二行....all { /* 显示模式 - 块级元素 */ display: block; /* 总高度 40 像素 , 有 2 像素的上下边框 */ height: 38px; /* 边框 1 像素...的盒子 , 其中间隙 15 像素 228 * 5 + 15 * 4 = 1200 像素 , 但是最后一个盒子右侧添加 15 像素的右边距地话 , 会导致最后一个元素掉到第二行
3、其他浮动元素padding：间隙(设定间隙的宽度)margin：边距(用来设定边距的宽度)五、边框style：样式 (如：虚线等等)width：宽度color：颜色六、列表list-style-type...：列表样式类型 (用来设定列表项标记(list-item marker)的类型)list-style-image：列表样式图片 (用来设定列表样式图片标记的地址)list-style-position：...列表样式位置 (用来设定列表样式标记的位置)七、定位position：位置 width：宽度height：高度visibility：规定元素是否可见 (即使不可见，但仍占用空间，建议使用display来创建不占页面空间的元素...)Z-index：设置元素的堆叠顺序 (该属性设置一个定位元素沿z轴的位置，z轴定义为垂直延伸到显示区的轴。...视觉效果：cursor 规定要显示的光标的类型(鼠标放在指定位置鼠标的形状)filter注：请尽量少的使用分页属性，并且避免在表格、浮动元素、带有边框的元素中使用分页属性。
,默认有以下4种属性： -> block 在元素的前和后都会有换行 -> inline 在元素的前和后都不会有换行 -> list-item 与block相同,但增加了目录列表项标记 ->... margin: 设置元素边界与头元素之间的空隙大小. padding: 设置元素边界与内容之间的空隙大小.... border: 设置元素内间隙与外间隙之间的距离...指定上边框样式 列表属性: 列表属性用于设置列表项标记的类型,列表项图片和位置,以提供灵活列表显示. list-style-type:none 无标记 -> disc.../arrow.jpg'); CSS 盒子模式 所有的页面的元素都可以看成是一个盒子,占据一定的页面空间,占据的空间要比实际使用的空间要大得多,我们可以调整盒子的边框和距离,来调整盒子(页面和页面中的元素
是指一种兼容css在不同浏览器中正确显示的技巧方法，因为他们都属于个人对css代码的非官方的修改，或非官方的补丁。...有些人更喜欢使用patch（补丁）来描述这种行为。 Filter 它是一种对特定的浏览器或浏览器组显示或隐藏规则或声明的方法。本质上讲，filter是一种用来过滤不同浏览器的hack类型。...1）、图片有边框bug 描素:当图片加在ie上会出现边框 hack:给图片加border：0；或者border：0 none； 2）图片间隙 描素:div中的图片间隙bug 在div中插入图片时图片将...描素：各浏览器中按钮大小不一致 hack1：统一大小/（用a标记模拟） hack2:input外边套一个标签，在这个标签里写按钮的样式，把input的边框去掉 hack3:如果这个按钮是一个图片，直接把图片作为按钮的背景图即可...（也会受系统影响） hack：给右边的浮动元素添加声明 8）li列表的bug （1）当父元素li有float：left；子元素a没设置浮动的情况下会出现垂直bug； hack：给父元素li和子元素a都设置浮动
[attribute~=value]选择具有attribute属性且属性值为一用空格分隔的字词列表，其中一个等于value的元素。 ... column-count 设置或检索对象的列数 column-gap 设置或检索对象的列与列之间的间隙 ...column-rule 设置或检索对象的列与列之间的边框 column-rule-width 设置或检索对象的列与列之间的边框厚度 column-rule-style... 设置或检索对象的列与列之间的边框样式 column-rule-color 对象的列与列之间的边框颜色 column-span ...HTML样式分开 separate | collapse border-spacing 设置或检索当表格边框独立时，行和单元格的边框在横向和纵向上的间距
每列左右间隙各15px .col-{1到12} 定义在所有屏幕下的列宽 .col-{sm|md|lg|xl}-{1到12} 定义在指定屏幕下该列占据的列宽，sm:屏幕>=576px、md:屏幕>=720px...，且可以将小写字母转换为大写字 .list-unstyled 移除默认的列表样式，列表项中左对齐 ( 和 中)。....list-group 定义列表容器类 .list-group-item 定义列表项目类 .active [列表项目]激活状态下的列表项，蓝色背景，白色字 .disabled [列表项目]禁用状态下的列表项...、warning、info、dark、light} 定义列表项的背景色。....bg-{primary、secondary、success、warning、danger、info、dark、light} 定义卡片的背景色,定义在卡片容器上 【边框】 .border 含有边框
假设，我们要这么一个效果呢虚线效果呢： 此时，由于无法控制 border: 2px dashed #aaa 产生的虚线的单段长度与线段之间的间隙，border 方案就不再适用了。...那么，在 CSS 中，我们还有其它方式能够实现带圆角，且虚线的单段长度与线段之间间隙可控的方式吗？ 本文，我们就一起探讨探讨。...此时，这样的背景效果可用于创建一种渐变黑色到透明的重复纹理效果： 在这个基础上，我们只需要给这个图形上层，再利用伪元素，叠加一层颜色，就得到了我们想要的边框效果，并且，边框间隙和大小可以简单调整。...并且，不管是哪个方法，都存在一定的瑕疵。譬如如果希望边框中间不是背景色，而是镂空的，上述两种 CSS 方式都将不再使用。 因此，对于带圆角的虚线边框场景，最佳方式一定是 SVG。...通过一个动图，简单感受一下： 总结一下 本文介绍了 2 种在 CSS 中，不借助切图和 SVG 实现带圆角的虚线边框的方式： 重复角向渐变叠加遮罩层 重复线性渐变叠加遮罩层 当然，两种 CSS 方式都存在一定瑕疵
* 像文本一样 排列block元素 * 没有 清除浮动 等问题，简单易用 * 但是需要 处理间隙 多个inline-block之间的间隙 相当于 文字与文字 之间的间隙。...不管使用什么字体，两个字之间 始终是有间隙的。 所以 间隙就出现在了 inline-block上面。 解决办法： 1....把inline-block元素 之间的 空隙注释掉，就可以了。 还是推荐使用 设置字体 的方式，来处理inline-block之间的间隙。...留下自适应的空间：和两列布局类似，一列固定宽度 另一列随屏幕自适应。 (类似的思路，在屏幕顶部 给logo固定宽度 logo右侧的纯色背景 可以自适应)。...间隙原因：字符间距 解决方案：1.消灭空白字符：注释掉 标签之间的空白字符 2.消灭字符间距：把父级元素的字体大小设置为0，再设置元素自身的字体大小。 4.
下的li，#idcss li{}意思是id的值是idcss里面的li）注意：p.mycss和p mycss的区别，一个是p中class值为mycss，最后的是p包含的元素中class的值为mycss 4...）；行间距使用line-height，letter-spacing是字间距，图片对齐使用其父元素的对齐方式 6、边框重叠使用border-collapse:collapse；去掉a标签链接的文字下划线使用...div设置成relative z-index：空间定位，z-index值大的在小的上面 9、CSS控制盒子模型 所有的div都可以看成盒子，其中内容（content）、边框（border）、间隙(padding...，内容与边框的距离)、间隔（margin块和块的距离） 注意：设置的width和height的大小都指的是width+padding的值，IE不支持border-style，而且设置背景ie影响的是内容和间隙...10、设计和编辑div+CSS心得 根据设计的ps图，先把页面划分成几个板块（越少越好），然后几个板块的关系以及margin和padding和边框都设计好（做到心中有图，胸有成竹），继续写成对的div
因为中间的菜单是一个列表，所以根据这个图我们可以想到我们所要写的弹框的布局大致为： LinearLayout> LinearLayout> 列表（或者ListView）--> LinearLayout> 的，所以我们只需要改变底部的DecorView的背景色即可。...我们知道最后我们的View是在window下面的，我们只需要让window的Grivaty属性是Bottom，这样，里面的元素都是居于底部即可。...我们发现，果然二边的间隙变小了很多。但是还是有间隙，既然我们都已经把window的宽度变为match_parent,还是没填充，说明应该是有padding值。
li { margin: 8px; } 那么列表项之间的间距是多少？...就是说这两个外边距没被“墙”隔开，“墙”分3种： 种族：双方必须都是流内块级盒 信仰：处于同一个块格式化上下文 地域：二者之间没有行框（line box），空隙，内边距和边框 到这里，“相邻”已经很清楚了...，我们再反推外边距合并的定义： 非根元素的相邻垂直外边距会合并，带有间隙的话，合并受限 受限是指带有间隙元素自身上下边距相邻的话，只能与兄弟元素的外边距合并，无法和父元素的下外边距合并 三.合并条件推论...，除非该兄弟（元素）具有间隙 流内块级元素的上外边距会与它的第一个流内块级孩子的上外边距合并，条件是该元素没有上边框和上内边距，并且其孩子不具有间隙 一个’height’为’auto’并且’min-height...’为0的流内块级盒的下外边距会与它的最后一个流内块级孩子的下外边距合并，条件是该盒没有下内边距和下边框，并且其孩子的下外边距没有与具有间隙的上外边距合并 盒自身的外边距也会合并，条件是’min-height
盒子模型有元素的内容、边框（border）、内边距（padding）、和外边距（margin）组成。...盒子里面的文字和图片等元素是 内容区域盒子的厚度 我们成为盒子的边框盒子内容与边框的距离是内边距（类似单元格的 cellpadding)。...**是指 边框与内容之间的距离。**当我们给盒子指定padding值之后， 发生了2件事情： 内容和边框 有了距离，添加了内边距。 盒子会变大了。...margin就是控制盒子和盒子之间的距离。margin值的简写 （复合写法）代表意思 跟 padding 完全相同。...div 之间有间隙，不方便处理 */ /* display: inline-block; */ /* 设置浮动属性，可以让 div 水平排列，并且没有间隙 */ float
Nine-Patch 是一种被特殊处理的 .png图片，能够指定那些区域可以被拉伸，那些区域不可以。 来看看 Nine-Patch 图片的实际作用。 ? 首先我们用一张普通的图片作为背景 的四个边框绘制一个个的小黑点。在上边框和左边框的部分表示当前图片需要拉伸的时候就会拉伸黑色点标记的区域，在下边框和右边框的部分表示内容会被放置的区域。...3.7.2 编写精美的聊天界面 聊天界面肯定有收到的消息和发送的消息，上面我们已经把发送消息的背景图制作好了，再制作一张发送消息的背景图。 图片资源都准备好了，就可以写代码了。 编写主页面布局 LinearLayout> 这里我们把接受消息和发送消息的布局都写进来了，代码中根据消息的类型来调用 visible 方法，显示对应的消息。...count:"+count,count%2); list.add(msg); } } } notifyItemInserted() 方法，用于通知列表有新的数据插入了
LinearLayout 线性布局 LinearLayout 几个重要的 XML 属性 xml 属性 说明 android:id 为组件设置一个资源 id，然后在 Java 中可以通过 ...:gravity android:gravity 本元素所有子元素的重力方向，处于怎样子的位置 ，有： top 将对象放在其容器的顶部，不改变其大小. ...设置内边距(填充)属性 上面这些属性用于设置组件的内边距，内边距主要用于设置组件边框和子组件之间的间隙 6....ImageView 图像视图 3.1 常用属性 ImageView 有 2中属性，分为为： src， backgroud，他们之间的区别是： background 通常指的都是 背景, 而 src 指的是...Switch 开关 9.1 常用属性 允许我们在两个状态之间切换，有点类似于现在流行的滑动解锁 Switch (开关) 也继承自 Button 和 CompoundButton，所以拥有它们的属性、方法和事件
~' ), ), ); } } 接下来我们就以Center为例来讲解一下Container和Text组件。...(如果是负值，会让字母变得更紧凑)，一般用于中文的文字间隙 wordSpacing: 2.0,//单词间隙(如果是负值，会让单词变得更紧凑，用于设置英文中的单词与单词的间隙...,//Container的背景色 border: Border.all( color: Colors.blue,//Container的边框颜色...(10),//设置Container边框的圆角 ), ), padding: EdgeInsets.all(20),//设置Container内边距...(100, 0, 0),//形变效果 alignment: Alignment.bottomLeft,//配置Container内部的元素的位置（这里表示，child元素位于Container
，一种是 W3C 标准盒模型，另一种是 IE 盒模型（又称怪异盒模型） W3C 标准盒模型 元素盒模型宽高 = 内容的宽高 + 内边距padding + 边框border + 外边距margin 背景颜色从...border-box 开始生效的，背景图像从 padding-box 开始生效的，CSS 3 属性 : content-box / padding-box / border-box 可以改变背景图像从盒模型的哪部分开始生效...通过盒模型的外边距 margin 拉开各元素之间的间隙、距离，使用 padding 来撑开自身的宽高 IE 盒模型 在低版本 IE 里，若不添加 的盒模型很相似，但有一点是非常不同的，这就是：内边距和边框并不被包含在计算的范围内，这就意味着，如果元素也有内边距 padding 和边框 border，那么实际内容区域将会缩小，为它们腾出空间...在实际设计中，我们会发现，IE 盒模型更容易进行控制，我们一般先将整个容器的尺寸先确定，然后再填充具体的内容，通过 padding 来调整内容的具体位置，通过 margin 来调整容器与其他元素之间的间隙
-- 这里要折行或空格 --> ④ 复杂现象 多年前曾分享过“text-align:justify下列表的两端对齐布局”的技术，其中，为了让任意个数的列表最后一行也是对齐排列，在列表最后会辅助列表等宽的空标签元素来占位...同样的，在白色背景下，似乎看上去效果还不赖，但是，如果给div容器加个背景色~~ ? ? ? ? 会惊讶的发现，下面多了很大一块间隙（如下截图）： ?...按照之前问题解决方法，我们可以直接来个line-height:0解决垂直间隙问题： div { line-height: 0; } 结果图片和图片之间的间隙是没有了，但是，图片和最后的占位元素之间依然有个几像素的间距...简单现象的背后往往有大的学问，接下来是本文的高潮了，究其原因，要说到inline-block元素和基线baseline之间的一些纠缠的关系。...第一个框框里面没有内联元素，因此，基线就是容器的margin下边缘，也就是下边框下面的位置；而第二个框框里面有字符，纯正的内联元素，因此，第二个框框就是这些字符的基线，也就是字母x的下边缘了。
li { /* 设置 无序列表项 从左到右排列 */ float: left; } /* 设置无序列表中的链接样式 */ .nav ul li a { /* 显示模式 块级元素 */ display....all { /* 显示模式 - 块级元素 */ display: block; /* 总高度 40 像素 , 有 2 像素的上下边框 */ height: 38px; /* 边框 1 像素...*/ font-size: 12px; color: #a5a5a5; } /* 网格商品展示 */ .box-bd { /* 处理列表间隙导致意外换行问题 一排有 5 个 228x270...的盒子 , 其中间隙 15 像素 228 * 5 + 15 * 4 = 1200 像素 , 但是最后一个盒子右侧添加 15 像素的右边距地话 , 会导致最后一个元素掉到第二行..., 这里需要将盒子宽度从 1200 像素修改为 1215 像素 正好放 5 盒子 + 5 间隙*/ width: 1215px; } /* 网格中 ul 列表中每个列表项样式
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
腾讯会议
云直播
