一.精通CSS（三）可视化格式模型
1.三个最重要的CSS概念：定位、浮动、盒模型。
2.本章学习目标：
①盒模型的复杂性和特点？
②如何、为什么使用外边距叠加？
③绝对&相对定位？
④浮动&清理如何工作的？
3.每个元素可看成一个矩形框，由元素的内容、内边距、边框和外边距组成。（盒子模型）
①padding：用于创建一个隔离带。
②frame：内边框的外边缘区域加一条线。（solid,dashed,dotted...）
③margin：透明的，用于控制元素之间的间隔。
4.width/height：内容区域的宽度/高度。
5.IE专有的盒模型使元素比预期小。
因为：width=content+padding+frame
6.外边距叠加：
①当两个或更多垂直外边距相接时，会变成一个外边距，这个外边距的高度为较大者。
②当一个元素包含在另一个元素中时（假设没有padding和frame将margin分隔），它们的顶/底外边距会叠加。
③假如有一个空元素，它有外边距，但没有内边距和边框，如果顶/底外边距相接，也会叠加。
More:如果叠加完的外边距又相接另一个元素的外边距，继续叠加。（这就是一系列空的段落元素占用空间非常小的原因）。
④只有普通文档流中边框的垂直外边距才会发生外边距叠加，行内框、浮动框或绝对定位框之间的外边距不会叠 加。
7.可视化格式模型&定位模型
8.①块级元素：如p、h1、div(边框)
②行内元素：如strong、span(行内框)
9.display属性值（常用）：block,inline,inline-block,none...
10.CSS中三种基本的定位机制：普通流、浮动、绝对定位。
11.普通流中元素框的位置是有元素在HTML文档中的位置决定的。
12.行框：有一行形成的水平框。
①修改行内框尺寸的唯一方法：修改行高或水平边框、内边距、外边距。
13.相对定位：
①”相对于”元素在普通文档流中的初始位置。
②relative&absolute相对应位置
<body>
<div id="div1">
<p id="p1">This is text in the first paragraph...</P>
<p id="p2">This is text <em id="em1"> in the
<strong id="strong1">second</strong> paragraph.</em></P>
</div>
</body>
*{
border:dotted 1px;
}b)div1:
*{
border:dotted 1px;
}
#div1{
position:relative;
top:50px;
left:50px;
}
c)em1:
*{
border:dotted 1px;
}
#div1{
position:relative;
top:50px;
left:50px;
}
#em1{
position: absolute;
top:100px;
left:100px;
}
③relative&absolute综合使用：
HTML：
<div id="branding">
<p class="tel">Tel:11111222223</p>
</div>
*{
border:dotted 1px;
}
#branding{
width:70em;
height:10em;
position:relative;
}
.tel{
position: absolute;
right:1em;
bottom:1em;
text-align: right;
}Result:
14.绝对定位：
①相对定位实际上被看做普通流定位模型的一部分，因为元素的位置是相对于它在普通流中的位置。
②与之相反，绝对定位使元素位置与普通文档流无关，因此不占据空间。
③”相对于”距离它最近的已定位的祖先元素。
④如果不存在已定位的祖先元素，那么相对于初始包含块（initial containing block：根元素所在的包含块）
⑤z-index属性的大小控制绝对定位框的叠放次序（属性值越大，该框在栈中的位置就越高）。
15.固定定位：
①绝对定位的一种，差异在于：固定元素的包含块是视口（viewport），使我们能创建总是出现在窗口中相同位置的浮动元素。
16.浮动：
①浮动的框可以左右移动，直至它的外边缘碰到包含框或 者另一个浮动框边缘。
②如果包含框太窄，无法容纳水平排列的浮动元素，那么容纳不下的浮动块向下移动，直至有足够的空间。
③如果浮动元素的高度不同，当它们向下移动时可能会发生”卡住”现象。
17.行框&清理：
①如果浮动的元素后面跟着一个普通文档流中的元素，导致浮动元素旁边的行框被缩短（行框中的信息围绕着浮动框）。
②clear属性值：left,right,both,none。
③浮动元素脱离了普通文档流，不影响周围的元素，但是， 对元素进行清理时，实际上是为了前面的浮动元素留出 空间。
④目标：a)将图片浮动到一个文本块的左边。
b)将图片和文本包含在另一个具有背景颜色和边框的元素中。
1.
HTML:
<div class="starry">
<img src="images/1.jpeg" alt="my picture">
<p>Starry Sky</p>
</div>
.starry{
background-color: teal;
border:solid 1px black;
}
.starry img{
float: left;
}
.starry p{
float:right;
}Result:
2.
HTML:
<div class="starry">
<img src="images/1.jpeg" alt="my picture">
<p>Starry Sky</p>
<br class="clear">
</div>
.starry{
background-color: teal;
border:solid 1px black;
}
.starry img{
float: left;
}
.starry p{
float:right;
}
.clear{
clear:both;
}
⑤添加少量额外标记：不失为增强整体结构的一个办法。
二.跟阿铭学Linux笔记：
1.Linux目录结构：
①/bin：binary，存放最常用的命令。
②/boot：存放启动Linux时使用的一些核心文件，包括一些连接文件和镜像文件。
③/dev：device，存放Linux的外部设备。在Linux中访问设备的方式和访问文件的方式是相同的。
④/etc：etcetera，存放所有系统管理所需要的配置文件和子目录。
⑤/home：用户的主目录。
⑥/lib：library，存放系统最基本的动态链接共享库，其作用类似于Windows中的DLL（Dynamic Link Library）文件，几乎所有的应用程序都需要这样的共享库。
⑦/lost+found：一般情况下是空的，当系统非法关机后，就存放了一些文件。
⑧/media：系统会自动识别一些设备（如U盘、光驱等），当识别后，Linux会把识别的设备挂载到该目录下。
⑨/mnt：mount（挂载），让用户挂载别的文件系统。我们可以将光驱挂载到/mnt/上，然后进入该目录查看光驱的内容。
⑩/opt：optional，给主机额外安装软件所设置的目录，默认为空。比如你要安装一个Oracle数据库，可以放在该目录下。
⑪/proc：process information pseudo-file system，一个虚拟的目录，是系统内存的映射，可以直接访问来获取系统信息。该目录的内容存放在内存中，我们可以直接修改里面的某些文件。
⑫/root：系统管理员的用户主目录。
⑬/seLinux：security，一个安全机制，类似于Windows中的防火墙。
⑭/srv：service，存放的是一些服务启动之后需要提取的数据。
⑮/sys：system，存放的是与硬件驱动程序相关的信息。
⑯/tmp：temporary，存放一些临时文件。
⑰/usr：unix system resource，存放用户的很多应用程序和文件，类似于Windows中的Program Files目录。
⑱/usr/bin：存放系统用户使用的应用程序。
⑲/usr/sbin：存放超级用户使用的比较高级的管理程序和系统守护程序。
⑳/usr/src：内核源代码默认的放置目录。
21/var：vary，存放不断扩充且经常被修改的目录，包括各种日志文件。
2.正确的关机流程：sync→shutdown→reboot→halt
①sync:synchronized同步的，将数据由内存同步到硬盘。
3.忘记root密码怎么办？
①重启系统，3秒内按回车，选择内核版本信息
②进入单用户模式，输入’e’，选择kernel......，再输入’e’，
后面加入一个单词’single’、数字’1’、字母’s’，回车，紧接 着输入’b’
③修改root密码，#passwd，输入两次密码之后#reboot 重启系统。
4.如何查看Linux系统是32位还是64位：
①getconf LONG_BIT
②uname -a(X86-64是64位，否则为32位，如i686,i386)
③file /sbin/init或file /bin/ls
5.32/64位操作系统的区别：
CPU一次处理数据的能力和可寻址的内存空间。
6.安装32/64位操作系统根据电脑的内存而定。
7.Swap分区的作用：
又称交换区，当系统的物理内存不够用时，就需要释放其一部分空间，以供当前运行的程序使用，被释放的空间可能来源于长时间未操作的程序，将这些释放的空间临时保存在交换区中。
8.bootloader：引导加载程序
9.grub:GUN GRand Unified bootloader，多操作系统的启动程序。
10.grub密码：全局/菜单密码，MD5：Message Digest Algorithm 5(消息摘要算法5)
11.Linux分区：
①/：根目录，唯一必须挂载的目录。
②swap：交换分区。
③/home：自己创建的文件。
④/usr：如需安装大量软件，建议使用。
⑤/var：服务器方面的应用。
⑥/boot：防止硬盘不支持LBA模式（现在不太可能）。
LBA：Logical Block Address
扫一扫
790
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
