CSS - 技术教程文章
css常见布局之三列布局--双飞翼布局和圣杯布局
首先两者都是两边宽度固定，中间宽度自适应，并且中间盒子(主题内容)放在最前面，以便优先渲染。实现方案：都使用浮动来实现。圣杯布局实现如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>圣杯布局</title> <style> .box{ padding: 0 100px; height: 400px; } .center, .left, .right{ float: left; heigh...
【css3网页布局】flex盒子模型【图】
1.0 前言网页布局（layout）是CSS的一个重点应用。经典布局类型：布局的传统解决方案，基于盒状模型，依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。2009年，W3C提出了一种新的方案----Flex布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能，成为了现下最流行的布局方式。 Flex布局是什...
CSS之px、em、rem、pt的用法和区别【代码】
px：一个虚拟长度单位，是计算机系统的数字化图像长度单位，换算成物理长度，需要制定经度DPI。Windows系统默认是96dpi，Apple系统默认是72dpi。 一个相对长度单位，像素px是相对于显示器屏幕分辨率而言的。但IE无法调整哪些使用px作为单位的字体大小，国外的大部分网站能够调整的原意在于其使用了em或者rem作为字体单位。em：一个相对长度单位，一般指字符宽度的倍数，用法类似百分比，如：0.8em，通常1em=16px。 相对于当前对...
[CSS] Conditionally Apply Styles Using Feature Queries @supports
While browsers do a great job of ignoring styles they don’t understand, it can be useful to provide different sets of styles depending on a browser’s support for them. Learn how to use CSS feature queries without JavaScript. 原文：http://www.cnblogs.com/Answer1215/p/6168438.html
css定位方式有哪几种？
复杂的网页布局都是通过各种网页元素灵活定位实现的，网页中的各种元素定位都有自己的特点。下面我们来看一下css的几种定位方式。 float定位（即浮动定位）：这种定位方式很简单，只需规定一个浮动的方向（如：float:left;就表示这个元素向左边摆放），它的定位是相对于父元素容器；如果该元素设置了浮动，后面紧邻的则会受到浮动的影响，因此需要后面的元素若要不受影响，则要在后面清除浮动（可用clear:both;等方法），在两个相...
使用CSS3改变文本选中的默认颜色——张鑫旭【代码】【图】
关于浏览器文字选中颜色以我的系统举例（xp 默认主题），浏览器上页面文字选中后默认的背景色是一种蓝色， 不同浏览器的颜色有些许差异，但大致相同，文字颜色也近乎白色，如下图所示，截自Firefox3.6浏览器：在CSS3的爸爸妈妈还没有相亲认识的时候，要改变页面上文字选中后的背景色以及文字颜色，就跟让太监生孩子一样困难。但是，随着CSS3呱呱落地，获得越来越多的浏览器认可，一切又显得那么自然而然。虽然有些顽固的糟老头（如...
33.CSS3动画效果
第二十六章 CSS3动画效果一、动画简介 CSS3提供了类似Flash关键帧控制的动画效果，通过animation属性实现。之前学的transform属性只能通过指定属性的初始状态和结束状态实现动画效果，有一定局限性。 animation实现动画效果有两个部分组成 1、通过类似Flash动画中的关键帧声明一个动画 2、在animation属性中调用关键帧声明的动画 CSS3提供的animation是一个复合属性，它包含多种子属性，如...
CSS Hack技术（一）【代码】
这世间坑爹的东西不少，浏览器可以算做一件，尤其的IE浏览器。关于浏览器的吐槽已经有不少了，我也就不在这添油加醋了。不过吐槽终究只是泄一时之愤，解决问题才是关键，今天我们就来讲一讲浏览器（样式）兼容的技术——CSS Hack。浏览器不兼容有很多方面，有的是javascript脚本不兼容，也有的是样式（CSS）的不兼容，而CSS Hack解决的就是样式不兼容的问题。在样式（CSS）上，各大浏览器都有着许多异常的解析。而本文将会着重讲一...
通过css鼠标事件简单实现京东放大镜效果【代码】
<!DOCTYPE html> <html><head><meta charset="utf-8" /><meta name="referrer" content="no-referrer"><title></title><style type="text/css">.zoom{width: 800px;height: 250px;display: flex;margin: 0 auto;}.left{width: 400px;height: 250px;background-image:url("https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2F1%2F57bbdd4add0f3.jpg&refer=http%3A%2F%2Fpic1.win4000.com&app=2...
CSS优化，提高性能的方法有哪些？
1，首推的是合并css文件，如果页面加载10个css文件，每个文件1k，那么也要比只加载一个100k的css文件慢。2，减少css嵌套，最好不要套三层以上。3，不要在ID选择器前面进行嵌套，ID本来就是唯一的而且人家权值那么大，嵌套完全是浪费性能。4，建立公共样式类，把相同样式提取出来作为公共类使用，比如我们常用的清除浮动等。5，减少通配符*或者类似[hidden="true"]这类选择器的使用，挨个查找所有...这性能能好吗？当然重置样式这些...
CSS样式【代码】
CSS简介：CSS 指层叠样式表 (Cascading Style Sheets)样式定义如何显示 HTML 元素样式通常存储在样式表中把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题外部样式表可以极大提高工作效率外部样式表通常存储在 CSS 文件中多个样式定义可层叠为一CSS样式表： 当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化。有以下三种方式来插入样式表： 外部样式表 当样式需要被应用到很多页面的时候，外...
CSS盒子水平垂直的几种方案【代码】【图】
方案一：定位+margin<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style type="text/css">#bigBox{width: 400px;height: 400px;background: gray;position: relative;}#smallBox{width: 100px;height: 100px;background: red;position: absolute;left: 50%;top: 50%;margin-left: -50px;margin-top: -50px;}</style></head><body><div id=‘bigBox‘><div id=‘smallBox‘></div></div></body></html>方案二...
《CSS设计指南》笔记--HTML标记与文档结构【代码】【图】
通过阅读和学习书籍《CSS设计指南》总结 《CSS设计指南》/Charles lvyke-Smith著.李松峰译—人民邮电出版社 本书网站：http://www.stylinwithcss.com强烈推荐！！深入浅出，精简，适合入门！！HTML标记与文档结构1.1 HTML标记基础1.1.1 文本用闭合标签??闭合标签的基本格式如下：<标签名>文本内容<标签名/><标签名 属性_1="属性值" 属性_2="属性值">文本内容</标签名>1.1.2 引用内容用自闭合标签??自闭合标签的基本格式如下：<标签...
css动画【代码】
用的属性为animation实例：<!DOCTYPE html> <html> <head> <style> div { width:100px; height:100px; background:red; position:relative; animation:mymove 5s infinite; // mymove 动画名字 5s表示运动五秒，infinite表示无限循环 }@keyframes mymove { from {left:0px;} to {left:200px;} } </style> </head> <body> <div></div> </body> </html>animation语法值描述animation-name规定需要绑定到选择器的 keyframe 名称...
html5+css3 制作音乐播放器
//css//body , html{ margin:0; padding:0; font:12px Arial, Helvetica, sans-serif; } .MusicBox { background-color: #212121; background-image: -webkit-gradient(linear, left top, left bottom, from(#1B1B1B), to(#212121)); background-image: -webkit-linear-gradient(top, #1B1B1B, #212121); background-image: -moz-linear-gradient(top, #1B1B1B, #212121); bac...
spring boot 项目 freemarker 无法加载static 中 js css 文件 原因（报错404）【图】
去掉@EnableWebMvc 注解 ，相关原因请看原博文https://blog.csdn.net/testcs_dn/article/details/80249894原文：https://www.cnblogs.com/0kuxia0/p/9605436.html
css选择器jquery选择器异同
css选择器用$("")包起来就成了jQuery选择器 CSS选择器jQuery选择器ID选择器#myID$(‘#myID‘)类选择器.myclass$(‘.myclass‘)标签选择器p$(‘p‘)层次选择器div > strong$(‘div>strong‘)css称为伪类选择器jQuery称之为过滤选择器p:nth-child(1)$(‘p:nth-child(1)‘) CSS选择器的效率（从上至下）：id选择器（#myid）类选择器（.myclassname）标签选择器（div,h1,p）相邻选择器（h1+p）子选择器（ul > li）后代选择器（li...
CSS教程:弄懂闭合浮动元素
按照CSS规范，浮动元素（floats）会被移出文档流，不会影响到块状盒子的布局而只会影响内联盒子（通常是文本）的排列。因此当其高度超出包含容器时，一般父容器不会自动伸长以闭合浮动元素。但是有时我们却需要这种自动闭合行为，具体如何处理呢？ 有一种做法就是在父容器内再插入一个额外的标签，并令其清除浮动（clear）以撑大父容器。这种方法浏览器兼容性好，没有什么问题，缺点就是需要额外的（而且通常是无语义的）标签，...
[坑况]——this dependency was not found：'element-ui/lib/theme-chalk/index.css'
element ui坑况：今日pull代码，潇洒npm run dev ，被告知：this dependency was not found：‘element-ui/lib/theme-chalk/index.css‘。。。。。。。解决思路1.找不到依赖，路径问题这是不科学的啊，昨天能够跑通的代码，今天就狗带了？ 但是你也要去找找路径相关的解答，万能度娘上线，大多是这样的，应该这样引用"./" emmmm 分析了一波不太对啊！elementui 的引用方式就是这样的import ‘element-ui/lib/theme-chalk/index.css...
JQuery CSS 选择器
jQuery选择器和CSS选择器的写法十分类似，都具有隐式迭代的特点，无需循环遍历符合选择器要求的每个元素，使用起来相对方便，通常，把css选择器用$("")包起来就成了一个jQuery选择器。1、区别那么两者的区别如下两者的作用不同，CSS选择器找到元素后为设置该元素的样式，jQuery选择器找到元素后添加行为jQuery选择器拥有更好的跨浏览器的兼容性选择器的效率CSS选择器的效率 id选择器（#myid）类选择器（.myclassname）标签选择器（...
条件CSS的介绍
毫无疑问，你会发现很多情况下，不同的浏览器需要不同的样式声明，针对这一点，Conditional-CSS可以让你在你的CSS声明中添加Internet Explorer内置式条件样式。Conditional-CSS允许你针对单一浏览器或浏览器组写出有逻辑条件的可维护的特定的CSS声明。相关文章：针对不同版本的IE浏览器的条件CSS应用 条件CSS的高级用法使CSS针对特定的浏览器。 简化你对CSS文件的维护。 优化你的CSS。 解决CSS那些使人烦恼的小BUG。 自动扩展和引...
CSS前端面试题【代码】
CSS面试题CSS3新增了那些特性？完整链接CSS3实现圆角:border-radius盒子阴影：box-shadow文本阴影：text-shadow渐变：gradient变化：transform新增加很多CSS伪类选择器 ：not选择器 ：empty选择器 ：root选择器 ：target选择器 ：selection选择器 以下的选择器的说明介绍里有个词叫“一组”。他的意思就是同一父元素下所有元素及文本节点，即为一组。 ：nth-of-type(n) ：nth-last-of-type(n) ：first-of-type ：last-of-type ：on...
CSS 滤镜 : backdrop-filter【代码】【图】
backdrop filter属性允许我们使用css对元素后面的内容应用过滤效果。此属性是定义筛选器属性的筛选器效果模块级别1的扩展。它使用与filter属性相同的语法，但效果将应用于元素的背景。这种影响常见于运行ios7及以上版本的设备接口，以及os x yosemite及以上版本的设备接口。如果没有这个特性，这种效果只能通过编辑背景图像本身并应用剪裁和定位技术来实现。若要使属性具有任何可见效果，需要从嵌套元素或绝对位置沿Z轴将两个元素堆...
10个CSS简写/优化技巧【代码】
CSS简写就是指将多行的CSS属性简写成一行，又称为CSS代码优化或CSS缩写。CSS 简写的最大好处就是能够显著减少CSS文件的大小，优化网站整体性能，更加容易阅 读。下面介绍常见的CSS简写规则： 一、盒子大小 这里主要用于两个属性：margin和padding，我们以margin为例，padding与之相同。 盒子有上下左右四个方向，每个方向都有个外边距：?1234margin-top:1px;margin-right:2px;margin-bottom:3px;margin-left:4px; ...
《CSS世界》读书笔记（十四）【代码】
<!-- 《CSS世界》张鑫旭著 -->功勋卓越的 border 属性border-width 不支持百分比值border-style 类型border-style 默认值是none；多出现在重置边框样式的时候，渲染性能最高的写法是：div { border: 1px solid; border-bottom: 0 none;}border-style: dashed虚线边框。虚线颜色区的宽高比以及颜色区和透明区的宽度比例在不同浏览器下是有差异的。例如，在 Chrome 和 Firefox 浏览器下，颜色区的宽高比是3:1，颜色区和透明区...
DIV+CSS清除浮动方法
一、为什么要清除浮动？ 1》父元素在未定义高的情况下，由于子元素全部浮动脱离文本流，而造成父元素高的塌陷（正常情况下，父元素的高是由未浮动的子元素撑起来） 2》因为部分子元素的而浮动，脱离文本流而造成其他元素的布局错乱。二、常见的几种清除浮动方法 1》给没有浮动的子元素的CSS添加 clear: both;或新增加一个空的子元素，并且给其的CSS添加 clear: both;这样可以利用清除左右浮动的子元素重新撑起父元素的高，...
js学习总结----设置元素的样式值setcss【代码】
在JS给元素设置样式属性值，我们只能通过curEle.style[attr] = value 这种方式给元素设置行内样式下面封装一个给当前元素的某一个样式属性设置值的方法（增加在行内样式上的）：setCss()function setCss(curEle,attr,value){//在JS中设置float样式值也需要处理兼容if(attr==="float"){curEle["style"]["cssFloat"] = value;curEle["style"]["styleFloat"] = value;return;}//如果打算设置的是元素的透明度，我们需要设置两套样式来...
css3 border-image【代码】【图】
这是一个截图，我想做做种样式的div.最终效果下面开始：首先打开windows 画图板，手绘一个图形bg.jpg,歪歪扭扭就ok了： <style type="text/css"> div { -moz-border-image: url(border.png) 30 30 stretch; /* Old Firefox */ -webkit-border-image: url(bg.jpg) 10 10 stretch; /* Safari and Chrome */ -o-border-image: url(bg.png) 20 30 stretch; ...
用css3实现社交分享按钮
以前实现按钮一般都是用图片来实现的，特别是一些拥有质感的按钮，今天练习了一些相关方面的的例子，用css3来实现Social Media Buttons html代码如下 <div class="outset-colored"><ul><li> <a href=" " title="My E-Mail" class="email"> <img src="images/gmail_white.png" alt="gmail icon" /> <span class="site">E-Mail</span> </a> </li><li> <a href="#" title="My LinkedIn Page" class="linkedin"> <img src="images/link...
css优化建议
1、不要使用过小的图片做背景平铺。这就是为何很多人都不用 1px 的原因，这才知晓。宽高 1px 的图片平铺出一个宽高 200px 的区域，需要 200*200=40, 000 次，占用资源。 2、无边框。推荐的写法是 border:none;，哈哈，我一直在用这个。 border:0; 只是定义边框宽度为零，但边框样式、颜色还是会被浏览器解析，占用资源。 3、慎用 * 通配符。所谓通配符，就是将 CSS 中的所有标签均初始化，不管用的不用的，过时的先进的，一视同仁，...