inline-block | 易学教程

inline-block垂直居中的方法

阅读更多关于 inline-block垂直居中的方法

vetical-align的功能是设置行内元素垂直方向上的对齐方式。可能的值 baseline 默认。元素放置在父元素的基线上。 sub 垂直对齐文本的下标。 super 垂直对齐文本的上标 top 把元素的顶端与行中最高元素的顶端对齐 text-top 把元素的顶端与父元素字体的顶端对齐 middle 把此元素放置在父元素的中部。 bottom 把元素的顶端与行中最低的元素的顶端对齐。 text-bottom 把元素的底端与父元素字体的底端对齐。 length % 使用 "line-height" 属性的百分比值来排列此元素。允许使用负值。 inherit 规定应该从父元素继承 vertical-align 属性的值。可以控制图片、文字等行内元素在行内的垂直方向上的对齐方式如何使用vetical-align使块级元素垂直居中？以下面为例： body{ <div class="wrapper"> <div class="content">some content</div> </div> } 1、为父容器wrapper设置高度 html,body{ 　　height:100% } .wrapper{ 　　height:100% } 2、使content容器变为行内元素 .content{ display:inline-block; } 3

css之inline-block元素对齐

阅读更多关于 css之inline-block元素对齐

　　生命中最善良的时光 , 就像水一样明亮 , 记忆里总有人在坐在身旁 , 抚摸着我枯萎的肩膀 , 对我说红色不该遗忘。　　不好意思，跑题了。　　当同一行的多个元素的样式为 display:inline-block 时 , 由于内容的类型不一致，存在图片、文本、或空标签的情况下，可能出现元素无法对齐的情况　　如下：　　　　　　分析　　对齐基于元素与对齐方式来进行分析　　元素　　　　内联元素 display:inline 从左至右一个挨着一个 , 内容包裹元素 , 无法设置宽高　　　　块级元素 display:block 单独占用一行 , 可以设置宽高　　　　行内块级元素 display: inline-block 兼容以上两者特性　　对齐方式　　　　CSS语法：vertical-align 　　　　语法：　　　　　　baseline | sub | super | top | text-top | middle | bottom | text-bottom | <百分比> | <长度> | inherit 　　　　说明：　　　　　　设置元素内容的垂直对齐方式。　　　　参数：　　　　　　baseline：基线对齐；取行高最高的作为基准　　　　　　sub：下标显示；　　　　　　super：上标显示；　　　　　　top：顶端对齐；　　

jQuery实现高仿QQ音乐

阅读更多关于 jQuery实现高仿QQ音乐

几个实现的效果看视频吧：动图很是不清楚代码： html <!DOCTYPE html> < html lang = " en " > < head > < meta charset = " UTF-8 " > < title > music </ title > < link href = " ../jquery.mCustomScrollbar.css " rel = " stylesheet " > < link href = " ../../../img/sup.ico " rel = " icon " > < link href = " ../css/style.css " rel = " stylesheet " > < script src = " ../../../jquery-3.4.1.min.js " > </ script > < script src = " ../jquery.mCustomScrollbar.concat.min.js " > </ script > < script src = " ../js/player.js " > </ script > < script src = " ../js/index.js " > </ script > </ head > < body > < div class = " container "

CSS---display详解

阅读更多关于 CSS---display详解

inline 　　常用的inline就是文字和图片，其实inline真没什么好说的，大家可以把它想象成一个杯子里的水，它是“流”，是没有大小和形状的，它的宽度取决于父容器的宽度。　　因此，针对inline的标签，你设置宽度和高度是无效的，通过监控可以知道，该元素实际的宽度和高度都是auto，并不是我们设定的值。　　　　一个很基础的问题：如何把inline元素转换成“块”元素？相信绝大部分人的回答是display:block，但是你应该知道这不是一个唯一的答案。至少我设置display:table也是可以的吧？还有两种情况你应该去了解（如果你不知道的话）：第一，对inline 元素设置float 还是刚才那个例子，我们对span元素添加一个float:left，运行看看效果，你就会大吃一惊。从显示的效果和监控的结果上看来，span元素已经“块”化。注意，上一节刚刚讲完float，不要忘记float的“破坏性”、“包裹性”，在这里同样适用。　　第二，对inline 元素设置position:absolute/fixed 还是有同一个例子做演示，这次在span元素上加上absolute/fixed，效果大家应该能猜到，和加上float的效果相同。至于absolute/fixed有什么特性，会在下一节介绍position时提到。　　 3. block 　

百度知道页面的横幅轮播图布局（html+css布局，无轮播效果）

阅读更多关于百度知道页面的横幅轮播图布局（html+css布局，无轮播效果）

步骤：首先设置全屏背景（ position: absolute; 和 width: 100%; height: 100%; 实现全屏）；接着定义一个包装div，用来调整该部分在布局中的垂直位置（由于没其他内容，什么header等，我就用margin-top来使其挪动到大概位置）然后再定义一个包裹内容的容器，设宽后设置 margin: 0 auto; 使其居中；接着里面放两个div，一个供图片显示，一个供右面的提问问答部分（粉色区域父元素，因为未定义高的值，所以被撑开）；因为大家都是块级，所以红色和绿色不共行，得用float或者position来挪位：（虽然 inline-block 也行，但不推荐，这里是包装层，不是内容层。） ①【使用 float: ; 浮动属性来调整，但是记得要在父元素就得添加万能清除类： clearfix 】 ②【使用 position: absolute; 配合 top:; 和 right:; 来定位，相对的，父元素就要设置 position: relative; 因为absolute必须参考定位元素来定位，你父元素不设置，它就以更外层含定位属性的父元素来定位，也就跑位了。】再来添加一个专门存放图片集的容器，这个容器可以很大（当然，你最好是图片排一行算上间隙加起来的总宽长，否则你图片都放完了，你不空了很大部分没有图吗），原理最后总结会说【易懂

