day7,vertical-align,显示与隐藏 ,圆角 边框,透明度及兼容,ps常用工具,项目规范,icon怎么用
day 07
知识回顾
1、相对定位是相对于什么进行定位的？
相对于自己原来的位置进行定位的
2、绝对定位是相对于什么进行定位的？
相对于定位父元素来进行定位的
3、行级元素支持宽高的属性有哪些？
- 左浮或者右浮
- 绝对定位 | 固定定位
display：blockdisplay：inline-block
4、固定定位是相对于什么进行定位的？
相对于浏览器窗口进行定位的
5、使用定位实现盒子水平垂直居中的关键代码（两种）
（1）margin负值实现盒子的绝对居中
（2）margin:auto实现盒子的绝对居中
6、哪些元素可以设置z-index
设置了相对定位、绝对定位和固定定位的元素可以设置z-index
7、浮动与定位异同点有哪些？
可以脱离文档流的属性： 左浮、右浮、绝对定位、固定定位
不同点：
-
浮动脱离文档流，不脱离文本流
-
定位既脱离文档流，又脱离文本流
8、列举常见的表单元素（至少5个）
<input type="text"> /*单行文本框*/
<input type="image"> /*图片提交按钮*/
<input type="radio"> /*单选框*/
<input type="password"> /*密码框*/
<input type="submit"> /*提交按钮*/
<input type="checkbox"> /*多选框*/
9、设置单选框与多选框的默认选中用什么属性
checked属性
10、设置下拉列表的默认选中用什么属性
selected属性
一、其他常用属性
1、vertical-align
设置元素的垂直对齐方式，对于行级元素和行块级元素生效
vertical-align:baseline | top | bottom | middle;
（1）常用属性值
- baseline 基线，将标签放在父元素的基线上（默认值）
- top 顶部对齐，将标签与父元素内最高标签的顶端对齐
- bottom 底部对齐，将标签与父元素内最低标签的底部对齐
- middle 居中对齐，将标签放在父元素的中间
（2）解决的问题
-
图片下间隙问题
盒子中放置一张图片，图片与盒子之间会有一个空白间隙
<div class="box"> <img src="./images/timg.jpg" alt=""> </div>img { width: 300px; } .box { border: 1px solid red; }解决方案：
- 给图片设置垂直对齐，值不为baseline就可以解决
.box>img { vertical-align: middle; vertical-align: top; vertical-align: bottom; }- 给图片转块
display:block
.box2>img { display: block; }- 给图片的父元素设置
font-size:0
.box3 { font-size: 0; } -
文本框与按钮不对齐现象
文本框与按钮之间高度不一致，有空白间隙，对不齐等现象
解决方案1：
- 给文本框与按钮统一高度（height:20px），文本框显示的高度为26像素，按钮显示的高度为20像素
- 调整按钮的高度为26像素
- 空白间隙是因为行级元素及行块级元素水平排列时有间隙
- 给文本框与按钮添加垂直对齐方式，值不为baseline即可
<form class="form1" action="#">
<!-- 文本框 -->
<input type="text"><input type="submit" value="提交">
</form>
<style>
.form1 input{
height: 20px;
vertical-align: middle;
vertical-align: top;
vertical-align: bottom;
}
/* 属性选择器 */
input[type="submit"] {
height: 26px;
}
</style>
解决方案2：
先解决高度不一致问题（同上）
解决空白间隙和对不齐问题时，直接给文本框与按钮设置浮动即可
.form2 input {
float: left;
height: 30px;
border: 1px solid red;
}
.form2 input[type="submit"] {
height: 34px;
}
2、显示与隐藏
（1）display属性
display：none隐藏（元素的占位空间不存在了）display:block显示
（2）visibility属性
visibility:hidden隐藏（元素占位空间依然存在，相当于六娃"隐身"）visibility:visible显示
（3）opacity属性
opacity:0隐藏（元素透明，占位空间依然存在）opacity:1显示
3、border-radius
圆角属性
（1）单边圆角的设置
设置左上角的圆角
border-top-left-radius：px | %;
.box1 {
background: pink;
/* 单边圆角 */
/* 左上角圆角 */
border-top-left-radius: 20px;
/* 右上角 */
border-top-right-radius: 50%;
/* 右下角 */
border-bottom-right-radius: 100px;
}
（2）复合用法
border-radius: 一个值 | 两个值 | 三个值 | 四个值;
.box2 {
background-color: aqua;
/* 一个值： 四个角的圆角都是50% */
border-radius: 50%;
}
.box3 {
background-color: palevioletred;
/* 两个值： 左上角和右下角圆角都是100像素，左下角和右上角的圆角是60像素 */
border-radius: 100px 60px;
}
.box4 {
background-color: yellow;
/* 三个值： 左上角圆角是100像素，左下角和右上角的圆角是60像素，右下角是40像素的圆角 */
border-radius: 100px 60px 40px;
}
.box5 {
background-color: green;
/* 四个值： 左上角圆角是100像素，右上角的圆角是60像素，右下角是40像素,左下角的圆角是20像素 */
border-radius: 100px 60px 40px 20px;
}
二、透明度属性及兼容
1、rgba()
主要用于background-color、color、border-color等属性的设置
alpha参数的取值是0-1，0代表是透明，1代表不透明，0-1代表半透明效果
兼容性：ie9+及标准浏览器最新版下是支持的
2、opacity属性
opacity：x;
x取值0-1之间，0代表透明，1代表不透明，0-1代表半透明效果
opacity属性如果设置给父元素，不仅父元素会有透明的效果，连下面的子孙后代的元素也会拥有透明度效果
主要用于整个图片或者整个模块的整体透明
兼容性：ie9+及标准浏览器最新版下是支持的
3、IE专属滤镜（解决opacity兼容）
filter:Alpha(opacity=x)
x取值是0-100之间，0代表透明，100代表不透明，0-100之间表示半透明效果
IE专属属性，问题比较多，比如：
- 如果filter属性在ie6、7下不生效，可以添加以下代码：
*zoom：1;
- 如果只想让父元素拥有背景透明，而子孙后代的元素不拥有透明度效果，可以给父元素设置静态定位，再给子元素设置相对定位，就可以实现子元素不透明的效果
.box2 {
position: static;
width: 500px;
height: 300px;
background-color:rgb(0,0,0);
opacity: 0.3;
/* opacity在ie6,7,8不兼容 */
filter: Alpha(opacity=30);
}
.box2>p {
position: relative;
}
三、ps常用工具
1、移动工具
移动工具主要负责图层、选区、等的移动、复制操作
快捷键：v
2、抓手工具
快捷键：h
空格+鼠标左键拖动，空格键可临时转换为抓手工
3、放大镜工具
放大镜工具可以放大或缩小图像。
放大：
-
点击放大工具，点击图像。
-
Ctrl+加号。
-
按住alt+鼠标滚动滚轮。
缩小：
- 点击缩小工具，点击图像。
- Ctrl+减号。
- 按住alt+鼠标滚动滚轮。
4、文字工具
快捷键：t
5、吸管工具
快捷键：i
吸管工具可以用于拾取图像中某个位置的颜色，一般用来取前景色或用该颜色填充某个选区，或者取色用绘图工具（如画笔工具、铅笔工具等）来绘制图形。
6、标尺工具
吸管工具组内切换找到标尺工具
标尺工具可以用来测量图像的高度或者宽度
测量的方式：
使用选框工具和参考线进行测量
选框工具的快捷键是m
参考线需要先调出标尺，视图----标尺，需要将标尺的单位调成像素
7、颜色叠加
颜色叠加可以将原有颜色改变为指定颜色，并通过调整其混合模式和不透明度来控偶之颜色叠加的效果，也能够更加完善图片的色彩度，使图片变为指定的某一种颜色
8、切片工具
快捷键：c
根据用户需求截出图片中的任何一部分，同时一张图上可以切多个地方。另存为web所用格式的时候能将所切的各个部分分别保存成一张图片，完全区分开来。保存时可选择图片格式以及切片类型。
四、常见图片格式及特点
五、项目规范
1、项目文件夹的创建
首页的命名以index.html，其他页面按照功能进行命名（英文）
2、重置样式表（reset.css的作用）
因为浏览器的兼容问题，不同浏览器对某些标签默认值的解析是不同的，如果没对 CSS 初始化往往会出现不同浏览器之间的页面显示差异。为了避免这种差异需要使用样式重置。
3、页面TDK
TDK 是一个缩写，其中“T”表示为网页定义标题，“D”表示为网页定义描述 description，“K”表示为搜索引擎定义关键词 keywords。
<title> 标题：只强调重点即可，尽量把重要的关键词放在前面，关键词不要重复出现，尽量做到每个页面的 <title> 标题中不要设置相同的内容。
<meta keywords> 标签：关键词，列举出几个页面的重要关键字即可，切记过分堆砌。
<meta description> 标签：网页描述，需要高度概括网页内容，切记不能太长，过分堆砌关键词，每个页面也要有所不同。
<!-- 网页的标题 -->
<title>小u商城--正品低价、品质保证、无中间商赚差价</title>
<!-- 网页描述 -->
<meta name="description" content="小u商城-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物体验!">
<!-- 网页关键词 -->
<meta name="keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡">
4、icon图标
引用icon图标
在vs code中使用快捷键 link:favicon+tab，修改href中的路径即可
<link rel="shortcut icon" href="./bitbug_favicon.ico" type="image/x-icon">
5、合理嵌套HTML标签
合理嵌套 HTML 标签，ul 和 li 是固定嵌套，ul 直接子元素必须是 li，dl 和 dt、dd 是固定嵌套，dl 的直接子元素必须是 dt 和 dd。p 标签不允许嵌套 p 标签。a 标签不允许嵌套 a 标签和其他交互性元素，比如 button。
尽可能的控制元素嵌套层级，不合理的嵌套会影响页面性能。
6、css书写顺序
建议遵循 : 布局定位属性 –> 自身属性 –> 文本属性 –> 其他属性。也可根据自身习惯书写，但尽量保证同类属性写在一起。
布局定位属性主要包括：display、 position（相应的 top、right、bottom、
left）、float 等。
自身属性主要包括 : width 、height 、background、 margin 、 padding 和 border 等。
文本属性主要包括：color、font、text-decoration、text-align、vertical-align 等
六、iconfont的使用
1、下载至本地，解压文件夹
2、在项目文件夹中创建fonts文件夹，将解压文件夹中的以下文件复制到fonts文件夹中
.eot .woff .woff2 .svg .ttf
3、将iconfont.css文件复制到css文件夹中去
4、修改iconfont.css中的字体路径，如下：
5、将iconfont.css文件引入到当前html中
6、使用
