七、vertical-align属性、透明度属性及兼容、ps常用工具、常见的图片格式、项目规范、命名参考、iconfont的使用

此文转载自：https://blog.****.net/qq_52426181/article/details/110228561

1、vertical-align属性

设置元素的垂直对齐方式，适用于行级元素、行块级元素。

（1）语法

vertical-align: top | bottom | middle | baseline;

top 顶部对齐，将元素与父元素中最高的元素的顶部对齐
bottom 底部对齐，将元素与父元素中最低的元素的底部对齐
middle 居中对齐，将元素放在父元素的中间
baseline 基线对齐，将元素放置在父元素的基线的位置上（默认值）

（2）解决问题

图片下间隙问题

解决方案一：给图片设置vertical-align属性，值不为baseline就可以了

.box {
    width: 640px;
    border: 1px solid red;
}
.box1 img {
    /* vertical-align: baseline; */
    vertical-align: top;
    vertical-align: bottom;
    vertical-align: middle;
}

解决方案二：给图片转块

.box2 img {
    display: block;
}

解决方案三：给图片的父元素设置font-size为0

.box3 {
    font-size: 0;
}

文本框与按钮不对齐问题

解决方案一：给input设置vertical-align属性，值不为baseline就可以了

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .form1 input {
            height: 30px;
            border: 1px solid red;
            vertical-align: top;
            vertical-align: bottom;
            vertical-align: middle;
        }
        /* 属性选择器   element[attr=value] */
        .form1 input[type="submit"] {
            height: 34px;
        }
    </style>
</head>
<body>
    <form action="#" class="form1">
        <input type="text"><input type="submit">
    </form>
</body>
</html>

解决方案二：给input标签设置左浮动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
       /*清浮动*/
        .clearfix::after {
            content: "";
            display: block;
            clear: both;
        }
        .clearfix {
            *zoom: 1;
        }
        .form2 input {
            float: left;
            height: 20px;
            border: 1px solid blue;
        }
        .form2 input[type="submit"] {
            height: 24px;
        }
    </style>
</head>
<body>
    <form action="#" class="form2 clearfix">
        <input type="text">
        <input type="submit">
    </form>
</body>
</html>

2、border-radius属性

（1）单边圆角的设置

border-top-left-radius                 左上角的圆角
border-bottom-right-radius             右下角的圆角

（2）复合写法

border-radius:一个值 | 两个值 | 三个值 | 四个值;

一个值：代表四个角的圆角

两个值：第一个值是代表左上和右下，第二个值是右上角和左下角的圆角

三个值：第一个是左上角，第二个值是右上和左下角的圆角，第三个值是右下角的圆角

四个值：第一个值是左上角，第二个值是右上角，第三个值是右下角，第四个值是左下角的圆角

3、显示与隐藏

（2）visibility属性

hidden 隐藏（元素隐藏，但是占位空间存在的，“隐身”效果）
visible 显示

二、透明度属性及兼容

1、rgba()

a-----alpha参数，取值0-1之间取值，0代表完全透明，1代表完全不透明，0-1之间是半透明效果
主要用于设置background-color、color、border-color等
兼容性：ie6、7、8不兼容的，ie9+及标准浏览器最新版是支持的

2、opacity属性

opacity:x;

x取值是0-1，0代表完全透明，1代表完全不透明，0-1之间是半透明效果
主要用于设置整个模块的透明度，或者图片透明度的调整
opacity如果设置在父元素身上，不仅自己会拥有透明度的效果，同时下面的所有后代元素也会拥有透明度的效果
兼容性：ie6、7、8不兼容的，ie9+及标准浏览器最新版是支持的

3、IE专属滤镜

filter:Alpha(opacity=x)

x的取值0-100之间取值，0代表完全透明，100代表完全不透明，0-100之间是半透明效果
兼容性： ie6、7、8、9下支持，ie10被废除了

注意：

ie专属属性，问题比较多

如果在ie6和ie7中设置filter属性不生效，加以下代码
```
*zoom:1;          /*激活ie浏览器的haslayout*/
```

如果父元素拥有透明度效果，但是子元素没有透明度效果时，可以给父元素设置静态定位（static），给不拥有透明度效果的这个子元素设置相对定位（relative）

.box3 {
    position: static;
    width: 500px;
    height: 300px;
    background-color: rgb(255,0,0);
    opacity: 0.5;
    filter:Alpha(opacity=50);
}
.box3 p {
    position: relative;
}
.box3 img {
    position: relative;
}

三、ps常用工具

1、移动工具

移动工具主要负责图层、选区、等的移动、复制操作

快捷键：v

原位复制： ctrl+j

移动复制： alt不松手，鼠标拖拽就可以

2、放大镜工具

放大镜工具可以放大或缩小图像。

放大：

点击放大工具，点击图像。
Ctrl+加号。
按住alt+鼠标滚动滚轮。

缩小：

点击缩小工具，点击图像。
Ctrl+减号。
按住alt+鼠标滚动滚轮。

5、吸管工具

快捷键：i

