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
目录
相关文章
|
5月前
|
移动开发 前端开发 JavaScript
征信报告修改器,征信报告生成器,制作软件无痕修改软件【js+html+css】
本项目为信用评分模拟器教学工具,采用HTML5实现,仅供学习参考。核心功能通过JavaScript构建,包含虚拟数据生成、权重分配及信用因素分析(如还款记录、信用使用率等)。
|
5月前
|
存储 自然语言处理 前端开发
抖音快手小红书虚拟评论截图生成器,模拟对话制作工具,html+js+css
这是一款纯前端实现的多平台虚拟评论生成器,支持抖音、快手、小红书风格,适用于产品演示与UI设计。采用Vanilla JS与Flexbox布局,利用IndexedDB存储数据,CSS Variables切换主题。
|
5月前
|
前端开发 JavaScript
个人征信电子版无痕修改, 个人信用报告pdf修改,js+html+css即可实现【仅供学习用途】
本代码展示了一个信用知识学习系统的前端实现,包含评分计算、因素分析和建议生成功能。所有数据均为模拟生成
|
5月前
|
存储 前端开发 安全
病历单生成器在线制作,病历单生成器app,HTML+CSS+JS恶搞工具
本项目为医疗病历模拟生成器,旨在为医学教学和软件开发测试提供数据支持,严格遵守《医疗机构病历管理规定》。
|
5月前
|
存储 前端开发 JavaScript
仿真银行app下载安装, 银行卡虚拟余额制作app,用html+css+js实现逼真娱乐工具
这是一个简单的银行账户模拟器项目,用于学习前端开发基础。用户可进行存款、取款操作,所有数据存储于浏览器内存中
|
5月前
|
前端开发 容器
处方单图片生成器, 处方单在线制作免费,js+css+html恶搞神器
这是一个电子处方模拟生成系统,使用html2canvas库实现图片导出功能。系统生成的处方单包含多重防伪标识,并明确标注为模拟数据,仅供学习
|
5月前
|
前端开发
个人征信PDF无痕修改软件,个人征信模板可编辑,个人征信报告p图神器【js+html+css仅供学习用途】
这是一款信用知识学习系统,旨在帮助用户了解征信基本概念、信用评分计算原理及信用行为影响。系统通过模拟数据生成信用报告,涵盖还款记录
|
5月前
|
前端开发 JavaScript 容器
制作b超单生成器, 假怀孕b超单图片制作, p图医院证明【css+html+js装逼恶搞神器】
本资源提供一个适合用于熟人之间恶搞的工具,效果逼真,仅供学习参考与娱乐。包含前端技术学习要点:语义化布局、响应式设计、Flexbox、图片自适应
|
5月前
|
前端开发
医院检查单子p图软件,在线制作仿真病历,js+css+html装逼神器
本示例展示如何用HTML/CSS创建医疗信息页面,内容仅供学习参考。页面模拟“阳光医院体检中心”场景,提供预约功能验证(如姓名、手机号、日期)。所有数据仅用于演示