第一天CSS实战培训及笔记及感想

首先，我很激动。。。。。。

3点了，凌晨3点了，我居然还没睡。总共不到3个小时的视频消化了6个小时，今天是培训班第一天，一下子就来高强度的讲课，整个上过基础班的都听得东倒西歪，更别说我这个没上基础班滴人，基本上讲完让自己做是无从下手的，很多基本的东西不会，例如fw和ws的基本操作也不会，就这么磕磕绊绊的学了一天回来抱着啃视频，一点点的跟着做事例，然后就做到现在了。。。实际上跟我的计划还差的有些远，我以为也就12点弄完了，然后再写一遍，没想到一直折腾到3点，而且还不敢保证说全会。不过好赖这么细嚼慢咽的，明天也许稍微听课会比今天强一些吧。

今天有好几个同学也是在熬夜学习，我只听别人说过培训班从早上到晚回来还要学习到凌晨，我感觉这种事儿不会发生在我身上，然后。。。然后第一天就发生了这样的事儿，买噶！！！

真的都是在脑力吸收，说做笔记，学了一整天老师课上笔记没做多少，我最后整理下的也没多少，但是今天的知识量却是巨大的。

不行了，我脑袋迷糊的不行了。贴上笔记上床睡觉！

第一天CSS笔记

可能用到的基础东西：

text-align规定文本的水平对齐方式。

font字体

相对定位：position:relative;

绝对定位：position:absolute;

如何处理溢出的内容：剪切隐藏 overflow: hidden;

权重：

标签选择器 1

类选择器 10

id 选择器 100

行内样式标签 1000

！important 无穷大

继承权重是零

字体font-weight:bold; 为700粗

引入外部css方式：<link rel=”stylesheet” href=”css/base.css”/>

注：base.css为基本样式；global.css为全局样式；index.css首页样式

引入图标方式：<link rel="shortcut icon" href="favicon.ico" />

Font:字体加粗 字号/行高 字体； 必须要有字号和字体

例子：400 15px/15px “宋体”;

让字体加粗font-weight:700;

让字体不加粗font-weight:normal;

不下划线 不删除线：text-decoration:none;

定位： position:static; 静态定位 约等于标准流

浮动的不浮动：float:none; none不浮动 left左浮动 right右浮动

定位的不定位： position:static; absolute绝对定位 relative相对定位 fixed

清除浮动又叫闭合浮动，案例：

.clearfix:before,.clearfix:after{

content:"";

display:table; 清除浮动

}

before是之前

after是之后

一个块区内，前后清除，内容在中间，正好是闭合的。这是比较好的清除浮动的方法。

先引入base.css然后再引入index.css，因为base是基础样式，而index.css是单个样式。

引入图标的方式

<link rel="shortcut icon" href="favicon.ico"/>

shortcut是快捷导航的意思

w在这里是版心得意思，版心又叫可视区

CSS里有个规范：.shortcut {}单词和括号之间必须有个空格

浮动盒子folat不需要加宽，因为会随着内容的增加扩宽。

margin:0 auto;

margin后面如果只有两个参数的话，第一个表示top和bottom，第二个表示left和right。因为0 auto，表示上下边界为0，左右则根据宽度自适应相同值（即居中）

.one>ul>li*10>a

等于下面

<div class="one">

<ul>

<li><a href=""></a></li>

<li><a href=""></a></li>

<li><a href=""></a></li>

<li><a href=""></a></li>

<li><a href=""></a></li>

<li><a href=""></a></li>

<li><a href=""></a></li>

<li><a href=""></a></li>

<li><a href=""></a></li>

<li><a href=""></a></li>

</ul>

</div>

子绝父相，子绝对定位，父相对定位

定位position:static; （正常流，占位置） absolute绝对定位（不占位置，随便飘） relative相对定位（占位置） fixed固定定位（不占位置，一般用于固定于屏幕不动）

no-repeat在backgroud中含义为不平铺

width和height最稳定，其次padding因为会撑开盒子，最不稳定是margin

display: block;

定义一下变为类似块级元素的，就可以定义长宽高了。

webstorm快捷键：

ctrl+d复制当前行

ctrl+shift+/注释

上下行选中按鼠标滚轮，会统一进行编辑

想要删掉正行，可以选中这行数列点delete

.dt按table可以生成<div class=”dt”></div>

.dt+.dla按table可以生成两个

i>s*8按table可以生成<i><s></s><s></s><s></s><s></s><s></s><s></s><s></s><s></s></i>

link按table是引入的意思，引入样式。

ctrl+alt+t是环绕标签，用于想在一个地方加样式或者标签

FW标尺使用方法

点一下网页层，然后按ctrl+alt+r出现标尺，把两端固定好后按shift键看之间的宽多少

遇到的问题：

需要解决红蜘蛛屏幕问题，顶端及滑动。

将CSS初始化的每段搞清楚意思

定位问题

块级元素及浮动

清除浮动问题

权重问题