css
css
Andrelia20171760
hold on
展开
-
关于css3径向渐变属性总结大全(史上最全)
https://www.w3cplus.com/css3/new-css3-radial-gradient.html嘻嘻,那么全肯定不是我总结的呀,call me知识搬运工。原创 2019-04-13 15:41:24 · 1162 阅读 · 0 评论 -
TinyPNG压缩图片的网站
官网:https://tinypng.com/如何把网页中要用到的图片压缩到最小,这是前端攻城师们在写网页时都会考虑的一个问题,今天小坊给各位带来了给前端攻城师们真正的良心网站---TinyPNG。只需要简单的两步就可以把你要压缩的PNG格式图片压缩到小很多又基本上不会影响图片的质量:打开网址:http://tinypng.org/ 选择你要压缩的PNG图片或者直接将你要压缩的图片拖...原创 2019-07-18 22:43:44 · 2274 阅读 · 0 评论 -
内联元素与块级元素特性及转换
块级元素(block)特性:总是独占一行,表现为另起一行开始,而且其后的元素也必须另起一行显示;宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制;内联元素(inline)特性:和相邻的内联元素在同一行;宽度(width)、高度(height)、内边距的top/bottom(padding-top/padding-bottom)和外边距的t...转载 2019-09-16 13:04:05 · 371 阅读 · 0 评论 -
为什么要浮动,为什么要清除浮动,清除浮动的方式有哪些?
一、为什么要浮动?据网上资料显示,以前提出浮动的概念主要是为了解决左边图片,右边文字的需求,后来浮动在网页的布局中应用比较广泛。我之前在学习网页设计时,针对于一个花店的导航页,存在许多的图片显示,而有效并且美观的布局样式极为重要,这时float属性就显得尤为重要。二、为什么要清除浮动?浮动的属性虽然方便使用,但是在使用这种属性时,也存在着一种弊端,那就是当子元素设置了float属性之后,且父...原创 2019-09-16 19:44:59 · 804 阅读 · 0 评论 -
为什么要用box-sizing: border-box?一般什么时候用?
1新建一个HTML文档,并定义一个块元素,CSS示例:.normal{width: 100px; height:100px; background: blue; }步骤阅读2保存文件,预览效果,步骤阅读3再次加入一个DIV并在原有的CSS上复制一份,加入Padding属性,示例:.normal-padding{ &n...原创 2019-09-16 22:10:26 · 8671 阅读 · 4 评论 -
Dynamic Dummy Image Generator动态虚拟图像生成器
介绍umy Image 网站是一个可以帮助前端设计师设定占位图片的在线工具,可以按照你设定的大小生成出一个图片占位符,用以填充网页设计上的图片,充实网页模版内容,更直观的查看网页设计模版的整体效果。用法进入官网https://dummyimage.com/在地址栏内一这种格式输入你想要的图片https://dummyimage.com/2000x900/e91e63/fff200090...原创 2019-09-17 10:59:20 · 931 阅读 · 0 评论 -
CSS精灵图(sprite)
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。 ...转载 2019-09-20 17:04:27 · 383 阅读 · 3 评论 -
CSS - 去除图片img底侧空白缝隙
CSS - 去除图片img底侧空白缝隙 </h1> <div class="clear"></div> <div class="postBody"> 1. 图片底部有空隙<!DOCTYPE html><html lang="en">&...原创 2019-09-23 15:04:43 · 640 阅读 · 0 评论 -
css权重计算方法
css权重是什么?CSS权重指的是样式的优先级,有两条或多条样式作用于一个元素,权重高的那条样式对元素起作用,权重相同的,后写的样式会覆盖前面写的样式。权重的等级有哪些以及如何计算权重?可以把样式的应用方式分为几个等级,按照等级来计算权重1、!important,加在样式属性值后,权重值为 100002、内联样式,如:style=””,权重值为10003、ID选择器,如:#conten...原创 2019-09-23 19:29:07 · 1092 阅读 · 0 评论 -
Autoprefixer
Autoprefixer是一款自动管理浏览器前缀的插件,它可以解析CSS文件并且添加浏览器前缀到CSS内容里,使用Can I Use(caniuse网站)的数据来决定哪些前缀是需要的。把Autoprefixe添加到资源构建工具(例如Grunt)后,可以完全忘记有关CSS前缀的东西,只需按照最新的W3C规范来正常书写CSS即可。如果项目需要支持旧版浏览器,可修改browsers参数设置 。在线...原创 2019-07-15 18:41:14 · 1879 阅读 · 0 评论 -
清除浮动方法总结及使用场景评价
1、父级div定义伪类:after和zoom<style type="text/css"> .div1{background:#000080;border:1px solid red;} .div2{background:#800080;border:1px solid red;height:100px;margin-top:1...转载 2019-07-15 15:11:50 · 292 阅读 · 0 评论 -
CSS要点补充说明
1.margin:0 auto;2.带有inline inline-block属性的均为文本类元素如span,img元素之间会带有固定间隔,不能用CSS margin属性去掉该间隔,因为当代码上传到服务器是压缩后的,代码之间是去掉空格的,此时去掉空格,那么视图中的间隔也会没有,所以写时若想没有空格直接将这几个元素代码之间空格去掉即可。不能用额外的CSS。3.另外行级元素是无...原创 2019-03-31 20:11:14 · 191 阅读 · 0 评论 -
成哥对层模型和浮动的讲解再次巩固
absolute定位1.脱离原来位置进行定位,将一个元素的position设为absoute之后,它所在的位置变成真空,别的元素可以挤到这个位置上。2.每一个absolute元素都是一个独立的层。所以 有一个z-index属性3.absolute相对于最近的有定位的父级元素进行定位,如果没有父级元素有定位那就相对于文档进行定位。relative定位保留原来位置进行定位,它原来占...原创 2019-03-30 20:12:30 · 158 阅读 · 0 评论 -
CSS clip属性
裁剪一张图像:img {position:absolute;clip:rect(0px,60px,200px,0px);}属性定义及使用说明如果图像大于包含它的元素,会发生什么?-clip属性,让你指定一个绝对定位的元素,该尺寸应该是可见的,该元素被剪裁成这种形状并显示。注意::如果先有"overflow:visible",clip属性不起作用。默认值: au...原创 2019-03-03 17:14:55 · 347 阅读 · 0 评论 -
CSS选择器详解
当我们用CSS对HTML部分代码进行修饰时,首先要在CSS文件里找到想要修饰的那部分HTML代码,此时,我们就要用到选择器。1.id选择器id选择器与标签之间是一对一关系。在现实生活中,如果我们想要找到一个人,可以通过身份证号,一个人对应一个身份证号,一个身份证号对应一个人,身份证号具有唯一性。而id选择器就相当于标签的身份证号。在HTML文档中,一个id只能使用一次!语法:&l...原创 2019-01-04 10:50:49 · 305 阅读 · 0 评论 -
盒子模型
盒子三大部分盒子壁 border内边距 padding盒子内容 width+height元素框的最内部分是实际的内容,直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距,外边距默认是透明的,因此不会遮挡其后的任何元素。提示:背景应用于由内容和内边距、边框组成的区域。提示:内边距、边框和外边距可以应用于一个元素的所有边,也可以应用...原创 2018-11-17 15:37:26 · 186 阅读 · 0 评论 -
Less快速入门
CSS的短板作为前端学习者的我们 或多或少都要学些 CSS ,它作为前端开发的三大基石之一,时刻引领着 Web 的发展潮向。 而 CSS 作为一门标记性语言,可能 给初学者第一印象 就是简单易懂,毫无逻辑,不像编程该有的样子。在语法更新时,每当新属性提出,浏览器的兼容又会马上变成绊脚石,可以说 CSS 短板不容忽视。问题的诞生往往伴随着技术的兴起, 在 Web 发展的这几年, 为了让 CSS...原创 2019-06-05 19:04:03 · 523 阅读 · 0 评论 -
Animate.css介绍及使用教程
前面的话animate.css是一个使用CSS3的animation制作的动画效果的CSS集合,里面预设了很多种常用的动画,且使用非常简单。本文将详细介绍animate.css的使用引入 animate.css的最新版本是3.5.2,引入animate.css很容易,有以下几种方法1、从官网下载https://raw.github.com/daneden/animate.css/mas...原创 2019-07-13 13:21:20 · 15960 阅读 · 0 评论 -
Normalize.css介绍
Normalize.css只是一个很小的css文件,但它在默认的HTML元素样式上提供了跨浏览器的高度一致性。相比于传统...转载 2019-07-13 19:34:04 · 713 阅读 · 0 评论 -
css代码验证与压缩
检验css文件是否有语法错误,可以检验本地的css文件(上传即可),也可以检验任意一个网站。http://jigsaw.w3.org/css-validator/css代码压缩推荐使用谷歌插件web前端助手,也可以去站长之家压缩...原创 2019-09-29 18:53:13 · 183 阅读 · 0 评论