Css基础
提供一些工作中css开发案例供大家学习
samllplum
有智者立长志 无志者长立志
展开
-
CSS实现垂直居中的六种方法
方法一 这个方法让一些显示成table,然后我们就可以利用table的vertical-align属性了(vertical-align作用在其他一些元素上会表现得非常不一样)。Html代码 div id="wrapper"> div id="cell"> div class="content">Content g原创 2018-01-26 16:32:34 · 227 阅读 · 0 评论 -
Flex弹性布局盒模型
Flex是Flexible Box的缩写,意为”弹性布局”,用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。.box{ display: flex;//设为Flex布局以后,子元素的float、clear和vertical-align属性将失效。}属性总结表:1.flex-direction属性.box { flex-directio...原创 2019-05-21 22:25:37 · 207 阅读 · 0 评论 -
如何用 lib-flexible 实现移动端H5页面适配
最近这几个星期在学到了移动端H5页面适配,以前根本没做过移动端网页,所以把我学到的小知识点写下来,也分享给前端新手们。做移动端网页和pc端很大不同的便是现在移动端窗口分辨率繁多。很多时候UI给的设计图只有一份,还是按照iphone6设计的,这就让前端适配其他例如6plus或安卓等其他移动端头疼。还好,阿里巴巴2015年底公开了其成熟的适配方案,lib-flexible,至于其可靠性可参...原创 2018-05-05 16:03:27 · 296 阅读 · 0 评论 -
position:relative
(一) relative与absolute好比亲兄弟,同源,relative是大哥,absolute是老二,大哥权利比较大 ,可以限制老二的一切活动,不过老二也可以做一些大哥所不能做的事。 relative可以限制absolute以下三点: (1)限制left,top,right,bottom定位;原创 2017-11-03 21:42:48 · 220 阅读 · 0 评论 -
绝对定位(子绝父相),父元素高度自适应子元素
最近做一个标签功能,涉及到绝对定位问题,父元素设置了最小高度,当子元素高度超过父元素的最小高度时,父元素高度没有被撑开。如图所示,父元素边框的高度没有和子元素一致。经过调研,在实际开发中,父元素的高度是由里面的子元素撑开的,而绝对定位的子元素由于脱离了父元素文本结构,所以父元素高度没有被撑开。自适应宽高是需要以文档流布局为基础的,而绝对定位已经脱离了文档流布局了。解决方法如下:componentDidMount() { document.querySelector('.fa原创 2022-04-15 16:48:33 · 3142 阅读 · 1 评论 -
react设置Cursor属性之url图片不展示原因
今天在设置鼠标为url地址图片时渲染区域鼠标形状没有显示,在控制台检查元素,url图片是有的,于是在网上一顿搜索,提示让用绝对路径,期间也将url换了网上的url地址,结果还是没有展示,如下:确定了图片路径没问题后,看到有人说可能和图片大小也有关系,于是找了比较小尺寸的图片,发现是可以的。下面介绍一下cursor image的尺寸,悬浮cursor不展示的小伙伴可以看一下是否是尺寸和引入img路径的原因。How Big Should cursor image be?about 32×原创 2022-03-15 17:16:00 · 1985 阅读 · 0 评论 -
box-shadow生成多重边框
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <style> div { margin: 50px au...原创 2020-03-20 14:19:35 · 394 阅读 · 0 评论 -
用纯CSS创建一个三角形
面试经常会问到的用css样式写一个三角形,以下这篇文章主要讲解了三角形的原理,原理其实很简单,也可以由此延伸出其他图形的做法。https://blog.csdn.net/weixin_37580235/article/details/80803479矩形、圆形、三角形、多边形、爱心、八卦等 https://blog.csdn.net/DearMorning/article/detai...原创 2019-08-07 11:02:08 · 434 阅读 · 0 评论 -
浏览器兼容性问题与解决方案整理
浏览器兼容性问题,是指因为不同的浏览器对同一段代码有不同的解析,造成页面显示效果不统一的情况。浏览器兼容问题一:不同浏览器的标签默认的外补丁和内补丁不同 问题症状:随便写几个标签,不加样式控制的情况下,各自的margin 和padding差异较大。 碰到频率:100% 解决方案:CSS里 * 备注:这个是最常见的也是最易解决的一个浏览器兼容性问题,几乎所有的...原创 2019-07-31 11:32:06 · 217 阅读 · 0 评论 -
CSS Sprites 精灵图
1.简介CSS Sprites在国内很多人叫css精灵,是一种网页图片应用处理方式。它允许将一个页面涉及到的所有零星图片都包含到一张大图中, 利用CSS的“background-image”,“background- repeat”,“background-position”的组合进行背景定位, 访问页面时避免图片载入缓慢的现象。2.优点(1)CSS Sprites能很好地减少网页的h...原创 2018-10-15 21:14:38 · 192 阅读 · 0 评论