23、css的定位问题

【23、css的定位问题】的更多相关文章

23、css的定位问题

1.positon:relative相对定位 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta ht…

css绝对定位问题

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> html,body,div{margin: 0; padding: 0; border:0; } #out{height: 200px; width: 800p…

3月23.CSS表格布局

360表格布局: CSS定义标签: @charset "utf-8";/* CSS Document */.bt1{ border:#309 solid 1px; height:100px; width:900px; margin:10px; top:100px ; left:180px; position:absolute; } .bt2{ border:#309 solid 1px; height:50px; width:900px; margin:10px; top:220px;…

23 , CSS 构造列表与导航

1. 列表图片 2. 背景列表 3. 翻转列表 4. 水平导航 1. 内边距与外边距 Ul { Margin: 0; Padding: 0; } 2. 使用图片作为列表图标 Ul { Margin: 0; Padding:0; Width: 200px; List-style-image:url(images/list.gif); Line-height: 150%; } 3. 以背景图片作为项目列表图标 Ul { List-style-type:none; } Li { Background:…

CSS的定位问题总结

CSS 定位和浮动 CSS 为定位和浮动提供了一些属性,利用这些属性,可以建立列式布局,将布局的一部分与另一部分重叠,还可以完成多年来通常需要使用多个表格才能完成的任务. 定位的基本思想很简单,它允许你定义元素框相对于其正常位置应该出现的位置,或者相对于父元素.另一个元素甚至浏览器窗口本身的位置.显然,这个功能非常强大,也很让人吃惊.要知道,用户代理对 CSS2 中定位的支持远胜于对其它方面的支持,对此不应感到奇怪.另一方面,CSS1 中首次提出了浮动,它以 Netscape 在 Web 发展初…

CSS中定位问题

通过使用 position 属性,我们可以选择 4 种不同类型的定位,这会影响元素框生成的方式. position 属性值的含义: static 元素框正常生成.块级元素生成一个矩形框,作为文档流的一部分,行内元素则会创建一个或多个行框,置于其父元素中. relative 元素框偏移某个距离.元素仍保持其未定位前的形状,它原本所占的空间仍保留.提示:相对定位实际上被看作普通流定位模型的一部分,因为元素的位置相对于它在普通流中的位置,所以相对定位移动过大会覆盖掉其他框. absolute 元素框从…

div+css页面右侧底部悬浮层

效果体验:http://hovertree.com/texiao/css/23/ 效果图: 代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>div+css页面右侧底部悬浮层 - 何问起</title><base t…

IE和firefox火狐在JS、css兼容区别

1.firefox不能对innerText支持. firefox支持innerHTML但却不支持innerText,它支持textContent来实现innerText,不过默认把多余的空格也保留了.如果不用textContent,如果字符串里面不包含HTML代码也可以用innerHTML代替. 2.禁止选取网页内容: 在IE中一般用js:obj.onselectstart=function(){return false;} 而firefox用CSS:-moz-user-select:none…

FF与IE对JavaScript和CSS的区别

一.FF与IE对JavaScript的区别 1. document.formName.item("itemName") 问题说明:IE下,可以使用document.formName.item("itemName")或document.formName.elements["elementName"]; Firefox下,只能使用document.formName.elements["elementName"]. 解决方法:统一…

Firefox 与 IE 对Javascript和CSS的区别

1. document.formName.item("itemName") 问题说明:IE下,可以使用document.formName.item("itemName")或document.formName.elements["elementName"]; Firefox下,只能使用document.formName.elements["elementName"]. 解决方法:统一使用document.formName.el…

css部分总结

10.19HTML总结 1.<!DOCTYPE HTML>声明:告知浏览器文档使用哪种HTML或者XHTML规范,该标签可声明三种DTD(文档类型定义)类型:严格版本.过渡版本以及基于框架的HTML文档. 2. 段落标签:p标签语法规则: p> align="">.../p>(align表示对其方式) 3.水平线标签:hr标签语法规则同段落标签 4.图像标签:image 语法规则:>image src="image/css作业3.htm…

史上前端面试最全知识点（附答案）---html & js & css

史上前端面试最全知识点(附答案) 一.html & js & css 1.AMD和CMD是什么?它们的区别有哪些? AMD和CMD是二种模块定义规范.现在都使用模块化编程,AMD,异步模块定义:CMD,通用模块定义.AMD依赖前置,CMD依赖就近.CMD的API职责单一,没有全局require,AMD的一个API可以多用. 2.web开发常见的漏洞. XSS(跨站脚本攻击):其原理是攻击者向有XSS漏洞的网站中输入(传入)恶意的HTML代码,当其它用户浏览该网站时,这段HTML代码会自动执…

css学习_写法规范、选择器

1.css(层叠样式表)样式主要目的(让页面更好看些) css尽量不要写内联样式,保证结构和样式分离原则: html专门负责结构,css专门负责样式. 2.css写法规范选择器 { 属性 :值 : } 内联样式写在标签里 style=“”属性:值“” 内部样式写在head标签里的style标签里外部样式通过链接导入样式表 link 3.font-size(字号大小) 4.浏览器默认字体font-family 微软雅黑 ,字体大小一般默认为16px 一般不想写中文是可以用…

50个CSS技巧

这里我工作中收集了10个很不错的CSS技巧,你可以用在你的项目上.它可以帮你很好地整理你的元素并让他们看起来蛮酷的.下面开始我们的内容,希望你会喜欢它.下面是我收集的CSS技巧,希望能帮助到你,感觉收藏吧. 1. 黑白图像这段代码会让你的彩色照片显示为黑白照片,是不是很酷? img.desaturate { filter: grayscale(100%); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-fi…

HTML&&css面试题

HTML&css相关问题 1.XHTML和HTML有什么区别 HTML是一种基本的WEB网页设计语言,XHTML是一个基于XMl的置标语言最主要的不同 XHTML元素必须被正确地嵌套. XHTML元素必须被关闭标签名必须用小写字母 XHTMl文档必须拥有根元素 2.什么是语义化的HTML? 直观的认识标签对于搜索引擎的抓取有好处,用正确的标签做正确的事情! HTML语义化就是让页面的内容结构化,便于对浏览器,搜索引擎解析: 在没有样式css情况下也以一种文档格式显示,并且是容易阅读.搜索引擎…

「CSS」css基础

1. 文字水平居中将一段文字置于容器的水平中点,只要设置text-align属性即可: text-align:center; 2. 容器水平居中先该容器设置一个明确宽度,然后将margin的水平值设为auto即可. div#container { width:760px; margin:0 auto; } 3. 文字垂直居中单行文字的垂直居中,只要将行高与容器高设为相等即可. 比如,容器中有一行数字. <div id="container">1234567890<…

Head First HTML与CSS阅读笔记（一）

之前写过不少前端界面,但是没有完整阅读过一本HTML与CSS的书籍,都是用到什么查什么,最近闲暇之余想巩固加深一下前端基础方面的知识,阅读了<Head First HTML与CSS>,感觉此书有点过于简单了,但还是学到了不少,这里只记录总结一些重要或自己之前并没有太过注意的知识点. 1. 元素属性的写法:属性名+等号(=)+用双引号括起来的属性值: 2. HTML中简短引用元素:<q>...</q>,浏览器会负责加上双引号,<q>一般作为现有段落的一部分,是…

（转） 50个CSS技巧

这里我工作中收集了10个很不错的CSS技巧,你可以用在你的项目上.它可以帮你很好地整理你的元素并让他们看起来蛮酷的.下面开始我们的内容,希望你会喜欢它.下面是我收集的CSS技巧,希望能帮助到你,感觉收藏吧. 1. 黑白图像这段代码会让你的彩色照片显示为黑白照片,是不是很酷? img.desaturate { filter: grayscale(100%); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-fi…

CSS 学习手册

目录 CSS 简介 1.CSS 简介 CSS 概述层叠次序 2.CSS 基础语法 CSS 语法值的不同写法和单位记得写引号多重声明: 空格和大小写 3.CSS 高级语法选择器的分组继承及其问题友善地对待Netscape 4 继承是一个诅咒吗? 4.CSS 派生选择器派生选择器 5.CSS id 选择器 id 选择器 id 选择器和派生选择器单独的选择器 6.CSS 类选择器 7.CSS 属性选择器对带有指定属性的 HTML 元素设置样式. 8.CSS 创建如何插入样式表多…

javascript中一些常见的兼容性问题

下面是一些Javascript的IE和Firefox(火狐)兼容性的常用例子 1. document.formName.item("itemName") 问题说明:IE下,可以使用document.formName.item("itemName")或document.formName.elements["elementName"]; Firefox下,只能使用document.formName.elements["elementNam…

Front End Developer Questions 前端开发人员问题（二）

问题来源:http://markyun.github.io/2015/Front-end-Developer-Questions/ 二.CSS 1.介绍一下标准的CSS的盒子模型?与低版本IE的盒子模型有什么不同的?答:标准的CSS盒子模型:宽度=内容的宽度+边框的宽度+内边距宽度低版本的盒子模型:指的是内容的宽度 2.CSS选择符有哪些?哪些属性可以继承?答:(1)类选择符:id选择符:(2)class属性,伪类a标签,列a表ul,li,dl,dd,dt注:优先级(就近原则):!importa…

Modernizr.js:为HTML5和CSS3而生！

原文链接:http://caibaojian.com/modernizr-js.html modernizr这个JS,在国外的主题里面很多地方都看到,就只记得是为html补充的,有点类似与responsive.js一样.今天搜索到这篇文章,深入的讲解了modernizr.js是为检测浏览器的css3和HTML5的属性而生,从而通过CSS来解决兼容性问题. 个人觉得这种做法明显增加了CSS代码量,而且可能会造成当用户的页面没有启用js的情况下,里面的CSS3效果无法使用,另外就是今后维护比较困难,…

ie浏览器兼容问题汇总

对兼容ie浏览器所遇到的问题及总结互联快谈 2016-10-28 05:51 1,若直接给一个元素设置absolute定位.在浏览器缩放的时候.位置会错位.解决的方法是给外层的元素设置为relative定位. 2,低版本ie浏览器不支持placeholder属性 3,盒模型上规定了垂直边界重叠,若父元素有一个向上的margin值(10px),其子元素有一个向上的margin值(20px).重叠部分取大者.因此父元素和上一个div之间出现的是20px的空隙. 4,使用display:inline…

对兼容ie浏览器所遇到的问题及总结

1,若直接给一个元素设置absolute定位.在浏览器缩放的时候.位置会错位.解决的方法是给外层的元素设置为relative定位. 2,低版本ie浏览器不支持placeholder属性 3,盒模型上规定了垂直边界重叠,若父元素有一个向上的margin值(10px),其子元素有一个向上的margin值(20px).重叠部分取大者.因此父元素和上一个div之间出现的是20px的空隙. 4,使用display:inline-block会导致元素之间有空隙,解决方法:父元素设置font-size:0或采…

JavaScript在IE和Firefox(火狐)的不兼容问题解决方法小结【转】http://blog.csdn.net/uniqer/article/details/7789104

1.兼容firefox的 outerHTML,FF中没有outerHtml的方法. 代码如下: if (window.HTMLElement) { HTMLElement.prototype.__defineSetter__("outerHTML",function(sHTML) { var r=this.ownerDocument.createRange(); r.setStartBefore(this); var df=r.createContextualFragment(sHTM…

Modernizr——为HTML5和CSS3而生！

原文地址:http://www.alistapart.com/articles/taking-advantage-of-html5-and-css3-with-modernizr/ 堂主译文地址:http://www.osmn00.com/translation/221.html 转载请尊重原作者及译者劳动,附带以上信息,谢谢合作~ -------------------- 分割线,以下是正文 -------------------- 10年前,只有最尖端的网站设计师会为网页的布局和修饰使用CS…

WEB前端常见面试题汇总：（一）

1.JS找字符串中出现最多的字符例如:求字符串'nininihaoa'中出现次数最多字符方法一: var str = "nininihaoa"; var o = {}; for (var i = 0, length = str.length; i < length; i++) { var char = str.charAt(i); if (o[char]) { o[char]++; //次数加1 } else { o[char] = 1; //若第一次出现,次数记为1 } }…

HTML5+CSS3 loading 效果收集－－转载

用gif图片来做loading的时代已经过去了,它显得太low了,而用HTML5/CSS3以及SVG和canvas来做加载动画显得既炫酷又逼格十足.这已经成为一种趋势. 这里收集了几十个用html5和css3实现的loading效果,以供学习参考. 01. CSS Rainbow Loader Demo Download 02. Single element Slack loader Demo Download 03. Pure CSS3 loader Demo Download 04. CSS…

JavaScript在IE和Firefox的不兼容问题解决方法总结

1.兼容Firefox的 outerHTML,Firefox中没有outerHtml的方法. if (window.HTMLElement) { HTMLElement.prototype.__defineSetter__("outerHTML",function(sHTML) { var r=this.ownerDocument.createRange(); r.setStartBefore(this); var df=r.createContextualFragment(sHTML…

js问题项目问题

项目问题1. js 中字符串替换函数var a = 'fajlfjal'a.replace(/b/,'a') // 不能直接改变a 而是返回替换后的值 2. vue 属性绑定中 class style 是合并操作 3. 浏览器控制台 console.log()打印的对象是引用也就是你打印完我去查看是最新的值. 所以最好打印具体变量如:var a = {a:1,b:[1,2,3]}console.log(a)a.b[3] = 4console.log(a)// 查看a的成员b值一样 4. 复…