1.基本概念     (1)正常流:是指西方语言文本从左向右,从上向下显示.如果要让一个元素不在正常流中国,唯一的办法                     就是使之成为浮动或定位元素.     (2)非替换元素:如果元素的内容包含在文档中,则称之为非替换元素.     (3)替换元素:指用作为其他内容占位符的一个元素.例子:img中的图像     (4)块级元素:在正常流中,会在其框之前和之后生成“换行”                         所以出于正常流中的块级元素会垂直摆放.…

改变元素显示 没有讨论与表格相关的.列表list-item的值.之后讨论. 改变显示角色 显示为块级元素 将一串链接(行内元素)改变垂直放置,若有如下一连串的链接: <div id="navigation"> <a href="index.html">WidgetCo Home</a><a href="products.html">Products</a> <a href=&quo…

行内元素 em a 非替换元素 img 替换元素 两者在内联内容处理方式不一样. inline有时候被翻译成内联,比如inline content,有时候被翻译成行内 inline box. 行布局 行内元素只是生成一个框,没有其他内容(里面不能放框了可能)与之并存. 单行行内元素 多行行内元素 相邻两行之间的边框,firefox不重叠,上一行的下边界在下一行的上边界的下边,交错着的.似乎chrome是重合的不一样. 水平方向对齐方式 text-align left right center j…

行内替换元素 替换元素比如图片的高度比line-height大,并不会影响整个文字段落的line-height,会让有图片那一行框的高度可以容纳这个图片. 这个图片依然有一个line-height,和在一起的行内元素一样,因为垂直对齐vertical-align值为百分比时要在这个基础上计算. * * * 增加框属性 替换元素的内容区包括,元素的内外边距及边框.会影响当前行的行框高. margin可以为负值,负边距是挤入其他行的唯一方法. * * * 替换元素和基线 替换元素位于基线之上. 这样…

定位 定位的想法很简单元素框相对于正常位置出现在哪里. 定位:static,相对, 绝对, fixed, 继承 static就是默认的位置 相对就是相对于默认位置的偏移.原来的static定位位置依然占着. 绝对定位相对于包含块(非static的)的偏移.完全脱离文档流,原来的位置就没了. fix相对于viewport视窗的偏移. 包含块 根元素是初始包含块,有的浏览器是html元素,有的为body. 非根元素,position为相对或者默认位置,包含块是最近祖先级的块级框.表格单元.行内块.…

前几天被朋友问到几个CSS问题,讲道理么,接触CSS是从大一开始的,也算有3年半了,总是觉得自己对css算是熟悉的了.然而还是被几个问题弄的"一脸懵逼"... 然后又是刚入职新公司,事情不算多,于是拿起<CSS权威指南>进行"基础复习"+"查漏补缺",本篇文章主要是总结了些自己认为CSS中值的注意的几个知识点(本文知识点仅限本书范围内,若要讲CSS全部样式,那本兽还是选择慢慢懵逼去~). 选择器 这里要说明的是类选择器的嵌套选择与多类…

CSS权威指南 第三章结构与层叠 - 层叠 按权重及来源排序 1. Reader important declarations 2. Author important declarations 3. Author normal declarations 4. Reader normal declarations 5. User agent declarations 来源有三个 读者/作者/用户代理 读者就是我们普通用户,在ie浏览器上internet设置,辅助功能里可以附带用户样式表.firef…

题外话:HTML是一种结构化语言,而CSS是它的补充:这是一种样式语言.CSS是前端三板斧之一,因此学习CSS很重要.而我还是菜鸟,所以需要加强学习CSS.这个是我学习CSS权威指南的笔记,如有不对,请谅解和指出.谢谢大家.正文: 第一章 CSS和文档---------- 1.CSS,称为层叠样式表.使用CSS的理由有:a.易于使用,样式表能大大减少Web创作人员的工作量:b.在多个页面上使用样式,可以创建一个样式表,然后把这个样式表应用到多个页面:c.层叠,CSS还规定了冲突规则:这些规则统称…

这一章看了之后真是豁然开朗,之前虽然写了圣杯布局和双飞翼布局,有些地方也是模糊的,现在打算总结之后再写一遍. 以下都是从<css权威指南>中摘抄的我认为很有用的说明. 浮动元素 一个元素浮动时,其他内容会环绕该元素.浮动元素会生成一个块级框,不论这个元素本身是什么.并且浮动元素周围的外边距不会合并.如果要浮动一个非替换元素,必须显式声明width. 浮动元素的几条规则: 1)      浮动元素的左(右)外边界不能超出其包含块(包含快是其最近的块级祖先元素)的左(右)边界.但是负外边距或者浮动…

