css基础02

行高定义

浏览器默认行高为16px

行高：基线到基线的距离=文字宽度+上下边距距离（即上边距到下边距距离）

当一行文字行高与父元素行高一致时，文字垂直居中 

行高单位

设置文字大小为20px

单位	设置值	真实行高
px	20	20
em	2	20*2
%	150	20*150%
数字	2	字行高20*2

总结：单位除了像素意外，行高都是与文字大小乘积。

单位	设置值	父元素文字大小	字元素文字大小	真实行高
px	40px	20px	30ox	40px
em	2	20px	30px	20*2
%	150	20px	30px	20*150px
数字	2	20px	30px	30*2

总结：不带单位时，行高和子元素大小相乘，em和%是和父元素相乘，行高以像素为单位，就是定义的行高值。

通常推荐使用像素为单位。

盒子模型：作用页面布局

边框border

border：none（去边框）

border-style线形=  solid实现 / dotted点线  / dashed虚线  / none去轮廓线

border-color边框颜色

border-width边框粗细

border-top上边框 /  bottom下边框  /  left左边框 / right 右边框 

边框属性连写：border：线形（必写）+颜色+粗细  （无顺序要求）

边框合并：border-collapse：collapse；（边框为细线）

label for=‘id’ ：获取光标焦点

内边距padding：

padding-top上边框 /  bottom下边框  /  left左边框 / right 右边框 

连写：

padding：一个值（上下左右都为这个值）

padding：两个值（上下，左右）

padding：三个值（上，左右一样，右）

padding：四个值（顺时针；上右下左）

auto居中

内边距影响盒子大小

边框和内边距都会撑大盒子宽度

盒子真实宽度=盒子宽度+左右内边距+左右边框

继承的盒子一般不被撑大

  包含（嵌套）的盒子，如果自盒子没有定义宽度，给字盒子设置左右内边距，一般盒子不会被撑大（水平方向）

外边距margin：（和padding一样）

margin-top上边框 /  bottom下边框  /  left左边框 / right 右边框 

连写：

margin：一个值（上下左右都为这个值）

margin：两个值（上下，左右）

margin：三个值（上，左右一样，右）

margin：四个值（顺时针；上右下左）

处置方向外边距合并，外边距塌陷

垂直方向的两个盒子，如果都设置了垂直方向的外边距，取较大的值

外边距塌陷：嵌套的盒子，直接给子盒子设置垂直方向外边距的时候回发生外边距塌陷。

解决：给父盒子加边框或者 给父盒子设置：overflow：hidden或bfc格式化上下文

fireworks基本使用

新建文件ctrl+n

打开文件ctrl+o

调出隐藏标尺ctrl+r

清楚副主席：视图--辅助线--清楚辅助线

放大镜Z   放小 alt+鼠标左键 

抓手  快捷键空格

测量距离：拉出辅助线 切换指针工具  将光标放到辅助线之间按SHIFt键

-----------------------------------------------------------------------------------------------------------------------------------------------------------------

浮动原理

文档流（标准流）

块元素，行内元素在一行上显示，碰到父元素边框换行

浮动布局：float：left/right

          特点：元素浮动后不占据原来位置（脱标）就是置于上层浮动。

                     浮动的盒子在一行显示

                     行内元素浮动后转换为行内快元素（不推荐）

浮动作用：文本饶图（文字围绕图片），制作导航，网页布局

 

简单导航：li+a+浮动

额外标签去除浮动：

清除浮动:不是不用浮动，清除浮动的产生影响，

当父盒子高度没设置（默认为0），嵌套的盒子浮动之后，下方的盒子会发生未知错误。

清除方法：额外标签发，在最后一个浮动元素添加标签。clear：left / right / both（常用）。<div style="clear:both;" ></div>

                   给父元素overflow:hidden；（内容出了盒子，不使用这个方法，内容会被隐藏）

                 伪元素清除浮动：（推荐）

.clearfix:afer(伪元素)
            {     
                         content：“.”；
                          display:BLOCK;
                          LINE-Height：0；
                          visibility：hidden；
                          clear：both；  
                  }

css初始化和overflow属性：

css初始化：为考虑浏览器兼容性问题，其实不同的浏览器对有些标签的默认值是不同的，如果没对css初始化会出现浏览器之间页面的差异

