![](https://img-blog.csdnimg.cn/20201014180756738.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
CSS3
文章平均质量分 65
初漾
编程使我快乐,越研究越嗨皮
展开
-
谈谈PostCSS
什么是CSScss,是一种样式脚本,好像和编程语言有着一定的距离,我们可以将之理解为一种描述方法。这似乎导致css被轻视了。不过,css近几年来正在经历着一次巨变——CSS Module。我记得js的井喷期应该可以说是node带来的,它带来了Module的概念,使得JS可以被工程化开发项目CSS预处理器的介绍目前,在工程化开发中,使用最多的应该就是Less、Sass和Stylus。首先,还是介绍一下转载 2017-12-18 16:22:17 · 1592 阅读 · 0 评论 -
CSS 布局经典问题初步整理
转自:http://brianway.github.io/2017/05/18/css-layout-classical-problems/转载 2017-08-05 15:41:16 · 208 阅读 · 0 评论 -
如何居中一个元素(二)(正常、绝对定位、浮动元素)?
题目点评这道题目的提问比较多,连续问了三个问题,正常元素、绝对定位元素、互动元素如何居中,而且居中没有说清楚是垂直居中还是水平居中,要回答清楚这个问题,必须得有深厚的功底,而且要分类的来回答,条理要清楚。可以先把水平居中各种情况说清楚,然后在把垂直居中说清楚。(一)元素水平居中的方式 1)行级元素水平居中对齐(父元素设置 text-align:center) <div style="width:转载 2017-08-08 15:51:31 · 361 阅读 · 0 评论 -
css中盒子模型的理解
参考:http://blog.csdn.net/lxcao/article/details/526204531)盒子模型有两种,W3C和IE盒子模型(1)W3C定义的盒子模型包括margin、border、padding、content ,元素的width=content的宽度( 2 )IE盒子模型与W3C的盒子模型唯一区别就是元素的宽度,元素的width=content+padding+borde转载 2017-08-01 17:48:57 · 589 阅读 · 0 评论 -
CSS 样式书写规范
参考:CSS 样式书写规范转载 2017-07-23 15:49:03 · 269 阅读 · 0 评论 -
总结个人使用过的移动端布局方法
转自: 总结个人使用过的移动端布局方法转载 2017-07-23 10:58:56 · 330 阅读 · 0 评论 -
flex布局
Flex 布局教程:语法篇 Flex 布局教程:实例篇原创 2017-07-23 10:15:40 · 251 阅读 · 0 评论 -
css背景色不填充边框,css的写法?
background-clip: padding-box;即可 支持度:IE9+background-clip的值padding-box: 从padding区域(不含padding)开始向外裁剪背景。 border-box: 从border区域(不含border)开始向外裁剪背景。 content-box: 从content区域开始向外裁剪背景原创 2017-07-15 17:26:13 · 5569 阅读 · 0 评论 -
深入理解CSS3 Animation 帧动画
转自:深入理解CSS3 Animation 帧动画转载 2017-06-21 21:03:07 · 235 阅读 · 0 评论 -
css sticky footer布局
使用场景:如果页面内容不够长时,内容块粘贴在视窗底部;如果内容足够长,页面块会被内容向下推送。比如:叉号按钮定位在底部固定的套路:包括两个层:内容的包装器,定在底部的层。<style> /*所有clearfix写法均是如此,作用:清除浮动*/ .clearfix{ display: inline-block; } .clearfix::after{原创 2017-08-14 16:49:11 · 295 阅读 · 0 评论 -
图标字体的使用
1.使用iconMoon工具制作图标字体。 步骤:引入自己的svg图片文件,在线制作图标字体以下是使用方法:在文件中引入以下的style.css文件,即可通过类名引用该图标字体原创 2017-08-14 17:19:20 · 300 阅读 · 0 评论 -
详解 CSS 属性 - 伪类和伪元素的区别
首先,阅读 w3c 对两者的定义:CSS 伪类用于向某些选择器添加特殊的效果。CSS 伪元素用于将特殊的效果添加到某些选择器。可以明确两点,第一两者都与选择器相关,第二就是添加一些“特殊”的效果。这里特殊指的是两者描述了其他 css 无法描述的东西。伪类种类伪元素种类区别这里用伪类 :first-child 和伪元素 :first-l转载 2017-05-10 15:48:45 · 259 阅读 · 0 评论 -
CSS 选择器
在 CSS 中,选择器是一种模式,用于选择需要添加样式的元素。转自:http://www.w3school.com.cn/cssref/css_selectors.asp转载 2017-10-12 20:12:56 · 448 阅读 · 0 评论 -
CSS3用过哪些新特性
参考:http://zhoukekestar.github.io/notes/2017/06/07/interview-answers.html关于CSS3,可以先查看一下文档新特性有:border-radius 圆角, @font-face 字体, box-shadow text-shadow 框和文本的阴影word-wrap, background-size, back转载 2017-06-18 10:22:41 · 3761 阅读 · 0 评论 -
position属性值(面试必考)
相对定位(relative)、绝对定位(absolute)和z-index属性 position属性同样可以实现和float属性一样的效果,其主要被运行于网页布局上。 它主要提供static, relative, absolute和fixed四个值。 static为默认值,指示元素出现在正常的文档流中;相对定位(relative):相对于该元素在文档流中的正常位置进行偏移定位,原占位仍保留。绝原创 2017-08-14 21:05:47 · 3691 阅读 · 0 评论 -
元素定位(position属性值)有哪些?
本题点评在web前端中,元素定位是必须掌握的,是网页制作的必备技能,也是衡量是否为一个合格的web前端开发的标准之一,在网页设计中,很多地方都需要使用定位,例如菜单弹出,提示信息层等都需要定位。所以本题的难易程度为简单。解题思路position为元素定位属性,包含以下属性值absolute绝对定位相对位置为父元素为非static的第一个父元素进行定位。 fixed 固定定位(老IE6转载 2017-08-08 16:42:54 · 13580 阅读 · 0 评论 -
使用rem在移动端会出现什么问题?
Rem为单位CSS3的出现,他同时引进了一些新的单位,包括我们今天所说的rem。在W3C官网上是这样描述rem的——“font size of the root element” 。下面我们就一起来详细的了解rem。前面说了“em”是相对于其父元素来设置字体大小的,这样就会存在一个问题,进行任何元素设置,都有可能需要知道他父元素的大小,在我们多次使用时,就会带来无法预知的错误风险。而rem是相对于根原创 2017-09-30 10:51:01 · 2021 阅读 · 0 评论 -
BFC的介绍
转自:http://www.cnblogs.com/heimanba/p/3774086.html转载 2017-08-29 17:30:04 · 332 阅读 · 0 评论 -
BFC块级格式上下文
BFC块级格式上下文,独立的一个渲染区域1、同一个BFC的两个相邻盒子间的margin会重叠(垂直方向);2、BFC内部的盒子在垂直方向上会一个接一个的放置;3、每个子元素的左外边距与包含块的左边界相接触;4、计算BFC的高度时,浮动子元素也参与计算;5、BFC内部的子元素不会受到外面元素的影响;6、BFC的区域不会与float的元素区域重叠;触发BFC条件:float:不为none;overflo转载 2017-08-29 16:27:19 · 411 阅读 · 0 评论 -
CSS揭秘之背景与边框
1.半透明边框 假设我们给一个容器设置一层白色背景和一道半透明白色边框,body的背景会从它的半透明边框透上来。border: 10px solid hsla(0,0%,100%,0.5);background: white;解决方案:默认情况下,背景会延伸到边框所在的区域下层。通过background-clip属性来调整上述默认行为带来的不便,将它的值设为padding-box,这样浏览器会用原创 2017-06-19 09:53:40 · 1016 阅读 · 0 评论 -
css中属性积累
1.unicode-bidi 属性它与 direction 属性一起使用,来设置或返回文本是否被重写,以便在同一文档中支持多种语言。参考:http://www.runoob.com/cssref/pr-text-unicode-bidi.html疑惑:创建一个附加的嵌入层面2.原创 2017-06-04 16:35:02 · 246 阅读 · 0 评论 -
如何让 height:100%; 起作用
转自: http://www.webhek.com/post/css-100-percent-height.html浏览器是如何计算高度和宽度的?Web浏览器在计算有效宽度时会考虑浏览器窗口的打开宽度。如果你不给宽度设定任何缺省值,那浏览器会自动将页面内容平铺填满整个横向宽度。但是高度的计算方式完全不一样。事实上,浏览器根本就不计算内容的高度,除非内容超出了视窗范围转载 2017-06-04 16:05:34 · 334 阅读 · 0 评论 -
css中盒子模型的理解
参考http://blog.csdn.net/lxcao/article/details/52620453转载 2017-05-23 11:10:38 · 329 阅读 · 0 评论 -
flex布局的注意事项
Flex布局以后,子元素的float、clear和vertical-align属性将失效flex内部的子元素(除了position:absolute或fixed)无论是display:block或者display:inline,都成为了伸缩项目android浏览器4.4之前对于flex布局支持不好flex-shrink属性用于设置或检索弹性盒的收缩比率,默认为1。不允许为负值,flex-shrin转载 2017-05-11 15:50:21 · 1834 阅读 · 0 评论 -
rem与em区别
em 的计算是基于父级元素的,rem始终是基于根元素(html) 的。rem 单位翻译为像素值是由 html 元素的字体大小决定的。 此字体大小会被浏览器中字体大小的设置影响,除非显式重写一个具体单位em 单位转为像素值,取决于他们使用的字体大小。 此字体大小受从父元素继承过来的字体大小,除非显式重写与一个具体单位。总结让我们以一个快速符号点概括我们介绍的内容:rem原创 2017-05-10 16:02:24 · 510 阅读 · 0 评论 -
link和@import的区别及联系
转载 2017-05-20 11:11:01 · 287 阅读 · 0 评论 -
利用border实现三角形
Title .app{ width: 0; height: 0; border-width: 8px; border-style: dashed dashed solid; border-color: transparent transparent #c2c2c2; } 关键点:(1)borde原创 2017-06-05 16:41:42 · 1037 阅读 · 0 评论 -
21条css高级技巧
转自http://caibaojian.com/css-protips.html转载 2017-06-04 22:08:55 · 277 阅读 · 0 评论 -
前端学习内容
转自:by zhangxinxu from http://www.zhangxinxu.com/wordpress/?p=6183非计算机专业背景学习JS要点:非常重要:先要对JS这门语言要有整体、感性的认识;掌握JS中的字符串、函数、对象、数组、字面量等基本概念,熟记所有内置的方法(包括参数和返回值);所有继承和原型相关内容跳过,注意,是跳过,不要看!没有这些JS一样可以活得很好转载 2017-06-04 17:27:20 · 514 阅读 · 0 评论 -
CSS中样式技巧
1.当元素使用display: inline-block时,注意设置font-size:0,使得他们间隙为0原创 2017-05-23 10:32:55 · 306 阅读 · 0 评论 -
元素水平垂直居中的几种方法
1.设置父盒子为弹性布局 Title html,body{ height: 100%; } body{ display: flex; justify-content: center; align-items: center; }原创 2017-05-19 21:06:27 · 4171 阅读 · 0 评论 -
两列或三列自适应布局
一、三列布局左中右三栏布局,左右两栏宽度固定(要想不固定将宽度值改为百分值即可),中间栏宽度自适应。左右两栏的宽度为200像素。第一种:双飞翼布局(内部添加了一个盒子:innner,少了定位)思路:盒子顺序:中间(宽度:100%),左边(宽度:200),右边(宽度:250)CSS样式:设置float:left。左盒子:margin-left: 负100%,右盒子:margin-原创 2017-05-19 15:36:32 · 480 阅读 · 0 评论 -
视区相关单位vw, vh..简介以及可实际应用场景
来自张鑫旭-鑫空间-鑫生活[http://www.zhangxinxu.com]本文地址:http://www.zhangxinxu.com/wordpress/?p=2636“视区”所指为浏览器内部的可视区域大小,即window.innerWidth/window.innerHeight大小,不包含任务栏标题栏以及底部工具栏的浏览器区域大小。margin:1vh au转载 2017-06-04 11:41:38 · 763 阅读 · 0 评论 -
CSS网格模块
参考:http://www.w3cplus.com/css3/introduction-into-css3-grid-layout.html转载 2017-06-03 21:57:35 · 271 阅读 · 0 评论 -
元素居中的方式
1.块级元素中文字需水平对其时可以设置padding,左右距离相同。原创 2017-05-22 17:32:00 · 359 阅读 · 0 评论 -
css选择符的使用
尽量使用class选择符,不选用标签选择符,因为当有多层标签或级联时,查找性能相对较差。原创 2017-05-22 16:50:50 · 360 阅读 · 0 评论 -
面试题:移动端1px边框的样式
由于移动端不同设备的dpr不同,所以1px边框的设计如下border-1px($color) position: relative &::after dispaly:block position:absolute left: 0 bottom:0 width:100% border-bottom:1px solid $co转载 2017-05-22 17:20:41 · 1117 阅读 · 0 评论 -
什么是雪碧图,怎么用?
CSS雪碧 即CSS Sprite,也有人叫它CSS精灵,是一种CSS图像合并技术,该方法是将小图标和背景图像合并到一张图片上,然后利用css的背景定位来显示需要显示的图片部分,该图片使用CSS background和background-position属性渲染。 优点:加载网页图片时,减少服务器的请求次数,提高页面的加载速度。 缺点:耗费内存,影响浏览器的缩放功能,拼图维护比较麻烦,使转载 2017-05-10 16:42:31 · 6026 阅读 · 0 评论 -
css选择符的优先级
CSS 选择符有哪些?哪些属性可以继承?优先级算法如何计算? CSS3新增伪类有那些?一、.CSS的选择符有哪些?1.id选择器( # myid)2.类选择器(.myclassname)3.标签选择器(div, h1, p)4.相邻选择器(h1 + p)5.子选择器(ul > li)6.后代选择器(li a)7.通配符选择器( * )8.属性选择器(a[原创 2017-05-10 14:58:08 · 4930 阅读 · 0 评论 -
怎么进行响应式设计
(1)设置 Meta 标签meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">11(2)通过媒体查询来设置样式 Media Queries(3)宽度需要使用百分比,不用px(4)弹性图片max-width:100%转载 2017-05-10 16:07:47 · 506 阅读 · 0 评论