今天翻手机,翻到了许久之前看css权威指南时的笔记,遂移到博客中来. 1.属性选择器p.one class名为one的p元素p[class][name] 含有class和name属性的p元素p[class="one"][name="two"] class属性为one且name属性为two的p元素p[class~="one"] class属性包含one的p元素p[class^="one"] class属性以one开头p[clas…

CSS权威指南(第三版).pdf 网盘: https://545c.com/file/24657411-425141851   获取码:  276922…

第1章 css和文档 1,元素:替换元素(img input),非替换元素(大多数span). 2,link:rel(代表关系:stylesheet,候选样式表:alternate stylesheet):type(text/css):media:(all(所有表现媒体, screen,print),title(配合候选使用). 3,@import url(sheet1.css) 需在style内使用,放在其他css规则之前. 4,向后可访问性:<style><!-- 样式 -->…

九十年代的完全用表格布局,简单的段落边框都需要用表格.CSS让布局更方便. 基本元素框 basic element boxes 如同第七章基本视觉格式化那一章讲到,每个文档元素会生成一个元素框,这个框出现在文档布局中,影响其他元素的框.比如一个高1inch的元素框出现在文档的开头,那么下面的元素框将至少从文档1 inch以下的位置出现. -------------------------------- * 宽度和高度 如下图最暗一个矩形框(内容区)的高度和宽度. 一个重要问题:高度和宽度属性不能…

阅读本书主要目的: 自从学会CSS以来,虽然熟练掌握了其使用方法和技巧,但对其底层的原理和实现并不清晰,阅读本书想进一步系统化的学习和深入研究其本质,对这门前端基础语言从熟练使用到真正理解. 第1章 CSS和文档 1.1 WEB的衰落(为了表现增加很多标记元素如font等,这些阻碍了页面的结构化) 1.2 CSS作救星(95年W3C发布正在进行的CSS计划) CSS特点:丰富的样式:易于使用和维护:可以在多个页面重复使用:方便层叠:缩减文件大小:为将来做准备(为解决HTML结构化而生,实现结构和…

前言: 对于程序员,学习是无止境的,知识淘换非常快,能够快速稳固掌握一门新技术,是一个程序员应该具备的素质.这里将分析本人一点点不成熟的心得. 了解一门语言,了解它的概念非常重要,但是一些优秀的设计思想需要细心和大量实践才能慢慢参悟,在这之前需要做的是能够运用它来开发,那么了解一些基础特性非常有必要,通常这些特性是需要经验积累,从各种坑中累计出来,但是还有一种看似很笨却很有效的学习方法.那就是将别人的经验记录下来,有事没事都拿出来看看,集合开发中的经验,这会非常有效. 流式布局 http://b…

第七章 基本视觉格式化 正常流(没有浮动和定位元素).非替换元素(包含在文档中).替换元素(用作其它内容的占位符,如img).块级元素(会和其它元素形成换行,如div).行内元素(span之类的元素)和根元素(位于文档树顶端的元素,在HTML文档中就是元素html) 水平格式化 <p style="width:200px;">wideness?</p> /*200px指的是内容区的宽度*/ 水平格式化七大属性:margin-left.border-left.pa…

主要知识记录: 1.给一个元素指定内容区宽度,如果设置了内边距,边框和外边距,这些因素都会影响CSS的width属性. 2.在水平格式化的7个属性中,width,margin-left,margin-right可以设置成auto.其他不行.…

块级元素 百分数:边框的宽度不能是百分数,只能是长度.基本原则是只使用百分数将无法创建完全灵活的元素布局(即所有属性都可设置). 合并垂直外边距 相邻外边距会沿着竖轴合并.两个外边距中较小的一个会被较大的一个合并…

层叠样式表(Cascading Style Sheets,CSS)可以影响文档的表现.CSS是依附于文档的,如果不存在某种文档,CSS基本上是没有用的. 为什么会有CSS 在web早期(1990-1993),HTML由一些结构化元素组成,用于描述段落.超链接.列表和标题等.简单来说刚开始的时候,HTML是个非常有限的语言,并不关心外观,一篇文章,里面有一些超链接.大概张这个样子. 后来有了第一个图形浏览器Mosaic,把浏览网页的体验变得更好,各种网站就开始涌现了.然后人们对网页的需求也变得越来…

1.css层叠的含义 后面的会覆盖前面的样式 2.每个元素生成一个框,也称盒.   3.替换元素和非替换元素. img如果不指定src的外部路径,该元素就没有意义.他由文档本身之外的一个图像文件来替换. 大多数都是非替换元素.span中的内容由用户代理.   4.元素间的父子与祖先 如果一个元素在另外一个元素的直接上一层,他们就有父子关系 如果是从一个元素到另外一个元素的路径要经过两层或多层,那这个就是祖先与后代的关系   5.animate的动画叠加解决办法 使用的时候在animate前面放上…

一.css和文档层叠 css规定了冲突规则,这些规则统称为层叠.这些规则定义了样式发生冲突时以优先级高的为准. 常用的优先级判定: 1. 开发者样式>读者样式>浏览器样式(除非使用!important标记 ) 2. id选择符>(伪)类选择符>元素选择符 3. 权重相同时取后面定义的样式 元素 元素(element)是文档结构的基础.在css中,元素通常分为两种形式:替换元素和非替换元素. 替换元素是指用来替换元素内容的部分并非由文档内容直接表示,如img.input都是由属性来替…

层叠样式表中最基本的一个方面可能就是层叠——冲突的声明要通过这个层叠过程排序,并由此确定最终的文档表示.这个过程的核心是选择器及其相关声明的特殊性,以及继承机制. 特殊性 对于每个规则,用户代理会计算选择器的特殊性,并将这个特殊性附加到规则中的各个声明.如果一个元素有两个或多个冲突的属性声明,那么有最高特殊性的声明就会胜出. 选择器的特殊性由选择器本身的组件确定.特殊性值表述为4个部分,如:0,0,0,0.一个选择器的具体特殊性如下确定: 对于选择器中给定的各个ID属性值,加0,1,0,0. 对…

通配选择器 可以与任何元素匹配,就像是一个通配符 /*每一个元素的字体都设置为红色*/ * { color: red; } 元素选择器 指示文档元素的选择器. /*为body的字体设置为红色*/ body { color: red: } 分组 选择器分组 h1, h2, h3 { color: red; } 声明分组 h1 { font: 18px Helvetica; color: purple; background: aqua; } 结合选择器和声明分组 h1, h2, h3 { font…

替换元素指用来替换内容的部分并非由文档内容直接表示,最常见的是图片,与之对应的就是非替换内容 <img src="how.gif"/> display展示的形式,常见的值none.inline(行内).block(块) <link rel="stylesheet" type="text/css" href="sheet1.css" media="all"/> <style ty…

第一章:CSS和文档 html是结构化语言,css是样式语言,html主要用来被强大的搜索引擎更好的索引,更好的让一个盲人通过语音浏览器来了解我们的网页,这也就是为什么说html是结构话语言,因为这是W3C规定的,大家都在遵循,统一的标准会给所有人带来便利(比如上面提到的盲人). 从web的衰落开始谈起,当时web只是用简单的html来编写,大量的流行,为了更好的展示,于是出现了一些<font>,<center>等用来表现的标签,使得html非常的混乱.1996年,CSS已经成为一…

CSS中的样式一共有三种来源:创作人员.读者和用户代理,来源的不同会影响到样式的层叠方式 首先,创作人员(author's+style)样式应该是我们最熟悉的,如果你是一个前端开发者,那么你写的那些样式就叫做创作人员样式. 然后是用户代理样式(agent's+style),用户代理也就是我们通常所说的浏览器(IE.Firefox等等),这些浏览器会提供一些默认的样式,比如IE浏览器中,一个纯粹由html代码构成的网页里,我们会发现超链接会带有一个蓝色的前景色,这其实就用户代理样式,借用一些插件我…

零零散散接触css将近5年,俨然已经成为一个熟练工.如果不是换份工作,我不知道自己差的那么远:在qunar的转正review中我这种“知其然而不知其所以然” 的状况被标明,我才意识到我已停步不前近两年~  知耻而后勇,从基础拾起~ 所以我写这一系列笔记~…

HTML文档由各种元素组成.比如,p.table.span等等.每个元素都会对文档的表现有所影响.CSS中,每个元素都会生成一个框(传说中的盒子),其中包含元素内容. 元素可以根据它的创建方式分为两种:替换元素和非替换元素.创建方式会对盒模型的表现有所影响,后续的笔记中会看到. 替换元素:这种元素的内容部分并非由文档直接显示,而是用其他内容来替换.最常见的替换元素img,它是由文档本身之外的一个图片文件来替换的.input也是替换元素,是根据类型的值来决定内容是什么,有时内容被替换成单选钮,有时…

第一章 基础介绍 介绍了css的好处, 编辑一个文件多处使用, 层叠: 指式样有矛盾时, 可以覆盖掉之前的式样, 便于维护 等等. 块级元素:会生成一个元素框, (默认地)它会填充其父元素的内容区, 会换行. 行内元素: 也有元素框, 但是不会打断这行文本, 不换行. <link rel=”stylesheet” type=”text/css” href=”sheet1.css” media=”all” /> 候选式样表 将 rel设置为 alternate stylesheet 例如: &l…

本章主要讲解的是一些属性声明用的值: CSS中的值主要有数字,百分数,颜色, 1.颜色: rgb(100%,100%,100%)  OR  rgb(255,255,255) OR #FF0000 WEB安全颜色:指的是值是20%,51,0x33的倍数. 2.长度单位:单位有in cm  mm  pt pc 其中:1in = 2.54cm 1cm = 0.394in  1in = 72pt 1pc = 12pt 相对长度单位:em,ex,px 3.URL 4.关键字:none  inherit 除…