css
若晨工作室
前端知识交流学习共同提高。
展开
-
CSS RESET —— 浏览器样式重置
转载地址:http://blog.csdn.net/smilebzj/article/details/50913232CSS Reset1. CSS Reset为什么存在?只要您的客户存在使用不同浏览器(ie,firefox,chrome等)的可能,那你就不得不从完美的理想状态回到现实,因为不同核心的浏览器对CSS的解析效果呈现各异,导致您所期望的效果跟浏览器的“理解”转载 2018-01-15 18:26:24 · 1241 阅读 · 0 评论 -
element的el-tree组件文字超出容器不出现横向滚动条问题
最近项目中遇到一个多级的树形结构,使用el-tree组件后,父容器规定了宽高,设置overflow:auto,但是超出后横向滚动条并没有出现。 查询原因是el-tree组件中class名为el-tree-node的div是块级元素,需要把它变为inline-block,同时注意每一个节点占一行。所以覆盖element的样式:.el-tree>.el-tr...原创 2019-01-17 15:05:52 · 9713 阅读 · 3 评论 -
css+jq横向树的实现
最近工作中有个UE设计是横向树的展示,查找了网上的一些资料并没有发现横向树的代码,于是自己根据实际需求利用::before和::after伪元素加上jq去简单实现,以后有机会争取再进行优化。代码:<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>...原创 2018-07-31 21:06:39 · 4861 阅读 · 0 评论 -
CSS技巧(一):清除浮动
什么是CSS清除浮动?在非IE浏览器(如Firefox)下,当容器的高度为auto,且容器的内容中有浮动(float为left或right)的元素,在这种情况下,容器的高度不能自动伸长以适应内容的高度,使得内容溢出到容器外面而影响(甚至破坏)布局的现象。这个现象叫浮动溢出,为了防止这个现象的出现而进行的CSS处理,就叫CSS清除浮动。引用W3C的例子,news容器没有包围浮动的元素。...转载 2018-07-31 19:47:26 · 157 阅读 · 0 评论 -
CSS3 垂直树状图——运用 :before 和 :after
CSS3 垂直树状图——运用 :before 和 :after直接上图(原网址),还有步骤想详解视频。自己CSS3练习demo。 【demo】【HTML】<div class="tree"> <ul> <li> <a href="#">parent</a>转载 2018-06-20 09:48:14 · 3113 阅读 · 1 评论 -
移动端web及app设计尺寸
移动端高清、多屏适配方案背景开发移动端H5页面面对不同分辨率的手机面对不同屏幕尺寸的手机视觉稿在前端开发之前,视觉MM会给我们一个psd文件,称之为视觉稿。对于移动端开发而言,为了做到页面高清的效果,视觉稿的规范往往会遵循以下两点:首先,选取一款手机的屏幕宽高作为基准(以前是iphone4的320×480,现在更多的是iphone6的375×667)。对于reti...转载 2018-05-30 10:43:14 · 8683 阅读 · 0 评论 -
用flex加百分比实现左右布局,右边区域再上下等分
用flex加百分比实现左右布局,右边区域再上下等分为三份。demo可以延伸:1.右边区域等分为二分之一.container .rightWrapper > div的width设置为对应的百分比(50%),四分之一(25%),以此类推。2.左边区域上下或者左右布局(添加子元素,类似设置)。3.加上浏览器前缀,处理flex布局的兼容性问题1234567...转载 2018-05-12 11:04:11 · 7950 阅读 · 0 评论 -
[CSS]图片水平排列并且有固定间隔
相信大家肯定都碰到过这样的需求:可能设计图是这样的 先来简单分析一下这里的几点要求八张图片水平排列图片之间固定间隔图片大小相同总宽度100%demohtml<div class="row"> <div class="col">1</div> <div class="col">2</div>转载 2018-04-16 13:27:16 · 5758 阅读 · 0 评论 -
CSS伪类选择器nth-child 选择3的倍数个元素写法
CSS伪类选择器nth-child 选择3的倍数个元素写法 web开发中,经常有对列表的3倍数列表项单独设置样式的需求。 ul li:nth-child(3n+3) { color: #ccc; } 上面的css是干什么用的,它就是在无序列表里面选择是3倍数的列。也就是第3个,第6个,第9个等等。但是它工作原理是怎样的...转载 2018-04-14 11:28:05 · 4866 阅读 · 0 评论 -
纯CSS实现瀑布流布局
瀑布流布局有一个专业的英文名称Masonry Layouts。瀑布流布局已经有好多年的历史了,我最早知道这个名词的时候大约是在2012年,当时Pinterest网站的布局就是使用的这种流式布局,简言之像Pinterest网站这样的布局就称之为瀑布流布局,也有人称之为Pinterest 布局。瀑布流布局其核心是基于一个网格的布局,而且每行包含的项目列表高度是随机的(随着自己内容动态变化高度),同时每...转载 2018-03-30 10:59:33 · 21615 阅读 · 0 评论 -
子Div使用Float后撑开父Div的几种方法
一个Div包含了多个子Div,并且子Div使用了浮动后,父Div确不能被撑开,如下图: 部分代码如下: 复制代码代码如下: #div1{border:1px solid red;float:left;} #div2,#div3{float:right;border:1px solid blue;} two one转载 2018-01-29 20:42:03 · 1359 阅读 · 1 评论 -
css中~的含义
举例:<div></div><p></p><span></span><p></p>div~ p{}含义:代表在div和p标签有同一个父元素的前提下 div之后出现的所有p标签。注: 两种元素必须拥有相同的父元素,但是 p 不需要直接紧随 div。...原创 2019-05-27 14:16:13 · 457 阅读 · 0 评论