前端学习历程4

css

文本属性 

个数	属性	描述	说明
1	font-size	字体颜色	单位是px，浏览器默认是16px，设计图常用字号12px
2	font-family	字体	当字体是中文字体、英文字体中有空格时，需加双引号； 多个字体中间用逗号链接，先解析第一个字体，如果没有解析第二个字体，以此类推
3	color	颜色	color:red;color:#ff0;color:rgb(255,0);0-255
4	font-weight	加粗	font-weight:bolder(更粗的)/bold(加粗)/normal(常规) font-weight:100-900;100-500不加粗  600-900加粗
5	font-style	倾斜	font-style:italic（斜体字）/oblique（倾斜的文字）/normal（常规显示）
6	text-align	文本水平对齐	text-align:eft；水平靠左 text-align:right；水平靠右 text-align:center；水平居中 text-align:justify；水平两端对齐，但只对多行起作用。
7	line-height	行高	line-height的数据=height的数据，可以实现单行文本垂直居中
8	text-indent	首行缩进	text-indent可以取负值；text-indent属性只对第一行起作用
9	letter=spacing	字间距	控制文字和文字之间的间距
10	text-decoration	文本修饰	text-decoration：none没有/underline下划线/overline上划线/lin-through删除线
11	font	文字简写	font是font-style font-weight font-size/line-height font-family的简写。 font：italic 800 30px/80px"宋体"；顺序不能改变，必须同时指定font-size和font-family属性时才起作用。

 列表属性

个数	属性	描述	说明
1	list-style-type	定义列表符合样式	list-style-type：disc（实心圆）/circle（空心圆）/square（实心方块）/none（去掉符号）
2	list-style-image	将图片设置为列表符合样式	list-style-image：url();
3	list-style-position	设置列表项标记的放置位置	list-style-position:outside;列表的外面 默认值 list-style-position：inside;列表的里面
4	list-style	简写	list-style:none;去除列表符号

  背景属性

个数	属性	描述	说明
1	background-color	背景颜色	background-color:red
2	background-image	背景颜色	background-image:url();
3	background-repeat	背景图片的平铺	background-repeat:no-repeat/repeat/repeat-x/repeat-y;
4	background-position	背景图片的定位	background-position:水平位置 垂直位置；可以给负值
5	background-attachment	背景图片的固定	background-attachment：scroll（滚动）/fixed（固定，固定在浏览器窗口里面，固定之后就相对于浏览器窗口了）
可以简写成background

浮动属性

个数	属性	描述	说明
1	float	float：left;	元素靠左浮动
2	float	float：right;	元素靠右浮动
3	float	float：none;	元素不浮动
浮动的作用1：	定义网页中其它文本如何环绕改元素显示
浮动的作用2：	就是让竖着的东西横着来

清浮动

个数	属性	描述	说明
1	clear	clear：none；	允许有浮动对象
2	clear	clear：right；	不允许右边有浮动对象
3	clear	clear：left；	不允许左边有浮动对象
4	clear	clear：both	不允许有浮动现象
清除浮动只是改变元素的排列方式，该元素还是漂浮着，不占据文档位置。

盒子模型

盒模型是CSS布局的基石，它规定了网页元素如何显示以及元素间相互关系。CSS定义所有的元素都可以拥有像盒子一样的外形和平面空间，即都包含边框、边界、补白、内容区、这就是盒模型。       

---

ps基本操作（ps美工来作图，前端来测量、吸取颜色 切图）

在拿到设计稿之后：使用ps打开 1.图片上面右键-====打开方式ps         2.ps里文件——>打开                                                                                        图片放大和缩小：ctrl++   ctrl+-  alt+滚动                                                                                                                                                                        图片的移动：按住空格，鼠标变为小手，拖动图片                                                                                                                                                            如何调整出来标尺：ctrl+r  作用：拖动参考线方便测量   视图里面找到标尺，把对勾勾上                                                                                                 测量图片大小：使用矩形选框工具     如何查看数据大小（窗口------信息面板------wh）     如何修改测量单位：在标尺上面右键取修改单位===像素     ctrl+d===取消选区        选完之后，想调整大小，可以右键->变换选区                                                                                                                              吸取颜色：使用吸管工具，吸取颜色完成后，点击左下角的背景色，会右弹窗，在弹窗里面右#十六进制的颜色可以让你复制                                         截图1.使用快捷键截图===每次只能截取一个  使用选框工具框选尼亚截取的区域  ctrl+c====ctrl+n=====回车=====ctrl+v======ctrl+s    回车====回车              2.切片工具（裁剪工具进行切换）使用切片工具框选你要留住的区域，点击文件，存储为web所用格式，弹窗里面点击存储。   弹窗====格式：仅限图像，切片：所有用户切片。