CSS/CSS3
关于CSS/CSS3
这个东西不好和你解释,因为我是菜狗
这个作者很懒,什么都没留下…
展开
-
自适应两栏布局和三栏布局的常用方法
参考:css实现两栏布局,左侧固定宽,右侧自适应的7中方法1、自适应两栏布局,左侧固定宽度,右侧自适应设左侧为width为100pxcalc计算宽度:calc(100% - 100px)float + margin:左侧float,右侧margin-left:100pxfloat+overflow:左侧float,右侧overflow:hiddenposition:absolute + margin:左侧position:absolute,右侧margin-left:100pxpositio原创 2020-10-12 11:30:40 · 261 阅读 · 0 评论 -
BFC和IFC分别是什么?BFC有什么作用?
1、简要概括Block level的box会参与形成BFC:例如display值为block/ list-item/ tableInline level的box会参与形成IFC:比如 display值为inline/ inline-table/ inline-block2、FC(Formatting Context)格式化上下文。定义的是页面中的一块渲染区域,并且有一套渲染规则。它决定了其子元素将如何定位,以及和其他元素的关系和相互作用。3、布局规则IFC布局规则:在行内格式化上下文中,b原创 2020-09-17 17:15:09 · 2701 阅读 · 1 评论 -
为什么outline-width不会引起回流而border-width会引起?
1、盒模型标准盒子模型:box-sizing: content-box (height只包括content高度)IE盒模型:box-sizing: border-box (height = padding + border + content), 为了设置padding和border时不撑开盒子2、 什么是outline轮廓(outline)是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用在浏览器里,当鼠标点击或使用Tab键让一个链接或者一个radio获得焦点的时候,该原创 2020-09-08 23:45:38 · 365 阅读 · 0 评论 -
css树的解析与DOM树的解析相关问题
1、html的解析和css解析是同步进行吗?ans:浏览器会先下载HTML解析页面生成DOM树,遇到css标签就开始下载css并解析,这个过程不会阻塞DOM树构建,最后DOM树和css规则树生成渲染树,html解析完成。2、css加载会阻塞DOM树的解析和渲染吗?参考:js执行会阻塞DOM树的解析和渲染,那么css加载会阻塞DOM树的解析和渲染吗ans:css加载不会阻塞DOM树的解析css加载会阻塞DOM树的渲染css加载会阻塞后面js语句的执行实际上我理解的DOM树的渲染,就是构建r原创 2020-09-07 23:03:22 · 940 阅读 · 1 评论 -
如何进行移动端适配?
参考:移动端前端适配方案(总结) – 面试重点概括通过CSS3的media queries,即媒体查询flex布局rem + viewport缩放rem方式1、media queries通过查询设备的宽度来执行不同的 css 代码,最终达到界面的配置。@media screen and (max-width: 600px) { /*当屏幕尺寸小于600px时,应用下面的CSS样式*/ /*你的css代码*/}2、Flex弹性布局参考:meta name=“viewport”原创 2020-09-07 22:22:10 · 306 阅读 · 0 评论 -
清除浮动有哪些方式?
参考:CSS的浮动及清除浮动的5种方法1、为什么要清除浮动?标准流:盒子会各占整行位置。子盒子若是标准流,父盒子虽然没有高度,但是会撑开父盒子高度。浮动:盒子浮了起来,不会占据原来的位置,若父盒子没有定义高度,则不会撑开父盒子,父盒子高度为0。注意:(浮动可以让多个块级元素在一行显示,且块与块之间没有空隙,但要注意给父盒子清除浮动,否则父盒子不会被撑开)。所以,清除浮动,主要是为了解决父级元素因为子级浮动引起的内部高度为0的问题。2、清除浮动的方法父级div定义伪类:after和zoom原创 2020-09-07 21:27:40 · 225 阅读 · 0 评论 -
了解重绘和回流吗?分别什么情况会发生?
参考:JavaScript——浏览器的重绘与回流什么是回流,什么是重绘,有什么区别?1、浏览器渲染过程浏览器把获取到的html代码解析成1个Dom树,DOM树里包含了所有HTML标签,包括display:none隐藏,还有用JS动态添加的元素等浏览器把所有样式(主要包括css和浏览器的样式设置)解析成样式结构体dom tree和样式结构体(cssom)结合后构建渲染树(render tree),render tree能识别样式,且render tree不包含隐藏的节点,比如display:non原创 2020-08-31 14:11:41 · 1118 阅读 · 0 评论 -
IE盒模型和标准盒子模型的区别?
参考:前端面试题之CSS盒模型原创 2020-08-21 13:28:48 · 344 阅读 · 1 评论 -
Flex布局了解吗?
参考:Flex 布局教程:语法篇1、 Flex布局概念Flex意为“弹性布局”,采用Flex 布局的元素,称为 Flex 容器(flex container),简称"容器"。它的所有子元素自动成为容器成员,称为 Flex 项目(flex item),简称"项目"。main axis:水平的主轴cross axis:垂直的交叉轴main start:主轴的开始位置(与边框的交叉点)main end:主轴的结束位置cross start:交叉轴的开始位置cross end:交叉轴的结束位置原创 2020-08-19 15:25:21 · 241 阅读 · 0 评论 -
sticky属性解释一下?
positin:sticky是一个新的CSS3属性,它的表现类似于position:relative和position:fixed的合体,在目标区域在屏幕中可见时,它的行为就像是position:relative一样。而当页面滚动超出区域时,它的行为就像是position:fixed一样,固定在目标位置。它可以设置top,left,right,bottom,默认设置只有没有任何变化。譬如当你设置top:0,当这个元素距离上为0时,就变成了固定定位。...原创 2020-08-19 14:56:46 · 609 阅读 · 0 评论 -
CSS实现水平垂直居中
参考:CSS水平居中+垂直居中+水平/垂直居中的方法总结水平居中1、 行内元素其父级元素是块级元素:给其父元素设置 text-align: center其父级元素不是块级元素:将其父级元素设置为块级元素,再给其父元素设置text-align: center2、块级元素方案1定宽度,需要谁居中,给其设置 margin: 0 auto不定宽度:默认子元素宽度和父元素宽度一样,设置子元素:display: inline-block/inline,给其父元素设置:text-align: c原创 2020-08-18 01:02:48 · 66 阅读 · 0 评论 -
如何用css实现一个环形进度条?
1、定义三个div盒子,position均为absolute。<div class="wrapper" data-anim="base wrapper"> <div class="circle1" data-anim="base left"></div> <div class="circle2" data-anim="base right"></div></div>最底部的div盒子我们成为wr原创 2020-08-03 20:51:17 · 1544 阅读 · 0 评论