css3
文章平均质量分 79
lala_shine
1111
展开
-
BFC的原理
一、常见定位方案在讲 BFC 之前,我们先来了解一下常见的定位方案,定位方案是控制元素的布局,有三种常见方案:普通流 (normal flow)在普通流中,元素按照其在 HTML 中的先后位置至上而下布局,在这个过程中,行内元素水平排列,直到当行被占满然后换行,块级元素则会被渲染为完整的一个新行,除非另外指定,否则所有元素默认都是普通流定位,也可以说,普通流中元素的位置由该元素在 HTML 文档中的位置决定。浮动 (float)在浮动布局中,元素首先按照普通流的位置出现,然后根据浮动的方向尽原创 2021-02-04 18:17:20 · 131 阅读 · 0 评论 -
css清除浮动的几种方法
清除浮动的几种方法标准流:盒子会各占整行位置。子盒子若是标准流,父盒子虽然没有高度,但是会撑开父盒子高度。浮动:盒子浮了起来,不会占据原来的位置,若父盒子没有定义高度,则不会撑开父盒子,父盒 子高度为0。(浮动可以让多个块级元素在一行显示,且块与块之间没有空隙,但要注意给父盒子清除浮动,否则父盒子不会被撑开)。为什么要清除浮动呢?清除浮动的本质是什么? 清除浮动主要是为了解决父级元素因为子级浮动引起的内部高度为0的问题。清除浮动的方法:1. 额外标签法:给谁清除浮动,就在其后额..原创 2021-02-04 16:42:05 · 131 阅读 · 0 评论 -
{*zoom:1;}作用
{*zoom:1;}作用 zoom:1的常见作用: zoom是IE专用属性,firefox等是不支持的。它的本来作用是设置或检索对象的缩放比例,但这作用几乎用不到。 可以让网页实现IE7中的放大缩小功能。比如你想让你的网页缩小为原来的一半,那么就在body中加入style="zoom:0.5" 设置zoom:1可以在IE6下清除浮动、解决margin导致的重叠等问题。 通常,当浮动子元素导致父元素塌陷的时候,只要给父元素加上overflow: hidden;来解决,但是..转载 2021-02-04 11:33:11 · 2429 阅读 · 0 评论 -
sass/scss与less的区别
一. Sass/Scss、Less是什么?Sass (Syntactically Awesome Stylesheets)是一种动态样式语言,Sass语法属于缩排语法,比css比多出好些功能(如变量、嵌套、运算,混入(Mixin)、继承、颜色处理,函数等),更容易阅读。Sass与Scss是什么关系?Sass的缩排语法,对于写惯css前端的web开发者来说很不直观,也不能将css代码加入到Sa...转载 2019-03-16 13:53:51 · 218 阅读 · 0 评论 -
css的几种布局
前言1 table 布局2 flex 布局2.1 盒模型2.2 display / poistion2.3 flexbox 布局3 float 布局3.1 高度塌陷3.2 两栏布局3.3 三栏布局4 响应式布局4.1 meta 标签4.2 使用 rem4.3 media query5 总结...转载 2019-03-20 10:34:47 · 206 阅读 · 0 评论 -
display:table和display:table-cell的用法
display的table和table-cell一般情况下用的不多,所以很少有人去关注它,但他们两个联手起来会给你惊喜!这里抛出这样一个问题,如下,让块里的多行文字垂直居中?一说到垂直居中就会想到,单行文字垂直居中line-height等于height;块级元素垂直居中,position定位或者flex布局。但这里我介绍display:table和table-ce...转载 2019-03-14 23:08:02 · 491 阅读 · 0 评论 -
float定位对内联元素和块状元素的影响
写在前面:附一篇w3s的关于css float的讲解:http://www.w3school.com.cn/css/css_positioning_floating.aspfloat属性还没有彻底了解,因为遇到了float之后会导致width自适应最小化的问题,然后又偶然发现float的内联元素可以自己设置宽高,内外边距...转载 2018-06-19 16:35:11 · 475 阅读 · 0 评论 -
absolute和float的区别
-1文档流与非文档流。一、首先,按照普通流和非普通流来分类: ①普通流:就是按照上下左右的顺序一行一行排列的,长度不够就会自动挤到下一行。 ②非普通流:顾名思义就是脱离普通流的,在普通流上面是不占据位置的。css有position的样式,position包括:static,relative,...转载 2018-06-19 16:20:03 · 2351 阅读 · 0 评论 -
css3中的伪类before和after常见用法
before/after伪类相当于在元素内部插入两个额外的标签,其最适合也是最推荐的应用就是图形生成。在一些精致的UI实现上,可以简化HTML代码,提高可读性和可维护性。国外这两个伪类应用相当的普及以及兴盛,不过貌似我们这边前端er们普遍缺乏使用这两个伪类的意识,要使用顶多也就是跟风的“清除浮动”应用。1.基本用法:before和:after的作用就是在指定的元素内容(而不是元素本身)之前...原创 2018-05-21 16:12:50 · 22351 阅读 · 1 评论 -
css3-单位px与vw,rem的区别
css3中单位px,em,rem,vh,vw,vmin,vmax的区别及浏览器支持情况 px:绝对单位,页面按精确像素展示em:相对单位,基准点为父节点字体的大小,如果自身定义了font-size按自身来计算(浏览器默认字体是16px),整个页面内1em不是一个固定的值。rem:相对单位,可理解为”root em”, 相对根节点html的字体大小来计算,...原创 2018-05-07 22:12:20 · 3786 阅读 · 0 评论 -
常见电脑屏幕分辨率
1024*600 (常见8.9寸电脑使用) 1024*768(常用10.4、12.1、14.1、15寸电脑使用)4:3 1280*1024(常用14.1、15寸电脑使用)5:4 1440*1050(常用15、16.1寸电脑使用)4:3 1600*1200(常用15、16.1寸电脑使用)4:3 1280*800(常见10.8、12.1、15.4寸电脑使用)16:10 1366*768(...原创 2018-05-14 09:50:20 · 51832 阅读 · 1 评论 -
css3更改默认滚动条样式-webkit-scrollbar
浏览器自带的原始滚动条很不美观,在一些特殊需求中,我们需要对滚动条的样式单独设置,因此就出现了用-webkit-scrollbar来自定义滚动条的样式。。 首先 webkit支持拥有overflow属性的区域,列表框,下拉菜单,textarea的滚动条自定义样式,所以用处还是挺大的。当然,兼容所有浏览器的滚动条样式目前是不存在的。 滚动条的组成::-webkit-scrollbar 滚...原创 2018-05-17 17:14:35 · 32093 阅读 · 6 评论 -
rem是如何实现自适应布局的
rem是什么?rem(font size of the root element)是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位。看到rem大家一定会想起em单位,em(font size of the element)是指相对于父元素的字体大小的单位。它们之间其实很相似,只不过一个计算的规则是依赖根元素一个是依赖父元素计算。为什么web app要使用rem?这里我特别强原创 2018-02-07 15:06:07 · 714 阅读 · 0 评论 -
css中的px、em 、rem的区别
国内的设计师大都喜欢用px,而国外的网站大都喜欢用em和rem,那么三者有什么区别,又各自有什么优劣呢?PX特点-1. IE无法调整那些使用px作为单位的字体大小;-2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位;-3. Firefox能够调整px和em,rem,但是有大部分的国产浏览器使用IE内核。px像素(Pixel) 相对长度单位。像素px是相对于显示器屏幕分辨率而原创 2018-01-03 10:10:35 · 204 阅读 · 0 评论 -
css3中的渐进增强和优雅降级
渐进增强和优雅降级这两个概念是在 CSS3 出现之后火起来的。由于低级浏览器不支持 CSS3,但是 CSS3 特效太优秀不忍放弃,所以在高级浏览器中使用CSS3,而在低级浏览器只保证最基本的功能。二者的目的都是关注不同浏览器下的不同体验,但是它们侧重点不同,所以导致了工作流程上的不同。 渐进增强(Progressive Enhancement):一开始就针对低版本浏览器进行构建页面,完成基原创 2017-12-01 10:54:28 · 1101 阅读 · 0 评论