CSS(3)
关注
分享
扫一扫
文章平均质量分 69
刘小妞
遇见更好的自己---前端小白的成长历程，学的越多，发现自己越无知
展开
-
css基础总结
1.使用css(层叠样式表)的好处：1． 提高页面的浏览速度，节约文件尺寸2． 缩短了改版的时间，只要将表现和内容分离，通过修改css可以修改很多页面3． 降低网站流量的费用。带宽的要求降低，成本降低。4． 更容易被搜索引擎搜索到，提高网站的排名5． 内容被更广泛的设备访问。2.web标准主要由三部分组成：结构(html)，表现(css)和行为(javascript)3原创 2016-03-02 22:12:32 · 337 阅读 · 0 评论 -
三种纯CSS实现三角形的方法
原文：http://www.feelcss.com/three-pure-css-to-achieve-the-triangle-method.html纯 CSS 做三角形的方法，目前我知道三种，分别是利用 border 属性，“◆”字符，和 CSS3 transfrom 做 45 度旋转实现的，CSS3的方法是在码头哥的博客上学到的，很感谢你们的分享，前端有你们更精彩！1.利转载 2016-09-13 11:10:34 · 2999 阅读 · 0 评论 -
CSS实现单行、多行文本溢出显示省略号（…）
如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来，当然还需要加宽度width属来兼容部分浏览。实现方法：overflow: hidden;text-overflow:ellipsis;white-space: nowrap;效果如图：但是这个属性只支持单行文本的溢出显示省略号，如果我们要实现多行文本溢出显示省略转载 2016-09-13 11:13:44 · 431 阅读 · 0 评论 -
Flex布局
原文：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicoolFlex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。.box{ display: flex;}行内元素也可以使用Flex转载 2016-09-13 11:15:56 · 300 阅读 · 0 评论 -
BFC原理
原文：http://www.cnblogs.com/lhb25/p/inside-block-formatting-ontext.html一、BFC是什么？ 在解释 BFC 是什么之前，需要先介绍 Box、Formatting Context的概念。 Box: CSS布局的基本单位 Box 是 CSS 布局的对象和基本单位， 直观点来说，就是一个页面是由很多个转载 2016-09-13 11:17:28 · 367 阅读 · 0 评论 -
去除inline-block元素间间距的N种方法
原文：http://www.zhangxinxu.com/wordpress/2012/04/inline-block-space-remove-%E5%8E%BB%E9%99%A4%E9%97%B4%E8%B7%9D/一、现象描述真正意义上的inline-block水平呈现的元素间，换行显示或空格分隔的情况下会有间距，很简单的个例子： 间距就来了~~转载 2016-09-13 11:19:59 · 246 阅读 · 0 评论 -
网页栅格化
栅格系统的设计原理及应用 在网页设计中，我们把宽度为“W”的页面分割成n个网格单元“a”，每个单元与单元之间的间隙设为“i”,此时我们把“a+i”定义“A”。他们之间的关系如下： W =（a×n）+（n-1）i 由于a+i=A， 可得：(A×n) – i = W yahoo的网站页面宽度为W=950px，每个区块与区块的间隔为i=10px；如果应用上面的公式，可以推出A=40px，转载 2016-10-08 20:20:04 · 4444 阅读 · 2 评论 -
css中的盒子模型
盒子模型是css中一个重要的概念，理解了盒子模型才能更好的排版。其实盒子模型有两种，分别是 ie 盒子模型和标准 w3c 盒子模型。他们对盒子模型的解释各不相同，先来看看我们熟知的标准盒子模型：从上图可以看到标准 W3C 盒子模型的范围包括 margin、border、padding、content，并且 content 部分不包含其他部分。 从上图可以看到 IE转载 2016-09-22 22:02:46 · 277 阅读 · 0 评论 -
有关于CSS的面试题和练习
创建这个按钮我在Mobify的CodePen账号里看到这样的一个想法。给大家一张按钮的图片，并告诉大家：仅使用CSS属性，创建这样的一个按钮这将是测试候选人的CSS3技能的一个强大的测试例子。这个按钮具有很多样式，我们一起来看看： 他们是如何处理多边框的？在这里，box-shadow可能是最好的办法。 他们是使用text-transf转载 2016-09-22 22:05:06 · 1846 阅读 · 0 评论 -
flex布局
1.Flex是Flexible Box的缩写，意思是弹性布局。任何一个容器都可以指定为Flex布局。.box{ display:flex;}行内元素也可以使用Flex布局.box{ display:inline-flex;}Webkit内核浏览器，必须加上-webkit前缀.box{ display:-webkit-flex; display:flex;}设为Flex布局以转载 2016-10-09 21:29:00 · 340 阅读 · 0 评论 -
CSS实现元素水平/垂直居中的方法
首先，我们来了解水平居中,它有很多种方法，我们暂时先来了解其中的几种：1. 在实现方案中，我们最熟悉的莫过于给元素定义一个宽度，然后使用margin：body{ width:960px; margin:0 auto;} 这个是当我们的定义元素的宽度时显现的，如果我们不能定义宽度时，该怎么办呢？2. 我们对于定位也是常用的，在这里当然也转载 2016-09-28 10:47:32 · 410 阅读 · 0 评论 -
css 原理及其优化
在写css代码时 做一些简单的优化，这样css的渲染速率会有一定的提高的。浏览器是如何渲染页面和加载页面为什么有些网站打开的时候会加载会很慢，而且是整个页面同时显示的，而有些网站是从顶到下逐步显示出来的？要搞懂这个可以先从下面这个常规流程开始：浏览器下载的顺序是从上到下，渲染的顺序也是从上到下，下载和渲染是同时进行的。在渲染到页面的某一部分时，其上面的所有部转载 2016-09-13 10:28:16 · 361 阅读 · 0 评论 -
CSS3用户界面
新的用户界面特性包括重设元素尺寸，盒尺寸以及轮廓。 1.resize resize 属性规定是否可由用户调整元素尺寸。div{resize:both;overflow:auto;}2.box-sizing 属性允许您以确切的方式定义适应某个区域的具体内容。box-sizing:border-box;3.outline-offset 属性对轮廓进行偏移，并在超出边框边缘的位置绘制轮廓 轮原创 2016-06-16 11:42:35 · 692 阅读 · 0 评论 -
CSS3过渡和动画
1.过渡 Internet Explorer 10、Firefox、Chrome 以及 Opera 支持 transition 属性。 Safari 需要前缀 -webkit-。 Internet Explorer 9 以及更早的版本，不支持 transition 属性。 CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。 要实现这一点，必须规定两项内容： （1）规定您希望把效果添加原创 2016-06-16 11:29:20 · 452 阅读 · 0 评论 -
读书笔记----css定位和溢出显示
1. static 默认 指定元素按照常规的文档内容流进行定位。静态定位元素不能使用top,left类似属性定位。如果对文档使用css定位技术，positon设置为除此之外其他属性。2. absolute 元素是相对于它包含的元素进行定位。可能是一个容器或是浏览器窗口3. fixed相对于浏览器窗口进行定位的。固定定位的元素总是显示在那里，不会随着文档其他部分滚动原创 2016-03-25 21:53:09 · 824 阅读 · 0 评论 -
使用HTML和CSS实现大白
今天动手实现了一下大白<!doctype html><html><head><meta charset="utf-8"><title>Baymax</title><style>body { /*设置背景为渐变色*/ background-size:100% 100%; background: linear-gradient(#9FE8F7,#2C9FF2);原创 2016-04-15 20:50:50 · 1119 阅读 · 0 评论 -
css的引入和优先次序
css：层叠样式表（cascading style sheet） 定义如何显示HTML元素，解决了内容与表现分离的问题，可以极大的提高工作效率。 1.css规则主要由两部分组成：选择器和声明h1 { color:blue; /*颜色为蓝色*/ font-size: 12px }2.如何插入样式表 外部样式表 当样式需要应用于很多页面时，应该使用外部样式表，通过改变一个文件来改变整个原创 2016-06-14 21:55:48 · 1516 阅读 · 0 评论 -
css标签复习---2016.6.14
1.背景background-color:red;background-image:url(images/1.jpg)背景图像—水平或垂直平铺background-repeat:repeat-x;//水平平铺background-repeat:no-repeat;为了不影响文本的阅读，可以改变图像的位置body{background-image:url(1.jpg);background-r原创 2016-06-14 22:16:32 · 324 阅读 · 0 评论 -
css盒子模型
1.盒子模型 所有的html元素都可以看做盒子。 总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距 元素的总高度最终计算公式是这样的： 总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距 背景应用于由内容和内边距、边框组成的区域。 2.浏览器兼容 浏览器兼容问题： 一般的浏览器都会按照上面的图示呈现内容，但是IE5和6不是。根据w3c规范，元原创 2016-06-15 16:41:19 · 351 阅读 · 0 评论 -
css定位和浮动
1.static定位 默认的定位方式，元素出现在正常的流中。静态定位不会受到top，bottom，left，right影响。 2.fixed定位 元素的位置相对于浏览器的窗口位置的固定，即使窗口滚动它也不会移动。 与绝对定位类似，只是包含块是视窗本身。img{position:fixed;top:30px;left:10px;}fixed定位在IE7 ,IE8下需要！DCOTYPE才原创 2016-06-16 08:48:40 · 519 阅读 · 0 评论 -
CSS3 背景和边框
CSS3完全向后兼容，因此不必改变现有的设计。 css3中的模块： 选择器，框模型，背景和边框，文本效果，2D/3D转换，动画，多列布局，用户界面 1. 边框 Internet Explorer 9+ 支持 border-radius 和 box-shadow 属性。 Firefox、Chrome 以及 Safari 支持所有新的边框属性。 圆角 <style>div{positi原创 2016-06-16 10:28:07 · 1214 阅读 · 0 评论 -
CSS3文本和字体
Internet Explorer 10、Firefox、Chrome、Safari 以及 Opera 支持 text-shadow 属性。 所有主流浏览器都支持 word-wrap 属性。 1.文本 阴影： 参数分别为：水平阴影，垂直阴影，模糊距离以及阴影的颜色h1{text-shadow: 5px 5px 5px #FF0000;}自动换行 在 CSS3 中，word-wrap原创 2016-06-16 10:37:31 · 397 阅读 · 0 评论 -
CSS3 2D/3D转换
Internet Explorer 10、Firefox 以及 Opera 支持 transform 属性。 Chrome 和 Safari 需要前缀 -webkit-。 Internet Explorer 9 需要前缀 -ms-。 1.2D转换 通过 translate() 方法，元素从其当前位置移动，根据给定的 left（x 坐标） 和 top（y 坐标） 位置参数：transform:原创 2016-06-16 11:02:27 · 649 阅读 · 0 评论 -
css实现三角形
css可以实现各种各样的三角形，减少了切图加载图片，以下是各种三角形的实现方法。1.首先设置一个盒子的三边为不同的颜色，看下边框是怎么显示的。<html><head><style type="text/css">#test{ width:20px; height:20px; border-width:15px; border-style:solid; b原创 2017-02-15 20:49:08 · 5141 阅读 · 0 评论