学写网页 #05# CSS Mastery 笔记 1~3
看到第四章才发现这本书已经太旧了。。看到第 3 章为止吧。前三章主要讲的内容：一些编码常识、怎样选择元素、盒子模型（主要是 Margin）、定位（绝对、相对、浮动、fixed 等）
第一章
conventions
DOCTYPE switching
The browser chooses which rendering method to use based on the existence of a DOCTYPE declaration and the DTD being used.
Despite writing valid CSS, if you choose the wrong DOCTYPE,
your pages will be rendered in quirks mode and behave in a buggy and unpredictable way.
第二章
Selectors
The cascade and specificity
Inheritance: inherited styles have a null specificity
Structural comments
配合 Ctrl + F 使用。
第三章
Box model
Positioning: normal flow(+relative), floats, absolute(+fixed)
尝试一：增大 padding borders margins 不会影响 content 的区域，而是增加盒子的整体大小。
#box1 p {
background-color: pink;
border-width: 0px; /* 只是为了说明 border 也是可以设置“粗细”的 */
}
#box1 #p1 {
padding: 5px;
border: dashed;
margin: 10px;
}
#box1 #p2 {
}
/
尝试二： Margin collapsing
#box1 #p1 {
margin: 30px;
}
#box1 #p2 {
margin: 20px;
}
/
尝试三：Collapse on themselves
<div id="box1">
<p id="p1"></p>
<p id="p2">你</p>
</div>
#box1 #p1 {
margin: 30px;
}
#box1 #p2 {
margin: 20px;
}
在“你”的上面还有 30px 空间。
/
尝试四：Margin collapsing 之包含关系
#branding {
width: 15em;
height: 15em;
margin: 30px;
background-color: darkorchid;
}
#branding .tel {
width: 10em;
height: 10em;
margin: 20px;
background-color: white;
}
可以观察到左边是不会层叠的，上面和下面会，具体的实际数值取决于更大那个（可以是里面的！）。
/
尝试五：改变盒子的类型
<div id="box1">
<div id="p1">白日依山尽</div>
<div id="p2">黄河入海流</div>
<div id="p3">欲穷千里目</div>
</div>
#box1 #p1 {
display: block;
/* 对 div 来说这是默认的 */
}
#box1 #p2 {
display: inline;
}
#box1 #p3 {
display: none;
}
欲穷千里目不占空间！ （彻底消失）
/
尝试六：inline block
<body>
<div id="block1"></div>
<span id="inline1">我不行了</span>
<span id="inline1">躺在担架上</span>
<div id="block1"></div>
</body>
#block1 {
width: 10em;
height: 10em;
background-color: pink;
}
#inline1 {
height: 10em;
width: 10em;
/* 在行内框里显示的设置长度高度是没有用的 哦 */
background-color: royalblue;
}
#block1 {
width: 10em;
height: 10em;
background-color: pink;
}
#inline1 {
margin: 1em;
padding: 1em;
border: dashed 1em;
/* 可以通过改变 margin padding border 来改变行间距*/
/* 注意仅仅是行间距，垂直间距不会变化 */
background-color: royalblue;
}
可以通过改变行高改变垂直间距：
#inline1 {
margin: 1em;
padding: 1em;
border: dashed 1em;
line-height: 3em;
background-color: royalblue;
}
或者直接改成 display: inline-block;
匿名块框（奇怪怎么没有border?）：
<body>
<div id="block1">
如果我在这里打一行字
<span id="inline1">我不行了</span>
<span id="inline1">躺在担架上</span>
</div> <div id="block1"></div>
</body>
#inline1, div:first-line {
margin: 1em;
border: dashed 1em;
background-color: royalblue;
}
/
尝试七：Relative positioning
#box1 #p1 {
}
#box1 #p2 {
position: relative;
left: 20px;
top: 20px;
}
#box1 #p3 {
}
本质上还是 normal flow
/
尝试八：Absolute positioning
绝对定位令对象元素从原来的“文档流”中脱离。
#box1 #p2 {
position: absolute;
left: 20px;
top: 20px;
}
/
尝试九：Absolute positioning 之二
w3school：绝对定位的元素的位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块。(这取决于user agent)
<body>
<div id="branding">
<p class="tel">Tel: 3123 2312 0981</p>
</div>
</body>
注意是最近的已定位的祖先元素哦！！下面两个效过是不一样的：
#branding {
width: 70em;
height: 10em;
position: relative; /* 这样才算已定位，虽然其实并没有做相对偏移 */
background-color: darkorchid;
}
#branding .tel {
position: absolute;
right: 1em;
bottom: 1em;
text-align: left;
}
tel 相对于 branding ↓
tel 相对于 body（或者是用户视图，不管放大缩小总是在可以看到的那块区域的那个绝对位置，视觉上会变大就是了） ↓
#branding {
width: 70em;
height: 10em;
background-color: darkorchid;
}
#branding .tel {
position: absolute;
right: 1em;
bottom: 1em;
text-align: left;
}
/
尝试十：fixed
效果和上面那个 去掉 relative 一样，相对 viewport 的绝对定位
#branding {
width: 70em;
height: 10em;
background-color: darkorchid;
}
#branding .tel {
position: fixed;
right: 1em;
bottom: 1em;
text-align: left;
}
/
尝试十一：float: left;
<body>
<div id="box1"></div><div id="box2"></div>
<div id="box3"></div>
</body>
div {
width: 10em;
height: 10em;
background-color: crimson;
display: inline-block;
/*float: left;*/
}
无 float: left;
float: left;
如果没有足够的水平空间，浮动元素将向下移动，直到有足够的空间：
#box2 {
height: 5em;
width: 24em;
background-color: aquamarine;
}
#box3 {
width: 40em;
height: 7em;
background-color: chartreuse;
}
放大 ↓
再放大 ↓
继续放大 ↓
/
尝试十二：clear
<body>
<div class="box"></div>
<span>我与父亲不相见已二年余了，我最不能忘记的是他的背影。
那年冬天，祖母死了，父亲的差使1也交卸了，正是祸不单行的日子。我从北京到徐州，打算跟着父亲奔丧2回家。到徐州见着父亲，看见满院狼藉3的东西，又想起祖母，不禁簌簌地流下眼泪。父亲说：“事已如此，不必难过，好在天无绝人之路！”
回家变卖典质4，父亲还了亏空；又借钱办了丧事。这些日子，家中光景5很是惨澹，一半为了丧事，一半为了父亲赋闲6。丧事完毕，父亲要到南京谋事，我也要回北京念书，我们便同行。
到南京时，有朋友约去游逛，勾留7了一日；第二日上午便须渡江到浦口，下午上车北去。父亲因为事忙，本已说定不送我，叫旅馆里一个熟识的茶房8陪我同去。他再三嘱咐茶房，甚是仔细。但他终于不放心，怕茶房不妥帖9；颇踌躇10了一会。其实我那年已二十岁，北京已来往过两三次，是没有什么要紧的了。他踌躇了一会，终于决定还是自己送我去。我再三劝他不必去；他只说：“不要紧，他们去不好！”
我们过了江，进了车站。我买票，他忙着照看行李。行李太多，得向脚夫11行些小费才可过去。他便又忙着和他们讲价钱。我那时真是聪明过分，总觉他说话不大漂亮，非自己插嘴不可，但他终于讲定了价钱；就送我上车。他给我拣定了靠车门的一张椅子；我将他给我做的紫毛大衣铺好座位。他嘱我路上小心，夜里要警醒些，不要受凉。又嘱托茶房好好照应我。我心里暗笑他的迂；他们只认得钱，托他们只是白托！而且我这样大年纪的人，难道还不能料理自己么？我现在想想，我那时真是太聪明了。
</span>
<div id="context">我说道：“爸爸，你走吧。”他望车外看了看，说：“我买几个橘子去。你就在此地，不要走动。”我看那边月台的栅栏外有几个卖东西的等着顾客。走到那边月台，须穿过铁道，须跳下去又爬上去。父亲是一个胖子，走过去自然要费事些。我本来要去的，他不肯，只好让他去。我看见他戴着黑布小帽，穿着黑布大马褂12，深青布棉袍，蹒跚13地走到铁道边，慢慢探身下去，尚不大难。可是他穿过铁道，要爬上那边月台，就不容易了。他用两手攀着上面，两脚再向上缩；他肥胖的身子向左微倾，显出努力的样子。这时我看见他的背影，我的泪很快地流下来了。我赶紧拭干了泪。怕他看见，也怕别人看见。我再向外看时，他已抱了朱红的橘子往回走了。过铁道时，他先将橘子散放在地上，自己慢慢爬下，再抱起橘子走。到这边时，我赶紧去搀他。他和我走到车上，将橘子一股脑儿放在我的皮大衣上。于是扑扑衣上的泥土，心里很轻松似的。过一会儿说：“我走了，到那边来信！”我望着他走出去。他走了几步，回过头看见我，说：“进去吧，里边没人。”等他的背影混入来来往往的人里，再找不着了，我便进来坐下，我的眼泪又来了。
近几年来，父亲和我都是东奔西走，家中光景是一日不如一日。他少年出外谋生，独力支持，做了许多大事。哪知老境却如此颓唐！他触目伤怀，自然情不能自已。情郁于中，自然要发之于外；家庭琐屑便往往触他之怒。他待我渐渐不同往日。但最近两年不见，他终于忘却我的不好，只是惦记着我，惦记着他的儿子。我北来后，他写了一信给我，信中说道：“我身体平安，惟膀子疼痛厉害，举箸14提笔，诸多不便，大约大去之期15不远矣。”我读到此处，在晶莹的泪光中，又看见那肥胖的、青布棉袍黑布马褂的背影。唉！我不知何时再能与他相见！[2]
</div>
</body>
原始状态，浮动状态 ↓
clear: left （它表示框的左边不应该挨着 浮动框）
span {
display: inline-block;
clear: left;
}
#context {
clear: left;
}
CSS浮动(float,clear)通俗讲解 这篇写得挺通俗
What does the CSS rule “clear: both” do? 其实是在讲为什么需要 clear.both ，和书上的内容有点相似
学写网页 #05# CSS Mastery 笔记 1~3的更多相关文章
- 学写网页 #04# w3school
索引: HTML 输入类型 XHTML HTML5 HTML5 样式指南和代码约定 WHO 成立于 1948 年. 对缩写进行标记能够为浏览器.翻译系统以及搜索引擎提供有用的信息. code 元素不保 ...
- 学写网页 #06# table
A B E C D <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> & ...
- css实战笔记（一）：写网页前的reset工作
reset.css是每个html必备的样式,其中有各种元素属性清零的代码. 为什么要有reset.css 让各个浏览器的CSS样式有一个统一的基准,比如清除各个浏览器为元素自带的margin.padd ...
- 初学者用div+css结构写网页的几个误区
1.用div+css结构制作静态html网页不等于彻底抛弃古老的table写法.之所以不建议用table来布局网页是因为在网页加载很慢的时候要等table结构加载完成才能看到网页,其次是table的布 ...
- HTML+CSS学习笔记(2) - 认识标签（1）
HTML+CSS学习笔记(2) - 认识标签(1) 1.语义化,让你的网页更好的被搜索引擎理解 标签的用途: 我们学习网页制作时,常常会听到一个词,语义化.那么什么叫做语义化呢,说的通俗点就是:明白每 ...
- 《零基础学JavaScript(全彩版)》学习笔记
<零基础学JavaScript(全彩版)>学习笔记 二〇一九年二月九日星期六0时9分 前期: 刚刚学完<零基础学HTML5+CSS3(全彩版)>,准备开始学习JavaScrip ...
- CSS学习笔记
CSS学习笔记 2016年12月15日整理 CSS基础 Chapter1 在console输入escape("宋体") ENTER 就会出现unicode编码 显示"%u ...
- 妙味课堂——HTML+CSS基础笔记
妙味课堂的课程讲得非常的清楚,受益匪浅.先把HTML和CSS基础课程部分视频的学习笔记记录如下: padding #PS基础 ##前端需要的PS技能 - PS技能(前端需要):切图.修图.测量 - P ...
- HTML+CSS学习笔记 (6) - 开始学习CSS
HTML+CSS学习笔记 (6) - 开始学习CSS 认识CSS样式 CSS全称为"层叠样式表 (Cascading Style Sheets)",它主要是用于定义HTML内容在浏 ...
随机推荐
- 7.20 python线程3
2018-7-20 18:46:49 去俺弟家玩去 后天回来 1.复习 # !/usr/bin/env python # !--*--coding:utf-8 --*-- # !@Time :2018 ...
- Solve Error: 'has incomplete type', foward declaration of 'class x'
在C++的OOB编程中,有时候我们会遇到这样的错误Error: 'has incomplete type',forward declaration of 'class x',那么是什么原因引起的这个问 ...
- libmv
What is libmv? libmv, also known as the Library for Multiview Reconstruction (or LMV), is the comput ...
- IntelliJ IDEA学习记录
一.下载 地址:官网下载地址 二.安装 运行安装程序,一路下一步.注意选择安装路径. 三.基本概念 project:相当于donet中的解决方案(solution),eclipse中的工作空间(wor ...
- JS中"属性"的用法
JS的属性和C#有相似之处 ! 使用get和set来进行属性的获取和设置 var obj={ a:"1", get age(){ return obj.a; }, set age ...
- SP11469 SUBSET-Balanced Cow Subsets meet-in-the-middle+状压
正解:折半搜索 解题报告: 传送门! 这题我开始看到的时候贼开心地就把这题的代码直接粘过来辣 然后就T辣,,,仔细思考一下,为什么呢? 因为会枚举到很多相同的状态 举个eg 20 1 1 1 1 1 ...
- oracle(七)索引
一.B-Tree索引 (1). 选择索引字段的原则: 在WHERE子句中最频繁使用的字段 联接语句中的联接字段 选择高选择性的字段(如果很少的字段拥有相同值,即有很多独特值,则选择性很好) Oracl ...
- javaScript高级教程(五) Event Flow
1.两个阶段三个模型:Netscape支持事件捕获,IE支持事件冒泡,w3c是先捕获后冒泡 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 S ...
- python-面向对象-09_类属性和类方法
类属性和类方法 目标 类的结构 类属性和实例属性 类方法和静态方法 01. 类的结构 1.1 术语 —— 实例 使用面相对象开发,第 1 步 是设计 类 使用 类名() 创建对象,创建对象 的动作有两 ...
- 开机自启：bat实现一次性打开win7中的常用软件和文件夹
需求说明: 我们电脑(windows)办公,经常上班前一开机,就要手动打开很多文件夹和程序. 想节省时间,一键打开常用的文件夹和程序,研究了一下bat命令,于是mystart.bat产生了. myst ...