整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
SS 单位
1. 相对长度单位
相对长度单位指的是这个单位没有一个固定的值, 它的值受到其它元素属性(例如浏览器窗口的大小、父级元素的大小)的影响, 在响应式布局方面相对长度单位非常适用。下表中列举了 CSS 中支持的相对长度单位:
单位 描述 示例
em 相对于自身 font-size(字体大小)属性的值, 如果自身没有设置, 则继承父元素 font-size 属性的值, 1em 等同于 font-size 属性值, 例如 font-size 的值为 16px, 那么 1em 就等于 16px, 2em 就等于 32px p{line-height:2em;}
rem 相对于根元素<html>的 font-size 属性的大小, 比如根元素的 font-size 是 100px, 那么 1.2rem 就相当于 120px p{font-size: 1.2rem;}
ex 相对于所用字体中小写英文字母 x 的高度, 若无法确定 x 的高度则使用 0.5em 计算 p{font-size: 1ex;}
ch 相对于所用字体中数字 0 的高度, 若无法确定 0 的高度则使用 0.5em 计算 p{line-height: 3ch}
vw 相对于浏览器窗口的宽度, 1vw=窗口宽度的 1% p{font-size: 5vw;}
vh 相对于浏览器窗口的高度, 1vh=窗口高度的 1% p{font-size: 5vh;}
vmin vw 与 vh 中较小的值 p{font-size: 5vmin;}
vmax vw 与 vh 中较大的值 p{font-size: 5vmax;}
% 相对于父元素宽度或字体大小的百分比 div{width: 55%}
常用的单位: em、vw、vh、%
使用案例:
C 端网页设计对于很多从事 UI 行业的新人来说是一个充满未知的领域，对于怎么进行基本的画布创建，规格设置，都处于两眼一抹黑的状态。虽然这是因为多数人没有系统的学习 UI 知识，它并不是一个合理的现象。
接下来，我们会更新一些网页设计的干货，帮助更多 UI 设计师了解网页设计的基础知识。
首先，网页设计的第一步就是画布创建了，这也是困扰我们的第一个难题。由于市面上存在多种前端技术的应用，以及一些历史遗留问题、设计场景差异等因素的影响，我们在搜索「网页设计宽度」这类问题的时候，得到的结果会有非常多的版本，导致更加迷茫。
所以，了解网页设计的宽度定义，势必要理解它们的底层原因，因为宽度的设置：只有合适的宽度，没有绝对正确的宽度。
对于任何网页设计的项目，宽度设定的标准都是不同的，而在选择宽度的过程里，需要考虑 2 个核心因素：
1. 设备因素
设备因素即确认项目主要展示的屏幕设备是哪一种，它们对应的分辨率是多少。最粗略的划分，可以将设备划分成 PC 端和移动端。这两者受制与显示的尺寸，系统的限制，在设计和操作上都有比较大的区别。
浏览设备
浏览设备即网页用户所使用的屏幕类型，主要考量的标准是屏幕的分辨率（长宽像素数）。常见的 PC 屏幕分辨率有 1280×800、1600×900、1440×800、1366×768、1920×1080、2560×1440 等，再加上一些更加不常见的（比如 surfacebook 的 3000×2000），可以列出数十种，这是大家都已经知道的事情。
所以基于这个前提，很多人会去查找关于屏幕使用分辨率的统计表格，比如下图这种，然后得出最常用的分辨率是 1080P。有了数据支撑，我们不就可以开始动手设计了？
实际上这个做法是错误的。对于网页设计来说，我们首先应该确定的是──最小适配屏幕。
因为在一般场景下，显示器分辨率如果大于画布，内容可以被我们正常访问；如果小于画布，内容就会显示不全，相当于低于这个分辨率设备的用户被我们放弃了。
所以，做个简单的计算，如果以 1920×1080 为基础，则支持的用户数为 27.38 %；如果是 800×600，则支持用户数低于 3%。
这么考虑的话，我们是不是只要支持最小的分辨率即可？当然也不是。
在今天，1024 以下宽度的设备已经非常稀少，即便是 1024 本身，主流的设备也是平板而不是一般的 PC 电脑。当这些设备的数量低到成为绝对的非主流时，是可以选择忽略它们，以满足更多人的需要。
所以通常，我们最低支持的分辨率，不是 1024×768 就是 1280×800。如果大家不相信，可以去各类网站中，用 QQ 截图工具量一下主要内容区域的宽度，很难出现大于这两个数值的情况。
2. 展示类型
展示类型，也只有两点，即宽度适应屏幕，或者是定宽。
先说说第一种，可能有不少人已经听过响应式布局和自适应设计的大名，先不论它们有什么区别，它们代表了网页显示内容随浏览器窗口尺寸变化而变化的技术，比如使用 Bootstrap 架构的星巴克官网，更改浏览器窗口宽度后，可以得到以下不同的结果。
如果你现在还需要通过这篇内容学习网页宽度制定的情况下，我是不建议在真实项目中使用这种展示类型的。因为它们都需要对前端架构有一定的熟悉，以及对 CSS 的属性特性有基本认识，否则就无法在设计过程中直接考虑到其它分辨率下显示的效果，以及制定不同元素的自适应方式。
响应式设计的规则非常灵活，会受到更多因素的影响，完整的响应式界面设计会如上图所示，提供多种尺寸的设计图。常见的如 1920、1080、640 宽。
如果是定宽的设计，那么就回到前面所说，我们只需要以适配 1280 或 1024 的屏幕展开设计即可。但是，网页的实际内容区域，和我们要适配的范围是不同的。
在浏览器中，首先有右侧滚动条的因素影响，并且主体内容的两侧也要预留出内边距。
所以，我们真正创建的网页内容区域，是小于 1280 或者 1024 的。而得出具体的内容区域尺寸的方法，是通过网页的删格系统计算出来的。
网页删格系统是由平面网格系统衍生出来，针对网页使用的排版系统。如果稍微看过这类文章的同学都会看见一个公式：
（Axn）- i=W
这个做法就是通过将内容区域划分成若干内容块和间隔模块的方式，辅助我们排版。在本篇内容里不做具体介绍，只需要关注结果即可。
如果选择适配 1280，那么设计内容的区域宽通常为 1180、1190。而在适配 1024 下，那么内容区域宽常见的就有 950、970、990 等。当我们创建完完整分辨率的画布，再通过参考线的方式将内容区域规划出来即可。
对于网页设计来说，最重要的参数就是内容区域的宽度，但也有一些元素是例外，很多人可能发现网页有一些元素是超过正常的内容区域的（无论是对一般显示模式或是自适应模式），最常见的就是顶部的导航栏和底部的页脚区域。比如打开淘宝无论拉伸得多长，内容区域固定是 1190 宽，而导航栏却永远撑满整个浏览器。
所以，我们不会将这些内容的宽度计算在内，在设计稿中只要设计了这样的元素，和前端人员适当沟通和标注，就可以获得想要的效果。
总结
其实讲了一堆，最后我们用一个表格来总结一下。
关于 PC 端网页设计宽度的设定介绍到这里就结束了，如果有什么疑问，可以在评论区留言。
SS基础教程（上）成哥为大家介绍了CSS的基础知识及选择器，本篇文章主要介绍CSS的常用样式属性及伪类等内容，下面成哥就为大家一一介绍这些内容。
CSS的基础样式如下表所示：
下面我们主要讲解一下常用的样式。
（1）display样式
display属性有四个常用的值，用来修改标签的展示状态：
1）display:block，将标签设置为块级标签，块级标签独自占据一行高度，可以自定义width 和height，每个块级元素都从新一行开始，并且其后的元素都另起一行，常见的块级标签有div、h{number}、p、ul、table等；
2）display:inline，将标签设置为行内标签，行内标签会在一条直线上排列，不可以自定义自定义width和height，常见的行内元素有a、span等；
3）display:inline-block，将便签设置为行内块级标签（行内标签与块级标签的结合），可以自定义width和height，常见原生就是行内块级标签的有input、img标签；
4）display:none，隐藏标签，使用了该设置的标签在html页面中不显示。
下面我们对上述四种样式设置进行演示具体如下
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <meta charset="UTF-8">
5. </head>
6. <body>
7. <h4>块级标签示例</h4>
8. <!-- 我们将行内标签span设置为块级标签，最终效果设置成span效果的标签会独占一行，行内标签设置高度不生效，块级标签设置高度生效 -->
9. <span style="background-color: #2eabff; height: 40px;">我是span1,我是行内标签在同一行，设置高度没生效</span>
10. <span style="background-color: #722ed1; height: 60px;">我是span2,我是行内标签在同一行，设置高度没生效</span>
11. <span style="display: block; background-color: #87e8de; height: 50px;">我是span3,我被设置
12. 成块级标签我独占一行，设置高度生效</span>
13.
14. <h4>行内标签示例</h4>
15. <!-- 将块级标签div设置成行内标签，让其在同行显示, 并且对其设置高度不会生效 -->
16. <div style="display: inline; background-color: #722ed1; height: 50px;">我是div1,我被设置成行内标签，
17. 所以和div2在同行显示，设置高度没生效</div>
18. <div style="display: inline; background-color: #52c41a; height: 50px;">我是div2,我被设置成行内标签，
19. 所以和div1在同行显示，设置高度没生效</div>
20.
21. <h4>行内块级标签示例</h4>
22. <!-- 将div模块设置成行内块级标签，可以让其在同行显示，同时还可以设置高度 -->
23. <div style="display: inline-block;background-color: #a0d911;height: 60px;">我是div3,
24. 被设置成行内块级标签，可同行显示，设置高度生效</div>
25. <div style="display: inline-block;background-color: #aaaaaa;height: 50px;">我是div4,
26. 被设置成行内块级标签，可同行显示，设置高度生效</div>
27.
28. <h4>display:none示例</h4>
29. <span>我下面还有内容但被设置成display:none所以看不到，可以通过游览器页面内容debug中看到</span>
30. <div style="display: none">我被隐藏了</div>
31. </body>
32. </html> （2）高度与宽度样式
height与width是用于设置html标签的宽度与高度的，其设置的单位通常有像素与百分比。如果height需要设置成百分比，那需要在其外面套一个父标签并设置其高度才可以，因为html高度是无限制的所以直接使用是无效的。height与width属性的其具体使用如下所示：
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <meta charset="UTF-8">
5. <style>
6. .class1{
7. width: 300px;
8. height: 60px;
9. background-color: coral;
10. }
11. .class2{
12. width: 50%;
13. height: 10%;
14. background-color: #2aabd2;
15. }
16. </style>
17. </head>
18. <body>
19. <h4>height与width设置示例</h4>
20. <div class="class1">宽300像素，高60像素</div>
21.
22. <!-- 由于class2中使用了为百分比的高度，所以必须在其外加上父标签同时需要设置其高度 -->
23. <div style="height: 500px">
24. <div class="class2">宽50%，高10%</div>
25. </div>
26.
27. </body>
28. </html> （3）字体样式
CSS可以对HTML的字体类型、字体大小、字体粗细及字体颜色等维度进行设置，其具体示例如下所示：
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <meta charset="UTF-8">
5. <style>
6. .class1{
7. font-family: "Microsoft YaHei";
8. }
9. .class2{
10. font-size: 15px;
11. }
12.
13. .class3{
14. font-weight: bold;
15. }
16.
17. .class4{
18. color: red;
19. }
20. </style>
21. </head>
22. <body>
23. <h4>1.字体类型示例</h4>
24. <div class="class1">我是微软雅黑</div>
25.
26. <h4>2.字体大小示例</h4>
27. <div class="class2">大小：15px</div>
28.
29. <h4>3.字体粗细示例</h4>
30. <div class="class3">我被加粗了</div>
31.
32. <h4>4.字体颜色示例</h4>
33. <div class="class4">我是红色</div>
34.
35. </body>
36. </html> （4）文本样式
CSS的文本样式中最常用的属性就是对文本的对齐方式进行设置，在水平方向可以设置左、中、右对齐方式，在垂直方向可以设置上、中、下对齐方式，具体示例如下
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <meta charset="UTF-8">
5. <style>
6. .class1{
7. width: 300px;
8. height: 40px;
9. }
10.
11. </style>
12. </head>
13. <body>
14.
15. <h4>1.水平方向设置</h4>
16. <div class="class1" style="background-color: rosybrown;text-align: left;">左对齐</div>
17. <div class="class1" style="background-color: #2eabff;text-align: center;">居中</div>
18. <div class="class1" style="background-color: coral; text-align: right;">右对齐</div>
19.
20. <h4>2.垂直方向设置</h4>
21. <div class="class1" style="background-color: #b7eb8f;">默认文字在垂直方向是靠最上排列</div>
22. <!-- 垂直居中就是将line-height的值设置与高度一致 -->
23. <div class="class1" style="background-color: darkseagreen;line-height: 40px;">垂直居中</div>
24.
25. <h4>3.两个方向居中</h4>
26. <div class="class1" style="background-color: darkcyan;line-height: 40px;text-align: center">两个方向居中</div>
27.
28. </body>
29. </html> （5）内边距与外边距
在了解内外边距之前我们先了解一个模型即盒子模型，盒子模型就是把 HTML 页面中的元素看作是一个矩形的盒子，也就是一个盛装内容的容器。盒模型的宽度和高度和我们平常所说的物体的宽度和高度是不一样的。CSS 定义的宽和高，指的是填充以里的内容范围。而盒子的宽度=左外边距+左边框+左内边距+内容宽度+右内边距+右边框+右外边距。每个矩形都由元素的内容（content）、内边距（padding）、边框（border）和外边距（margin）组成，如下所示：
在了解了盒子模型后我们分别对内边距及外边距内容进行讲解。
1）内边距（padding）
padding内边距作用是为被应用的标签创建一部分内部间距。边距可以设置上、下、左、右方向。具体示例如下
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <meta charset="UTF-8">
5. <style>
6. .class1{
7. width: 300px;
8. height: 40px;
9. }
10.
11. </style>
12. </head>
13. <body>
14.
15. <h4>1.无内边距</h4>
16. <div style="height: 50px; width: 200px; border: 1px solid red; background-color: #b7eb8f">
17. <div>
18. CSS基础教程。
19. </div>
20. </div>
21.
22. <h4>2.有内边距</h4>
23. <!-- 设置一个宽200px,高50px的div，然后为其设置边框 -->
24. <div style="height: 50px; width: 200px; border: 1px solid red; background-color: #87e8de">
25. <!-- 内边距设置为10px,这边的10px表示上下左右都设置成10px, 可以使用padding-(top, bottom, left, right)只设置一边-->
26. <div style="padding: 10px;">
27. CSS基础教程。
28. </div>
29. </div>
30.
31. </body>
32. </html> 2）外边距（margin）
外边距用于相邻的标签之间增加距离用。边距可以设置上、下、左、右方向。具体示例如下
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <meta charset="UTF-8">
5. <style>
6. .class1{
7. width: 200px;
8. height: 30px;
9. }
10.
11. </style>
12. </head>
13. <body>
14.
15. <h4>1.无外边距</h4>
16. <div class="class1" style="background-color: #87e8de">div1</div>
17. <div class="class1" style="background-color: #46a6ff">div2</div>
18.
19. <h4>2.有外边距</h4>
20. <div class="class1" style="margin: 10px; background-color: #87e8de">div3</div>
21. <div class="class1" style="margin: 10px; background-color: #46a6ff">div4</div>
22.
23. </body>
24. </html> （6）float浮动
float浮动用于实现多个标签并排存放，一般用于块级标签，我们一般页面的横排目录都会用该属性来实现。float属性支持将标签设置为左浮动（float:left）与右浮动（float:right），具体示例如下
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <meta charset="UTF-8">
5. </head>
6. <body>
7. <h2>浮动示例</h2>
8. <div>
9. <div style="float:left;width: 100px;background-color: yellowgreen;">左浮动</div>
10. <div style="float: right;width: 100px;background-color: blue;">右浮动</div>
11. <!-- 在使用浮动后需要进行清除，不然就会脱离文档流，也就不会按照html固定的顺序进行排版 -->
12. <div style="clear: both;"></div>
13. </div>
14. </body>
15. </html> （7）定位（position）
position用于对屏幕上的标签进行定位，定位有三种类型分别为绝对定位（position：absolute;）、相对定位（position：relative;）与固定定位（position：fixed;），下面我们分别进行介绍
1）绝对定位
绝对定位一般以浏览器左上角为基准设置位置，但如果定位标签存在父标签且父标签存在定位设置则子标签以父标签的左上角为基准。绝对定位的具体示例如下
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <meta charset="UTF-8">
5. <style>
6. .class1 {
7. width: 100px;
8. height: 100px;
9. background-color: #46a6ff;
10. position: absolute;
11. left: 60px; /*相对于浏览器向左偏移60像素*/
12. top: 20px; /*相对于浏览器向上偏移20像素*/
13. }
14. </style>
15. </head>
16. <body>
17. <div class="class1">绝对定位</div>
18. </body>
19. </html> 2）相对定位
相对定位以元素自身的位置为基准设置位置，相对定位需要占用位置空间。通常父标签设置为相对定位，子标签设置为绝对定位，具体示例如下
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <meta charset="UTF-8">
5. <style>
6. .class1 {
7. width: 200px;
8. height: 100px;
9. /* 父标签设置相对定位 */
10. position: relative;
11. background-color: #aaaaaa;
12. }
13. .class2 {
14. width: 80px;
15. height: 50px;
16. position: absolute;
17. /* 子标签设置绝对定位 */
18. background-color: #46a6ff;
19. top: 20px;
20. left: 30px;
21. }
22. </style>
23. </head>
24. <body>
25. <div class="class1">
26. <div class="class2">我是子标签</div>
27. </div>
28. </body>
29. </html> 3）固定定位
固定定位表现类似于绝对定位，两者主要区别是绝对定位是以html的元素进行定位的，而固定定位是以游览器窗口进行定位。具体使用示例如下
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <meta charset="UTF-8">
5. <style>
6. .class1 {
7. width: 100px;
8. height: 100px;
9. background-color: #46a6ff;
10. position: fixed;
11. top: 100px;
12. left: 80px;
13. }
14. </style>
15. </head>
16. <body>
17. <div class="class1">固定定位</div>
18. </body>
19. </html> hover伪类作用：当鼠标放在标签上时，可以能够设置一些样式。
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <meta charset="UTF-8">
5. <style>
6. .class1 {
7. background-color: #46a6ff;
8. }
9.
10. .class1:hover {
11. background-color: #722ed1;
12. }
13.
14. </style>
15. </head>
16. <body>
17. <h4>伪类示例</h4>
18. <div class="class1">将鼠标放在我上面，将会变色</div>
19. </body>
20. </html> 至此我们《CSS基础教程》就讲完了，如有任何问题欢迎在文章后面进行留言。最后如果喜欢本篇文章不要忘了点赞、关注与转发哦！
-END-
@IT管理局专注计算机领域技术、大学生活、学习方法、求职招聘、职业规划、职场感悟等类型的原创内容。期待与你相遇，和你一同成长。
文章推荐：
*请认真填写需求信息，我们会在24小时内与您取得联系。
