![](https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
css
文章平均质量分 79
charlene程程
这个作者很懒,什么都没留下…
展开
-
css媒体查询实现响应式设计
首先 针对设备优化的页面需要在文档头部加上meta视口元素,视口标签可以告诉浏览器网页的纬度和缩放程度是什么。为了提供最好的用户体验,移动端的浏览器会按照桌面端的屏幕宽度来渲染页面(通常是980px左右,这个值会根据设备的不同有所浮动),为了更容易地阅读页面,字体会相应的加大,内容也会有所缩放来适应屏幕。对于用户来说,这么做的结果就是页面上的字体可能忽大忽小,还可能需要双击或者捏动缩放屏幕原创 2015-10-20 16:13:46 · 895 阅读 · 0 评论 -
前端开发中如何选用图片格式
矢量图与位图矢量图是通过组成图形的一些基本元素,如点、线、面、边框、填充色等信息通过计算的方式来显示图形的。矢量图的优点在于文件相对较小,并且放大缩小不会失真。缺点是这些几何图形很难表现自然度高的写实图像。我们在web页面上使用的图像都是位图,即便有些称为矢量图形也是指通过矢量工具进行绘制然后再转成位图格式在web上使用。位图又叫像素图或栅格图,他是通过记录图像中每个点的颜色、深度透明度等信息来存储原创 2016-04-18 13:17:08 · 2081 阅读 · 0 评论 -
css中的层叠顺序和选择器
层叠上下文层叠上下文是HTML中的一个三维的概念。如果一个元素含有层叠上下文,我们可以理解为这个元素在z轴上就‘高人一等’。z轴表示的是用户与屏幕的这条看不见的垂直线。层叠顺序是元素发生层叠时候有着特定的垂直显示顺序,层叠规则的顺序如下(盗图深入理解CSS中的层叠上下文和层叠顺序) 这里还需要说明一下:位于最低水平的border/background指的是层叠上下文元素的边框和背景色。每一个原创 2016-04-10 14:48:29 · 1391 阅读 · 0 评论 -
前端布局时的浏览器兼容性问题
在这里总结一下css布局时常见的浏览器兼容性问题1 盒模型IE6的盒模型和W3C标准的盒模型不同W3C中的盒模型所定义的宽度和高度为内容区域的宽度和高度 但是盒模型的总大小为margin+border+padding+widthIE的盒模型所定义的宽度和高度为盒模型的总宽度和总高度,width=margin+border+padding+content-width原创 2016-04-26 13:36:58 · 4695 阅读 · 0 评论 -
css实现等高布局 两栏自适应布局 三栏自适应布局
总结一下css常用的布局样式等高布局等高布局实现方法有很多 在这里总结常用的三种方法padding补值法该方法是通过负margin,同时将padding的值设为正的margin值实现的 具体实现方法如下:<div class="container"> <div class="item1">该方法是通过负margin,同时将padding的值设为正的margin值实现的 该方法是通过负ma原创 2016-04-22 18:53:09 · 4759 阅读 · 0 评论 -
CSS布局之水平垂直居中
水平垂直居中的布局在编程中经常遇到,在此总结一下水平垂直居中的方法。方法一主要利用left、right、top、buttom都设为0 margin为auto方法<div class="container"> <div class="box"></div></div>.container{ border:1px solid black; width:300px; he原创 2016-04-25 09:17:52 · 618 阅读 · 0 评论 -
css中的float知识点总结
看了张鑫旭大神的两篇关于float(CSS float浮动的深入研究、详解及拓展(一),CSS float浮动的深入研究、详解及拓展(二))的文章,这里总结一下float的知识首先,浮动的根本目的是实现网页中的文字环绕效果。浮动的本质是包裹性和破坏性。包裹性体现在浮动是一个带有方位的display:inline-block属性。浮动的破坏性体现在通过浮动破坏了元素自身的高度。浮动元素对其他元素的影响原创 2016-07-21 17:27:31 · 2737 阅读 · 0 评论 -
css3实现动画效果常用方法
早期在Web中要实现动画效果,都是依赖于JavaScript或Flash来完成。但在CSS3中新增加了一个新的模块transition,它可以通过一些简单的CSS事件来触发元素的外观变化,让效果显得更加细腻。简单点说,就是通过鼠标的单击、获得焦点,被点击或对元素任何改变中触发,并平滑地以动画效果改变CSS的属性值。早期在web中要实现动画效果,都是依赖于JavaScript或flash来完原创 2016-02-21 15:03:34 · 34211 阅读 · 3 评论 -
css3中的flex布局
Flexbox布局(伸缩布局盒模型)css3引入了一种新的布局模式--flexbox布局,即伸缩布局盒模型(flexible box),用来提供一个更加有效地方式制定、调整和分布一个容器里项目布局,即使他们的大小是未知或者动态的flexbox布局常用于设计比较复杂的页面,可以轻松的实现屏幕和浏览器窗口大小发生变化时保持元素的相对位置和大小不变,同时减少了依赖于浮动布局实现元素位置的定义原创 2016-02-22 12:23:11 · 2396 阅读 · 0 评论 -
css中的视窗单位
视窗单位视窗是浏览器实际显示内容的区域–换句话说是你的不包括工具栏和按钮的网页浏览器。这些单位是vw,vh,vmin和vmax。它们都代表到了浏览器尺寸的比例和窗口的大小调整产生的规模改变。比如有一个1000px(宽)和800px(高)的视窗(viewport)vw–代表视窗(viewport)的宽度为1%,当宽度为1000px时,50vw=500pxvh–窗口高低的百分比 50vh=400px原创 2016-04-18 11:21:54 · 1423 阅读 · 0 评论 -
css预处理器之sass
本文参考文献:http://www.ruanyifeng.com/blog/2012/06/sass.htmlhttp://www.oschina.net/question/12_44255http://www.w3cplus.com/sassguide/syntax.htmlCSS 预处理器是一种语言用来为 CSS 增加一些编程的的特性,无需考虑浏览器的兼容性问题,例如你可以在原创 2016-02-29 15:08:51 · 659 阅读 · 0 评论 -
css中的百分比计算方法
本文内容来源于http://www.ido321.com/1640.html CSS支持多种单位形式,如百分比、px、pt、rem等,百分比和px是常用的单位,随着移动端和响应式的流行,rem、vh、vw也开始普遍使用。今天在SegmentFault社区碰到了两个关于百分比计算的问题,一个是在translate中使用百分比的时候,是相对于哪个DOM元素的大小计算的;另外一个是在转载 2016-02-20 19:33:49 · 4117 阅读 · 0 评论 -
用css实现各种导航栏
基本的垂直导航条通过HTML创建一个无序列表 home home home home home home利用css处理样式 ul.nav{ padding:0px; margin:0px; list-style-type:none; width:80px; background-color:#8bd400; border:1px soli原创 2015-11-08 16:44:25 · 17139 阅读 · 1 评论 -
屏蔽浏览器的默认显示差异
/** * Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/) * http://cssreset.com */html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a,转载 2015-11-02 15:36:27 · 455 阅读 · 0 评论 -
css中的line-height小知识
本文内容是根据张鑫旭老师视频课程内容编写的line-height定义了该元素中基线之间的最小距离而不是最大距离。line-height 与 font-size 的计算值之差(在 CSS 中成为“行间距”)分为两半,分别加到一个文本行内容的顶部和底部。可以包含这些内容的最小框就是行框。所有内联元素的表现斗鱼行内框盒子模型有关行内框盒子模型包含4种盒子(1)内容原创 2015-12-08 18:51:00 · 1532 阅读 · 0 评论 -
css实现日历的布局
HTML相关代码 January2008> sun mon tue wed tur fri sat 30 31 1 2 3 4 5 6 7 8 9原创 2015-11-10 14:06:14 · 2583 阅读 · 0 评论 -
CSS小技巧
hello .div1{ margin:10px; width:400px; height:300px; background-color:#BDD738; float:left; /*background-color: green;*/ /*分别在火狐和谷歌浏览器下实现渐变*/ background-image:-moz-linear-gradient(le原创 2015-11-08 14:15:49 · 518 阅读 · 0 评论 -
移动端适配之雪碧图(sprite)背景图片定位
为了减少网络请求个数量,提高网站的访问速度,我们一般都会把一些小的图片合并成一张sprite图,然后根据background-position来进行定位。在web端由于是固定的大小与left 、top,所以定位起来会比较准确、简单。但是在移动端就不一样了,各种手机的屏幕大小不一样,很难做到使用sprite图然后根据background-position来定位。所以普遍的做法都是使用单张图片,然后使用转载 2016-09-06 17:21:54 · 14689 阅读 · 1 评论