每个值可以是数值，或百分比，或 auto： 当只指定一个值时，该值会统一应用到全部四个边的外边距上。 指定两个值时，第一个值会应用于上边和下边的外边距，第二个值应用于左边和右边。...指定三个值时，第一个值应用于上边，第二个值应用于右边和左边，第三个则应用于下边的外边距。 指定四个值时，依次（顺时针方向）作为上边，右边，下边，和左边的外边距。 外边距的作用：使块级元素居中？...在现代浏览器中实现水平居中，可以使用 display: flex; justify-content: center;。 不过在 IE8-9 这样的不支持弹性盒布局的旧式浏览器中，上述代码并不会生效。...也就是说，如果你将一个元素的width设为100px，那么这100px会包含它的border和padding，内容区的实际宽度是width减去(border + padding)的值。...大多数情况下，这使得我们更容易地设定一个元素的宽高。
2009 年，W3C 提出了一种新的方案 —-Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。...Flex 实现两栏布局 (左固定，右自适应)； Flex 实现三栏布局 (左右固定，中间自适应)； Flex 实现元素水平垂直居中； flex 怎么实现盒子 1 在最左边，2 、3 在最右边； 如何解决...（水平居中） align-items: center; // 子项在交叉轴（垂直居中） 方法二： 父元素加上 display:flex; 时 ，给子项加上 margin: auto; 可实现在垂直方向居中...4、flex 怎么实现盒子 1 在最左边，2 、3 在最右边 在父容器.container 中构建两个子项 .left 和.right （.right 不要加宽度） 给父容器加上以下属性，使元素....left 和.right 两端对齐 justify-content: space-between;// 两端对齐 display: flex; // 弹性布局 在.right 中构建两个子元素.item1
RelativeLayout 相对布局：是一个ViewGroup以相对位置显示它的子视图（view）元素，一个视图可以指定相对于它的兄弟视图的位置（例如在给定视图的左边或者下面）或相对于 RelativeLayout...ID的控件之下; android:layout_toLeftOf 控件的右边缘与给定ID的控件左边缘对齐; android:layout_toRightOf 控件的左边缘与给定ID的控件右边缘对齐; android...控件的右边缘与给定ID的右边缘对齐; 3、居中，例如： android:layout_centerInParent=“true” android:layout_centerHorizontal 水平居中...本元素的上边缘和某元素的的上边缘对齐 android:layout_alignLeft 本元素的左边缘和某元素的的左边缘对齐 android:layout_alignBottom 本元素的下边缘和某元素的的下边缘对齐...android:layout_alignRight 本元素的右边缘和某元素的的右边缘对齐 未完，，约束布局在路上。
贴紧父元素的下边缘 android:layout_alignParentLeft 贴紧父元素的左边缘 android:layout_alignParentRight 贴紧父元素的右边缘 android...id 的引用名“ @id/id-name ” android:layout_below 在某元素的下方 android:layout_above 在某元素的上方 android:layout_toLeftOf...在某元素的左边 android:layout_toRightOf 在某元素的右边 android:layout_alignTop 本元素的上边缘和某元素的的上边缘对齐 android:layout_alignLeft...本元素的左边缘和某元素的的左边缘对齐 android:layout_alignBottom 本元素的下边缘和某元素的的下边缘对齐 android:layout_alignRight 本元素的右边缘和某元素的的右边缘对齐...其时就是让它居中显示。 它还能够动态加入里面的每行每列。
: 0px auto; } /* 2.不定宽块元素由于网页分页我们不能预判，所以我们不能提前设置它的宽度，但我们可以使用以下三种方式让其居中 */ /* A: 加入Table标签 */ table {...> 指定两个值时，第一个值会应用于上边和下边的外边距，第二个值应用于左边和右边。 > 指定三个值时，第一个值应用于上边，第二个值应用于右边和左边，第三个则应用于下边的外边距。...例如，当一个元素出现在另一个元素上面时，第一个元素的下外边距与第二个元素的上外边距会发生合并。 示例，在下面的code中，两个相邻的元素之间存在20px的外边距。...由于CSS外边距合并的规则，这两个外边距会合并为一个外边距，所以实际上这两个元素之间的垂直距离是20px，而不是40px。...语法参数: /* 在一条声明中设置多个轮廓属性的简写属性 */ /* 属性参数可使用以下一个、两个或三个值来声明，且顺序不重要。
居中和倾向 居中 在相对定位一小节，我们了解了两个控件之间添加约束，现在来看看一个控件和父布局（ConstraintLayout）建立约束。...这种情况就感觉像是控件两边有两个反向相等大小的力在拉动它一样，所以才会产生控件居中的效果。...倾向 在这种约束是同向相反的情况下，默认控件是居中的，但是也可以像拔河一样，让两个约束的力大小不等，这样就产生了倾向，其属性是： ? ?...下面这段代码就是让左边占30%，右边占70%（默认两边各占50%），这样左边就会短一些，如图5所示，此时代码是这样的： ? 通过设置倾向，可以非常便捷地实现屏幕适配。...例如，一个Chain中包含两个使用MATCH_CONSTRAINT的元素，第一个元素使用的权重为2，第二个元素使用的权重为1，那么被第一个元素占用的空间是第二个元素的2倍。
居中 在相对定位一小节，我们了解了两个控件之间添加约束，现在来看看一个控件和父布局（ConstraintLayout）建立约束。...layout_constraintRight_toRightOf="parent/> 这种情况就感觉像是控件两边有两个反向相等大小的力在拉动它一样...Fig. 5 - 带倾向的居中 下面这段代码就是让左边占30%，右边占70%（默认两边各占50%），这样左边就会短一些，如图5所示，此时代码是这样的： <android.support.constraint.ConstraintLayout...模式 CHAIN_PACKED Chain中的所有控件合并在一起后在剩余的空间中居中 ?...例如，一个Chain中包含两个使用MATCH_CONSTRAINT的元素，第一个元素使用的权重为2，第二个元素使用的权重为1，那么被第一个元素占用的空间是第二个元素的2倍。
贴紧父元素的下边缘 android:layout_alignParentLeft 贴紧父元素的左边缘 android:layout_alignParentRight 贴紧父元素的右边缘 android...ID android:layout_below 在某元素的下方 android:layout_above 在某元素的的上方 android:layout_toLeftOf 在某元素的左边 android...:layout_toRightOf 在某元素的右边 android:layout_alignTop 本元素的上边缘和某元素的的上边缘对齐 android:layout_alignLeft 本元素的左边缘和某元素的的左边缘对齐...如果是ViewGroup组件如LinearLayout的话，则为设置它内部view组件的对齐方式。 layout_gravity是设置本元素自身相当于父元素的对齐方式。...Android 资源管理框架又是如何快速定位到最匹配资源的 // 主要基于两个文件： 资源 ID 文件 R.java：赋予每一个非 assets 资源一个 ID 值，这些 ID 值以常量的形式定义在
输入n n为数组元素的个数 2. 输入n个数 存储到一个数组中 3. 用Arrays对数组进行排序 4....找出最大的偶数(输出内容的最后一个元素后面不带空格,输出的最后一个元素是最大的偶数) 5. 输出奇数 6....n的数组，请将数组中元素按照奇偶性重新划分，所有奇数靠左边，所有偶数靠右边，然后分别对奇数、偶数部分进行排序 请尽可能实现通过一次遍历并且原地操作（即不得借助其他数组）进行奇偶划分。...Input 输入有两行，第一行输入一个数字n表示数组的长度， 第二行依次输入n个数字，表示数组的元素值。...(" ") 所以要判断是否是最后一个元素 // 已知奇数在左 偶数在右 并且是按照顺序排序 那么最后一个元素就是最大的偶数 // 前面已经找到最大的偶数了
一、CSS 盒子边框 1、盒子模型 HTML 的 一个布局 可以看做一个 矩形的 盒子模型 , 该 盒子模型 是一个用于 容纳 标签元素 的容器 ; 盒子模型 组成 : 由内到外顺序如下 : 内容 Content...: 下图中 内容为 100 x 100 像素的元素 ; 内边距 Padding : 内边距 Padding 位于 边框 与 内容 之间 ; 边框 Border : 边框 包裹 内边距 , 在 外边距...auto , 也可以实现水平居中 ; /* 盒子水平居中 */ margin: auto; 使用 margin: 0 auto; , 将上下边距设置为 0 像素 , 左右边距设置为 auto ; /*...盒子水平居中 */ margin: 0 auto; 3、盒子水平居中设置 如果要 将一个 块级元素 的 盒子模型 设置为 水平居中 样式 , 需要设置以下两项 : 盒子模型 的 宽度 必须设定 , 也就是...子元素 上外边距 合并的情况 , 合并后的 上外边距为 二者之间 较大的值 ; 推荐解决方案 : 为 父元素 设置 边框 或 内边距 , 不要让 两个外边距 互相接触 ; 为 父元素 添加 overflow
:layout_alignParentLeft 贴紧父元素的左边缘 android:layout_alignParentRight 贴紧父元素的右边缘 android:layout_alignParentTop...” android:layout_below 在某元素的下方 android:layout_above 在某元素的的上方 android:layout_toLeftOf 在某元素的左边...android:layout_toRightOf 在某元素的右边 android:layout_alignTop 本元素的上边缘和某元素的的上边缘对齐 android:layout_alignLeft...本元素的左边缘和某元素的的左边缘对齐 android:layout_alignBottom 本元素的下边缘和某元素的的下边缘对齐 android:layout_alignRight 本元素的右边缘和某元素的的右边缘对齐...:layout_gravity是用来设置该view相对与起父view 的位置．比如一个button 在linearlayout里，你想把该button放在靠左、靠右等位置就可以通过该属性设置．以button
="@id/xxx" //在某元素的的上方 android:layout_toLeftOf="@id/xxx" //在某元素的左边 android:layout_toRightOf="@id/xxx"...//在某元素的右边 android:layout_alignTop="@id/xxx" //本元素的上边缘和某元素的的上边缘对齐 android:layout_alignLeft="@id/xxx"...//本元素的左边缘和某元素的的左边缘对齐 android:layout_alignBottom="@id/xxx" //本元素的下边缘和某元素的的下边缘对齐 android:layout_alignRight...//离某元素底边缘的距离 android:layout_marginLeft="30dp" //离某元素左边缘的距离 android:layout_marginRight="30dp" //离某元素右边缘的距离...-- 本元素在left_top元素的右边 --> <Button android:id="@+id/right_top" android:layout_width
案例初始化html结构如下： 案例这里使用的结构比较简单，但是核心思想是实现左边固定，右边自适应。 具体你业务中左边长啥样，右边内部又有啥复杂结构，那就要视具体情况了。...不过这里其实一个浮动就行了： 利用浮动实现文字环绕图片的效果，只需要给左边的图片一个左浮动，右边的文字会自动贴合围绕左边的图片。...如果还想垂直居中， 右边文案此时只需要怪怪的空开左边图片宽度+间距的位置即可 可以让左边图片垂直居中：图片用上50%的top+marginTop的负高度一半。...* 适用于可以设置固定宽度的元素在右边的结构 四、flex - 弹性布局 推荐阮一峰老师的flex讲解 html： 一个宽度即可 二者间距使用任何一个td设置左或右边距即可。
:layout_alignParentLeft 贴紧父元素的左边缘 android:layout_alignParentRight 贴紧父元素的右边缘 android:layout_alignParentTop...在某元素的左边 android:layout_toRightOf 在某元素的右边 android:layout_alignTop 本元素的上边缘和某元素的的上边缘对齐 android...:layout_alignLeft 本元素的左边缘和某元素的的左边缘对齐 android:layout_alignBottom 本元素的下边缘和某元素的的下边缘对齐 android:layout_alignRight...本元素的右边缘和某元素的的右边缘对齐 第三类：属性值为具体的像素值，如30dip，40px android:layout_marginBottom 离某元素底边缘的距离 android...:layout_marginLeft 离某元素左边缘的距离 android:layout_marginRight 离某元素右边缘的距离 android:layout_marginTop 离某元素上边缘的距离
权重值 比如我们一个view宽度设置为都设置为1.我们要在一个布局中一分为2.第一种方法就是建立两个view,分别设置宽度.第二种就是宽度修改为0,权重值改为1.那么就代表两个view的宽度值是平分的...三丶相对布局 RelativeLayout 3.1 相对布局 RelatvieLayout属性 属性 作用 值 作用 android:layout_toLeftOf 参照的概念,在谁的左边 填写一个view...的ID 可以相对于这个view设置在它的左边 android:layout_toRightOf 同上在谁的右边....两个组件之间是底部对齐 android:layout_alignLeft 两个组件之间是左边缘对齐 android:layout_alignRight 两个组件之间是右边缘对齐...离某元素左边缘的距离 android:layout_marginRight 离某元素右边缘的距离 Xml 数据如下 <?
核心css，我总结有以下几点： 左边内容、右边nav均设置左浮动 main 没有触发bfc，也没有使用伪元素清除浮动，而是使用了一个空标签清除浮动。但我们平时不用空标签，而是用伪类元素。...样式关键点： main父元素负责整体的水平居中。 nav负责左边元素的左浮动+可展示宽度220px mainCont负责占据右边剩余位置，在这里具体做法是让其跟随左侧也形成浮动流。...css关键思路： main依旧应该负责总宽度和水平居中之类的布局，这里因为这一小块是嵌套在其他结构里的。就没有什么设置。 nav样式上在右边，但是结构上被放到了上边。进行右浮动。...而是在垂直方向上要求icon和文字居中的适配问题： a、垂直居中问题： 图和文字都是内联块元素，我一般都使用vertical-align实现， b、垂直居中适配问题： 使用了vertical-align...右边的Beiging又一个padding-left值把左边的icon让了出来。而左边的icon使用的字体，放在i标签的伪元素before上了。
贴紧父元素上边缘 android:layout_alignParentLeft 贴紧父元素左边缘 android:layout_alignParentRight 贴紧父元素右边缘 属性值为id引用...android:layout_below 在某元素下方 android:layout_above 在某元素上方 android:layout_toLeftOf 在某元素左边 android:layout_toRightOf...在某元素右边 android:layout_alignTop 元素上边缘与某元素的上边缘对齐 android:layout_alignBottom 元素下边缘与某元素的下边缘对齐 android:layout_alignRight...元素右边缘与某元素的右边缘对齐 android:layout_alignLeft 元素左边缘与某元素的左边缘对齐 属性值为具体的像素值 android:layout_marginBottom 离某元素下边缘的距离...android:layout_marginLeft 离某元素左边缘的距离 android:layout_marginRight 离某元素右边缘的距离 android:layout_marginTop
*/ } //使用 flex 布局，通过 align-items:center 和 justify-content:center 设置容器的垂直和水平方向上为居中对齐，然后它的子元素也可以实现垂直和水平的居中...obj.a() ; 调用 obj 实例上的方法 a，该实例上目前有两个 a 方法：一个是内部属性方法，另一个是原型上的方法。...一般两栏布局指的是左边一栏宽度固定，右边一栏宽度自适应，两栏布局的具体实现： 利用浮动，将左边元素宽度设置为200px，并且设置向左浮动。...左边元素设置为absolute定位，并且宽度设置为200px。将右边元素的margin-left的值设置为200px。...左边元素宽度设置为200px，右边元素设置为绝对定位，左边定位为200px，其余方向定位为0。
” 这两个属性来描述该控件的高度和宽度，高度为文本即是字体高度，宽度即是屏幕的宽度。...贴紧父元素的左边缘android:layout_alignParentRight 贴紧父元素的右边缘android:layout_alignParentTop 贴紧父元素的上边缘android:...在某元素的下方android:layout_above 在某元素的的上方android:layout_toLeftOf 在某元素的左边android:layout_toRightOf 在某元素的右边android...:layout_alignTop 本元素的上边缘和某元素的的上边缘对齐android:layout_alignLeft 本元素的左边缘和某元素的的左边缘对齐android:layout_alignBottom...离某元素底边缘的距离android:layout_marginLeft 离某元素左边缘的距离android:layout_marginRight 离某元素右边缘的距离android:layout_marginTop
” 这两个属性来描述该控件的高度和宽度，高度为文本即是字体高度，宽度即是屏幕的宽度。...:layout_alignParentLeft 贴紧父元素的左边缘 android:layout_alignParentRight 贴紧父元素的右边缘 android:layout_alignParentTop...” android:layout_below 在某元素的下方 android:layout_above 在某元素的的上方 android:layout_toLeftOf 在某元素的左边 android:...layout_toRightOf 在某元素的右边 android:layout_alignTop 本元素的上边缘和某元素的的上边缘对齐 android:layout_alignLeft 本元素的左边缘和某元素的的左边缘对齐...android:layout_alignBottom 本元素的下边缘和某元素的的下边缘对齐 android:layout_alignRight 本元素的右边缘和某元素的的右边缘对齐 第三类：属性值为具体的像素值
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
腾讯会议
云直播
对象存储
