开发者社区> shy丶gril> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

JavaScript权威设计--CSS(简要学习笔记十六)

简介:
+关注继续查看
1.Document的一些特殊属性
document.lastModified
document.URL
document.title
document.referrer
document.domain
document.write()
document.writeIn()
 
2.查询选取的文本
使用鼠标mouseup事件
 
3.浏览器定义了多项文本编辑命令(富文本编辑器)
使用Document对象的execCommand()方法。
  • document.queryCommandSupport()判断浏览器是否支持该命令
  • document.queryCommandEnabled()查询当前使用的命令
  • document.queryCommandState()判断命令的当前转台是否可用
  • document.queryCommandValue()查询相关联值
  • document.queryCommandIndeterm()检测"fontname"的查询结果
 
4.CSS的非标准属性
  • 浏览器厂商在属性名前加了一个厂商前缀
  • 火狐:-moz-
  • 谷歌:-webkit-
  • IE:-ms-
 
5.CSS定位
  • static:按照文档内容流
  • absolute:相对于帮组县元素或相对于文档本身
  • fixed:相对浏览器窗口定位
  • relative:相对于文档流
 
6.没必要给每一个动态元素指定尺寸
某些元素(如图片)具有固有尺寸。而且,对包含文本或其他流式内容的动态元素通常制定想要的宽度就足够了。
让元素内容布局来自动决定它的高度。
 
7.z-index
 z-index只对兄弟元素应用堆叠效果。如果两个元素不是兄弟元素之间的重叠,那么设置它们的z-index属性也没用。
 
 
8.CSS标准盒模型(内容盒模型)
width和height只是指定了元素内容区域的宽度,并不包括元素的内边距或边框宽度。
标准的盒模型规定width和height样式属性给定内容区域的尺寸,且不包含内边距和边框。可以称之为"内容盒模型"。

box-sizing有三种值:content-box(default),border-box,padding-box。

  1. content-box:border和padding不计算入width之内。
  2. padding-box:padding计算入width内(使用较少)。
  3. border-box:border和padding计算入width之内,也即怪异模式。
具体去看下面例子:
html:
<div class="box1">成和败努力</div>
<div class="box2">成和败努力</div>

 

style:
复制代码
.box1
{

    height:100px;
    padding:10px;
    width:100px;
    border:30px solid red;

}
.box2
{
    box-sizing:border-box;
    -moz-box-sizing:border-box; /* Firefox */
    -webkit-box-sizing:border-box; /* Safari */
    width:100px;
    height:100px;
    padding:10px;
    border:30px solid black;

}
复制代码

 

结果:
 
 
9.visibility和display
相同:两个都能控制元素的显隐。
区别:visibility:hidden元素隐藏了,但是文档布局中仍然保留了它的空间。
        display:none 元素隐藏了,文档布局中不在给它分配空间。
 
 
10.HTML5位每个元素定义了classList属性。
该属性值是DOMTokenList对象:一个只读的类数组对象,它包含元素的单独类名。
里面有add(),remove(),toggle(),contains()等方法。
并且DOMTokenList对象具有实时性
 
11.document.styleSheets[]数组的元素是CSSStyleSheet对象。CSSStyleSheet对象有一个cssRules[]数组。
转载:http://www.cnblogs.com/zqzjs/p/4865417.html

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
javascript+CSS 实现原生轮播图
javascript+CSS 实现原生轮播图
0 0
利用JavaScript的控制图片的CSS位置实现轮播图功能
利用JavaScript的控制图片的CSS位置实现轮播图功能 上篇博客我们说到了如何给轮播图添加定时器效果,当然前面的两个轮播图功能实现都是通过改变图片的路径(图片名称取巧)实现的,有一定的局限性。今天说一说怎样通过改变位置实现轮播功能。效果如图: 在这里插入图片描述 HTML代码: <div class="box" id="box"> <ul class="min_box" id="banner"> <li class="banner"></li> <li class="banner"></li>
0 0
前端三要素:HTML、CSS、JavaScript介绍以及三者的关系理解
前端三要素:HTML、CSS、JavaScript介绍以及三者的关系理解
0 0
HTML+CSS+JAVASCRIPT实现——球球坠落小游戏
本文主要介绍如何使用HTML三件套来实现制作一个网页小游戏-----球球坠落,玩家需要控制键盘来移动小球落在不断上升的台阶上,避免碰到最顶部或者掉进悬崖中,看能持续多久时间,获得更高的得分
0 0
HTML+CSS+JAVASCRIPT实现——情人节表白情书
本文主要介绍如何使用HTML三件套来实现制作一封情人节表白情书,富含情谊与爱,打动女生的心灵
0 0
HTML+CSS+JAVASCRIPT实现——响应式登录注册表单
本篇文章,主要讲解一下如何创建一个响应式登录注册表单
0 0
HTML+CSS+Javascript实现轮播图效果
HTML+CSS+Javascript实现轮播图效果
0 0
通过HTML+CSS+JavaScript实现鼠标移动到页面顶部导航栏出现,如果移出导航栏3秒又隐藏起来,而且不受滚动条影响(二)...
通过HTML+CSS+JavaScript实现鼠标移动到页面顶部导航栏出现,如果移出导航栏3秒又隐藏起来,而且不受滚动条影响(二)...
0 0
通过HTML+CSS+Javascript实现向下滚动滚动条出现导航栏并出现回到顶部按钮点击按钮回到顶部(一)...
通过HTML+CSS+Javascript实现向下滚动滚动条出现导航栏并出现回到顶部按钮点击按钮回到顶部(一)...
0 0
javascript外链式css参考04
javascript外链式css参考04
0 0
+关注
文章
问答
文章排行榜
最热
最新
相关电子书
更多
零基础CSS入门教程
立即下载
JavaScript 语言在引擎级别的执行过程
立即下载
JavaScript面向对象的程序设计
立即下载