Css基础
复习昨天知识
1、Css书写位置
◆内嵌
<head>
<style type=”text/css”>
样式表内容
</style>
</head>
◆外链
<link rel=”stylesheet” href=”1.css”>
◆行内样式表
<div style=”font-size:20px;”></div>
2、标签分类（显示方式）
◆块元素
典型代表： div,p,h1-h6,li,.....
★独占一行
★可以设置宽高
★没有定义宽度时，宽度为父集元素的宽度
◆行内元素
典型代表：span,a,strong,em,del......
★在一行显示
★不能直接设置宽高
★宽高为内容撑开的宽高
◆行内块元素
典型代表:img,input
★在一行上显示
★可以设置宽高
3、元素转换
display:block; 行内转块
Display:inline; 块转行内
Display:inline-block; 块或行内转行内块
4、Css三大特性
◆层叠性
样式发生冲突的时候，总是执行后边的样式，和调用顺序无关。
◆继承性
★文字的所有属性都可以被继承
-特殊：h1-h6 文字大小不能被继承
a标签文字颜色不能被继承
◆优先级
默认样式<标签选择器<类选择器<id选择器<行内样式<!important
0 1 10 100 1000 1000以上
★继承的权重为0
★权重会叠加
5、链接伪类
a:link{属性:值;} 链接默认状态 a{属性:值;}是一样的
a:visited{属性:值;} 链接访问之后的状态
a:hover{属性:值;} 鼠标放上去显示的状态
a:active{属性:值;} 链接激活的状态
:focus{属性:值;} 获取焦点
注意:如果四个链接伪类都使用，按顺序书写。
6、背景
background-color 背景颜色
background-image:url(“1.png”); 背景图片
background-repeat: repeat | no-repeat | repeat-x | repeat-y
background-position left | right | center | top | bottom
Background -attachment scroll | fixed
二、行高
◆浏览器默认文字大小
浏览器默认文字大小：16px
行高：是基线与基线之间的距离
行高=文字高度+上下边距
一行文字行高和父元素高度一致的时候，垂直居中显示。
1、行高的单位
| 行高单位 | 文字大小 | 值 |
| 20px | 20px | 20px |
| 2em | 20px | 40px |
| 150% | 20px | 30px |
| 2 | 20px | 40px |
总结:单位除了像素以为，行高都是与文字大小乘积。
| 行高单位 | 父元素文字大小 | 子元素文字大小 | 行高 |
| 40px | 20px | 30px | 40px |
| 2em | 20px | 30px | 40px |
| 150% | 20px | 30px | 30px |
| 2 | 20px | 30px | 60px |
总结:不带单位时，行高是和子元素文字大小相乘，em和%的行高是和父元素文字大小相乘。行高以像素为单位，就是定义的行高值。
◆推荐行高使用像素为单位。
2、盒子模型
边框 border
Border-top-style: solid 实线
dotted 点线
dashed 虚线
Border-top-color 边框颜色
Border-top-width 边框粗细
◆边框属性的连写
特点：没有顺序要求，线型为必写项。
◆四个边框值相同的写法
特点：没有顺序要求，线型为必写项。
2.2、边框合并 border-collapse:collapse;
2.3、获取焦点
label for id 获取光标焦点
2.4、内边距
Padding-left | right | top | bottom
◆padding连写
Padding: 20px; 上右下左内边距都是20px
Padding: 20px 30px; 上下20px 左右30px
Padding: 20px 30px 40px; 上内边距为20px 左右内边距为30px 下内边距为40
Padding: 20px 30px 40px 50px; 上20px 右30px 下40px 左 50px
◆内边距撑大盒子的问题
影响盒子宽度的因素
内边距影响盒子的宽度
边框影响盒子的宽度
盒子的宽度=定义的宽度+边框宽度+左右内边距
◆继承的盒子一般不会被撑大
包含（嵌套）的盒子，如果子盒子没有定义宽度，给子盒子设置左右内边距，一般不会撑大盒子。
2.5、外边距
margin-left | right | top | bottom
◆外边距连写
Margin: 20px; 上下左右外边距20PX
Margin: 20px 30px; 上下20px 左右30px
Margin: 20px 30px 40px; 上20px 左右30px 下 40px
Margin: 20px 30px 40px 50px; 上20px 右30px 下40px 左50px
◆垂直方向外边距合并
两个盒子垂直一个设置上外边距，一个设置下外边距，取的设置较大的值。
◆嵌套的盒子外边距塌陷
解决方法: 1 给父盒子设置边框
2给父盒子overflow:hidden; bfc 格式化上下文
http://www.w3cplus.com/css/understanding-bfc-and-margin-collapse.html
4、Fireworks的基本使用
新建文件 ctrl+n
打开文件 ctrl+o
调出和隐藏标尺 ctrl+r
清除辅助线： 视图---辅助线----清除辅助线
放大镜 z 放大镜状态下alt+鼠标左键 缩小
抓手 快捷键 空格
测量距离 ★先拉出2根辅助线
★切换到指针工具
★将光标放到2根辅助线之间，按住shift键
如果有疑问联系博主：y19970821ywty
要用到的工具，视频教程，关注公众号（Java学习之乐）直接免费获取：
4370
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