两个同一行的元素的对齐

阅读更多关于两个同一行的元素的对齐

背景：我把两个div设置成了inline-block，于是这时是默认在同一行的，但是这时候的图片的大大小会导致两个在视觉上不在同一条水平线上。刚开始我是对单个的设置margin-top属性，但是发现两个div同时下降了，原来是inline-block会迷人这两个div会在同一个水平线上，设置了margin-top就会使两个同时下降。这时候就想到了将这个脱离文档流来设置高度，即position属性设置为absolute。来源： CSDN 作者：慢慢来呗不急链接： https://blog.csdn.net/zzj19990913/article/details/104161657

display:inline-block 产生空隙问题

阅读更多关于 display:inline-block 产生空隙问题

Display:inline-block 产生空隙问题 1.产生原因:元素之间的空白符（空格、回车换行等）都会被浏览器处理，根据white-space的处理方式（默认是normal，合并多余空白），原来HTML代码中的回车换行被转成一个空白符，在字体不为0的情况下，空白符占据一定宽度，所以inline-block的元素之间就出现了空隙。这些元素之间的间距会随着字体的大小而变化，当行内元素font-size:16px时，间距为8px。 2.解决方法1: 父元素添加： .par { display : table ; word-spacing : -1em ; } 解决方法2:消除html代码中的空白 < div class = " par " > < span > aaa </ span > < span > bbb </ span > </ div > 来源： CSDN 作者： lllanlll 链接： https://blog.csdn.net/qq_24270109/article/details/104094920

css未解决问题

阅读更多关于 css未解决问题

·inline-block的两个元素见的空隙问题 ·vertical-align：多了inline-block的元素的对齐方式 ·nth-child不生效 ·font-weight不生效果 ·用vue changeActive 时，给列表传入list的数据，每个list都有个对应的index,点击每个li可以将当前的index传入changeIndex（index）。然后改变本地的activeIndex ,每个li的：class="{active: index == activeIndex}" 思考：如果我的数据list是固定的话，岂不是每个li上都要写：class="{active: activeIndex == 0}",class="{active: activeIndex == 1}"这样写很多，而且给每个li都绑定一个事件比起原生的一次监听多个li的点击事件，到底谁的效率更高呢？ —··滚动事件的监听 ·scoped的用法 ·scoped尽量不要用，和display: inline-block一样，坑太多 ·轮播图插件复用，想要在原有的基础上封装成插件再通过传入的参数进行判断失败来源： CSDN 作者：希望至上 链接： https://blog.csdn.net/weixin_43844975/article/details/103898784

[译]HTML&CSS Lesson5: 定位

阅读更多关于 [译]HTML&CSS Lesson5: 定位

CSS最大的用处之一就是可以将内容和元素定位到任何我们想要的位置，使我们的设计具有结构，使内容更加易懂。 CSS有好几种不同的定位属性，每种都有自己的使用场景。在这节课中我们会通过不同的案例——可复用的布局和针对单元素的布局——来介绍每种方法。浮动定位的其中一种方法就是使用 float 属性。 float 属性非常好用，可以用在很多地方。本质来说， float 属性是使元素脱离正常的流式布局，并将它放置在父元素的左侧或右侧。然后页面中所有的元素都会环绕浮动元素布局。例如我们将段落间的一张图片设置为浮动，那么这些段落都会围绕图片换行。当我们将多个元素同时设置为浮动元素，那么这些元素将呈现相邻或相对布局，如多列布局。 float 有好几个值，最常用的值是 left 和 right 。使元素浮动到父级元素的左侧或右侧。 img { float: left; } 浮动练习我们先创建一个通用页面，含有页头，页脚，中间有两列。最理想的情况就是在 <body> 元素内创建第二节课"了解HTML" 中提到的 <header> ， <section> ， <aside> 和 <footer> 元素。 <header>...</header> <section>...</section> <aside>...</aside> <footer>...</footer> <section> 和

inline-block消除间隙

阅读更多关于 inline-block消除间隙

一、inline-block呈现效果的现象描述** 真正意义上的inline-block水平呈现的元素间，换行显示或空格分隔的情况下会有间距，很简单的个例子：二.消除间隙的多种方法** （1）内联样式的处理消除间隙一：消掉空格的三种方法 < div class = "space" > < a href = "" > a1 < / a > < a href = "" > a2 < / a > < a href = "" > a3 < / a > < / div > < div class = "space" > < a href = "" > a1 < / a > < a href = "" > a2 < / a > < a href = "" > a3 < / a > < / div > < div class = "space" > < a href = "" > a1 < / a > < ! -- -- > < a href = "" > a2 < / a > < ! -- -- > < a href = "" > a3 < / a > < / div > 消除间隙二：去掉闭合标签 < div class = "space" > < a href = "" > a1 < a href = "" > a2 < a href = "" > a3 < / a > < /

订阅 inline-block