css层叠机制 外边距重叠就是margin-collapse. 在CSS当中,相邻的两个盒子(可能是兄弟关系也可能是祖先关系)的外边距可以结合成一个单独的外边距.这种合并外边距的方式被称为折叠,并且因而所结合成的外边距称为折叠外边距. 折叠结果遵循下列计算规则: 两个相邻的外边距都是正数时,折叠结果是它们两者之间较大的值. 两个相邻的外边距都是负数时,折叠结果是两者绝对值的较大值. 两个外边距一正一负时,折叠结果是两者的相加的和.…
能描述下你在项目中都用到了哪些符合逐渐增强和优雅降级的理念的技巧吗…
响应式开发经验,响应式页面的三种核心技术是什么…
响应式开发经验,响应式页面的三种核心技术是什么…
有几种文字替换方式,之间的优缺点…
在什么情况下通过img引入图片,什么情况用背景图引入?背景属性有哪些…
 定宽    text-align: center 父容器position:relative:子容器 position:absolute;left:50%; margin-left: 宽度/2 .Center-Container {   position: relative; } .Absolute-Center {   width: 50%;   height: 50%;   overflow: auto;   margin: auto;   position: absolute;   top…
http://paranimage.com/css-box-model/…
浮动的理解和清除浮动的几种方式 clear语法:clear : none | left | right | both 取值:none : 默认值.允许两边都可以有浮动对象left : 不允许左边有浮动对象right : 不允许右边有浮动对象both : 不允许有浮动对象 float 会影响其他相邻元素,但clear只会影响自身 参考文档 http://www.zhangxinxu.com/wordpress/2014/06/understand-css-clear-left-right-and-…
CSS小tip整理 1.利用css在列表靠头和末尾添加箭头: /* 左箭头*/ ol a[rel="prev"]:before { content: "\00AB"; padding-left: 0.5em; } /* 右箭头*/ ol a[rel="next"]:after { content: "00BB"; padding-right: 0.5em; } 2.让父元素包含浮动的子元素: 添加一个进行清理的元素 让父元素浮…
非原创,具体出自哪里忘了,如果侵害您的利益,请联系我. CSS样式命名整理 页面结构 容器: container/wrap 整体宽度:wrapper 页头:header 内容:content 页面主体:main 页尾:footer 导航:nav 侧栏:sidebar 栏目:column 中间内容:center 导航 导航:nav 导航:mainbav/globalnav 子导航:subnav 顶导航:topnav 边导航:sidebar 左导航:leftsidebar 右导航:rightside…
css入门知识点整理 不要嘲笑我这个蒟蒻..例子来源:w3school css其实就分为两个东西,一个是选择器,另外一个是声明.声明定义了某个对象的属性的值,这都是html的内容.重点要关注的是选择器.顾名思义,选择器就是用来"选择"HTML中的元素的.通过定义选择器可以选出HTML文档中的某些元素,然后把它们的样式变成声明中的.css的格式长这样: selector {declaration1; declaration2; ... declarationN } 这里有一个最基本的cs…
CSS样式命名整理 页面结构 容器: container/wrap 整体宽度:wrapper 页头:header 内容:content 页面主体:main 页尾:footer 导航:nav 侧栏:sidebar 栏目:column 中间内容:center 导航 导航:nav 导航:mainbav/globalnav 子导航:subnav 顶导航:topnav 边导航:sidebar 左导航:leftsidebar 右导航:rightsidebar 边导航图标:sidebarIcon 菜单:men…
CSS样式命名整理 页面结构 容器: container/wrap整体宽度:wrapper页头:header内容:content页面主体:main页尾:footer导航:nav侧栏:sidebar栏目:column中间内容:center 导航 导航:nav导航:mainbav/globalnav子导航:subnav顶导航:topnav边导航:sidebar左导航:leftsidebar右导航:rightsidebar边导航图标:sidebarIcon菜单:menu子菜单:submenu标题: t…
HTML&&CSS基础知识点整理 一.WEB标准:一系列标准的集合 1. 结构(Structure):html 语言:XHTML[可扩展超文本标识语言]和XML[可扩展标记语言] 2. 表现(Preasentation):css 3. 行为(Behavior):JS[DOM+ES] 其中一些小的具体要求: 结构:标签小写.闭合.不能随意嵌套 CSS+JS:精良使用外链,不用行内 优点: 1. 易于维护 2. 页面响应快 3. 可访问性高 4. 提高设备兼容性 5. 易被解析(搜索引擎) P…
<基于JQuery和CSS的特效整理>已整理成PDF文档,点击可直接下载至本地查阅https://www.webfalse.com/read/201724.html 文章 一款基于jQuery的颜色拾取器 分享一款基于jQuery的QQ表情插件 一款基于jQuery的图片水平滑动插件 一款基于jquery超炫的图片切换特效 一款基于jquery实现的鼠标单击出现水波特效 一款基于jquery滑动后固定于顶部的导航 一款基于javascript的3D玻璃破碎特效 分享一款基于jQuery的视频播…
第一种情况 /*当标题前的图标时单独的一个点儿或者方块或者其他类似图标时,定义背景图background要放在<li>里.    在<li>中设置背景图片的尺寸,地址,不重复,位置:以及文字相关的padding,无序列图标,行高等*/ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd…
css中cursor属性详解-鼠标移到图片变换鼠标形状   语法: cursor : auto | all-scroll | col-resize| crosshair | default | hand | move | help | no-drop | not-allowed | pointer | progress | row-resize | text | vertical-text | wait | *-resize | url ( url )  取值: auto  :   默认值.浏览…
前言 还在用图片制作箭头,三角形,那就太lou了.css可以轻松搞定这一切,而且颜色大小想怎么变就怎么变,还不用担心失真等问题. 先来看看这段代码: /**css*/.d1{ width: 0; height: 0; border: 100px solid #339933;}/**html*/<div class="d1"></div>/**css*/.d2{ width: 0; height: 0; border-width: 100px; border-st…
网上有很多关于ie hack的文章,可能由于文章发布后ie的版本还在升级.所以导致有些hack写法已经不适用了.以下是本人整理的ie6-11的一些hack常用写法.(以下默认文档模式为标准模式) 1.通过条件判断ie版本来引用不同的css <!--[if IE]>只试用ie浏览器<![endif]--> <!--[if !IE]>只试用非ie浏览器<![endif]--> <!--[if IE 6]>只试用ie6浏览器<![endif]--…
转自:http://homepage.yesky.com/185/11484185all.shtml#p11484185 CSS兼容常用技巧(1) 更多精彩相关文章推荐: 各大浏览器 CSS3 和 HTML5 兼容速查表 IE6/IE7/IE8三个版本的CSS兼容速查手册 CSS hack定义技巧浏览器兼容一览表 XHTML+CSS兼容性解决方案 CSS样式表对浏览器的兼容性问题有时让人很头疼,不过当我们了解了其中的原理与技巧,就会觉得轻松一些.本文收集整理了IE7,6与Fireofx的兼CSS…
读完<CSS权威指南>,对选择器有如下整理: selector 本质上是执行元素样式匹配规则,我们可以利用它来限定某些元素 选择器类型: <!-- 实体,即HTML中存在 --> 1.通配选择器 * 匹配任意 2.元素选择器 p 3.类选择器 .class 4.ID选择器 #id 5.属性选择器 element[rep] (不常用) <!-- 虚体,即HTML本身不存在 --> 1.伪类(一些在某种行为会被自动定义的类,有点类似游览器会自动帮我管理这些内置类) <…
CSS样式被称为为“层叠样式表”,是一种网页制作做不可或缺的技术,是用于装饰网页,达到设计效果的一种样式语言,下面将整理一下css常用样式: 字体属性:(font) 大小 {font-size: x-large;}(特大) xx-small;(极小) 一般中文用不到,只要用数值就可以,单位:PX.PD 样式 {font-style: oblique;}(偏斜体) italic;(斜体) normal;(正常) 行高 {line-height: normal;}(正常) 单位:PX.PD.EM 粗…
1.什么是字体 字体是文字的外在形式,就是文字的风格,是文字的外衣.比如行书.楷书.草书,都是一种字体.同样一个字每个人写起来都会有差异,可以说每个人都有一套潜在的字体库.对于web页面来说,字体就是计算机上存储的一套文字显示方式.通过对文字进行一些特殊处理(比如末端加强)来提高不同环境中文字的可读性. 比如同样大小的文字,在不同字体下的可读性是不同的. 一般来讲,一款字库的诞生,要经过字体设计师的创意设计.字体制作人员一笔一划的制作.修改,技术开发人员对字符进行编码.添加程序指令.装库.开发安…
1-2-1单列变宽布局 side列定宽300px,content列变宽,尺寸是100%-300px.核心的问题就是浮动列的宽度应该等于“100% - 300px”,而CSS显然不支持这种带有减法运算的宽度表达方法.但是通过margin可以变通的实现这个宽度.实现的原理为,在content外面再套一个div,即图中的contentWrap,使它的宽度为100%,也就是等于container的宽度.然后通过将其margin-left设置为-300px,就使它向左平移了300px.再将content的…
固定宽度布局 1-2-1布局(浮动) <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>固定宽度-float</title> <style type="text/css"> #header,#footer,#container{ width: 760px; margin: 0 auto; } #content { float: left; w…
页面布局(layout) header 头部/页眉: index 首页/索引: logo 标志: nav/sub_nav 导航/子导航: banner 横幅广告: main/content 主体/内容: container/con 容器: wrapper/wrap 包裹(类似于container): menu 菜单: sub_menu/second_menu 子菜单/二级菜单: list 列表: section 分区/分块(类似于div); article 文章: aside 侧边栏/广告: f…
5.css盒模型: CSS 框模型 (Box Model) 规定了元素框处理元素内容.内边距.边框 和 外边距 的方式…