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)大多数情况基于基准字号而定
六
字符间距和单词间距
letter-spacing、word-specing 调整字符和单词之间的距离。增加间距让标题看起来更稳重庄严。如果想减少字符间距,要使用负值。
为文本添加阴影
text-shadow 属性需要四个信息:更想偏移值(阴影距离文本左边或右边多远),纵向偏移值(阴影距离文本上边或下边多远),阴影的模糊成都和投影的颜色
添加多个投影在一个投影后加上逗号
IE9及之前版本不支持投影
-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,用于装饰按钮、表单和表格
- 未完待续...
转载于:https://www.cnblogs.com/lguow/p/11116457.html
CSS 权威指南 CSS实战手册 第四版(阅读笔记)相关推荐
- css实战手册第四版 pdf_你真的了解CSS继承吗?看完必跪
也许你瞧不起以前的 css ,但是你不该再轻视眼下的 css .近年来 css 的变量系统已逐步得到各大浏览器厂商支持,自定义选择器等强势袭来,嵌套系统/模块系统也在路上...为了更好的掌握 css ...
- 《Spring实战》第四版读书笔记 第二章 装配Bean
2019独角兽企业重金招聘Python工程师标准>>> 在Spring中,对象无需自己查找或创建与其所关联的其他对象.相反,容器负责把需要相互协作的对象引用赋予各个对象. 创建应用对 ...
- C++Primer第四版 阅读笔记 第二部分 “容器和算法”
泛型算法中,所谓"泛型(generic)"指的是两个方面:这些算法可作用于各种不同的容器类型,而这些容器又可以容纳多种不同类型的元素. 第九章 顺序容器 顺序容器的元素排列次序与元 ...
- css权威指南第四版_16个非常有用的CSS伪选择器,你千万不要错过了!
英文 | https://blog.bitsrc.io/css-pseudo-selectors-you-never-knew-existed-b5c0ddaa8116译文 | https://jue ...
- 《CSS权威指南》--附录
<CSS权威指南>--附录 虽然一条规则中的声明可以按照任何顺序写出来,但我背后还是有一个优先级顺序: 1. display 及相关声明: 2. position 及相关的声明: 3. m ...
- 数据库中间件:Mycat 权威指南+Mycat 实战笔记,双管齐下
前阵子复习了一下消息中间件MQ系列的知识点,忽然想起还有个数据库中间件--MyCat! Mycat 是一个开源的分布式数据库系统,是一个实现了MySQL协议的服务器,前端用户可以把它看作是一个数据库代 ...
- 精通CSS高级WEB标准解决方案(第三版)笔记
精通CSS高级WEB标准解决方案(第三版)笔记 1 CSS选择符 1.1 类型选择符 1.2 ID选择符 1.3 类选择符 1.4 后代选择符 1.5 子选择符 1.6 相邻同辈选择符 1.6 一般同 ...
- 《Java修炼指南:高频源码解析》阅读笔记一Java数据结构的实现集合类
一.Arrays工具类 来自java.util.Arrays,用来处理数组的各种方法. 1.1 List asList(T- a) 用来返回由自定数组支持的固定大小列表,虽然这里返回了一个List,但 ...
- Think in Java第四版 读书笔记10 第16章 数组
Think in Java第四版 读书笔记10 第16章 数组 数组和容器很像 但他们有一些差别 16.1 数组为什么特殊 数组与容器的区别主要在效率和存储类型 效率:数组是简单的线性序列 使得数组的 ...
- Think in Java第四版 读书笔记9第15章 泛型
Think in Java第四版 读书笔记9第15章 泛型 泛型:适用于很多很多的类型 与其他语言相比 Java的泛型可能有许多局限 但是它还是有很多优点的. 本章介绍java泛型的局限和优势以及ja ...
最新文章
- 学计算机视觉台式机,回顾2020,2020年最受欢迎的7种电脑视觉工具
- 大数据分布式集群搭建(9)
- TypeReference -- 让Jackson Json在List/Map中识别自己的Object
- EditPlus3.21注册码
- 移动开发框架,第【一】弹:QuoJs 官方文档(汉化版)
- Solr学习笔记1(V7.2)
- math.atan_JavaScript中带有示例的Math.atan()方法
- 计算机科学与技术 课表 武汉,欢迎访问武汉理工大学计算机科学与技术学院
- 谈谈物联网产业4G转型中的隐忧与应对
- Thought Works 总结
- Android Multimedia框架总结(十八)Camera2框架从Java层到C++层类关系
- TDA2030功放电路图
- matlab如何编newton-raphson,Matlab中的Newton-Raphson方法
- [设备驱动] 最简单的内核设备驱动--字符驱动
- GUEST帐号“反客为主”
- 站在巨人的肩膀上,用Node+ChatGPT模块实现一个接口
- 考驾照 一把过 74天拿证 这速度还可以?
- GUI编程(java)
- NSURLSESSION使用实战教程
- LMD DesignPack的使用技巧:如何设置典型的设计环境?