CSS文档统筹

【CSS文档统筹】的更多相关文章

一.CSS文档统筹 1.整站里相同的CSS样式提取到一个样式表里,各个页面调用相同的样式文件即可: 2.网站较大的情况下一般会把网站的头部,尾部单独分离出来,包括样式文件: 1)根据页面类型分离文件 2)根据功能模块分离文件 3)根据设备类型分离文件 4)根据代码规模分离文件 3.引进文档<iframe></iframe> 1)src 规定iframe中显示的文档的URL 2)frameborder=“0(无边框)/1(有边框默认)” 规定是否显示框架周围的边框: 3)width…

CSS文档流与块级元素和内联元素

CSS文档流与块级元素(block).内联元素(inline),之前翻阅不少书籍,看过不少文章, 看到所多的是零碎的CSS布局基本知识,比较表面.看过O'Reilly的<CSS权威指南>,发现里面提到的文档流概念让我很敏感. 可恶的是书中并没有解释文档流是什么东西,或许作者觉得这个太简单了以至于不值一提.但我觉得,这个概念实在太重要了.理解了它,一堆css布局的理论都变得易于理解,并且体会到CSS这套设计的合理性所在. 于是我根据猜测,再加实验,得出一下说法.如有错误,纯属正常. 文档流将窗…

CSS文档流与块级元素和内联元素（文档）

CSS文档流与块级元素(block).内联元素(inline),之前翻阅不少书籍,看过不少文章, 看到所多的是零碎的CSS布局基本知识,比较表面.看过O'Reilly的<CSS权威指南>,发现里面提到的文档流概念让我很敏感. 可恶的是书中并没有解释文档流是什么东西,或许作者觉得这个太简单了以至于不值一提.但我觉得,这个概念实在太重要了.理解了它,一堆css布局的理论都变得易于理解,并且体会到CSS这套设计的合理性所在. 于是我根据猜测,再加实验,得出一下说法.如有错误,纯属正常. 文…

CSS文档流、块级元素、内联元素

CSS文档流与块级元素(block).内联元素(inline),之前翻阅不少书籍,看过不少文章, 看到所多的是零碎的CSS布局基本知识,比较表面.看过O'Reilly的<CSS权威指南>,发现里面提到的文档流概念让我很敏感. 可恶的是书中并没有解释文档流是什么东西,或许作者觉得这个太简单了以至于不值一提.但我觉得,这个概念实在太重要了.理解了它,一堆CSS布局的理论都变得易于理解,并且体会到CSS这套设计的合理性所在. 于是我根据猜测,再加实验,得出一下说法.如有错误,纯属正常. 文档流将窗…

CSS文档优化

首先了解下CSS的渲染逻辑,它是从标记的最后一位开始搜索的,例如:.myclass li a,首选它会遍历所有的<a>,然后看哪些<a>之前有<li>,然后再看哪些<li>之前有.myclass. 所以:1.层级太多会增加CSS渲染的工作量. 如下: 除此之外,还有哪些可以优化的呢? 2.图中样式的每个属性独占一行,行数越多,文件的大小就越大,而且找起来也不好找,进入疯狂的滚轮模式. 3.很长很长的链式定位,.myclass li a span,让不熟悉的同…

完美CSS文档的8个最佳实践

在css的世界,文档没有被得到充分的利用.由于文档对终端用户不可见,因此它的价值常常被忽视.另外,如果你第一次为css编写文档,可能很难确定哪些内容值得记录,以及如何能够高效完成编写. 然而,为CSS编写文档可以为你的项目提供很多好处:促进更好的代码实践.降低新员工的上手难度.在本文中,我将说明编写CSS文档的优点,并分享我认为的最佳实践.让文档为你工作,而不是阻碍你的工作. 1. 制定基本规则当你和你的团队不清楚CSS文档具体需要编写哪些内容.文档应该如何工作时,你很难跟上编写CSS文档…

css文档之盒模型阅读笔记

前段时间抽空仔细阅读了w3c的css文档关于盒模型方面的一些基础知识.边读边记录了一些要点,在此做些整理,与大家分享,如有理解有误之处,请不吝指教. 1.综述文档中的每个元素被描绘为矩形盒子.渲染引擎的目的就是判定大小,属性——比如它的颜色.背景.边框方面——及这些盒子的位置. 在CSS中,这些矩形盒子用标准盒模型来描述.这个模型描述了一个元素所占用的空间.每一个盒子有四条边界:外边距边界margin edge, 边框边界border edge, 内边距边界padding edge 与内…

CSS文档流

文档流将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流. 每个非浮动块级元素都独占一行, 浮动元素则按规定浮在行的一端. 若当前行容不下, 则另起新行再浮动. 内联元素也不会独占一行. 几乎所有元素(包括块级,内联和列表元素)均可生成子行, 用于摆放子元素. 有三种情况将使得元素脱离文档流而存在,分别是浮动,绝对定位, 固定定位. 浮动元素不占任何正常文档流空间,而浮动元素的定位还是基于正常的文档流,然后从文档流中抽出并尽可能远的移动至左侧或者右侧.文字内容会围绕在浮…

css 文档流中块级非替换元素水平区域的计算规则(1)

最近在读<Basic Visual Formatting in CSS>,结合以前看的<css权威指南>和css标准.今天就做个笔记. 以前在遇到一些宽度不明确指明的一些布局的时候,虽然凭感觉能猜出个大概,但是总是有点不是很靠谱.直到最近看到这一本书,觉得总觉得挺好的. 首先要知道,元素除了通过display来指定block.inline.inline-block这一些属性之外,还有一种能在的特性--替换还是非替换. 替换元素:像img.video.canvas等稳定种指定的内容只…

前端学习笔记之CSS文档流

先引用一段W3C的文档: 9.3 Positioning schemes In CSS 2.1, a box may be laid out according to three positioning schemes: Normal flow. In CSS 2.1, normal flow includes block formatting of block-level boxes, inline formatting of inline-level boxes, and relative…

jQuery的简单用法（jQuery的简介，选择器，属性和css,文档处理）

一.jQuery简介 1.1. JS库 JavaScript 库封装了很多预定义的对象和实用函数.能帮助使用者建立有高难度交互客户端页面, 并且兼容各大浏览器. 1.2. 当前流行的 JavaScript 库有: ① jQuery ,最流行 ② EXT JS,2.0开始收费 ③ Prototype,对js扩展,框架开发. ④ Dojo ⑤ Bootstrap,来自 Twitter,是目前很受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的,它简洁灵活,使…

前端学习 -- Css -- 文档流

文档流文档流处在网页的最底层,它表示的是一个页面中的位置, 我们所创建的元素默认都处在文档流中元素在文档流中的特点块元素块元素在文档流中会独占一行,块元素会自上向下排列. 块元素在文档流中默认宽度是父元素的100%. 块元素在文档流中的高度默认被内容撑开. 内联元素 1.内联元素在文档流中只占自身的大小,会默认从左向右排列,如果一行中不足以容纳所有的内联元素,则换到下一行,继续自左向右. 2.在文档流中,内联元素的宽度和高度默认都被内容撑开. 当元素的宽度的值为auto时,此时指定内边距…

XML学习笔记（四）-- 修饰XML文档的CSS

标签(空格分隔): 学习笔记 XML为存储结构化数据提供了强大的方法,但是它没有提供关于数据如何显示地信息,(数据的结构与数据表示无关).可以使用CSS来控制XML文档中各元素的呈现方式. CSS语法又三部分构成:选择器(selector).属性(property).属性值(value),基本语法个数如下: selector { property1: value; property2: value; property3: value; } 虽然在CSS中是不区分大小写的,但是在XML中区分,如…

从文档流来看内联元素和块元素的css排版

veda原创[抄录]讲得很好存自己这里看从文档流来看内联元素和块元素的css排版 CSS文档流与块级元素(block).内联元素(inline),之前翻阅不少书籍,看过不少文章, 看到所多的是零碎的CSS布局基本知识,比较表面.看过O'Reilly的<CSS权威指南>,发现里面提到的文档流概念让我很敏感. 可恶的是书中并没有解释文档流是什么东西,或许作者觉得这个太简单了以至于不值一提.但我觉得,这个概念实在太重要了.理解了它,一堆CSS布局的理论都变得易于理解,并且体会到CSS这套设计的合理…

1CSS与文档

层叠样式表(Cascading Style Sheet,CSS)的功能十分强大,可以影响一个或一组文档的表现. 为什么结构化对HTML来说很重要:1.非结构化页面使得建立内容索引极为困难.2.缺乏结构性会降低可访问性.3.高级页面表现只能应用于某种文档结构.4.结构化标记更易于维护. CSS易于使用,可在多个页面上使用样式,规定了冲突规则(cascede,叠层),缩减文件大小. HTML是一种结构化语言,而CSS是它的补充:这是一种样式语言. 元素(element)是文档结构的基础.在CSS中,…

epub-2格式电子书剖析之一：文档构成

epub格式电子书遵循IDPF推出的OCF规范,OCF规范遵循ZIP压缩技术,即epub电子书本身就是一个ZIP文件,我们将epub格式电子书的后缀.epub修改为.zip后,可以通过解压缩软件(例如winrar.winzip)进行浏览或解压处理.一个未经加密处理的epub电子书以三个部分组成,其文件结构如下图所示: 1.文件:mimetype 每一本epub电子书均包含一个名为mimetype的文件,且内容不变,用以说明epub的文件格式.文件内容如下: application/epub+zi…

能够放在文档的 <head> 中的各种配置元素

一份关于任何可以写入到你的文档中 <head> 部分的清单最小推荐 <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <meta name="viewport" content="width=device-width, initial-scale=1">…

HTML5文档的各个组成部分分类

<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8">  <…

JavaScript权威设计--JavaScript脚本化文档Document与CSS(简要学习笔记十五)

1.Document与Element和TEXT是Node的子类. Document:树形的根部节点 Element:HTML元素的节点 TEXT:文本节点 >>HtmlElement与HtmlDocument a:HtmlElement对象表示HTML中的一个个元素. b:HtmlDocument对象表示 HTML 文档树的根.HTMLDocument 接口对 DOM Document 接口进行了扩展,定义 HTML 专用的属性和方法. >>HTML的DOM对象 a:DOM…

js/css在html文档中的引用外部文件方式对比

包含css样式表和js脚本的最好方式是使用外部文件,因为css/js和html标记文档可以清晰地分离. css的外部引用写在<head></head>中: <head> <link rel="stylesheet" href="styles/test.css" media="screen" />//注意是styles,/前空一格是为兼容性问题考虑 </head> js的调用最好写于文档末…

html/css基础篇——DOM中关于脱离文档流的几种情况分析

所谓的文档流,指的是元素排版布局过程中,元素会自动从左往右,从上往下的流式排列.并最终窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素.脱离文档流即是元素打乱了这个排列,或是从排版中拿走. 当前所知的脱离文档流的方式有两种:浮动和定位. a.定位属性positon 先看一下定位.看一段对定位各个字段的描述,有助于理解值描述 absolute 生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位. 元素的位置通过 "left", "top&q…

Web前端开发规范文档你需要知道的事--HTML、css、js、文档等需要规范内容

规范目的为提高团队协作效率,便于后台人员添加功能及前端后期优化维护,输出高质量的文档,特制订此文档.本规范文档一经确认,前端开发人员必须按本文档规范进行前台页面开发.本文档如有不对或者不合适的地方请及时提出,经讨论决定后方可更改. 基本准则符合web标准,语义化html,结构表现行为分离,兼容性优良.页面性能方面,代码要求简洁明了有序,尽可能的减小服务器负载,保证最快的解析速度. 文件规范 1.html,css,js,images文件均归档至<系统开发规范>约定的目录中; 2.…

css参考文档；官方英文说明！！ 1 margin padding 百分比参照物 2 margin值为auto时的说明 3 div在div里垂直居中方法 4 dispaly:flex说明

css参考文档 http://css.doyoe.com/ 两篇很好的文章:(下面的css官方英文说明链接有时间可以研究下 http://www.w3.org/TR/css3-box/#margins http://dev.w3.org/csswg/css-box/#the-margin-properties http://dev.w3.org/csswg/css-box/#Calculating ) 1 http://www.ituring.com.cn/article/645…

Jq_文档操作方法、属性操作方法、CSS操作函数

JQuery文档操作方法这些方法对于 XML 文档和 HTML 文档均是适用的,除了:html(). 方法描述 addClass() 向匹配的元素添加指定的类名. after() 在匹配的元素之后插入内容. append() 向匹配的元素内部追加内容. appendTo() …

CSS 实现：元素相对于文档水平垂直居中

[要求]:如何用 CSS 实现水平/垂直居中一个元素(相对于文档) <body> <div class="content"></div> </body> [实现]: ① margin + 相对定位(relative) // html 和 body 的高度默认为0,因此要先设置为100%,并且清除默认样式(margin:0; padding:0) html, body { height: 100%; margin: 0; padding:…

html/css 关于脱离文档流的几种情况

所谓的文档流顾名思义就是按照顺序流下来,指的是html元素从上往下从左往右的流式排列, 比如说写了5个Div,正常的文档流是依次显示这5个div块: 脱离文档流就是指它所显示的位置和文档代码就不一定一致了.比如可以用css控制,把最后一个div块显示在第一个div块的地方.当前所知的脱离文档流的方式有两种:浮动和定位. 定位属性positon b. 浮动属性float…

[中文版] 可视化 CSS References 文档

本文分享了我将可视化 CSS References 文档翻译成中文版的介绍,翻译工作还在陆续进行中,供学习 CSS 参考. 1. 可视化 CSS References 文档介绍许多 CSS 的文档都是属性的介绍,而开源项目 css-reference 并没有提供中文版,而当我分享到社区的时候就有人提出了没有中文版本的问题,所以我进行了部分的翻译与文档部署. 小程序刚好发布了,最需要的 Flex 布局部分已翻译完毕. 英文没有障碍的看原站点即可. 2. 文档资源列表英文原站英文站点源码…

23----2013.07.01---Div和Span区别,Css常用属性,选择器,使用css的方式,脱离文档流,div+css布局,盒子模型,框架,js基本介绍

01 复习内容复习之前的知识点 02演示VS创建元素 03div和span区别通过display属性进行DIV与Span之间的转换.div->span 设置display:inline span->div 设置display:block <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Cont…

css盒子模型、文档流、相对与绝对定位、浮动与清除模型

一.CSS中的盒子模型标准模式和混杂模式(IE).在标准模式下浏览器按照规范呈现页面:在混杂模式下,页面以一种比较宽松的向后兼容的方式显示.混杂模式通常模拟老式浏览器的行为以防止老站点无法工作. html元素一般分为块级元素和行内元素块级元素:块级元素排斥其他元素与其位于同一行,可以设定宽(width)和高(height),块级元素一般是其他元素的容器,可容纳块级元素和行内元素, 常见的块级元素有div, p ,h1~h6,ul,table,form,hr等. 每一个块元素都可以分为cont…

HTML文档中应用css样式的方法总结

在HTML文档中应用css样式大致有三种方法:1.link标签链接外部样式表:2.使用style元素包含样式表:3.使用style属性,即内联样式一.link标签链接外部样式表先看一条较为标准的link标记语句: <link rel="stylesheet" type="text/css" href="main.css" media="all" /> link标记必须放在head元素中,且不能放在其他元素(如t…