CSS
文章平均质量分 78
bboyjoe
勇气与智慧并行,才能越过人生的一座座高山。
展开
-
用纯CSS实现照片墙
首先需要引入指定的照片,编写html代码 照片墙 然后再引入CSS代码*{ margin:0; padding: 0;}body{ background-color: #eee;}.container{ widt原创 2015-06-25 15:31:59 · 2477 阅读 · 0 评论 -
不用gif图,用js+css实现loading效果
要理解loading的原理,即在文档加载完成之前显示loading效果,隐藏主文档内容,而在文档加载完成之后,隐藏loading效果,显示主文档内容。 loading的简单实现 <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includ原创 2016-03-22 17:36:28 · 3907 阅读 · 0 评论 -
CSS实现垂直居中的常用方法
在前端开发过程中,盒子居中是常常用到的。其中 ,居中又可以分为水平居中和垂直居中。水平居中是比较容易的,直接设置元素的margin: 0 auto就可以实现。但是垂直居中相对来说是比较复杂一些的。下面我们一起来讨论一下实现垂直居中的方法。首先,定义一个需要垂直居中的div元素,他的宽度和高度均为300px,背景色为橙色。代码如下: index转载 2016-03-14 10:36:00 · 660 阅读 · 0 评论 -
CSS3的过渡、动画、转换
特别说明:以下属性目前都需要加上各浏览器厂商前缀,浏览器 厂商前缀 浏览器内核Chrome、Safari -webkit- Blink、WebkitOpera -o- BlinkFirefox原创 2015-07-14 14:10:27 · 853 阅读 · 0 评论 -
从浏览器的渲染原理讲CSS性能
从浏览器的渲染原理讲CSS性能6平时我们几乎每天都在和浏览器打交道,写出来的页面很有可能在不同的浏览器下显示的不一样。苦逼的前端攻城师们为了兼容各个浏览器而不断地去测试和调试,还在脑子中记下各种遇到的BUG及解决方案,而我们好像并没有去主动地关注和了解下浏览器的工作原理。如果我们对此做一点了解,我想在项目过程中就可以根据它有效的避免一些问题以及对页面性能做出相应的改进。今天我们主要转载 2016-05-12 19:08:43 · 848 阅读 · 0 评论 -
如何做到背景铺满屏幕,且不会出现横向滚动条
这两天做Web页面有一个需求:是不管背景图片宽高,需要铺满整个屏幕宽度,且不论屏幕大小始终不能出现横向滚动条。少废话,上代码先。html结构关键代码: ... CSS关键代码:body { fon原创 2016-05-13 11:28:40 · 4693 阅读 · 0 评论 -
常用CSS缩写语法总结
使用缩写可以帮助减少你CSS文件的大小,更加容易阅读。css缩写的主要规则如下:颜色16进制的色彩值,如果每两位的值相同,可以缩写一半,例如:#000000可以缩写为#000;#336699可以缩写为#369;盒尺寸通常有下面四种书写方法:property:value1; 表示所有边都是一个值value1;property:value1 value2;转载 2016-07-11 19:08:58 · 1074 阅读 · 0 评论 -
前端精选文摘:BFC 神奇背后的原理
BFC 已经是一个耳听熟闻的词语了,网上有许多关于 BFC 的文章,介绍了如何触发 BFC 以及 BFC 的一些用处(如清浮动,防止 margin 重叠等)。虽然我知道如何利用 BFC 解决这些问题,但当别人问我 BFC 是什么,我还是不能很有底气地解释清楚。于是这两天仔细阅读了CSS2.1 spec 和许多文章来全面地理解BFC。一、BFC是什么? 在解释 BFC 是什么之前,转载 2016-11-02 16:27:32 · 652 阅读 · 0 评论 -
CSS实现单行、多行文本溢出显示省略号(…)
如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来,当然还需要加宽度width属来兼容部分浏览。实现方法:overflow: hidden;text-overflow:ellipsis;white-space: nowrap;效果如图:但是这个属性只支持单行文本的溢出显示省略号,如果我们要实现多行文本溢出显示省略转载 2017-07-05 11:49:59 · 528 阅读 · 0 评论 -
视觉格式化模型之BFC
情景:浮动的高度塌陷时,使用overflow:hidden可使父元素将浮动的子元素包含起来,解决问题。但背后的原理是什么?这就是今天要谈的BFC。在将BFC之前需要先了解几个概念:盒子模型(Box model):相信这个大家已经很了解了,这里就不详细说了。详见《CSS权威指南》块级元素:Block-level elements are those elements of the source do...转载 2018-03-16 14:53:37 · 225 阅读 · 0 评论 -
详解清除浮动的多种方式 (clearfix)
说明本文适合知道HTML 与 CSS基础知识的读者,或者想要了解清除浮动背后原理的读者!1.什么是浮动首先我们需要知道定位 元素在页面中的位置就是定位,解决问题之前我们先来了解下几种定位方式 1、普通流定位 static(默认方式) 普通流定位,又称为文档流定位,是页面元素的默认定位方式 页面中的块级元素:按照从上到下的方式逐个排列 页面中的行内元素:按照从左到右的方式逐个排列 但是如何让多个块级...转载 2018-03-16 14:56:28 · 302 阅读 · 0 评论 -
常见的响应式布局方式
布局类型在谈响应式布局前,我们先梳理下网页设计中整体页面排版布局,常见的主要有如下几种类型: 布局实现采用何种方式实现布局设计,也有不同的方式,这里基于页面的实现单位而言,分为四种类型:固定布局、可切换的固定布局、弹性布局、混合布局。固定布局:以像素作为页面的基本单位,不管设备屏幕及浏览器宽度,只设计一套尺寸;转载 2016-03-31 10:54:00 · 4358 阅读 · 0 评论 -
CSS3弹性盒模型flexbox完整版教程
来自CSS Tricks上的一个教程,原文为:A Complete Guide to Flexbox。文中详细的介绍了新版的弹性盒子的相关属性,并且给出了几个使用例子。是新手入门flexbox的一个优秀教程。当然里面的内容也大部分是根据w3c的文章来写的。里面的每个属性都给出了一张示例图,非常容易理解。本人根据其思路,结合中文翻译,写出了一篇flexbox的完整教程,希望对大家有用。弹转载 2016-03-29 15:40:45 · 1187 阅读 · 0 评论 -
网页设计中常用的20个Web安全字体
1, Arial 微软公司的网页核心字体之一,最常用的sans serif字体,当字号很小时不容易阅读。但是,大写的“I”和小写的“l”是无法区别的,你可以考虑用Tahoma字体来替代。(苹果系统没有这种字体,但有一种对应于Arial的字体叫Helvetica,它是MAC机上与Arial 字体最相似的WEB字体,是别一种非衬线字体.它是一种性能优良的打印字体,但在屏幕上表现不是很好,说道转载 2015-11-26 16:31:08 · 2184 阅读 · 0 评论 -
CSS选择器总结
通用选择器(*)——选择所有元素;类型选择器(element)——根据类型选择元素;类选择器(.class)——根据全局属性class的值选择元素;id选择器(#id)——根据全局属性id的值选择元素;属性选择器([attr])——基于属性选择元素; ([attr="val"])——选择定义attr属性,且属性值为val的元素; ([原创 2015-07-10 11:45:39 · 481 阅读 · 0 评论 -
css样式的层叠和继承
CSS的层叠1)浏览器求索css层叠的优先级 元素内嵌样式(用元素的全局属性style定义的样式)>文档内嵌样式(定义在style元素中的样式)>外部样式(用link元素导入的样式)>用户样式>浏览器样式;2)用重要样式调整层叠次序点击访问在样式声明后附上!important即可将对应属性值标记为重要。不管这种样式属性定义在什么地方,浏览器都会优先考虑a{ col原创 2015-07-03 14:11:33 · 2542 阅读 · 0 评论 -
CSS——LESS
Less是一种动态的样式语言。Less扩展了CSS的动态行为,比如说,设置变量(Variables)、混合书写模式(mixins)、操作(operations)和功能(functions)等等,最棒的是,Less使用了现有的CSS语法,也就是说,你可以直接把你现成的样式文件“style.css”直接改成“style.less”,他也能正常工作。如: link rel="styleshee转载 2015-07-11 17:19:42 · 621 阅读 · 0 评论 -
CSS的盒模型属性总结
padding、padding-top、padding-right、padding-bottom、padding-left——设置盒子内边距的尺寸;margin、margin-top、margin-right、margin-bottom、margin-left——设置盒子外边距的尺寸;width、height——设置元素的尺寸;box-sizing——设置尺寸应用到盒子的哪一部分;原创 2015-07-13 13:14:39 · 1529 阅读 · 0 评论 -
css中的颜色及长度
css中设置颜色常见方法:1)颜色名称color:darkgray;2)十六进制color:#a9a9a9;3)十进制color:169,169,169;css中设置复杂颜色的方法:1)rgb(r,g,b)color:rgb(122,128,144);2)rgb(r,g,b,a):a表示透明值color:rgba(122,128,144,0.4);3)hsl原创 2015-07-06 10:57:44 · 1062 阅读 · 0 评论 -
css的文本样式属性
text-align——指定文本快的对齐方式(start、end、left、right、center、justify);text-justify——如果text-align属性使用了justify值,则该值会用来指定对齐文本的规则;white-space——指定空白字符的处理方式(normal、nowrap、pre、pre-line、pre-wrap);direction——设置文本方原创 2015-07-13 17:32:41 · 816 阅读 · 0 评论 -
CSS的边框和背景属性
border——设置所有边的边框();border-top、border-bottom、border-left、border-right——设置一条边的边框();border-width——设置所有边的边框宽度;border-style——设置所有边的边框样式;border-color——设置所有变的边框颜色;border-top-width、border-top-style、原创 2015-07-10 17:45:12 · 949 阅读 · 0 评论 -
面向对象的CSS的作用和注意事项
1)面向对象的CSS的作用: 1.1)加强代码复用,以便维护; 1.2)减小CSS体积; 1.3)提升渲染效率; 1.4)组件库思想、栅格布局可共用、减少选择器、方便扩展。2)面向对象的CSS的注意事项: 2.1)不要直接定义子节点,应把共性声明放到父类; 2.2)结构和皮肤相分离; 2.3)容器和内容相分离; 2.4)抽象出可重原创 2015-08-15 13:28:01 · 1034 阅读 · 0 评论 -
css的一些重要而实用的属性
元素的颜色和透明度:color——设置元素的前景色;opacity——设置元素的透明度;表格样式:border-collapse:collapse——合并相邻单元格的边框;border-collapse:separate——为相邻单元格配置独立边框;border-spacing——设置相邻单元格边框的间距;caption-side——设置表格标题的位置(top、原创 2015-07-15 11:41:38 · 593 阅读 · 0 评论 -
CSS的布局属性
1)定位:position:static——默认值,元素为普通布局;position:relative——元素位置相对于普通位置定位;position:absolute——元素相对于position值不为static的第一位祖先元素来定位;position:fixed——元素相对于浏览器窗口来定位;left、right、top、bottom——为定位元素设置偏移量;z-in原创 2015-07-13 15:25:23 · 747 阅读 · 0 评论 -
CSS3知识点总结
1.background-origin: 规定背景图片的定位区域值 描述 padding-box 背景图像相对内边距定位(默认值) border-box 背景图像相对边框定位【以边框左上角为参照进行位置设置】 content-box 背景图像相对内容区域定位【以内容区域左上角为参照进行位置设置】 2.background-clip: 规定背景的绘制区域...原创 2019-01-07 00:51:37 · 1592 阅读 · 2 评论