众所周知，前端内容多而杂，经过查阅各种资料，总结了一些知识点，以备后续复习使用。文章分为上（html，css）中(js)下(vue)三部分。...BFC原理（块级格式化上下文） 含义：是页面中的一块独立渲染区域，并有一套渲染规则。它决定了其子元素如何定位，以及其它元素的关系和相互作用。...父元素display:table;width:100% 所有子元素：display:table-cell calc布局：全部float:left .main:calc(100% - 两宽度) 使用...) 多行文本 -webkit-line-clamp:2 //（用来限制在一个块元素显示的文本的行数） display: -webkit-box//（将对象作为弹性伸缩盒子模型显示） overflow...不定高：父：flex，子：margin：auto，0 不定高：父：flex，align-items: center 水平垂直居中 子元素为块级元素：父：flex，子：margin：auto
box-sizing:border-box的就是:原生普通文本框和文本域的100%自适应父容器宽度 替换元素的特性之一:尺寸由内部元素决定并且无论其display属性值是...) text-overflow:ellipsis：当文本溢出时，显示省略符号来代表被修剪的文本 white-space:nowrap:设置文本不换行 overflow:hidden：当子元素内容超过容器宽度高度限制的时候...+ line-clamp + box-orient + overflow display: -webkit-box：将对象作为「弹性伸缩盒子模型」显示 -webkit-line-clamp: n：和①...结合使用，用来限制在一个块元素显示的文本的行数(n) -webkit-box-orient: vertical：和①结合使用 ，设置或检索伸缩盒对象的子元素的排列方式 overflow: hidden...❞ CSS3中，z-index已经并非只对定位元素有效，flex盒子的「子元素」也可以设置z-index属性。
匹配.box下所有子元素a 2.E>F (子代选择器) 匹配E元素下第一级子元素F eg: .box>a{color:red;} 匹配.box下第一级子元素a 3.E+F 相邻兄弟选择器 匹配E元素后面紧邻的那个...:first-child 匹配每个父元素下第一个子元素 eg: .box a:first-child{color:red;} 匹配.box下第一个子元素a(此时，a必须是.box下的第一个子元素) eg...:last-child 匹配每个父元素下最后一个子元素 eg: .box a:last-child{color:blue;} 匹配.box下最后一个子元素a(此时，a必须是.box下最后一个子元素) eg...:center;align-items:center;} ★ 如何使用flex布局实现不定宽高的子元素在父元素中水平垂直都居中，方法如下： 父元素{display:flex;justify-content...，方法如下： 元素{ position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); } ◆ 使用变形实现不定宽高的子元素在父元素中水平垂直都居中
: border-box; } 效果 代码&演示：https://codepen.io/DYBOY/pen/BaQPaaj 发现第二个形状是一个椭圆，其原因是百分比的计算是把所在元素矩形区域的宽和高作为计算基数...grid flex/grid 的直接子元素为BFC table 相关的比如 table、table-cell、table-caption等 flow-root最好，无副作用 溢出，显示指明overflow...BFC（html标签）内的子元素，因此需要将父/子元素变成BFC（根据如上的创建BFC的CSS值设置），那么子元素的margin就会依赖父元素的左上角作为基准点margin偏移。...九、flex布局 .box { display: flex; /* 还可以设置行内元素的 inline-flex */ flex-direction: row; /* 主轴水平！...使用经验的一些精简总结，另外推荐大家阅读《Flexbox布局中不为人知的细节 - Alibaba F2E》，从原理层解读，研读完非常受用。
绝对定位的元素可以设置外边距（margins），且不会与其他边距合并。 2. CSS中，box-sizing属性值有什么用？ 用来控制元素的盒子模型的解析模式，默认为content-box。...需要注意的是：其子元素不能设置opacity来达到显示的效果。 特点：改变元素透明度，元素不可见，占据页面空间，可以响应点击事件。...transition不支持支持支持子元素可复原不能能不能被遮挡的元素可触发事件能能不能 7..../ 溢出用省略号显示 display:-webkit-box; // 作为弹性伸缩盒子模型显示。...：使用float脱离文档流时，其他盒子会无视这个元素，但其他盒子内的文本依然会为这个元素让出位置，环绕在该元素的周围。
推荐:复杂的布局不能使用 table，简单显示数据的布局可以使用 table 40. 定位，改变元素在网页中的默认位置，按照定位效果，可以分为以下几种方式： (1)....在 td 中，设置文本的垂直对齐方式 ②. 设置行内块元素两边文本的垂直对齐方式 ③....[attr^=value] ^= 以…作为开始 语义:匹配以 value 值作为开始的 attr 属性的元素 A. div[class ^= col] 匹配页面中 class 属性值是以 col 作为开始的...基本概念 ①. flex 容器:简称容器，将元素设置为 Flex 容器后，其子元素允许实现灵活的位置摆放 ②. flex 项目:简称项目，存放在 Flex 容器中的内容 (2)....子元素 -webkit-box-orient：horizontal/vertical; -webkit-box-flex：1 (6).
4、区别：IE无法调用那些使用px作为单位的字体大小，而em和rem可以缩放，rem相对的只是HTML根元素。...但可以设置水平方向的margin和padding属性，不能设置垂直方向的padding和margin； （3）inline-block： 将对象设置为inline对象，但对象的内容作为block对象呈现...flex布局是CSS3新增的一种布局方式，可以通过将一个元素的display属性值设置为flex从而使它成为一个flex容器，它的所有子元素都会成为它的项目。...3、link标签作为HTML元素，不存在兼容性问题，而@import是CSS2.1才有的语法，故老版本浏览器（IE5之前）不能识别。...1、在css样式表中书写时，id选择符前缀应加"#“，class选择符前缀应加”." 2、id属性在一个页面中书写时只能使用一次，而class可以反复使用 3、id作为元素标签用于区分不同结构和内容
在ie8+浏览器中使用哪个盒模型可以由box-sizing（CSS新增的属性）控制，默认值为 content-box，即标准盒模型； 如果将 box-sizing 设为 border-box 则用的是IE...伪元素用于创建一些不在文档树中的元素，并为其添加样式。它们允许我们为元素的某些部分设置样式。比如说，我们可以通过 ::before 来在一个元素前增加一些文本，并为这些文本添加样式。...虽然用户可以看到这些文本，但是这些文本实际上不在文档树中。 5. CSS 中哪些属性可以继承？...任何一个容器都可以指定为Flex布局。行内元素也可以使用Flex布局。注意，设为Flex布局以后，子元素的float、clear和vertical- align属性将失效。...采用Flex布局的元素，称为Flex容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称"项目"。
以方案一为例，将pc端页面改成适应移动端的页面： 在移动开发过程中要学会做减法，一些不太重要的东西可以隐藏起来。 5、 使用什么布局？...可以使用 ① 响应式布局：responsive 高清图片 retina px em rem ② flex弹性盒子布局：高效居中方案 等比例填充列行 background-size font-size 多行文本溢出...6、 flexbox弹性盒子布局 根据元素个数不同，自动填充 display:-webkit-flex; 表示使用弹性布局 子元素设置 flex:num; 占容器的比例 划分方式： ① 等比划分（flex...，建议使用旧版方案： ①新flex布局： display : -webkit-flex; -webkit-fiex: 1; //子元素的flex justify-content : center...; align-items : center; ②旧flexbox布局： display : -webkit-flex-box; -webkit-fiex-box: 1; //子元素的
:nth-last-child(n) 倒数第n个子元素 :nth-of-type(n) 父元素下的第n个指定类型的子元素 :nth-last-of-type 父元素下的数第n个指定类型的子元素 :first-child...挑选父元素下的第一个子元素 :last-child 挑选父元素下的最终一个子元素 :only-child 挑选父元素下仅有的子元素 :only-of-type挑选父元素下指定类型的仅有子元素 :root...attr ^= "value"] 指定特点名，特点值以value最初 :E[attr $="value"] 指定特点名，特点值以value结束 :E[attr *="value"] 指定了特点名，特点值中包含了...设置给子元素 box-ordinal-group 设置元素的详细方位 box-flex 界说盒子的弹性空间 flex布局设置给父元素特点: flex-direction特点决议显现的方向（即项目的摆放方向...设置给子元素： order 特点界说项目的摆放顺序。数值越小，摆放越靠前，默以为0。可为负值 flex-grow 特点界说项目的扩大份额，默以为0，即如果存在剩下空间，也不扩大。
属性规定文本块中首行文本的缩进 p{ text-indent:50px; } 如果值是负数，将第一行左缩进 表格属性 表格边框：指定CSS表格边框，使用border属性 table, td {...h1元素 第一个元素 第二个元素 h1~p{ color:red; } 盒子模型 所有HTML元素可以看作盒子，在CSS中，"box model"...弹性盒模型 弹性盒子是 CSS3 的一种新的布局模式 CSS3 弹性盒是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式 引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列...：display:flex;开启弹性盒，属性设置后子元素默认水平排列 flex-direction属性：flex-direction 属性指定了弹性子元素在父容器中的位置 flex-direction:...（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度） 子元素上的属性 flex：flex 根据弹性盒子元素所设置的扩展因子作为比率来分配剩余空间 <div class="<em>flex</em>-container
原因就出在浏览器需要如何判断快速点击上，当用户在屏幕上单击某一个元素时候，例如跳转链接， 此处浏览器会先捕获该次单击，但浏览器不能决定用户是单纯要点击链接还是要双击该部分区域进行缩放操作...，使用css的hover并不能满足我们的需求，还好国外有个激活css的active效果，代码如下， <!...=================== flex：定义布局为盒模型 flex-v：盒模型垂直布局 flex-1：子元素占据剩余的空间 flex-align-center：子元素垂直居中...flex-pack-center：子元素水平居中 flex-pack-justify：子元素两端对齐 兼容性：ios 4+、android 2.3+、winphone8+ ==...：定义布局为盒模型 flex-v：盒模型垂直布局 flex-1：子元素占据剩余的空间 flex-align-center：子元素垂直居中 flex-pack-center：子元素水平居中
text-align 对齐元素中的文本，默认left，right、center、justify两端对齐。...列表 CSS 列表属性允许你放置、改变列表项标志，或者将图像作为列表项标志。 属性 描述 list-style 简写属性。用于把所有用于列表的属性设置于一个声明中。...击穿Scoped 使用 scoped 后，父组件的样式将不会渗透到子组件中。如果希望 scoped 样式中的一个选择器能够作用得“更深”，例如影响子组件，你可以使用 >>> 操作符。...DOM元素说使用的盒子模型（box），即元素应该生成的框的类型。...子元素的float、clear和vertical-align属性将失效。
学习路线 块元素，行内块元素，行内元素定义 盒子模型 文本操作 文本垂直操作：vertical-align的使用图示。middle设置居中。...vertical-align 只对行内元素、行内块元素和表格单元格（table-cell）元素生效：不能用它垂直对齐块级元素。...但是行内元素设置无效，因为行内元素无法设置宽高生效。 3.父容器开启flex布局，子容器margin:auto;也可以设置设置子容器居中。...flex(弹性盒子) 采用flex布局的元素，称为flex容器；这个容器的子元素称为flex项目。...子元素设置固定高度时，与flex-start效果一样。 border边框使用 box-sizing设置 content-box： padding不被包含在定义的width和height之内。
一、多列布局 CSS3中新出现的多列布局 (multi-column) 是传统 HTML 网页中块状布局模式的有力扩充。 这种新语法能够让 WEB 开发人员轻松的让文本呈现多列显示。...所以，为了最大效率的使用大屏幕显示器，页面设计中需要限制文本的宽度，让文本按多列呈现，就像报纸上的新闻排版一样。...3、flex属性（子元素使用） 3.1、flex-grow flow-grow：可以来扩展子元素的宽度：设置当前元素应该占据剩余空间的比例值，这个比例值是和其他兄弟子元素占据的剩余空间平分的。...（在子元素未设置高度时有效） baseline:以子元素中文本基线对齐来来对齐*/ 问题： align-items 既然写在父元素中，是对所有子元素在侧轴方向的对齐方式进行设置。...那么，能不能单独设置某个子元素在侧轴的对齐方式呢？ 5、align-self （子元素使用） 单独设置某个子元素在侧轴的对齐方式，属性值和 align-items 相同。
; padding: 6px 5px; align-items: center; flex:1; box-shadow: 0 5px 30px....chatArea 类使用了 display: flex; 属性，将其子元素沿着水平方向排列。其子元素包括了一个文本域、一个加号图标和一个发送按钮图标。...文本域使用了 flex: 1; 属性，使其占据父元素剩余所有的空间，这样文本域就会填满整个父元素，而加号和发送按钮图标则只占用它们自己的空间。...整个聊天区域的父元素是.chatBottom，而.chatCopyright 是.chatBottom的兄弟元素,因此它们不受 flex 布局的影响。...总体上来看，这段代码中使用了 flex 布局来让文本域占据整个聊天区域，而加号和发送按钮图标则放置在文本域的两侧。
弹性盒子模型（Flexible Box） 属性(新) 属性 描述 CSS flex 复合属性。设置或检索弹性盒模型对象的子元素如何分配空间。...3 flex-flow 复合属性。设置或检索弹性盒模型对象的子元素排列方式。 3 flex-direction 该属性通过定义flex容器的主轴方向来决定felx子项在flex容器中的位置。...弹性盒子模型（Flexible Box） 属性(旧) 属性 描述 CSS box-align 指定如何对齐一个框的子元素 3 box-direction 指定在哪个方向，显示一个框的子元素...3 box-flex 指定一个框的子元素是否是灵活的或固定的大小 3 box-flex-group 指派灵活的元素到Flex组 3 box-lines 每当它在父框的空间运行时，是否指定将再上一个新的行列...3 box-ordinal-group 指定一个框的子元素的显示顺序 3 box-orient 指定一个框的子元素是否在水平或垂直方向应铺设 3 box-pack 指定横向盒在垂直框的水平位置和垂直位置
在日常开发展示页面，如果一段文本的数量过长，受制于元素宽度的因素，有可能不能完全显示，为了提高用户的使用体验，这个时候就需要我们把溢出的文本显示成省略号。...： -webkit-line-clamp: 2：用来限制在一个块元素显示的文本的行数，为了实现该效果，它需要组合其他的WebKit属性） display: -webkit-box：和1结合使用，将对象作为弹性伸缩盒子模型显示...-webkit-box-orient: vertical：和1结合使用 ，设置或检索伸缩盒对象的子元素的排列方式 overflow: hidden：文本溢出限定的宽度就隐藏内容 text-overflow...它的所有子元素自动成为容器成员，称为flex项目item。 容器中默认存在两条轴，主轴和交叉轴，呈90度关系。项目默认沿主轴排列，通过flex-direction来决定主轴的方向。...: inline-flex 注意：同一个元素不能同时存在于两个 BFC 中。
三、父元素高度不固定，单行文本居中 既然父元素高度不固定，那肯定就没有line-height秀的机会了。 （特别说明，第三条系列中的父元素height值只是为了撑开然后填充背景色看的。..."> 因为vertical-align只对inline/inline-block元素起作用，而浮动会让元素block水平化，就不能使用vertical-align对齐了...实现两端对齐 因为vertical-align只对inline/inline-block元素起作用，而浮动会让元素block水平化，就不能使用vertical-align对齐了。...（一）灵魂辅助的vertical-align:middle值 具体见上边第三条的例子，用一个span空标签放到需要垂直居中元素的后边或者前边，作为辅助兄弟元素。...Flex弹性盒布局属性，此系列中还有两个属性justify-content 和 align-items 分别用于实现水平居中和垂直居中。
使用场景 前端开发中，网页布局是很重要的一部分。...左中右弹性布局 常用属性 1、Flex布局概念 flex全称是flexbox（flexible Box），即弹性盒子。...; flex: 0 auto flex: initial -->> flex: 0 1 auto; 即flex的初始值 开发中遇到的问题 1、子元素被压缩 问题： 当设置子容器的长度flex为1时...解决方法： 设子容器width:0;可能出在于子容器没有设置宽度，省略符可能需要对父元素设置宽度，设置为100%无效，当设置为0的时候，子容器恢复到设定的宽度，省略号也出现了。...5 flex布局滚动，子元素无法全部显示 问题： 父级使用flex布局，列表页设置flex:1;占满空闲空间，但是所有的列没有完全显示出来，滚动条也没有出现。 ?
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM
