场景分析 一个元素，它有可能有背景，那我要它的背景居中对齐 一个元素，它还有可能有个父级元素，那我要它居中于其父级元素 一个元素，它也有可能还带有一些子内容，我要让它的子内容居中 场景建模 根据场景分析提出的一些假设...背景居中 我们做这样一件事，在一个div容器中，我们通过background-image属性引入一张背景，之后我们期望这张引入的背景呢，它能够水平垂直居中于宿主元素。...一个是设置背景图片怎么铺宿主元素（默认是铺满的）更美丽的，另一个是设置背景图片相对于宿主元素的的位置，你可以传像素、百分比、相关方向单词（top、bottom、left、right）给它。...“父级元素相对定位，子级元素绝对定位”这句话浓缩后的叫法。...这样子的话，父级元素与子级元素他们之间空出来的部分都会被这个margin均匀撑开。
: center background-size: 像素值/ 100% 表示充满 案例: 社交账号注册按钮效果 展示效果 行内块级元素对齐方式的一个做法是外层套一个div, 然后设置text-align...left, top, right, bottom fixed 固定定位 相对于浏览器窗口定位 absolute 绝对定位 相对于父元素 relative相对定位 相对于原来的标签 其他的一些选择器...-- 用于包含二维码所有的内容，显示在页面中的底部 --> <!...采用绝对定位, 相对于父容器....大概是(180-44) / 2 = 68 的样子, 给我的感觉是距离父容器左边的距离. 默认display: node, 但是方式去就是指定的block的效果
百分比 用于设置元素的宽度时，它总是相对于其直接父元素的大小。如果没有定义的父级，则默认情况下 body 会被视为父级。...em em 总是相对于它的直接父级的字体大小。1em == 父字体大小的大小。如果没有覆盖，默认字体大小为 16px，假设在父元素中字体大小为 48px，然后在子元素中为 1em == 48px。...因此，元素 font-size 会根据设备大小而变化，元素周围的间距也将分别发生变化。 rem r 代表根 em，与 em 不同，它总是相对于根字体大小，无论它的下一个父元素具有什么字体大小。...让我们考虑以下示例，其中一个子项的宽度相对于父项的大小，而另一个子项的宽度相对于根。...让我们考虑以下示例，其中一个子元素的高度与父级大小有关，而另一个子元素的高度与根相关。
】与其RelativeLayou【t父对象的起始边缘】对齐的规则 ALIGN_PARENT_TOP 使子项的上边缘与其RelativeLayout父项的上边缘对齐的规则 ALIGN_RIGHT 将孩子的右边缘与另一个孩子的右边缘对齐的规则...ALIGN_START 将一个孩子的起始边缘与另一个孩子的起始边缘对齐的规则 ALIGN_TOP 将孩子的上边缘与另一个孩子的上边缘对齐的规则 BELOW 将孩子的上边缘与另一个孩子的下边缘对齐的规则...CENTER_HORIZONTAL 使子级相对于其RelativeLayout父级的边界水平居中的规则 CENTER_IN_PARENT 使子项相对于其RelativeLayout父项的边界居中的规则...CENTER_VERTICAL 使子项相对于其RelativeLayout父项的边界垂直居中的规则 END_OF 将孩子的起始边缘与另一个孩子的终止边缘对齐的规则 LEFT_OF 将孩子的右边缘与另一个孩子的左边缘对齐的规则...RIGHT_OF 将孩子的左边缘与另一个孩子的右边缘对齐的规则 START_OF 将孩子的末端边缘与另一个孩子的起始边缘对齐的规则 TRUE 为真 subject参数是我们另外的控件ID。
定位：将盒子定在浏览器的某一个位置——CSS 离不开定位，特别是后面的 js 特效。 6.2、什么是浮动(float) 元素的浮动是指设置了浮动属性的元素会脱离标准普通流的控制移动到指定位置。...浮动元素会生成一个块级框，而不论它本身是何种元素。 生成的块级框和我们前面的行内块极其相似。下面举例我们生活中很常见的一个样式：div 水平排列。...浮动的元素互相贴靠一起的，但是如果父级宽度装不下这些浮动的盒子， 多出的盒子会另起一行对齐。 6.4、浮动小结 我们使用浮动的核心目的——让多个块级盒子在同一行显示。...7.3.2、相对定位(relative) 相对定位是元素相对于它原来在标准流中的位置来说的。他有两个特点： 相对定位是相对于自己原来在标准流中位置来移动的。...能 要和定位父级元素搭配使用 固定定位fixed 完全脱标，不占有位置 相对于浏览器移动位置 能 单独使用，不需要父级 边偏移需要和定位模式联合使用，单独使用无效； top 和 bottom 不要同时使用
因为，最近都没有一个非static的父元素，absolute会相对于ICB 2.宽和高 无论什么时候，要记得水平方向，宽默认取全部；垂直方向，高默认取0。...2.盒子从顶端开始垂直地一个接一个地排列，盒子之间垂直的间距是由 margin 决定的。 3.在同一个 BFC 中，两个相邻的块级盒子的垂直外边距会发生重叠。...（即是0） 3.兄弟元素，一个float 如果是一个float另一个不是，则正常情况下，没有float的那个直接无视float的那个，因为用了float脱离文档流。...不能 能 水平对齐方式 父元素的text-align影响 默认左对齐 垂直对齐方式 自己的或者父为table-cell时的vertical-align 默认baseline 4.2IFC 不同于BFC...，IFC是默认地、隐式的创建，当一个区域内仅仅包含水平排列的元素才生成（文本、行级元素、行级块元素），可以通过vertical-align来设置垂直方向上的对齐。
因为，最近都没有一个非static的父元素，absolute会相对于ICB 2.宽和高 无论什么时候，要记得水平方向，宽默认取全部；垂直方向，高默认取0。...2.盒子从顶端开始垂直地一个接一个地排列，盒子之间垂直的间距是由 margin 决定的。 3.在同一个 BFC 中，两个相邻的块级盒子的垂直外边距会发生重叠。...还有一种方法，在父元素后面（：：after）加上一个尺寸为0的伪元素，clear：both，使得父元素换行显示，识别前一行的高度（即是0） 3.兄弟元素，一个float 如果是一个float另一个不是，...如果无float为bfc，则会像加了float一样紧跟后面 一个float，一个正常，正常的元素无视float的元素： ? 另一个是bfc： ?...，IFC是默认地、隐式的创建，当一个区域内仅仅包含水平排列的元素才生成（文本、行级元素、行级块元素），可以通过vertical-align来设置垂直方向上的对齐。
ohos:left_of="$id:component_id" right_of 将左边缘与另一个子组件的右边缘对齐 引用 仅可引用DependentLayout中包含的其他组件的id。...ohos:right_of="$id:component_id" start_of 将结束边与另一个子组件的起始边对齐 引用 仅可引用DependentLayout中包含的其他组件的id。...ohos:start_of="$id:component_id" end_of 将起始边与另一个子组件的结束边对齐 引用 仅可引用DependentLayout中包含的其他组件的id。..." align_left 将左边缘与另一个子组件的左边缘对齐 引用 仅可引用DependentLayout中包含的其他组件的id。...:align_top="$id:component_id" align_right 将右边缘与另一个子组件的右边缘对齐 引用 仅可引用DependentLayout中包含的其他组件的id。
，相对于static定位以外的一个父元素进行定位。...obj.a() ; 调用 obj 实例上的方法 a，该实例上目前有两个 a 方法：一个是内部属性方法，另一个是原型上的方法。...执行script代码，打印出7，至此第一轮执行完成； 指定微任务队列中的代码，打印出resolve的结果：5； 执行宏任务中的第一个定时器setTimeout，首先打印出2，然后遇到 Promise.resolve...().then()，将其加入到微任务队列； 执行完这个宏任务，就开始执行微任务队列，打印出3； 继续执行宏任务队列中的第二个定时器，打印出6。...} .left { width: 200px; background: tomato; } .right { flex: 1; background: gold; } 利用绝对定位，将父级元素设置为相对定位
如果指定两个值，两个值都是方位名字，则两个值前后顺序无关，比如left top和top left效果一致 如果只指定了一个方位名词，另一个值默认居中对齐。...浮动 让盒子从普通流中浮起来,主要作用让多个块级盒子一行显示。 C. 定位 将盒子定在浏览器的某一个位置——CSS 离不开定位，特别是后面的 js 特效。 「2....相对定位(relative)」 相对定位是元素相对于它原来在标准流中的位置来说的。 相对于自己原来在标准流中位置来移动的 原来在标准流的区域继续占有，后面的盒子仍然以标准流的方式对待它。 「5....能 要和定位父级元素搭配使用 固定定位fixed 完全脱标，不占有位置 相对于浏览器移动位置 能 单独使用，不需要父级 注意： 边偏移 需要和 定位模式 联合使用，单独使用无效； top 和 bottom...3.2 去除图片底侧空白缝隙 原因：图片或者表单等行内块元素，他的底线会和父级盒子的基线对齐。 就是图片底侧会有一个空白缝隙。
不需要了解） 控制标签元素样式 小心得： 样式有继承(遗传)效果（子元素将继承父元素的样式，如果子元素单独设置了该样式，那么子元素的样式就是子元素单独设置的样式） （可以做统一设置） 注意在调样式时...} 中间一堆css代码 .d1{color: red;}，你会发现 d1的css代码中color不生效，冲突，且优先级不够） 注意行内元素（标签）和块级元素的区别 行内元素的宽度(width)、...text-align: right; text-align: justify; 好像没效果 垂直对齐 line-height: 50px; 垂直对齐（这个50是它父标签的高度...，在父标签中垂直对齐） ------------文字装饰（可以改a标签属性）-------- text-decoration: underline; text-decoration...相对定位 相对于标签自身原来的位置做一个定位 绝对定位 相对于已经定位过的父标签做一个定位（购物车展开）*** 当只给你一个父标签的属性让你做定位时，就用绝对定位 固定定位 相对于浏览器窗口
- Android 应用界面 界面是布局和微件的层次结构形式构建而成。布局是 ViewGroup 对象，即控制其子视图在屏幕上的放置方式的容器。微件是 View 对象，即按钮和文本框等界面组件。...View 对象通常称为“微件”，可以是众多子类之一，例如 Button 或 TextView。...应用中的一个 Activity 会被指定为主 Activity，这是用户启动应用时出现的第一个屏幕。然后，每个 Activity 可以启动另一个 Activity，以执行不同的操作。...您可以将片段视为 Activity 的模块化组成部分，它具有自己的生命周期，能接收自己的输入事件，并且您可以在 Activity 运行时添加或移除片段（这有点像可以在不同 Activity 中重复使用的...Fragment 和子级 Fragment 之间传递结果 如需将结果从子级 Fragment 传递到父级 Fragment，父级 Fragment 在调用 setFragmentResultListener
每个视图的位置可以指定为相对于同级元素的位置（例如，在另一个视图的左侧或下方）或相对于父级 RelativeLayout 区域的位置（例如在底部、左侧或中心对齐）。...如果不添加其他配置，它们默认是在 RelativeLayout 的左上角。 在 RelativeLayout 中，子 View 可以根据另一个子 View 来确定位置。...有很多布局属性可用于 RelativeLayout 中的视图，部分示例包括： android:layout_alignParentTop 如果为 "true"，会将此视图的上边缘与父视图的上边缘对齐。...android:layout_centerVertical 如果为 "true"，会将此子级在父级内垂直居中。...子View设置了不同的属性，分布在父View的上下左右中各个地方。
前言 小伙伴们，在上文中我们介绍了Android布局TableLayout，本文我们继续盘点介绍Android开发中另一个常见的布局，绝对布局AbsoluteLayout。...它允许您以绝对坐标的方式精确定位视图，即可以通过指定相对于父容器左上角的精确坐标来确定视图的位置。...android:layout_alignParentBottom、android:layout_alignParentLeft和android:layout_alignParentRight： 这些属性用于将控件相对于父布局的顶部...例如，android:layout_alignParentTop="true"将会将控件的顶部与父布局的顶部对齐。...例如，android:layout_centerHorizontal="true"将会将件在水平方向上居中对齐。
font-style:italic normal文本正常显示 italic文本斜体显示 oblique文本倾斜显示 文本属性 行高line-height line-height:50px 可以将父元素的高度撑起来...，内联元素，内联壮元素 元素分类转换display block,将元素转换为块级元素 inline,将元素转换为行级元素 inline-block,将元素转换为内联块元素 none将元素隐藏 描边border...， 知道浮动元素的外边缘遇到包含框或者另一个浮动元素为止，且允许文本和内联元素环绕它 浮动会产生块级框，而不管该元素本身是什么 清除浮动带来的影响 clear清除浮动 none不清除,left不允许左边有浮动对象...） 如果想为元素设置层模型中的绝对定位，需要设置position:absolute绝对定位，这条语句的作用加你个元素 从文档流中拖出来，然后使用left,right,top,bottom属性相对于其最接近的一个...具有定位属性的父包含块进行绝对定位。
)，第四个值为alpha, 指定了色彩的透明度/不透明度，它的范围为0.0到1.0之间 二、文本属性 文字对齐 text-align 属性规定元素中的文本的水平对齐方式。...浮动元素会生成一个块级框，而不论它本身是何种元素。 关于浮动的两个特点： 浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。...relative（相对定位） 相对定位是相对于该元素在文档流中的原始位置，即以自己原始位置为参照物。有趣的是，即使设定了元素的相对定位以及偏移值，元素还占有着原来的位置，即占据文档流空间。...重点：如果父级设置了position属性，例如position:relative;，那么子元素就会以父级的左上角为原始点进行定位。...注意点： 一个元素若设置了 position:absolute | fixed; 则该元素就不能设置float。这 是一个常识性的知识点，因为这是两个不同的流，一个是浮动流，另一个是“定位流”。
在开发过程中 我们会通过通配符+box-sizing ,将元素的标准统一，解决不同浏览器的兼容问题 ，box-sizing可选属性：content-box（content）、border-box（content...拓展知识点 margin属性： 行内元素是没有上下外边距的，只有左右外边距，所以尽量不要设置行内元素的内外上下边距，设计宽高也是无效的 两个相邻的块级元素一个设置了margin-bottom、另一个设置...作用是能够提供一个有效的帮助我们管理一个容器中子元素的排列、对齐和分配空白空间。...答案解析： 清除浮动是指的是父元素中的子元素设置float导致父元素的高度为0的情况 解决方案 父元素设置属性为：overflow:hidden (实质是触发BFC) 父元素中增加一个新的元素，添加属性...用来为css增加一些编程的特性，无需考虑浏览器的兼容性问题 同时扩展了@import指令的能力，通过编译环节将切分后的文件重新合并一个大文件。
浮动布局 什么是浮动布局： 所谓 css 浮动就是浮动元素会脱离文档的普通流，根据 float 的值向左或向右移动，直到它的外边界碰到父元素的内边界或另一个浮动元素的外边界为止。...relative 相对定位，元素保留在标准流中所占用的位置，但实际是边框及以内的部分将显示在偏移之后的位置。在相对定位中，实际上元素并未脱离标准流，所以浏览器还是会区分它是否是块级或其他类型的元素。...fixed 固定定位，固定定位和绝对定位相似，但它的偏移量固定的相对于浏览器窗口，它会脱离标准文档流，并且浏览器把他们一致视作块级元素。...如果定位元素的父元素也设置了 z-index 属性，那么子元素的 z-index 属性将失效，并且最终是根据父元素的 z-index 属性来判断覆盖关系。...属性垂直对齐，可能是底部对齐，顶部对齐，也可能是基线对齐（默认）； 是当 IFC 中有块级元素插入时，会产生两个匿名块将父元素分割开来，产生两个IFC； 能把在一行上的框都完全包含进去的一个矩形区域，
颜色是通过CSS最经常的指定： 十六进制值 – 如: ＃FF0000 一个RGB值 – 如: RGB(255,0,0) 颜色的名称 – 如: red 文字属性 文字对齐 text-align 属性规定元素中的文本的水平对齐方式...浮动元素会生成一个块级框，而不论它本身是何种元素。 关于浮动的两个特点： 浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。...relative（相对定位） 相对定位是相对于该元素在文档流中的原始位置，即以自己原始位置为参照物。有趣的是，即使设定了元素的相对定位以及偏移值，元素还占有着原来的位置，即占据文档流空间。...重点：如果父级设置了position属性，例如position:relative;，那么子元素就会以父级的左上角为原始点进行定位。...注意点： 一个元素若设置了 position:absolute | fixed; 则该元素就不能设置float。这 是一个常识性的知识点，因为这是两个不同的流，一个是浮动流，另一个是“定位流”。
，子元素的绝对定位都是相对于父元素进行定位 如果希望子元素相对于父元素进行定位，又不希望父元素脱标，常用解决方案是: 父元素设置position: relative(让父元素成为定位元素，而且父元素不脱离标准流...) 子元素设置position: absolute 简称为“子绝父相” 当然，也有 子绝父绝 子绝父固 不要死记 1.2. position设置absolute/fixed特性 将position设置为...(右)浮动，浮动元素的左(右)边界不能超出包含块的左(右)边界 浮动规则三 规则三: 浮动元素之间不能层叠 如果一个元素浮动，另一个浮动元素已经在那个位置了，后浮动的元素将紧贴着前一个浮动元素(左浮找左浮...，右浮找右浮) 如果水平方向剩余的空间不够显示浮动元素，浮动元素将向下移动，直到有充足的空间为止 浮动规则四 浮动元素不能与行内级内容层叠，行内级内容将会被浮动元素推出 比如行内级元素、inline-block...元素、块级元素的文字内容 浮动规则五 规则五: 行内级元素、inline-block元素浮动后，其顶部将与所在行的顶部对齐 2.3.
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
