一、图片底部空白缝隙问题 在上一篇博客中 , 使用默认的基线对齐 , 会发现 行内块级元素 中的 图片与文字 默认的对齐方式下 , 图片下方有一条缝隙 ; 出现这条缝隙的原因就是 图片的底部 与...文字的基线对齐 , 上面图片与边框之间的风险 , 就是基线与底线之间的距离 ; 二、图片底部空白缝隙问题解决方案一 ( 使用居中对齐 / 顶部对齐 / 底部对齐 ) ---- 使用 vertical-align...="one"> 基线对齐 : 图片底部与文字基线对齐 div> div> 中线对齐 : 图片中心与文字中心对齐...src="keji.jpg" alt="" class="four"> 底线对齐 : 图片底部与文字底线对齐 div> 显示效果 : 下图中 基线对齐 方式 ,...图片底部有一块缝隙 , 其它三种对齐方式底部都没有缝隙 ; 三、图片底部空白缝隙问题解决方案二 ( 将行内元素 / 行内块元素转为块级元素 ) ---- 使用 vertical-align 垂直对齐
top 与 bottom 对于内联元素，指的是元素的顶部（底部）和当前行框盒子的顶部（底部）对齐；即与 line-box 的顶部（底部）对齐。...文本类 “text-top，指的是盒子的顶部和父级内容区域的顶部对齐，即与 content-area 顶部对齐。...text-bottom，指的是盒子的底部和父级内容区域的底部对齐，即与 content-area 底部部对齐。 例子如下： ?...子元素的垂直中心线与父级元素基线的位置往上二分之一 X 高度（X 的中心） 所在线对齐，通俗一点讲，就是图中红线表示父元素的垂直中心线，蓝线表示子元素的垂直中心线，可以明显的看到 蓝线 与 X 的中心保持一致...-- 这里要折行或空格 --> div> 扩展案例 案例1：任意父级高度的垂直居中 我们给父级设置 line-height 的值等于 height 的值，实现了近似垂直居中的效果。
baseline：把当前盒的基线与父级盒的基线对齐。...如果该盒没有基线，就将底部外边距的边界和父级的基线对齐 sub：把当前盒的基线降低到合适的位置作为父级盒的下标（该值不影响该元素文本的字体大小） super：把当前盒的基线提升到合适的位置作为父级盒的上标...（该值不影响该元素文本的字体大小） text-top：把当前盒的top和父级的内容区的top对齐 text-bottom：把当前盒的bottom和父级的内容区的bottom对齐 middle：把当前盒的垂直中心和父级盒的基线加上父级的半...x-height对齐 top：把当前盒的top与行盒的top对齐 bottom： 把当前盒的bottom与行盒的bottom对齐 8.line-height 定义元素中行框的最小高度 9....ellipsis 当内联内容溢出块容器时，将溢出部分替换为（...）。
，浮动元素将向下移动，直到有充足的空间为止 浮动元素不能与行内级内容层叠，行内级内容将会被浮动元素推出 比如行内级元素、inline-block元素、块级元素的文字内容 行内级元素、inline-block...清除浮动的方法 事实上我们有很多方法可以清除浮动 方法一: 给父元素设置固定高度 扩展性不好(不推荐) 方法二: 在父元素最后增加一个空的块级子元素，并且让它设置clear: both 会增加很多无意义的空标签...start 对齐 flex-end:与 main end 对齐 center:居中对齐 space-between: ✓ flex items 之间的距离相等 ✓ 与 main start、main...center:居中对齐 baseline:与基准线对齐 align-content align-content 决定了多行 flex items 在 cross axis 上的对齐方式，用法与 justify-content...类似 stretch(默认值):与 align-items 的 stretch 类似 flex-start:与 cross start 对齐 flex-end:与 cross end 对齐 center
包含了形成一行的那些盒的矩形区域被称为行盒 Line Box 。 2. 行盒的高度 用户代理将行内级盒流入到一个行盒组成的垂直栈中。行盒的高度计算规则如下： 计算行盒内每个行内级盒的高度。...对于其他所有元素，用于对齐的盒是margin box。 baseline 将盒的基线与父盒的基线对齐。如果盒没有基线，将其bottom margin edge与父盒的 baseline 对齐。...super 把盒的基线升到父盒的上标的适当位置。（此值对元素文本的字号无影响。） text-top 把盒的顶部同父级的内容区域的顶部对齐（参见 10.6.1）。...text-bottom 把盒的底部同父级的内容区域的底部对齐（参见 10.6.1）。 把盒提升（正值）或降低（负值）指定距离（line-height 值的百分比）。...该对齐子树的top是子树内最高的盒顶部，bottom也是类似这样。 top 把对齐子树的顶部与行盒顶部对齐。 bottom 把对齐子树的底部与行盒底部对齐。
方案1 关键代码 父类： display: table-cell; vertical-align: middle; 示例： .parent {...class="parent"> div class="son">哈哈div> div> 扩展知识 vertical-align属性：用于设置文本内容的垂直方向对齐方式...top:顶部对齐 middle:居中对齐 bottom:底部对齐 优缺点分析 优点: 浏览器兼容性比较好 缺点: vertical-algin属性具有继承性,导致父级元素的文本也是居中显示的...class="parent"> div class="son">哈哈div> div> 优缺点分析 优点：父级元素是否脱离文档流，不影响子级元素垂直居中效果...class="parent"> div class="son">哈哈div> div>
，不够灵活2.给父级设置overflow:hidden 但不设置高度，这样可以使父级随子级最大的高度变化而变化，自适应无法解决的问题1.元素平分父级元素 需要计算，而且不一定能均分2.元素之间的间距如果想要均匀分布的话...="bottom">div>2.对文字大小进行处理，给使用display:inline-block的父级元素，添加font-size=0,并且该元素要设置有效的文字大小*{ padding:...，按照2：1：3的比例分给子元素flex-shrink:压缩因子 把比父级元素多200px的空间，按照2：1：3的比例进行对应压缩*{ padding: 0; margin: 0;}.top...space-evenly代表空白元素均匀分布在空隙6.align-items控制弹性盒子内子元素在垂直方向上的对齐方式flex-start 控制弹性盒子内元素在顶部或者左边对齐flex-end 控制元素在底部对齐.../右边对齐center 元素垂直方向上居中对齐baseline 首行底部对齐*{ padding: 0; margin: 0;}.top{ width: 800px; background
: center background-size: 像素值/ 100% 表示充满 案例: 社交账号注册按钮效果 展示效果 行内块级元素对齐方式的一个做法是外层套一个div, 然后设置text-align...-- 用于包含二维码所有的内容，显示在页面中的底部 --> div id="box"> div id="code">div> div> div> 底部的黑条用的是...bottom为70像素. 44 + 28 = 72更为合理些, 给我的感觉是距离父容器底部坐标的距离 left 为-66px....大概是(180-44) / 2 = 68 的样子, 给我的感觉是距离父容器左边的距离. 默认display: node, 但是方式去就是指定的block的效果
各属性 flex ★ display: flex; ” 父元素变为 flex 布局，并且为 block 块级元素。...image-20211130080749495 ★ display: flex/inline-flex -> 父元素 -> 单行元素的对齐方式 -> （主轴-默认水平方向）justify-content...div>4div> div> 当字体大小不一致的时候，根据字体的 baseline 对齐。...height: 600px; flex-wrap: wrap; align-content: flex-end; background-color: DodgerBlue; } 垂直方向，底部对齐...align-self 和 align-items 的属性相同，优先级更高，覆盖父元素的属性。
: 10px 0; } 5、设置文本 在链接中的文本 , 放在 标签中 , 该标签宽度默认充满父容器 , 高度自适应 ; 将其设置为 block 块级元素 , 就可以放置在图片下方 ;...: none; } img { /* 默认的图片对齐方式是基线对齐 只要不是基线对齐 这里随便设置 顶部 / 底部 / 中部 对齐都可以 */ vertical-align...Logo 盒子中 图片的宽度是 30 像素 高度没有给出 但是 宽高等比例缩放 高度也是 30 像素 */ width: 30px; /* 默认的图片对齐方式是基线对齐 只要不是基线对齐...这里随便设置 顶部 / 底部 / 中部 对齐都可以 */ vertical-align: middle; } .app ul li:nth-child(3) { /*...: 10px 10px 0 0; } .brand div { /* 设置 .brand 父容器下的 div 盒子左浮动 这样这些盒子可以在水平方向上紧密排列 */ float
表格标题位置 语法：caption-side:取值; 默认情况下，表格标题是在表格的顶部，属性为：top，如果想把标题放在底部，属性为：bottom。...表格边框间距 语法：boreder-spacing:像素值; 图片对齐 图片水平对齐 在css中使用text-align来实现图片的水平对齐，其属性值跟文本的一样。...图片是在父元素中进行水平对齐，因此我们是在图片的父元素中定义。 img的父元素是div，因此想要实现图片的水平对齐，就应该在div中定义text-align属性。...图片垂直对齐 语法：vertical-align:取值; 属性值 说明 top 顶部对齐 middle 中部对齐 baseline 基线对齐 bottom 底部对齐 W3C（Web标准制定者）对vertical-align...以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动，定义之后，浮动元素会生成一个块级框(inline-block)，而不论它本身是何种元素。
一、连续排列的链接图片样式及核心要点 1、实现效果 实现如下效果 , 在下面的布局中 , 水平放置 3 个图片链接 ; 每个图片链接 占 宽度的 1/3 ; 2、标签结构设置 将布局中的 三个 链接图片.../3 宽度 , 即 33.33% ; 子元素 div> 设置浮动和宽度的样式如下 : .brand div { /* 设置 .brand 父容器下的 div 盒子左浮动 这样这些盒子可以在水平方向上紧密排列...none; } img { /* 默认的图片对齐方式是基线对齐 只要不是基线对齐 这里随便设置 顶部 / 底部 / 中部 对齐都可以 */ vertical-align...Logo 盒子中 图片的宽度是 30 像素 高度没有给出 但是 宽高等比例缩放 高度也是 30 像素 */ width: 30px; /* 默认的图片对齐方式是基线对齐 只要不是基线对齐...这里随便设置 顶部 / 底部 / 中部 对齐都可以 */ vertical-align: middle; } .app ul li:nth-child(3) { /*
window.location.href='#root'; // window.location.hash='#root'; 二、scrollIntoView Element.scrollIntoView 方法会滚动元素的父容器...默认为 "auto"，没有动画； 取值 "smooth"时，将匀速滚动。 block，定义垂直方向的对齐， "start", "center", "end", 或 "nearest"之一。...默认为 "start"，元素顶部将滚动到视窗顶部； 取值 "end"，元素底部将和视窗底部对齐； 取值 "center"，元素中线将和视窗中间对齐； 取值 "nearest"，元素将就近对齐。...即，若页面向上滚动，则顶部对齐；若页面向下滚动，则底部对齐。 inline，定义水平方向的对齐， "start", "center", "end", 或 "nearest"之一。..., targetOffsetTop); 同理，滚动元素到与视窗底部或与视窗中间对齐亦可取参计算。
浮动的元素的对齐 浮动首先创建包含块的概念（包裹）,总是找理它最近的父级元素,但是不会超出内边距的范围。...# 浮动的元素排列位置 浮动的元素排列位置，跟上一个元素（块级）有关系。如果上一个元素有浮动，则A元素顶部会和上一个元素的顶部对齐；如果上一个元素是标准流，则A元素的顶部会和上一个元素的底部对齐。...总结: 浮动的目的就是为了让多个块级元素同一行上显示。 一个父盒子里面的子盒子，如果其中一个子级有浮动的，则其他子级都需要浮动。这样才能一行对齐显示。...如果浮动一开始就是一个美丽的错误，那么请用正确的方法挽救它。 # 清除浮动本质 清除浮动主要为了解决父级元素因为子级浮动引起内部高度为0的问题。...设置或更改一个已被呈递的对象的此属性值将导致环绕对象的内容重新流动。 <!
元素放置在父元素的基线上*/ vertical-align: sub; /*垂直对齐文本的下标*/ vertical-align: super; /*垂直对齐文本的上标*/...vertical-align: text-top; /*把元素的顶端与父元素字体的顶端对齐*/ vertical-align: text-bottom; /*把元素的底端与父元素字体的底端对齐。...*/ vertical-align: middle; /*把此元素放置在父元素的中部*/ vertical-align: top; /*把元素的顶端与行中最高元素的顶端对齐*/...vertical-align: bottom; /*把元素的顶端与行中最低的元素的顶端对齐*/ /* 长度值 */ vertical-align: 10em; vertical-align...如果有继承父级样式，则将该属性重新设置为继承的值，如果没有继承父级样式，则将该属性重新设置为初始值。 换句话说这个unset关键字会优先用inherit的样式，其次会应该用initial的样式。
*/ max-width: 640px; } Banner 栏 , 只需要进行简单的标准流设置 , 将 Banner 栏设置为第一个标准流图片即可 ; HTML 结构如下 : <!...: none; } img { /* 默认的图片对齐方式是基线对齐 只要不是基线对齐 这里随便设置 顶部 / 底部 / 中部 对齐都可以 */ vertical-align...: middle; } a { /* 设置字体颜色值 */ color: #666; /* 取消链接的底部横线样式 */ text-decoration: none;...Logo 盒子中 图片的宽度是 30 像素 高度没有给出 但是 宽高等比例缩放 高度也是 30 像素 */ width: 30px; /* 默认的图片对齐方式是基线对齐 只要不是基线对齐...这里随便设置 顶部 / 底部 / 中部 对齐都可以 */ vertical-align: middle; } .app ul li:nth-child(3) { /*
注意看文字底部都对齐了 图片 stretch（默认值）：如果项目未设置高度或设为 auto，将占满整个容器的高度。...图片 flex-end：与交叉轴的终点对齐。 图片 center：与交叉轴的中点对齐。 图片 space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。...，grow shrink basis 的缩写 align-self ，重写了父级的 align-items 对齐方式 order 属性 order 属性定义项目的排列顺序。...="flex-grow:1">1div> 如果所有项目的 flex-grow 属性都为 1，则它们将等分剩余空间（如果有的话）。...默认值为 auto，表示继承父元素的 align-items 属性，如果没有父元素，则等同于 stretch。
可以设置四种对齐 : baseline 基线 / top 顶线 / middle 中线 / bottom 底线 ; 基线对齐 : 图片底部位置 与 文字基线 对齐 ; 这是默认的对齐方式 , 如果是...p , 则 p 的下半部分在图片的下方 ; vertical-align: baseline; 垂直居中 : 图片中心位置 与 文字中线 对齐 ; vertical-align: middle; 顶部对齐... div { border: 1px solid red; margin: 20px; } .one { /* 基线对齐 - 默认 图片底部与文字基线对齐 *...="one"> 基线对齐 : 图片底部与文字基线对齐 div> div> 中线对齐 : 图片中心与文字中心对齐...src="keji.jpg" alt="" class="four"> 底线对齐 : 图片底部与文字底线对齐 div> 显示效果 :
副作用 1、当子元素都设置了浮动时，就会导致父元素的塌陷，即父元素撑不开，如下图所示： ?...无法实现动态实现自适应布局， 举个例子，如果想要实现二等分一排布局，width要为50%，但是如果突然来个三等分呢，width设置50%显然是已经不行了 3、margin padding设置值不能正确显示 由于浮动导致父级子级之间设置了...//每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。 } ? 5、align-items属性（这个也很重要。也常用） align-items属性定义项目在交叉轴上如何对齐。...//交叉轴的终点对齐。 //交叉轴的中点对齐。 //项目的第一行文字的基线对齐。 //如果项目未设置高度或设为auto，将占满整个容器的高度（默认值） } ?...//与交叉轴的终点对齐。 //与交叉轴的中点对齐。 //与交叉轴两端对齐，轴线之间的间隔平均分布。 //每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
> div class="div-right">div-rightdiv> 效果： 浮动元素可能导致父元素的高度塌陷，可能导致其他DIV的元素受到影响，多个浮动元素在同一行可能会重叠，需要使用...定位 在 CSS 中，定位是指通过 position 属性来设置元素的定位方式，以及通过 top、right、bottom、left 属性来指定元素相对于其最近的已定位的父级元素们的位置。...常见对齐属性有以下几个值： left：左对齐 center：居中对齐 right：右对齐 top：顶部对齐 middle：居中对齐 bottom：底部对齐 水平对齐 text-align 用于设置文本内容在元素框中的水平对齐方式...div> 效果： 垂直对齐 vertical-align 用于设置元素内部的行内元素在垂直方向上的对齐方式。通常用于行内元素，对块级元素没有直接影响。...: middle; /* 中部对齐 */ } .vertical-align-bottom { vertical-align: bottom; /* 底部对齐 */ } div class="
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
腾讯会议
云直播
对象存储
