day7,vertical-align,显示与隐藏 ,圆角 边框,透明度及兼容,ps常用工具,项目规范,icon怎么用

day 07

知识回顾

1、相对定位是相对于什么进行定位的？

相对于自己原来的位置进行定位的

2、绝对定位是相对于什么进行定位的？

相对于定位父元素来进行定位的

3、行级元素支持宽高的属性有哪些？

• 左浮或者右浮
• 绝对定位 | 固定定位
• display：block
• display：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 {
       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;
     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图标

官网：http://www.bitbug.net/

引用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、使用