CSS的核心：浮动、盒子模型、定位DIV作为块级元素，每个DIV占据一行。 块元素特点：1.默认显示在父标签的左上角；2.会计元素默认占满一行（占满整个文档流） 常见的块级元素：p、h1-h6、ul li、ol li、div、table、hr等 相对应的是行内元素（内联元素）：a、span、img、input等 行内元素特点：1.大小受到文字区域影响，不受height、width影响；2.不会单独占据一行。 span标签的应用：不会单独占满一行，不会受到其他块级...
今天看了张鑫旭大佬的新书的有感吧，记录一下。Web标准未对一些场景做出明确规范，所以各大浏览器厂家只能根据自己的理解和喜好去实现，表现差异不是浏览器的bug，用计算机领域的术语描述为"未定义行为"。比如一个例子： CSS中的一个伪类，最常用的一个伪类:active，鼠标按下，执行改伪类对应的CSS样式，鼠标抬起还原。但是这种情况呢：<!DOCTYPE html> <html> <head><meta charset="utf-8" /><style>.active-btn {display: inline...
CSS盒子模型：由四个属性组成的外边距(margin)、内边距(padding)、边界(border)、内容区(width和height);标准的CSS盒子模型和低端IE CSS盒子模型不同：宽高不一样 标准的css盒子模型宽高就是内容区宽高； 低端IE css盒子模型宽高 内边距﹢边界﹢内容区；原文：http://www.cnblogs.com/love-sea520/p/5903442.html
CSS学起来并不难，但在大型项目中，就变得难以管理，特别是不同的人在CSS书写风格上稍有不同，团队上就更加难以沟通，为此总结了一些如何实现高效整洁的CSS代码原则： 1. 使用Reset但并非全局Reset 不同浏览器元素的默认属性有所不同，使用Reset可重置浏览器元素的一些默认属性，以达到浏览器的兼容。但需要注意的是，请不要使用全局Reset：鞍山治疗牛皮癣的医院www.0412n.com *{ margin:0; padding:0; } 这不仅仅因为...
(壹)常用的CSS命名规则头:header内容:content/container尾:footer导航:nav侧栏:sidebar栏目:column页面外围控制整体布局宽度:wrapper左右中:left right center登录条:loginbar标志:logo广告:banner页面主体:main热点:hot新闻:news下载:download子导航:subnav菜单:menu子菜单:submenu搜索:search友情链接:friendlink页脚:footer版权:copyright滚动:scroll内容:content标签页:tab文章列表:list提示信息:msg小技巧:tips栏目标题:title...
主要内容：1. HTML标签：表单标签2. CSSHTML标签：表单标签* 表单： * 概念：用于采集用户输入的数据的。用于和服务器进行交互。 * form：用于定义表单的。可以定义一个范围，范围代表采集用户数据的范围 * 属性： * action：指定提交数据的URL * method:指定提交方式 * 分类：一共7种，2种比较常用 ...
样式优先级：默认样式<标签选择器<类选择器<id选择器<行内样式<!important <!DOCTYPE html> <html> <head><meta charset="utf-8" /><title></title><style>#main {font-size: 80px;color: blue;}.box {font-size: 40px !important;color: yellow;}div{font-size:20px;color:red;} </style> </head> <body><div class="box" id="main" style="font-size:120px;color:gray">哈哈</div> </body> </html>注释：上述代码为了屏蔽样...
input{ background-color:expression(this.readOnly==true?"#EEEEEE":"#FFFFFF"); } input[readonly]{ background-color:#EEEEEE; }原文：http://www.cnblogs.com/superJF/p/4398770.html
提要：对于传统的一般用css雪碧（css sprite）来搞，目前大部分网站已经主要字体图标 ，利用font+css 或者font+html 来开发，今天总结了一下，记录之~css sprite用背景图片定位，兼容性好，图标颜色丰富，但是对于网站缩放来讲，会使图片失真，也不容易维护；而当我们运用字体图标来做这个事的时候，好处就多多了（但是字体图标就是颜色单一，一般可忽略）1.首先从https://icomoon.io/ 国外的字体图标库 非常好 下载免费的图标库（...
梳理下平时常用css水平垂直居中方式～使用flex布局HTML<div class="box"><div class="child"></div> </div> CSS.box {width: 100vw;height: 500px;background: skyblue;display: flex;align-items: center;justify-content: center; }.child {width: 200px;height: 200px;background-color: deepskyblue; } 利用flex的alignItems:center垂直居中，justifycontent:center水平居中利用相对定位和绝对定位的margin:autoHTML<div class...
1/*IE滚动条颜色设置*/ 2body {3 scrollbar-arrow-color:#f2f2f3; /*上下箭头*/ 4 scrollbar-track-color:#1589ce; /*底层背景色*/ 5 scrollbar-face-color:#27aeff; /*滚动条前景色*/ 6 scrollbar-Shadow-color:#1589ce; /*滚动条边线色*/ 7 }8/*chrome滚动条颜色设置*/ 9body::-webkit-scrollbar {width:10px; height:10px; background-color:transparent;} /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸...
前言 自从做了智慧城市这个项目之后，我一个做后端的开发者，瞬间转为前端开发，不过我还是很喜欢前端的。前端那些事，其实蛮有意思的，HTML实现的是静态的，使用ajax之后就可以和数据库交互了，加上js和jQuery之后就动起来了，加上CSS之后就更加炫酷了。因为项目中需要，查资料和编写了一些炫酷的二级菜单，分享给大家，好东西就要分享嘛！一、滑动菜单1、代码： View Code2、效果 二、左侧带图标多级下拉菜单1、HTML代码： V...
css3的强大，让人惊叹，人们在惊喜之余，又不得不为其艰难的道路感到可惜：好的标准只有得到行业浏览器的良好支持才算得上“标准”。CSS3标 准已提出数年，但是目前能实现她的浏览器并不多，虽然部分浏览器能实现部分规范，但这又有什么用呢？面对更多的兼容性问题，CSSer们只有望洋轻叹。虽 然如此，但有前瞻性的我们，又怎能停步不前呢？今天我们就来“前瞻”一下CSS3的一个伪类选择器“:nth-child()”。 语法： :nth-child(an+b...
认识CSS样式CSS全称为“层叠样式表 (Cascading Style Sheets)”，它主要是用于定义HTML内容在浏览器内的显示样式，如文字大小、颜色、字体加粗等。如下列代码：p{font-size:12px;color:red;font-weight:bold; }使用CSS样式的一个好处是通过定义某个样式，可以让不同网页位置的文字有着统一的字体、字号或者颜色等。 CSS样式的优势为什么使用css样式来设置网页的外观样式呢？右边编辑器是一段文字，我们想把“超酷的互联网”、“服务...
翻译自：How to Develop with CSS很多web开发人员都知道CSS，但是他们很可能认为使用CSS的应用代码就是这样的：<p><span style="font-weight:bold;font-family:Arial">Welcome!</span></p>或者是这样的：<table class="middle grey"><tr><td class="darkTopHeader">Item #</td><td class="darkTopHeader">Qty</td><td class="darkTopHeader">Cost</td></tr><tr><td class="rowHeaderDrk">1341</td><td class="cellFieldDrk">3</td>...