strong, em, ins, del, code 应该准确使用语义样式标签, 但不能滥用, 如果不能确定时首选使用自然样式标签 行内元素有哪些？...为什么： HTML4陈旧不能满足日益发展的互联网需要，特别是移动互联网。为了增强浏览器功能 Flash 被广泛使用，但安全与稳定堪忧，不适合在移动端使用（耗电、触摸、不开放）。...1）用正确的标签做正确的事情； 2）html语义化让页面的内容结构化，结构更清晰，便于对浏览器、搜索引擎解析； 3）即使在没有样式css情况下也以一种文档格式显示，并且是容易阅读的； 4）搜索引擎的爬虫也依赖于...; width: 100px; } .right { display: table-cell; /*宽度为剩余宽度*/ } table 的显示特性为每列的单元格宽度和一定等与表格宽度。...（3） flex-wrap如果轴线放不下，应该如何换行。
class="item">Item CSS .wrapper { display: flex; flex-wrap: wrap; } .item {...overflow 属性 当我们有一个元素时，我们应该考虑它应该包含的最小和最大内容。如果内容超过了最大值，那么我们需要显示一个滚动条。...在 Chrome 窗口中，滚动条总是显示出来，这是不正确和令人困惑的行为。 通过使用auto关键字，我们可以确保滚动条不会显示，除非内容高度大于它的容器。 根据MDN： 取决于用户代理。...如果我检查了子项并转到computed styles，你猜下left属性的值会是什么？ ? left的默认值为16px，即使没有设置。为什么会发生这种情况？...我们不能使用left:0，因为这会将子元素粘到边缘，这不是我们想要的。 请参阅下面的模型，以了解我的意思。 ? 要以正确的方式重置子项，我们应该使用left: auto。
html篇 html应该是前端中最简单的知识点了，标签用着用着就熟记于心，在面试过程中对html的提问更是少之又少，话不多说，上干货。 1....（如div下可包含div） 行内元素（常见的行内元素a,span.img） 一行显示多个 宽度为内容的宽度 不可以设置高度和宽度 标签内一般不包含标签（如a标签内包含a标签） 行内块元素 行内块元素包含块级元素和行内元素的特征...（属于普通流） 如何创建BFC overflow不为visible float不为none position不为static或者relative display属性为inline-block、flex...为什么要初始化css 因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没有初始化CSS，往往会导致页面在不同浏览器之间出现差异。...子元素未知：display：flex；justify-content: center；align-items: center 子元素用绝对定位，上下左右为0，margin：auto，父：relative
前言 上回说到，移动端适配，推荐了，使用px为主，vw,百分比为辅助，再搭配flex的布局方式，于是有人就开始问我了，这个flex搭配布局应该怎么用，梳理一遍，巩固一下 flex前世今生 在前端刚刚兴起...我么们想要实现两个div一排显示除了行内块元素以外，只能用这让人又爱又恨的float float float 属性定义元素在哪个方向浮动。...2、无法实现动态实现自适应布局， 举个例子，如果想要实现二等分一排布局，width要为50%，但是如果突然来个三等分呢，width设置50%显然是已经不行了 3、margin padding设置值不能正确显示...由于浮动导致父级子级之间设置了css padding、css margin属性的值不能正确表达。...特别是上下边的padding和margin不能正确显示。 4、如果前面的元素设置了浮动，那后面的元素就有可能产生异位的现象。 如图所示，由于元素1浮动了，脱离文档流，导致元素2上去了 ?
； 工作原理 设置父元素的display属性为flex，则子元素都变成flex item，由此可以控制子元素的排列方式、尺寸、间距等； 兼容性 ?...Flex Container 先来看一个最简单的flex示例，外层div设置display: flex成为一个flex container，内部的3个div则自动变为flex item： html: <...假设flex shrink为fs，flex item的初始尺寸为is，flex item被压缩的尺寸为ss，则正确的表达式为： fs ∝ is/ss 3....Flex Basis flex-basis用于设置flex item的初始宽/高。为什么有width和height还需要重新加一个flex-basis呢？...当然，这个例子如果换成使用width也是一样的效果，但是虽然效果一样但意义不一样，所以使用flex布局时还是应该尽量遵守规范，选合适的人去干正确的事。 4.
>右侧 实现过程： 仅需将容器设置为display:flex; 盒内元素两端对其，将中间元素设置为100%宽度，或者设为flex:1，即可填充空白。...>右侧 跟flex弹性布局一样的简单。...display:none 设置元素的display为none是最常用的隐藏元素的方法 .hide { display:none; } 将元素设置为display:none后，元素在页面上将彻底消失...需要注意的是：其子元素不能设置opacity来达到显示的效果。 特点：改变元素透明度，元素不可见，占据页面空间，可以响应点击事件。.../ 溢出用省略号显示 display:-webkit-box; // 作为弹性伸缩盒子模型显示。
对包含多个子元素使用 display: flex，如果元素过多，所有子元素会被压缩，如下所示： .wrapper { display: flex; } .item { flex: 0 0 120px; height...记得要添加 content 属性，不然会无法显示其内容，别外也需要定义 display ，设置宽高才有效。...使用 display: inline-block 会出现怪异的空格 为多个元素设置 display: inline-block或 display: inline，会在每个元素之间创建一个很小的空格。...为 input 添加正确的 type 为 input 添加正确的 type，会增强移动浏览器中的用户体验，并使其更易于用户访问。
important ---- 流、元素 块级元素 常见的块级元素 「块级元素和display为block的元素不是一个概念」 元素默认的display值是list-item...CSS3属性（8个） 元素为flex布局元素(父元素display:flex|inline-flex),同时z-index值「不是auto」 - 「flex布局」 元素的opactity值不是1 -...」--正确的解法是把子元素的z-index设置为负数，这样父元素是一个块级元素，z-index<0 的子元素会在块级元素之下，就可以实现我们想要的效果。...，为 auto、scroll、hidden display的值为inline-block、table、inline-table、flex、inline-flex、grid、inline-grid position...结构，我们想实现元素内文本，在垂直方向居中显示 我是一个多行文本信息 bala bala 利用display:table .
设置为max-width之后：缩小浏览器，如果浏览器比max-width要小，那么宽度就是浏览器的宽度，既最大是那么大，可以不那么大。...-- 为什么不是main在前面,因为浮动的特性 --> aside aside...">extra 缺点：.mian的最小宽度不能小于.aside的宽度 双飞翼布局 双飞翼布局 按照注释编号，一行行实现观察效果 范例 http://js.jirengu.com...flex:0 0 33.3333%固定宽度为33.3333%！...主要需要修改的是显示的宽度width：auto,直到左右不能滑动为止。
但却真实存在，可以通过js获取被隐藏的元素 区别 设置了inline的元素不能设置宽高，有自身内容决定大小，margin值只有margin-left和margin-right值，设置margin-top...1px的边框*/ } sfaegaergeargerar ?...，多个块级元素则换行显示 display：inline-block的元素为什么可以设置宽高？...其实可以把每个元素理解为两个盒子，一个外在盒子，一个内在盒子。外在盒子负责元素可以一行显示，还是只能换行显示。内在盒子负责内容和宽高。...于是，值为block的元素实际由外在的“块级盒子”和内在的“块级盒子”组成，值为inline-block的元素则由外在的“内联盒子”和内在的“块级盒子”组成，值为inline的元素则内外均是“内联盒子”
，通过这个特性可以让子元素的居中显示，但绝对定位是基于子元素的左上角，期望的效果是子元素的中心居中显示 为了修正这个问题，可以借助外边距的负值，负的外边距可以让元素向相反方向定位，通过指定子元素的外边距为子元素宽度一半的负值...vertical-align: middle; line-height: initial; text-align: left; /* 修正文字 */ } 复制代码 这种方法需要在子元素中将文字显示重置为想要的效果...class="wp"> 123123 复制代码 下面通过css属性，可以让div显示的和table一样 .wp { display... 123123 复制代码 .wp { display: flex; justify-content...{ color: red } .blue { color: blue } 复制代码 问两个div的颜色分别是什么，竟然只有40%的同学能够答对，这40%中还有很多同学不知道为什么，希望这些同学好好补习下
和position介绍 display规定元素应该生成的框的类型。...值 描述 flex 设置弹性容器 block 此元素将显示为块级元素，此元素前后会带有换行符。 inline 默认。此元素会被显示为内联元素，元素前后没有换行符。...display:node：把元素隐藏起来，并且会改变页面布局，可以理解成在页面中把该元素删掉。 如何画一个三角形 左右边框设置为透明，长度为底部边框的一半。...左右边框长度必须设置，不设置则只有底部一条边框，是不能展示的。....flex { display: flex; float: none; } }
啰嗦那么多，正式开始 一、Flex 是什么，为什么要用？ 就 W3C 官方给到的解释是，这是设计来实现更复杂的版面布局。...而不需要去用一些很 cheat 的做法，去 hack 一些本来其实不应该用来做版面布局的属性。...为什么能用？他实现所用到的逻辑是什么？ 当然了，这仨问题也直接贯穿在功能实现当中，所以还是来了解使用的方式。...3.flex-wrap(适用于父容器） 这个主要用来定义伸缩容器里是单行还是多行显示，侧轴的方向决定了新行堆放的方向。...5.justify-content（适用于父容器） 这个是用来定义伸缩项目沿着主轴线的对齐方式。当一行上的所有伸缩项目都不能伸缩或可伸缩但是已经达到其最大长度时，这一属性才会对多余的空间进行分配。
序言 您将在本文中,简单了解到如何使用网格布局,一种布局有多种实现方式,曾今对于使用老的弹性盒模型(display:box)以及新的flex(display:flex)布局用过的话,对于css Grid.../div> 5 6 为了把我们的包装div变成一个网格，我们简单地给它一个网格的显示 .wrapper...为了确保正确理解这些值与网格外观之间的关系,请看一下这个例子 .wrapper{ display:grid; grid-template-columns:200px 50px...以下是在屏幕上显示的内容 ? 当你们为什么只有3列的时候，我们有4条专栏？看看这个图片，我画了黑色的列线 ? 请注意，我们现在正在使用网格中的所有行。....它不应该太难 ?
在上面代码中，div的id为box相当于一个大盒子，div的id为img、form、show为小盒子。...id为img主要是放置图片； id为form主要是放置表单，在里面嵌套还有一个div，它的id为btn，主要是放置登录、注册按钮； id为show是用来显示提示信息。...，宽度和高度分别为800、400px，margin-top属性表示上外边距为20px，使用弹性布局display: flex; flex-direction属性表示控制主轴的方向，colum表示垂直方向...$('show').innerHTML='您输入的内容不能为空！'...如果账号和密码输入正确或错误，向id为show对象中插入提示内容。 效果图如下所示: ? 五、总结 1.本文基于JavaScript基础，实现用户登录的功能。
下面就display的重要属性进行讲解，并配合一些相关的例子 基本属性 display: none none 是 CSS 1 就提出来的属性，将元素设置为none的时候既不会占据空间，也无法显示，相当于该元素不存在...display: inline-list-item 我在MDN上面看到有这个属性，但是我实际尝试发现这个属性是不能使用的，在 http://caniuse.com/#search=in… 上面也没有找到这个元素的兼容性...，所以应该是不能使用的，支持度全无 display: flex flex是一种弹性布局属性 注意，设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。...flex-flow: 属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。...flex: 属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。
这部分的实现内容可以通过路由的懒加载实现 ② 插槽 上图中的红色组件就是小编今天重点为大家介绍的 Tabbar。毫无疑问，一整个 Tabbar 应该是一个单独的组件；然后是内部的小标题。...3.实现过程 根据上面的思路，我们知道在tabbar-item中应该再多使用一个插槽来存放图片，然后通过设置标志位和v-if语句来判断该显示哪张图片。比如： <!...v-if语句通过 isActive 标志位的值来判断显示哪张图片，当 isActive 的值为真，显示活跃状态的图片，结果如图所示： 二、实现active文字 1.定义 active文字呢，也是和上面的...我们来看效果： 但是我们发现文字的颜色并没有发生任何的变化。这是为什么呢？ 这个跟插槽被替换有关。...，只有当某个页面被激活时才会从服务器中下载下来，提高了运行效率; 接着是当path为空时，就显示首页的信息，让用户一进来就显示首页的信息，而不是需要用户点击tabbar-item的“首页”才显示首页的信息
flex容器下，不同大小的文字底部对齐，为什么应该使用 baseline 而不是 flex-end?...背景－从一个兼容性Bug说起看一下最简单的例子: <div class="big-text" style
导致这个过程被触发的原因有很多：元素位置移动、大小改变、增删节点以及这里要说的display显示与隐藏切换等等。而元素的变动需要页面快速的显示出来，所以在我们看来是“突兀”的。...-- 这里放“页面”数据结构（也就是原本应该在body标签下的所有东西） --> <!...为“box”的div里面放的就是“原本的页面整体”部分。...（这时候实际上展示的是space占位元素，但是此元素啥样式也没有，故而显示出来的就是下面的同宽度的“第二页面”z_two_page） ★这里需要注意的是：为什么“哈哈哈”所属div在前而“页面”所属div...” 代码中flex的前两个属性值为0，表示在空间增大或缩小时依然保持原状（这是本文的基础！）
--主要内容--> 此时刷新页面，发现并不能看见任何有用的信息，这个原因是因为背景色都一样你怎么可能看得见，还有就是你也需要给予 div 标签对应的背景颜色，所以在这里使用一种较为常用的颜色...不过我们发现此时的样式还是有些奇怪，因为如果 div 是白色的话为什么只显示了头部的 div 背景色为白色，底部的 div 就像消失了一样，案例来说设置 flex 方向为竖轴后，那么下面的 div 应该会占满空间才是..."> 这个时候给予的值总和不会超过1，这样就不会充满整个屏幕宽，并且按照比例分配，刷新页面如下： 这个时候我们应该是居中，那么这个时候新建一个类咩咩咩为 center直接给予水平居中属性...，都是竖着的，那么每一个块当作是一个 div 进行包裹，那么整体上看是竖着排列的 flex 布局，那么此时内容块应该是为 flex 布局，并且方向为竖，那么直接给予这个内容块最大的容器 div 对应的样式...max-width:600px 当前屏幕最大宽度为 600px 时，那么就是移动端设备，直接给予 content 属性为 flex-direction: column;，那么内容就会垂直显示，那么就不会并排
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
