CSS 权威指南 CSS实战手册 第四版(阅读笔记)
前言:
对于程序员,学习是无止境的,知识淘换非常快,能够快速稳固掌握一门新技术,是一个程序员应该具备的素质.这里将分析本人一点点不成熟的心得.
了解一门语言,了解它的概念非常重要,但是一些优秀的设计思想需要细心和大量实践才能慢慢参悟,在这之前需要做的是能够运用它来开发,那么了解一些基础特性非常有必要,通常这些特性是需要经验积累,从各种坑中累计出来,但是还有一种看似很笨却很有效的学习方法.那就是将别人的经验记录下来,有事没事都拿出来看看,集合开发中的经验,这会非常有效.
- font-family: Arial, Helvetica, sans-serif Web浏览器首先会检查电脑有没有安装Arial字体,如果没有坚持Helvetica以此类推
- 衬线字体适合显式大段文本,大多数人觉得衬线(字形笔画末端的装饰细节)能有效的把一个字母引向后一个字母,利于阅读
- 常见的:Times、Times New Roman、Georgia
- 无衬线字体通常显式标题与中文,外观简洁明了
- 常见的:Arial、Helvetica、Verdana
- @font-face指令,告诉浏览器字体的名称和下载地址
- @font-face{
- font-family:"League Gothic";
- src:url('fonts/League)Gothic-web font.woff');
- }
- font-family属性,指定Web字体的方式与指定电脑中已安装字体的方式一样
- 常用字号单位px、关键字、em、rem、%
- 使用像素 px
- 这种值与浏览器设置完全无关,在不同电脑与浏览器显式的文字大小一致,最为常用
- 使用关键字、百分比、em
- 这三种设定字号的方式,其工作原理是在浏览器预设字号的基础上增大或减少,也就是说,如果样式表中没有设定字号,Web浏览器会使用预设的字号,大多数浏览器非标题里的文本字号是16像素,这是基准字号
- 关键字 CSS提供了七个字号关键字,这些关键字在基准字号的基础上调整字号大小
- xx-small、x-small、small、medium、large、x-large、xx-large
- 百分比 百分数与关键字一样,根据浏览器基准字号调整文本大小,不过精确度更高,如果基号是16px那么100%就是16px
- em 与百分比原理相同,em一词源于纸张印刷业 1em等价于100% 0.5em 等于 50%
- rem root em简称,字号的大小基于根元素而定(html)大多数情况基于基准字号而定,
-moz-opacity:0.5;
-khtml-opacity: 0.5;
- 内容区类似于一个块级元素的内容框
- 行内元素的背景应用于内容区及所有内边距
- 行内元素的边框要包围内容区及所有内边距和边框
- 非替换元素的内边距、边框和外边距对行内元素或其生成的框没有垂直效果,也就是说,它们不会影响元素行内框的高度(也不会影响包含该元素的行框的高度)
- 替换元素的外边距和边框确实会影响该元素行内框的高度,相应的,也可能影响包含该元素的行框的高度
- top将元素行内框的顶端与包含该元素的行框的顶端对齐
- bottom将元素行内框的底端与包含该元素的行框的底端对齐
- text-top将元素行内框的顶端与父元素内容区的顶端对齐
- text-bottom将元素行内框的底端与父元素内容区的底端对齐
- middle将元素行内框的垂直中心与父元素基线上0.5ex处的一点对齐
- super将元素的内容区和行内框上移。上移的距离未指定,可能因用户代理的不同而不同
- sub与super相同,只不过元素会下移而不是上移
- 是一个混合产物,块级元素和行内元素的混合
- 行内块元素作为一个行内框与其他元素和内容相关
- 它就像图像一样放在一个问本行中
- 行内块元素会作为替换元素放在行中
- 行内块元素的底端默认地位于文本行的基线上,而且内部没有行分隔符
- 行内块元素内部会像块级元素一样设置内容的格式
- 如果增加height属性,比周围内容高,这些属性会使行高增加
- 应用于块级元素和替换元素
- 无继承性
- 百分数相对于包含块的 height 计算
- 应用于所有元素
- 无继承性
- 百分数相对于包含块的 width 计算
- 无继承性
- 应用于所有元素
- 会以某种方式将浮动元素从文档的正常流中删除,不过它还是会影响布局
- 一个元素浮动时,其他内容会“环绕”该元素
- 浮动元素周围的外边距不会合并,如果其它元素与此图像相邻(这表示水平相邻和垂直相邻),而且这些元素也有外边距,那么这些外边距不会与浮动图像的外边距合并
- 元素比作有塑料边的纸片,图像周围的塑料边(外边距)绝对不会与其他浮动元素周围的塑料边重叠
- 浮动一个非替换元素(包括块级元素),则必须为该元素声明一个width,否则浏览器可能使用最小值(也许CSS新规范有新的规定)
- 要得到正常的非浮动行为,必须有 none 虽然默认值就是不浮动
- 浮动元素会生成一个块级框,不论这个元素本身是什么(也许是行内元素)
- 浮动元素的左(或右)外边界不能超出其包含块的左(或右)内边界
- 两个或者多个浮动元素向一个方向浮动时,并不会覆盖,依次摆放
- 左浮动元素的右边界不会在其右边右浮动元素的左外边界的右边
- 一个浮动元素的顶端不能比其父元素的内顶端更高
- 浮动元素的顶端也不可能比之前出现的浮动元素的顶端更高
- 如果浮动元素周围有其它元素,那个元素的背景色和边框会延伸到浮动元素的后面
- relative 元素框偏移某个距离,元素仍保持其未定位前的形状,他原本所占的空间仍保留
- absolute 元素框从文档流完全删除,并相对于其包含块定位,元素原先正常文档流所占空间会关闭,元素定位后生成一个块级框
- static 元素框正常生成,块级元素生成一个矩形框,作为文档流的一部分,行内元素则会创建一个或多个行框,置于其父元素中
- fixed 元素框的表现类将position设置为absolute,不过包含块是视窗本身
- “根元素”的包含块由用户代理建立,根元素就是html有些浏览器会使用body作根元素,多数浏览器初始包含块是一个视窗大小矩形
- 非根元素,如果其position是relative或static,包含块则由最近的块级框、表单元格或行内块祖先框的内容边界构成
- position值是absolute,包含块设置为最近的position值不是static的祖先元素(可以是任何类型)
- 如果这个祖先是块级元素,包含块则设置为该元素的内边距边界,就是由边框界定的区域
- 如果这个祖先是行内元素,包含块则设置为该祖先元素的内容边界
- 如果没有祖先,元素的包含块定义为初始包含块
- 元素可以定位到其包含块的外面,也就是说明“包含块”一词实际上应该是“定位上下文”
- top 描述了定位元素上外边距边界离其包含块的顶端多远。如果 top 为正值,会把定位元素的上外边距边界下移,若为负值,则会把定位元素的上外边距移到其包含块的顶端之上
- 偏移定位元素的外边距边界时,带来的影响是元素的所有一切(包括外边距、边框、内边距和内容)都会在定位的过程中移动
- 可以为定位元素设置外边距、边框、内边距和内容,兵包含在偏移属性定义的区域内
- 偏移属性定义了距离包含块相应边的偏移
- 如果使用top、right、bottom、left来描述元素4个边的放置位置,那么元素的高度和宽度将由这些偏移隐含确定
- 如果使用top、right、bottom、left来描述元素4个边的放置位置,那么元素的高度和宽度对布局没有任何作用,除非向元素增加了外边距、边框、内边距
- 定位元素的 width 和 height 的默认值是 auto
- 浮动三栏布局,设置其宽度为百分数
- 设置max-width控制最大宽度
- CSS样式命名以及属性以用途为主,比如相同样式的多组标签可以用群组选择器,同意控制方便管理
- 相关书籍 responsive web design
- 移动浏览器不会显示100%大的页面。如果这么做,大多数高于屏幕的像素将放不下,一次只能看到页面的一部分。其实手机浏览器会缩小网页,以便在屏幕中能放得下,但是响应式网页就是为了改善网页在手机中的外观,所以不希望被缩小,导致文本太小而难以阅读
- 简单方法就能覆盖浏览器的这种行为 <meta name="viewport" content=" width=device-width" > viewport指代浏览器的显示区域,device把浏览器设为手机宽度
- 图片响应布局 img { max-width:100% } 这个样式把图像的最大宽度设为容器宽度的100%(这里max-width与width有何区别?)解释:max-width权重大于width 当遇到width干扰时不会受影响
- 去掉浮动导航栏转化行内块级元素是居中显示这些按钮的唯一方式
- Skeleton提供基础的栅格样式外还有额外的CSS,用于装饰按钮、表单和表格
- 未完待续...
CSS 权威指南 CSS实战手册 第四版(阅读笔记)的更多相关文章
- C++ Primer 第四版阅读笔记
阅读笔记 初始化 变量定义指定了变量的类型和标识符,也可以为对象提供初始值.定义时指定了初始值的对象被称为是 已初始化的.C++ 支持两种初始化变量的形式:复制初始化和 直接初始化.复制初始化语法用等 ...
- <C++Primer>第四版 阅读笔记 第一部分 “基本语言”
之前阅读时没有及时总结,现在慢慢补上. 第1章 快速入门 main 函数在很多方面都比较特别,其中最重要的是每个C++程序必须含有 main 函数,且 main 函数是(唯一)被操作系统显示调用的函数 ...
- <C++Primer>第四版 阅读笔记 第四部分 “面向对象编程与泛型编程”
继承和动态绑定与数据抽象一起成为面向对象编程的基础. 模板使我们能够编写独立于具体类型的泛型类和泛型函数. 第15章 面向对象编程 面向对象编程基于三个基本概念:数据抽象.继承和动态绑定.在C++中, ...
- <C++Primer>第四版 阅读笔记 第三部分 “类和数据抽象”
类定义了数据成员和函数成员:数据成员用于存储与该类类型的对象相关联的状态:而函数成员则负责执行赋予数据意义的操作. 第12章 类 一个类可以包含若干公有的.私有的和受保护的部分:在public部分定义 ...
- <C++Primer>第四版 阅读笔记 第二部分 “容器和算法”
泛型算法中,所谓"泛型(generic)"指的是两个方面:这些算法可作用于各种不同的容器类型,而这些容器又可以容纳多种不同类型的元素. 第九章 顺序容器 顺序容器的元素排列次序与元 ...
- 《CSS权威指南》基础复习+查漏补缺
前几天被朋友问到几个CSS问题,讲道理么,接触CSS是从大一开始的,也算有3年半了,总是觉得自己对css算是熟悉的了.然而还是被几个问题弄的"一脸懵逼"... 然后又是刚入职新公司 ...
- CSS权威指南 - 层叠
CSS权威指南 第三章结构与层叠 - 层叠 按权重及来源排序 1. Reader important declarations 2. Author important declarations 3. ...
- CSS权威指南学习笔记系列(1)CSS和文档
题外话:HTML是一种结构化语言,而CSS是它的补充:这是一种样式语言.CSS是前端三板斧之一,因此学习CSS很重要.而我还是菜鸟,所以需要加强学习CSS.这个是我学习CSS权威指南的笔记,如有不对, ...
- css权威指南读书笔记-第10章浮动和定位
这一章看了之后真是豁然开朗,之前虽然写了圣杯布局和双飞翼布局,有些地方也是模糊的,现在打算总结之后再写一遍. 以下都是从<css权威指南>中摘抄的我认为很有用的说明. 浮动元素 一个元素浮 ...
随机推荐
- 漫谈Java IO之基础篇
Java的网络编程如果不是专门搞服务器性能开发或者消息分发,几乎可能涉及不到.但是它却是面试找工作必问的一个知识点,涵盖的知识体系也非常广泛,从Java底层IO原理到操作系统内核组成,再到网络TCP. ...
- c++ --> sizeof()使用小结
sizeof()使用小结 特性0:sizeof是运算符,不是函数 sizeof最基本特性,后面的很多特性都是受到这个特性的影响,正因为sizeof不是函数,因此不把它所要求得长度的对象叫做参数,习惯上 ...
- 常用linux日志查询命令
1.查看实时日志: tail -f nohup.out 2.分页查看所有日志: cat nohup.out | more 4.分页查看前N行日志: tail -n 1000 nohup.out | m ...
- NOIP2017划水崩盘记
Before-Day1 自信心爆棚,老子一定能拿省一.一天啥也没干,一顿乱奶.敬等明日切T1写暴力. Day 1 哈哈哈,T1是数论,闭眼睛切啊!! ...然后就Gg了,写的 ...
- Java基础学习笔记一 Java介绍
java语言概述 Java是sun公司开发的一门编程语言,目前被Oracle公司收购,编程语言就是用来编写软件的. Java的应用 开发QQ.迅雷程序(桌面应用软件) 淘宝.京东(互联网应用软件) 安 ...
- 【R语言系列】read.table报错incomplete final line found by readTableHeader
文件内容: id,SGBH,DMSM1,SGDO,SGFSSJ 1,310117620,伤人事故,上海市,2018-03-02 20:04:00 2,310117621,死亡事故,杭州市,2018-0 ...
- 【MySql系列】MySql踩坑系列
问题一:远程登录报错Host '192.168.181.201' is not allowed to connect to this MySQL server 解决: 问题二:MySql access ...
- C语言第六周博客作业--数据类型
一.PTA实验作业 题目1: 7-6 掉入陷阱的数字 1. 本题PTA提交列表 2.设计思路 定义变量N,i,g=1表示位数,a表示各位数字相加的和,b=0,j,N1,c,d用于储存N do{ for ...
- 1013团队Beta冲刺day2
项目进展 李明皇 今天解决的进度 优化了信息详情页的布局:日期显示,添加举报按钮等 优化了程序的数据传递逻辑 明天安排 程序运行逻辑的完善 林翔 今天解决的进度 实现微信端消息发布的插入数据库 明天安 ...
- win7如何以管理员身份运行命令提示符(cmd)
1.进入到: C:\Windows\System32 2.找到cmd.exe文件 3.右键单击 ,选择 以管理员身份运行.