腾讯：
body,ol,ul,h1,h2,h3,h4,h5,h6,p,th,td,dl,dd,form,fieldset,legend,input,textarea,select{margin:0;padding:0} 
body{font:12px"宋体","Arial Narrow",HELVETICA;background:#fff;-webkit-text-size-adjust:100%;} 
a{color:#2d374b;text-decoration:none} 
a:hover{color:#cd0200;text-decoration:underline} 
em{font-style:normal} 
li{list-style:none} 
img{border:0;vertical-align:middle} 
table{border-collapse:collapse;border-spacing:0} 
p{word-wrap:break-word} 


新浪：
body,ul,ol,li,p,h1,h2,h3,h4,h5,h6,form,fieldset,table,td,img,div{margin:0;padding:0;border:0;} 
body{background:#fff;color:#333;font-size:12px; margin-top:5px;font-family:"SimSun","宋体","Arial Narrow";}
ul,ol{list-style-type:none;} 
select,input,img,select{vertical-align:middle;} 
a{text-decoration:none;} 
a:link{color:#009;} 
a:visited{color:#800080;} 
a:hover,a:active,a:focus{color:#c00;text-decoration:underline;} 
淘宝：
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; } 
body, button, input, select, textarea { font:12px/1.5tahoma, arial, \5b8b\4f53; } 
h1, h2, h3, h4, h5, h6{ font-size:100%; } 
address, cite, dfn, em, var { font-style:normal; } 
code, kbd, pre, samp { font-family:couriernew, courier, monospace; } 
small{ font-size:12px; } 
ul, ol { list-style:none; } 
a { text-decoration:none; } 
a:hover { text-decoration:underline; } 
sup { vertical-align:text-top; } 
sub{ vertical-align:text-bottom; } 
legend { color:#000; } 
fieldset, img { border:0; }
button, input, select, textarea { font-size:100%; } 
table { border-collapse:collapse; border-spacing:0; } 

overflow属性：（溢出）

visible	默认值。内容不会被修剪，会呈现在元素框外
hidden	内容被修剪并其余内容不可见。
scroll	被修剪，默认用滚动条以查看其余的内容
auto	被修剪，超出会显示滚动条以查看其余内容。但没超出就没有滚动条。

定位：

定位方向：上top /  bottom下 /  left左 / right 右 

静态定位：position：static；一定不会动。就是文档流

绝对定位：position：absolute；

                 特点：元素使用绝对定位后不占据原来的位置(脱标)； 

                             元素定位就浏览器出发；

                             嵌套的盒子，父盒子没有使用定位，子盒子定位，子盒子还是从浏览器出发；

                             嵌套盒子，父盒子定位，子盒子绝对定位，子盒子定位从父盒子出发。

                             给行内元素使用绝对定位后，转换成行内块元素。（不推荐）

                             z-index：0-999.调整元素的层叠顺序。

相对定位： position：relative；

                     特点：相对于自己出发；还占据原来的位置；

                                 父盒子相对定位，子盒子绝对定位（子绝父相），相对于父盒子出发。（用最多）

                                 给行内元素使用相对定位后，不转成行内块元素。

固定定位：position：fixed；不占据原来位置（脱标）；从浏览器出发；

                                 给行内元素使用固定定位，会转成行内块（不推荐）

-------------------------------------------------------------------------------------------------------------------------------------------------------------------

定位盒子居中显示

:margin:0 auto;  只能让标准流的盒子居中对齐。

定位的盒子居中：先左右走父元素盒子的一半left：50%，在向左走子盒子的一半(margin-left:负值-480。)子绝父相

标签包含规范：

div可以包含所有的标签。

p标签不能包含div h1等标签。

h1可以包含p，div等标签。

行内元素尽量包含行内元素，行内元素不要包含块元素。

规避脱标流：

尽量使用标准流。

标准流解决不了的使用浮动。

浮动解决不了的使用定位。

   如设置右浮动，做外边距为auto，把盒子冲到右边。不用浮动。

        使用margin-left：auto；使盒子左侧充满。

        使用margin-right：auto；使盒子右侧充满。

        使用margin：0 auto；使盒子居中由来。

图片和文字垂直居中对齐：vertical-align对行内块最敏感。
               属性：baseline（基线对齐，默认）/ middle居中 /sub垂直对齐文本下标 / 文本上标super /顶端 top /末端bootom

                                                   

css可见性：

overflow:hidden;   溢出隐藏    

visibility:hidden;    隐藏元素，隐藏后还占据原来的位置

display:none;        隐藏元素，隐藏后不占据原来的位置

display:block;        元素可显示，可见

display:none  和display:block  常配合js使用。

内容移出：

  把某些固定资，如链接的字移除：使用text-indent缩进:-5000em;  （a没有宽高，转成行内块缩进，display：inline-block）

  当元素高度设置为0,使用内边距将盒子撑开，给盒子使用overflow:hidden可;将文字隐藏。

css精灵图：处理网页背景图像的方式

为了有效的减少服务器接受和发送请求的次数，提高页面的加载速度，出现了css精灵技术。

把很多小图放到同一个大图（精灵图）内，然后再调用。

想定位到某个小图，需css的background-image，background-repeat，background-position（关键）属性进行背景定位

 调用：width=‘图宽’  height=“图高”   background：url（“精灵图”）  -左x坐标.px   -右y坐标.px

制作精灵图：

fw背景透明，靠到左一列方便取用。

小背景图之间必须有间隙。

报错精灵图要保存为拼合png格式

属性选择器：

input[type=text] [class='pwd']{属性：值；}

选择标签，满足条件，从而选中。

emment语法：

emmet是我们在sublime中的一个插件在这个插件中集成很多的快捷键。

sublime下首选项→插件设置→emmet

html:

• 生成结构的快捷键：！+ tab,可以生成html5的结构代码。
• 生成id名和类名：标签名.类名#id名+tab            没有标签名.类名+tab ==>div
• 生成同级元素：标签名+标签名+标签名 “+”tab
• 生成子类标签：标签名>子标签名>子标签名>子标签名+tab
                           标签名>子标签名>子标签名>子标签名^^子标签名+tab
• 带固定数量的标签:ul>li*5+tab
• 带有序号名称：ul>li.abc$*3 + tab
• 生成带有内容的标签：ul>li>a{item}*5                            

css：

•   width:30px==>w30+tab
•   Height:30px==>h30+tab
•   Margin:30px==>mg30+tab
•   Padding:30px==> pd30+tab
•   Line-height:12px==>lh12px+tab
•   Background==>bg+tab