
css
小小的糖人
这个作者很懒,什么都没留下…
展开
-
px、em、rem、%、vw、vh单位之间的区别?
1.pxpx就是 pixel(像素)的缩写,相对长度单位,相对于屏幕分辨率;2.em参考父元素的font-size,具有继承的特点。浏览器默认字体是16px,整个页面内1em不是一个固定的值;字体大小同样都是1.5em,但是效果却截然不同,按照W3C提供的公式,我们可以计算下: class为id1的div字体大小继承自父元素body:16px*1.5em = 24px class为id2的div字体大小继...转载 2020-08-12 17:27:31 · 402 阅读 · 0 评论 -
如何实现div盒子水平垂直居中
实现DIV盒子水平垂直居中的方法多种,在这里将介绍几种常用的。flex:在父容器上设置,让主轴和侧轴的子元素排列方式都为center//父容器display:flex;justify-content:center;align-items:center;position:子绝父相,margin设置为auto;top/right/bottom/left的值都设置为0//父容器position:relative;//子容器position:absolute;margin:auto;原创 2020-05-14 20:28:28 · 336 阅读 · 0 评论 -
浅谈对css模型的理解
1、什么是css模型?可以说,页面就是由一个个盒模型堆砌起来的,每个HTML元素都可以叫做盒模型,盒模型由外而内包括:外边距(margin)、边框(border)、内边距(padding)、内容(content)。它在页面中所占的实际宽度是margin + border + padding + content 的宽度相加。css的盒模型有两种:标准盒模型和IE盒模型。分别如下图所示:2、两种盒模型的区别由上图可以看出:在标准盒模型中height,width值是content部分;而IE盒模型中,原创 2020-05-14 19:51:27 · 282 阅读 · 0 评论 -
CSS解析误解-选择器的从右向左解析
对于下面两种css写法,相信很多人和我想的一样ul.new-ul{…..}比.new-ul{….}更高效。 其实我们的理解貌似没有错。如果在类名前面加上标签的话,这样浏览器就可以先找到所有对应的标签,然后匹配类名,这样就不用全局匹配了,查找速度自然会快很多。我们这样的理解,意味着选择器解析是从左往右的,就像jQuery的选择器一样。但是,实际上,css选择器的解析是从右往左的。也就...转载 2020-05-14 10:19:06 · 541 阅读 · 0 评论 -
web前端布局之flex布局
总的来说,flex布局的原理通过给父元素添加flex属性,来控制子元素的位置和排列方式。采用flex布局的元素称为flex容器。flex容器中存在两条轴,分别为主轴和侧轴,容器中的每个单元称为flex项目。在容器上可以设置6个属性:分别为:(flex-direction、flex-wrap、flex-flow、justify-content、align-items、align-conten...原创 2020-05-08 00:03:20 · 610 阅读 · 2 评论 -
web前端开发之几种布局方式之响应式布局
一理解几种布局的概念1、静态布局(Static Layout)即传统Web设计,对于PC设计一个Layout,在屏幕宽高有调整时,使用横向和竖向的滚动条来查阅被遮掩部分; 意思就是不管浏览器尺寸具体是多少,网页布局就按照当时写代码的布局来布置; 对于移动设备,单独设计一个布局,使用不同的域名如wap.或m.。2、弹性布局弹性布局是CSS3引入...转载 2020-05-07 23:48:00 · 1042 阅读 · 0 评论 -
传统布局方式二---浮动,以及清除浮动的方法
一、浮动(float)的定义使元素脱离文档流、按照指定方向发生移动,遇到父级元素或者相邻的浮动元素停了下来。文档流:文档流是文档中可显示对象在排列时所占用的位置。float 的属性值为left、right、none二、浮动的特性浮动元素会脱离标准流(脱标)浮动的盒子不再保留原先的位置浮动的元素会一行内显示并且元素顶部对齐浮动的元素会具有行内块元素的特性三、为什么要清除浮动...原创 2020-05-05 23:42:01 · 180 阅读 · 0 评论 -
传统的页面的布局方式一普通流(标准流)
所谓的普通流 (normal flow): 就是元素按照其在HTML中的先后顺序至上而下布局。1、块级元素会独占一行,从上向下顺序排列。常用元素:div、hr、p、h1~h6、ul、ol、dl、form、table2、行内元素水平排列,直到当行被占满然后换行常用元素:span、a、i、em 等...原创 2020-05-05 23:06:34 · 394 阅读 · 0 评论