css
文章平均质量分 93
极地雪狼li
IT行业
展开
-
css之Flex布局
前面我们记录了几种常用的水平垂直的布局方式,其中就有我们今天要详细记录的布局方式,flex弹性盒子布局,下面我们就聊聊flex布局。同样的代码只展示有变化的,重复代码不再重复展示。一、Flex布局是什么,基本概念?Flex是Flexible Box的缩写,意为”弹性布局”,用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。比如.box{ display:flex;}采用Flex布局的元素,称为Flex容器(container),称为”容器”。它的所有子元素自动成为容器原创 2021-11-04 11:20:05 · 853 阅读 · 0 评论 -
几个实用的前端开发技巧
1. 利用 CSS 穿透覆盖默认样式常见发生场景:假如我们需要通过 input,type="file"来上传文件,而这个 input 的默认样式,可以说是非常地丑。所以我们希望通过一张图片,与这个 input 大小一样,位置一致地盖在上面。这个时候,显然,这个时候点击图片,input 是不会起作用的。就是因为 img 隔绝了 click 的穿透,而我们希望的是,这个 img 只是视觉上遮挡了 input 的样式,但是点击的时候还是点击到 input。所以,只要让 img 可穿透即可。css 代码如下原创 2020-07-22 16:16:05 · 339 阅读 · 0 评论 -
灵活运用CSS开发技巧(转载)
何为技巧,意指表现在文学、工艺、体育等方面的巧妙技能。代码作为一门现代高级工艺,推动着人类科学技术的发展,同时犹如文字一样承托着人类文化的进步。每写好一篇文章,都会使用大量的写作技巧。烘托、渲染、悬念、铺垫、照应、伏笔、联想、想象、抑扬结合、点面结合、动静结合、叙议结合、情景交融、首尾呼应、衬托对比、白描细描、比喻象征、借古讽今、卒章显志、承上启下、开门见山、动静相衬、虚实相生、实写虚写、托物...原创 2020-02-24 22:53:38 · 1459 阅读 · 0 评论 -
CSS3实现的几种常用Loading效果
loading加载效果在项目开发中使用频率较高,特意做下记录,方便日后使用,小伙伴么也可以Ctrl+c和Ctrl+v哦第1种效果:代码如下:<div class="loading"> <span></span> <span></span> <span></span> ...原创 2019-12-18 16:55:03 · 734 阅读 · 0 评论 -
CSS3不同样式的loading效果
效果如下:各种炫酷动画可参考网站:https://www.html5tricks.com/tag/loading动画/html代码<div class="loader">加载中...</div>这里为了减少代码量,并没有做兼容性处理,一般我们需要在上述代码animation、animation-delay、keyframes前加入-webkit-在写一次...翻译 2019-12-18 14:55:59 · 272 阅读 · 0 评论 -
用CSS绘制最常见的40种形状和图形
Square(正方形)#square { width: 100px; height: 100px; background: red;}Rectangle(矩形)#rectangle { width: 200px; height: 100px; background: red;}Circle(圆形)#circl...转载 2019-01-31 12:08:16 · 2200 阅读 · 1 评论 -
CSS引入的方式有哪些? link和@import的区别是?
有 4 种方式可以在 HTML 中引入 CSS。1.内联方式内联方式指的是直接在 HTML 标签中的style属性中添加 CSS。示例:<div style="background: red"></div>这通常是个很糟糕的书写方式,它只能改变当前标签的样式,如果想要多个<div>拥有相同的样式,你不得不重复地为每个<di...原创 2018-05-25 23:03:28 · 807 阅读 · 0 评论 -
CSS布局方案
居中布局(以下居中布局均以不定宽为前提,定宽情况包含其中)1、水平居中a) inline-block + text-align.parent{ text-align: center;}.child{ display: inline-block;}tips:此方案兼容性较好,可兼容至IE8,对于IE567并不支持inline-block,需要使用css h...原创 2018-03-13 09:55:15 · 169 阅读 · 0 评论 -
前端基础知识--CSS篇
1.CSS的盒子模型W3C标准盒模型:width = contentIE怪异盒模型:width = content + padding 值2.初始化CSS样式的好处因为浏览器的兼容问题,不同浏览器对有些标签的默认值是不同的,如果没对CSS初始化往往会出现浏览器之间的页面显示差异。3.CSS优先级同权重下,优先级就近原则(离被设置元素越近优先级别越高),载入样式以最后载入的为...原创 2018-03-13 09:36:14 · 216 阅读 · 0 评论 -
CSS控制文字,超出部分显示省略号--分单上和多行显示
<pstyle="width: 300px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来,当然还需要加宽度width属来兼容部分浏览。实现方法:overflow:hidden;text-...原创 2018-08-27 11:00:50 · 24977 阅读 · 0 评论 -
CSS基础(三):w3c盒子模型和ie盒子模型
盒子模型,英文即box model。无论是div、span、还是a都是盒子。但是,图片、表单元素一律看作是文本,它们并不是盒子。这个很好理解,比如说,一张图片里并不能放东西,它自己就是自己的内容。盒子中的区域一个盒子中主要的属性就5个:width、height、padding、border、margin。如下:content :包括width和height:内容的宽度、高度(...原创 2018-05-27 19:14:31 · 295 阅读 · 0 评论 -
CSS技巧(一):清除浮动和兼容性处理
浮动的定义:使元素脱离文档流,按照指定方向发生移动,遇到父级边界或者相邻的浮动元素停了下来。高度塌陷:浮动元素父元素高度自适应(父元素不写高度时,子元素写了浮动后,父元素会发生高度塌陷)清楚浮动用到的css属性clearclear:left | right | both | none | inherit:元素的某个方向上不能有浮动元素clear:both:在左右两侧均不允许浮动元素...原创 2018-05-24 11:39:35 · 1034 阅读 · 0 评论 -
CSS技巧(二):CSS hack
什么是CSS hackCSS hack由于不同的浏览器,比如IE6,IE7,Firefox等,对CSS的解析认识不一样,因此会导致生成的页面效果不一样,得不到我们所需要的页面效果。 这个时候我们就需要针对不同的浏览器去写不同的CSS,让它能够同时兼容不同的浏览器,能在不同的浏览器中也能得到我们想要的页面效果。CSS hack分类hack主要分为CSS选择器hack、CSS属性ha...原创 2018-05-24 14:05:51 · 218 阅读 · 0 评论 -
CSS基础(四):盒模型
CSS盒模型HTML文档中可以将每个元素都看作是长方形的盒子。而CSS盒模型规定了元素框处理元素内容content、内边距padding、边框border和外边距margin的方式。下图是W3C对于盒模型的描述图。使用Firebug,可以轻松地查看到盒子的布局大小。盒子本身的大小是这样计算的:width:width + padding-left + padding-rig...原创 2018-05-24 14:08:44 · 157 阅读 · 0 评论 -
CSS基础(五):定位
CSS定位机制CSS 有三种基本的定位机制:相对定位、浮动和绝对定位。相对定位相对定位指的是设置为相对定位的元素框会偏移某个距离。元素仍然保持其未定位前的形状,它原本所占的空间仍保留。如果将box2的框 top 设置为 50px,那么框将在原位置顶部下面 50 像素的地方。如果 left 设置为 20 像素,那么会在元素左边创建 20 像素的空间,也就是将元素向右移动。只要bo...原创 2018-05-24 14:10:04 · 167 阅读 · 0 评论 -
CSS基础(六):浮动深入
浮动在标准流中,一个块级元素在水平方向会自动伸展,直到包含它的元素边界;而在竖直方向和兄弟元素依次排列,不能并排。使用浮动方式后,块级元素的表现就会不同。简单的说多个不设宽度的块级的元素可以横向排列。CSS中有float属性,默认为none,也就是标准流通常的情况。如果将float属性设置为left或right,元素就会向其父元素的左侧或右侧紧靠,同时默认情况下,盒子的宽度不再伸展,而是根...原创 2018-05-24 14:13:19 · 172 阅读 · 0 评论 -
Web前端技术 Web学习资料 Web学习路线 Web入门宝典
学习路线第一章 核心1.NodeNode.js 就是运行在服务端的 JavaScript。Node.js 是一个基于Chrome JavaScript运行时建立的一个平台。Node.js是一个事件驱动I/O服务端JavaScript环境,基于Google的V8引擎。相当与JDK。Github:https://github.com/nodejs/node官网教程:h...转载 2018-07-19 22:47:48 · 1483 阅读 · 0 评论 -
表单元素input type类型为text在火狐浏览器下默认显示红色边框的处理办法
在样式表里设置样式input[required]:invalid,input:focus:invalid,textarea[required]:invalid,textarea:focus:invalid { box-shadow: none;}想要整理更多的碎片知识,扫码关注下面的公众号,让我们在哪里接着唠!...原创 2018-08-02 19:37:34 · 2196 阅读 · 0 评论 -
css背景相关的样式
一、background-origin 设置元素背景图片的原始起始位置。语法:background-origin : border-box | padding-box | content-box;参数分别表示背景图片是从边框,还是内边距(默认值),或者是内容区域开始显示。二、background-clip 用来将背景图片做适当的裁剪以适应实际需要。用来将背景图片做适当的裁剪以适应实际...原创 2018-05-25 08:59:29 · 208 阅读 · 0 评论