可以使用overflow调整溢出部分的显示,取值如下： image.png 取值 作用 visible 默认值，溢出部分可见 hidden 溢出部分隐藏 scroll 强制在水平和垂直方向添加滚动条...auto 自动在溢出方向添加可用滚动条 边框 边框实现 语法： border: width style color; 边框样式为必填项，分为： 样式取值 含义 solid 实线边框 dotted...主要用于设置块元素的水平排列 属性 float 取值 可取left或right，设置元素向左浮动或向右浮动 float: left/right; 特点 元素设置浮动会从原始位置脱流,向左或向右依次停靠在其他元素边缘...,在文档中不再占位 元素设置浮动,就具有块元素的特征,可以手动调整宽高 “文字环绕”:浮动元素遮挡正常元素的位置,无法遮挡正常内容的显示,内容围绕在浮动元素周围显示 常见问题 子元素全部设置浮动,导致父元素高度为...距参照物的顶部 right 距参照物的右侧 bottom 距参照物的底部 left 距参照物的左侧 分类 relative 相对定位：元素设置相对定位,可参照元素在文档中的原始位置进行偏移
，第一个值宽度，第二个值高度，如果只是设置一个，第二个值auto cover 保持图片纵横比并将图片缩放成完全覆盖背景区域的最小大小 contain 保持图片纵横比并将图像缩放成适合背景定位区域的最大大小...，第二个值是垂直位置，左上角是0% 0%，右下角是100% 100% 。...第一个弹性项的main-end外边距边线被放置在该行的main-end边线，而后续弹性项依次平齐摆放 center 弹性项目居中紧挨着填充。...值 描述 left 元素向左浮动 right 元素向右浮动 浮动的原理： 浮动以后使元素脱离了文档流 浮动只有左右浮动，没有上下浮动 脱离文档流之后，元素相当于在页面上面增加一个浮层来放置内容。...box-shadow: h-shadow v-shadow blur color; 值 描述 h-shadow 必选，水平阴影的位置 v-shadow 必选，垂直阴影的位置 blur 可选，模糊距离 color
表格标题位置 语法：caption-side:取值; 默认情况下，表格标题是在表格的顶部，属性为：top，如果想把标题放在底部，属性为：bottom。...如果想要定义表格标题的位置，在table或caption这两个元素的CSS中定义caption-side属性，效果是一样的，一般情况，我们只在table中定义就行。...属性的定义是极其复杂的，其中有一项是“vertical-align属性定义周围的行内元素或文本相对于该元素的垂直方式”。...语法：float:取值; 属性值 说明 left 元素向左浮动 right 元素向右浮动 float 属性定义元素在哪个方向浮动。...以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动，定义之后，浮动元素会生成一个块级框(inline-block)，而不论它本身是何种元素。
-- float 1、float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。...浮动元素会生成一个块级框，而不论它本身是何种元素。 2、left：元素向左浮动，如果前一个元素是正常文档流元素，保持垂直距离，如果是脱离文档流，紧跟在其后。文本内容不会被覆盖。...3、right：元素向右浮动，如果前一个元素是正常文档流元素，保持垂直距离，如果是脱离文档流，紧跟在其后。文本内容不会被覆盖。 4、none：默认值。...元素不浮动，并会显示在其在文本中出现的位置。 5、inherit：规定应该从父元素继承 float 属性的值。...-- clear 1、left：清除左浮动 2、right：清除右浮动 3、both：全清除 --> clear清除浮动 <div style="background-color
自动布局则充分利用了UI控件之间的父子关系、兄弟关系，自动布局可控制子节点控件的左边界、右边界、上边界、下边界与父容器的左边界、右边界、上边界、下边界对齐或保持指定距离，与此同时，还可设置子节点控件的宽度占父容器宽度多大比例...单击第一个按钮即可弹出图中的浮动框，该浮动框与Align子菜单包含的菜单项完全一样，只是通过该按钮可以同时添加多个约束。...由于在界面上拖出的蓝线为斜线，因此弹出菜单既可设置两个UI控件在水平方向上的相对布局关系，也可设置在垂直方向上的相对布局关系。如果在界面上拖出的蓝线为垂直竖线，那么Xcode将弹出如下图所示的菜单。...提示：如果在两个具有父子关系的UI控件之间拖出垂直的蓝线，那么Xcode弹出的菜单将只能设置两个UI控件在垂直方向上的布局约束；如果在两个具有父子关系的UI控件之间拖出水平的蓝线，那么Xcode弹出的菜单将只能设置两个...对于初学者而言，使用自动布局常犯的两类错误是约束不足（约束太少）和约束冲突（约束太多），如果界面设计者给出的约束只能确定某个UI控件的大小（或大小的某一项）或位置（或位置中的某一项），此时就会出现约束不足的情况
no-repeat：背景图片不平铺 */ background-repeat: no-repeat; 背景位置 /*背景位置*/ background-position: right...display:"inline-block" 使元素同时具有行内元素和块级元素的特点。...overflow（水平和垂直均设置） overflow-x（设置水平方向） overflow-y（设置垂直方向） 十一、position定位 static static 默认值，无定位，不能当作绝对定位的参照物...relative（相对定位） 相对定位是相对于该元素在文档流中的原始位置，即以自己原始位置为参照物。有趣的是，即使设定了元素的相对定位以及偏移值，元素还占有着原来的位置，即占据文档流空间。...重点：如果父级设置了position属性，例如position:relative;，那么子元素就会以父级的左上角为原始点进行定位。
引言 在网页布局中，经常会涉及到将一个元素固定放置在某些位置的操作： 或者把某些元素固定在页面某个位置，不会随着网页滚动而滚动。 以上效果，标准流做不到，浮动也无法轻易做到。...： 最近的 定位父元素的 左上角 5.3 进阶案例 2：子绝父相 为保持父元素在原有文档流定位，为子元素能在父元素中任意放置。...注意： 1 、 固定定位和绝对定位都是脱离了标准流，不会影响标准流布局（也不影响浮动） 2 、 固定定位元素，哪怕拖动滚动条，元素位置也保持在页面不变。...） 2 、 固定定位元素，哪怕拖动滚动条，元素位置也保持在页面不变。...若为标准流、相对定位、浮动，还会扩大其在标准流或浮动中占用的位置。 8.
son2则在父元素的右侧显示，紧贴父元素上*/ c) 如果有未浮动的兄弟元素，那么元素在浮动之后，会根据它在标准流中的位置确定该在第几行展示。...：浮动元素不会挡住没有浮动元素中的文字, 没有浮动的文字会自动给浮动的元素让位置。...clear属性的功能是使浮动元素不去寻找相邻的其他浮动元素，从而消除浮动元素对其他元素的影响（解决问题二）。...; } /*这样实现垂直居中的原理是：使父元素以表格的形式呈现，再利用vertical-align属性在表格中是设置单元格内容垂直对齐方式的特性，从而达到块级元素垂直居中的效果。...弹性盒子中默认有两根轴线，水平方向的主轴，垂直方向的纵轴（交叉轴）。轴线与盒子边框的交点是开始位置和结束位置。 ?
浮动+百分比方式 这种方式比较简单，开启浮动，使每个元素占25%的宽度。...Flex方案 实现步骤如下 开启 flex 布局 将子元素布局方向修改为垂直排列 设置最小高度为当前视口，使不管中间部分有多高，始终都可以保持在底部 设置中间部分容器高度为自适应 实现CSS代码如下：...设置最小高度为当前视口，使不管中间部分有多高，始终都可以保持在底部 */ min-height: 100vh; } .container { /* 设置 中间 部分自适应 */...Grid方案 实现步骤如下 开启 grid 布局 置最小高度为当前视口，使不管中间部分有多高，始终都可以保持在底部 实现CSS代码如下： .main { /* 开启grid布局 */ display...: grid; grid-template-rows: auto 1fr auto; /* 设置最小高度为当前视口，使不管中间部分有多高，始终都可以保持在底部 */ min-height
如果使元素不在正常流中，可以使用浮动（float）或者定位（absolute, fixed）。...外边距合并 针对垂直外边距（margin-top 和 margin-bottom），两个相邻的垂直外边距会合并成一个外边距，两个外边距中较小的一个会被较大的一个合并。详细内容可以参考 这里 。...元素仍保持其未定位前的形状，它原本所占的空间仍保留。...relative 的表现和 static 十分类似，不同的是相对于定位参考的是它应该在的位置(或者说它自身的位置)，通过使用偏移属性 top, bottom, left 和 right 属性会使元素相对于...元素在正常流中的所占的位置会被清除，就好像该元素不存在一样。absolute 元素会生成一个块级框。
，否则所有元素默认都是普通流定位，也可以说，普通流中元素的位置由该元素在 HTML 文档中的位置决定。...浮动 (float) 在浮动布局中，元素首先按照普通流的位置出现，然后根据浮动的方向尽可能的向左边或右边偏移，其效果与印刷排版中的文本环绕相似。...2.Box垂直方向的距离由margin决定。...设置成BFC，自己独成一块，不会跑到它下面，而是保持洁身自好，自己依然占一块。）...，又拉回来了，但保持了浮动的特点。）
Background-attachment scroll: 背景图的位置是基于盒子（假如是div）的范围进行显示 fixed：背景图的位置是基于整个浏览器body的范围进行显示，如果背景图定义在...div里面，而显示的位置在浏览器范围内但是不在div的范围内的话，背景图无法显示。...（取最大值） 两个盒子垂直布局，一个设置上外边距，一个设置下外边距，取的设置较大的值，而不是相加。...2、浮动布局 float: left | right /*浮动方向*/ 特点： 1.元素浮动之后不占据原来的位置（脱标） 2.浮动的盒子在一行上显示 3.行内元素浮动之后自动转换为行内块元素...4、清除浮动 清除浮动不是不用浮动，清除浮动产生的问题。 问题：当父盒子没有定义高度，嵌套的盒子浮动之后，下边的元素发生位置错误（占据父盒子的位置）。
Fixed 定 位使元素的位置与文档流无关，因此不占据空间。 Fixed 定位的元素和其他元素重叠。 相对定位 relative： 如果对一个元素进行相对定位，它将出现在它所在的位置上。...绝对定位 absolute： 绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那 么它的位置相对于。absolute 定位使元素的位置与文档流无关，因此不占据空间。...（让父元素的高度包含子浮动元素） 避免某元素被浮动元素覆盖 避免多列布局由于宽度计算四舍五入而自动换行 让一个元素水平垂直居中 水平居中 对于 行内元素 : text-align: center...造成我们使用百分比单位容易使布局问题变得复杂。 4.浮动布局 浮动布局:当元素浮动以后可以向左或向右移动，直到它的外边缘碰到包含它的框或者另外一个浮动元素的边框为止。...元素浮动以后会脱离正常的文档流，所以文档的普通流中的框就变的好像浮动元素不存在一样。 优点 这样做的优点就是在图文混排的时候可以很好的使文字环绕在图片周围。
圆形头像示例 背景重复 repeat(默认):背景图片平铺排满整个网页 repeat-x：背景图片只在水平方向上平铺 repeat-y：背景图片只在垂直方向上平铺...display:”inline-block” 使元素同时具有行内元素和块级元素的特点。...overflow（水平和垂直均设置） overflow-x（设置水平方向） overflow-y（设置垂直方向） 定位(position) static(默认) static 默认值，无定位，不能当作绝对定位的参照物...relative（相对定位） 相对定位是相对于该元素在文档流中的原始位置，即以自己原始位置为参照物。有趣的是，即使设定了元素的相对定位以及偏移值，元素还占有着原来的位置，即占据文档流空间。...重点：如果父级设置了position属性，例如position:relative;，那么子元素就会以父级的左上角为原始点进行定位。
清除浮动的方法： 设置操作元素属性clear: both或者clear: left或者clear: right； 使父容器形成BFC。父容器成为BFC后，父容器将不会出现高度塌陷的问题。...参考点：自身在文档流中的位置。使用场景：一般作为绝对定位的元素参考点，或者页面图片的小偏移。 absolute 绝对定位。元素脱离文档流。参考点：距离最近的非static祖先元素位置。...如果元素没有已定位的祖先元素，那么他的位置就相对于初始包含块html来定位。使用场景：元素的水平垂直居中。 fixed 固定定位。元素脱离文档流。参考点：参考浏览器窗口的位置。...这时可以通过给元素设置z-index属性来控制叠放顺序，该属性值越高，元素位置越靠上。 5、 position:relative和负margin都可以使元素位置发生偏移?二者有什么区别？...BFC的特性： 内部的Box会在垂直方向，从顶部开始一个接一个地放置。 Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生叠加。
当这两项都不存在的时候, 父子元素垂直外边距相邻, 产生叠加....解决方法 添加父元素的内边距和边框任何一项即可取消叠加 给父元素加上样式即可 overflow: hidden; 块级元素和内联级元素 根据display属性，可以将元素分为块级元素(block)和内联级元素...常用于设置垂直居中....z-index属性 定义 设置元素的堆叠顺序 用法 拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面 注意 可拥有负的 z-index 属性值 仅能在定位元素上奏效 浮动 定义 使元素脱离文档流...，按照指定方向发生移动，遇到父级边界或者相邻的浮动元素停下来 清除浮动 .clearfix:after { content:''; display:block; clear:both
常用图片与文字垂直对其； 值 说明 middle 垂直居中 top 顶部 bottom 底部 <!...top,center,bootom 2.7.3.4 简写 background: 背景颜色 背景图像 背景定位 背景不重复显示； 2.7.4.4 background-size 值 说明 auto 保持原样...right 元素向右浮动 none 不浮动 5.3 清除浮动 clear属性 值 说明 left 在左侧不允许浮动元素 right 在右侧不允许浮动元素 both 在左右两侧不允许浮动元素 none...--清除这个元素两边的浮动--> } 6、定位 posotion属性 6.1 relative 相对定位 相对自身原来位置进行偏移，偏移设置：top、left、right、bottom; 相对定位的规律...； 4.浮动后，相对定位，相对于盒子浮动后的位置，进行定位，盒子原始位置不会保留； 6.2 absolute 绝对定位 absolute属性值：偏移设置： left、right、top、bottom
元素以内联块元素显示 浮动 文档流 文档流，是指盒子按照html标签编写的顺序依次从上到下，从左到右排列，块元素占一行，行内元素在一行之内从左到右排列，先写的先排列，后写的排在后面，每个盒子都占据自己的位置...，超出父级宽度就换行 4、浮动让行内元素或块元素自动转化为行内块元素 5、浮动元素后面没有浮动的元素会占据浮动元素的位置，没有浮动的元素内的文字会避开浮动的元素，形成文字饶图的效果 6、父元素内整体浮动的元素无法撑开父元素...，需要清除浮动 7、浮动元素之间没有垂直margin的合并 清除浮动 父级上增加属性overflow：hidden 在最后一个子元素的后面加一个空的div，给它样式属性 clear:both（不推荐）...： relative 生成相对定位元素，元素所占据的文档流的位置不变，元素本身相对文档流的位置进行偏移 absolute 生成绝对定位元素，元素脱离文档流，不占据文档流的位置，可以理解为漂浮在文档流的上方...animation-play-state 动画状态 paused 停止 running 运动 9、animation-fill-mode 动画前后的状态 none 不改变默认行为 forwards 当动画完成后，保持最后一个属性值
有个高频面试题，“如何使一个不定宽高div垂直水平居中？”，有的萌新竟然回答用vertical-align: middle。这个回答是减分的，至少在某种程度上给人一种感觉CSS基础比较薄弱。...属于同一BFC容器的元素垂直方向的margin会合并 BFC容器是独立容器，不会影响外部元素的布局 利用BFC的特性，我们可以实现以下功能： 清除浮动 防止垂直方向margin合并 实现多栏弹性布局...我们通常都是设置垂直方向与水平方向的的位置，如果四个方向都不设置或者四个方向都设置会出现什么彩蛋呢？下文会给出揭晓。...平常我们用margin: 0 auto;之所以能够使块级元素水平居中，是因为水平方向元素存在剩余可用空间，而auto平分剩余可用空间，因此就产生居中效果。...上述demo，box-item之所以能够垂直居中，得益于top/bottom设置了值，使元素产生高度100%的外部尺寸，而width/height固定元素的内部尺寸，使得 外部尺寸高度-内部尺寸高度=元素剩余可用空间高度
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
