首先两者都是两边宽度固定，中间宽度自适应，并且中间盒子(主题内容)放在最前面，以便优先渲染。实现方案：都使用浮动来实现。圣杯布局实现如下：<!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...
1.0 前言网页布局（layout）是CSS的一个重点应用。经典布局类型：布局的传统解决方案，基于盒状模型，依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。2009年，W3C提出了一种新的方案----Flex布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能，成为了现下最流行的布局方式。 Flex布局是什...
px：一个虚拟长度单位，是计算机系统的数字化图像长度单位，换算成物理长度，需要制定经度DPI。Windows系统默认是96dpi，Apple系统默认是72dpi。 一个相对长度单位，像素px是相对于显示器屏幕分辨率而言的。但IE无法调整哪些使用px作为单位的字体大小，国外的大部分网站能够调整的原意在于其使用了em或者rem作为字体单位。em：一个相对长度单位，一般指字符宽度的倍数，用法类似百分比，如：0.8em，通常1em=16px。 相对于当前对...
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的几种定位方式。 float定位（即浮动定位）：这种定位方式很简单，只需规定一个浮动的方向（如：float:left;就表示这个元素向左边摆放），它的定位是相对于父元素容器；如果该元素设置了浮动，后面紧邻的则会受到浮动的影响，因此需要后面的元素若要不受影响，则要在后面清除浮动（可用clear:both;等方法），在两个相...
关于浏览器文字选中颜色以我的系统举例（xp 默认主题），浏览器上页面文字选中后默认的背景色是一种蓝色， 不同浏览器的颜色有些许差异，但大致相同，文字颜色也近乎白色，如下图所示，截自Firefox3.6浏览器：在CSS3的爸爸妈妈还没有相亲认识的时候，要改变页面上文字选中后的背景色以及文字颜色，就跟让太监生孩子一样困难。但是，随着CSS3呱呱落地，获得越来越多的浏览器认可，一切又显得那么自然而然。虽然有些顽固的糟老头（如...
第二十六章 CSS3动画效果一、动画简介 CSS3提供了类似Flash关键帧控制的动画效果，通过animation属性实现。之前学的transform属性只能通过指定属性的初始状态和结束状态实现动画效果，有一定局限性。 animation实现动画效果有两个部分组成 1、通过类似Flash动画中的关键帧声明一个动画 2、在animation属性中调用关键帧声明的动画 CSS3提供的animation是一个复合属性，它包含多种子属性，如...
这世间坑爹的东西不少，浏览器可以算做一件，尤其的IE浏览器。关于浏览器的吐槽已经有不少了，我也就不在这添油加醋了。不过吐槽终究只是泄一时之愤，解决问题才是关键，今天我们就来讲一讲浏览器（样式）兼容的技术——CSS Hack。浏览器不兼容有很多方面，有的是javascript脚本不兼容，也有的是样式（CSS）的不兼容，而CSS Hack解决的就是样式不兼容的问题。在样式（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...
1，首推的是合并css文件，如果页面加载10个css文件，每个文件1k，那么也要比只加载一个100k的css文件慢。2，减少css嵌套，最好不要套三层以上。3，不要在ID选择器前面进行嵌套，ID本来就是唯一的而且人家权值那么大，嵌套完全是浪费性能。4，建立公共样式类，把相同样式提取出来作为公共类使用，比如我们常用的清除浮动等。5，减少通配符*或者类似[hidden="true"]这类选择器的使用，挨个查找所有...这性能能好吗？当然重置样式这些...
CSS简介：CSS 指层叠样式表 (Cascading Style Sheets)样式定义如何显示 HTML 元素样式通常存储在样式表中把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题外部样式表可以极大提高工作效率外部样式表通常存储在 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设计指南》总结 《CSS设计指南》/Charles lvyke-Smith著.李松峰译—人民邮电出版社 本书网站：http://www.stylinwithcss.com强烈推荐！！深入浅出，精简，适合入门！！HTML标记与文档结构1.1 HTML标记基础1.1.1 文本用闭合标签??闭合标签的基本格式如下：<标签名>文本内容<标签名/><标签名 属性_1="属性值" 属性_2="属性值">文本内容</标签名>1.1.2 引用内容用自闭合标签??自闭合标签的基本格式如下：<标签...
用的属性为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 名称...
//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...