吸管工具可以用于拾取图像中某个位置的颜色，一般用来取前景色或用该颜色填充某个选区，或者取色用绘图工具（如画笔工具、铅笔工具等）来绘制图形。

6、标尺工具

找到吸管工具，组内切换就可以找到标尺工具了

标尺工具可以用来测量图像的高度或者宽度

7、切片工具

快捷键：c

根据用户需求截出图片中的任何一部分，同时一张图上可以切多个地方。另存为web所用格式的时候能将所切的各个部分分别保存成一张图片，完全区分开来。保存时可选择图片格式以及切片类型。

存储为web所有格式： ctrl+ shift+alt+s 选中的切片

四、常见的图片格式

.jpg  .png

五、项目规范

1、reset.css（样式重置）的作用

因为浏览器的兼容问题，不同浏览器对某些标签默认值的解析是不同的，如果没对 CSS 初始化往往会出现不同浏览器之间的页面显示差异。为了避免这种差异需要使用样式重置。

哪些样式需要重置？

3、icon图标

在浏览器中打开某一个网页时，会在浏览器的标签栏处显示该网页的图标和标题，当网页被添加到收藏夹或者书签中时也会出现网页的图标。

icon图标转换工具：http://www.bitbug.net/

favicon.ico一般用于作为缩略的网站标志,它显示位于浏览器的地址栏或者在标签上,用于显示网站的logo,如图红圈的位置，目前主要的浏览器都支持favicon.ico图标.

在html页面中引入icon图标

vs code中使用link:favicon+tab生成，修改href里面的路径就可以了

<!-- 引入icon图标 -->
<link rel="shortcut icon" href="./images/favicon.ico" type="image/x-icon">

4、合理嵌套HTML标签

合理嵌套 HTML 标签，ul 和 li 是固定嵌套，ul 直接子元素必须是 li，dl 和 dt、dd 是固定嵌套，dl 的直接子元素必须是 dt 和 dd。

p 标签不允许嵌套 p 标签。a 标签不允许嵌套 a 标签和其他交互性元素，比如 button。

尽可能的控制元素嵌套层级，不合理的嵌套会影响页面性能。

建议遵循 : 布局定位属性 –> 自身属性 –> 文本属性 –> 其他属性。也可根据自身习惯书写，但尽量保证同类属性写在一起。
布局定位属性主要包括：display、 position（相应的 top、right、bottom、
left）、float 等。
自身属性主要包括 : width 、height 、background、 margin 、 padding 和 border 等。
文本属性主要包括：color、font、text-decoration、text-align、vertical-align 等

六、命名参考

登录条：loginBar

标志：logo

侧边栏：sideBar

广告：banner

子导航：subNav

导航：nav

菜单：menu

子菜单：subMenu
搜索：search

滚动：scroll

页面主体：main

内容：content
标签页：tab

文章列表：list

提示信息：msg

小技巧：tips

栏目标题：title

加入：joinus

指南：guild

服务：service

热点：hot

新闻：news

按钮：btn

投票：vote

状态：status

合作伙伴：partner

外套：wrap

商标：label

标题：title

顶导航：topnav

左导航：leftsideBar

横幅：banner

右导航：rightsideBar

子菜单：subMenur

注释：note

版权：copyRight

菜单内容： menuContent

友情链接：friendLink

页脚：footer

菜单容器：menuContainer

当前：current

激活：acitve

边导航图标：sidebarIcon

购物车：shop

搜索：search

下载：download

登陆：login

容器：container

面包屑：breadCrumb

七、iconfont的使用

阿里巴巴矢量图标库

1、使用步骤：

下载代码后的操作步骤：

需要将下载好的文件夹中的后缀名为.eot .ttf .woff .woff2 .svg的5个文件复制到项目文件中的fonts中
将下载好的文件夹中的iconfont.css文件复制到项目css文件夹中
将iconfont.css文件中的字体路径修改成正确路径即可
在html中引入iconfont.css

直接使用

unicode

font class

<!-- unicode -->
<p class="iconfont text">&#xe685;</p>
<div class="iconfont">&#xe613;</div>
<!-- font class -->
<b class="iconfont icon-dingwei"></b>

七、vertical-align属性、透明度属性及兼容、ps常用工具、常见的图片格式、项目规范、命名参考、iconfont的使用

1、vertical-align属性

（1）语法

（2）解决问题

2、border-radius属性

（1）单边圆角的设置

（2）复合写法

3、显示与隐藏

（1）display属性

（2）visibility属性

（3）opacity属性

二、透明度属性及兼容

1、rgba()

2、opacity属性

3、IE专属滤镜

三、ps常用工具

1、移动工具

2、放大镜工具

3、抓手工具

4、文字工具

5、吸管工具

6、标尺工具

7、切片工具

四、常见的图片格式

五、项目规范

1、reset.css（样式重置）的作用

2、页面tdk

3、icon图标

4、合理嵌套HTML标签

5、css书写顺序

六、命名参考

七、iconfont的使用

七、vertical-align属性、透明度属性及兼容、ps常用工具、常见的图片格式、项目规范、命名参考、iconfont的使用

相关推荐