最后一篇总结啦，才发现分享到微信的链接会挂，不知道为啥，显示有诱导信息啥的，诱导什么？学习吗？[Doge]

总之还是要有始有终～确定js的总结不会再使用这个平台啦，GitHub见，嘻嘻～

这篇总结内容包括背景、表格和表单、定位以及响应式设计。

---

1.背景

背景相关的样式用的比较多，在css3前添加阴影效果可以用背景相关属性加上定位显示出来，圆角就只能是一开始切图设计稿为圆角，作为图片或者背景图片显示，基于此新增添的阴影和圆角功能也总结在背景相关属性中。

background-color

background-image

background-repeat

background-position

background-attachment

background-clip

background-origin

background-size:设置背景图片大小

background （简写属性）

（1）background-color  用以设置背景颜色，写rgb值和十六进制值都可以。

（2）background-image 来设置背景图和背景渐变色，可选值：

1）background-image：url(xx.jpg) 使用相对路径引入图片

-如果背景图片大于元素大小，则图片默认会显示左上角的部分

-如果背景图片小于元素大小，则会默认平铺图片充满元素

-可以同时设置背景颜色和背景图片，背景颜色作为图片的底色，一般都会同时设置，图片没加载出时显示颜色

2）linear-gradient（color1，color2，color3...） 

线性渐变默认从上至下，在颜色前加上方向可以指定渐变的方向，指定角度可以改变渐变角度，例子：

background-image:linear-gradient（to right, red, yellow） 渐变就会从左到右，从红色渐变为黄色

background-image:linear-gradient（45deg, red, yellow） 渐变从红色渐变为黄色,方向旋转45度

渐变可以同时指定多个颜色，多个颜色默认情况下平均分布，也可以指定开始渐变的位置，例子：

background-image：linear-gradient（red 50px，yellow  100px） 

表示50px以上的位置是红色纯色，从50px以下位置开始向黄色渐变到100px位置，之后是黄色纯色

3）repeating-linear-gradient 可以平铺线性渐变，按指定数值的差值重复

4）background-image：radial-gradient（color1，color2，color3...）

径向渐变，默认情况下，径向渐变形状根据元素的形状来计算的，在元素中心开始径向渐变。可以手动指定径向渐变的大小；也可以指定径向开始的位置

例子：

background-image：radial-gradient（100px 100px， red，  yellow ）

表示径向渐变大小是100*100px，其余空间则显示黄色

background-image：radial-gradient（100px 100px at 0 0, red,  yellow ）

at 后面可以指定位置，表示径向渐变开始的位置，大小也可以不写，直接at后写位置

5）repeating-radial-gradient 可以指定重复的径向渐变

（3）background-repeat  来设置背景图像的重复方式，可选值：

-repeat 默认值，背景图片会双方向重复

-no-repeat 不重复背景图片，有多大显示多大

-repeat-x 水平方向重复

-repeat-y 垂直方向重复

（4）background-position 调整背景图片位置，可选值：

-top right left bottom center 可以用这些中的两个值来指定位置，

如 background-position：bottom center

-如果只给出一个值，则第二个值默认为center

-也可以直接指定两个偏移量：

第一个是水平偏移量，第二个是垂直偏移量,正值就是向右或向下，负值则是向左或向上

如：background-position：100px 0px

（5）background-attachment 用来设置图片是否随着页面滚动而滚动，可选值：

-scroll 默认值，会随着页面滚动

-fixed 背景图片会固定在某个位置，不随页面滚动 背景图片相对于浏览器的窗口不动，一般设置给body，如果设置给其他元素设置的话，当页面滚动到这个元素结束时，图片会随着它一起结束

（6）background-clip 设置背景范围，可选值：

-border-box 默认值，背景会出现在边框下边

-padding-box 背景只会出现在内容区

（7）background-origin 背景图片定位的偏移量计算的定位原点，可选值：

-padding-box 默认值 从内边距开始计算

-content-box 从内容区处计算

-border-box 从边框处计算

（8）background-size 设置背景图片大小

-直接写值，两个值指定宽高

-写一个值，第二个默认是auto，等比变化

-写百分数，第二个值auto，横向/纵向撑满

-cover，比例不变将元素铺满

-contain 比例不变，图片在元素中完整显示

（9）background （简写属性）

background所有相关属性都可以用其设置，无顺序数量要求，但是：

background-size必须写在background-position后，用斜杠隔开 center center/contain

background-clip必须在background-origin后

（10）轮廓阴影和圆角属性

1）outline 用来设置轮廓线，用法和border一样，但是不会影响奥可见框大小不会影响整个布局，一般用在设置移入状态hover

2）box-shadow：x偏移量 y偏移量  阴影模糊半径 颜色rgba

设置的阴影不会影响页面布局

3）border-radius   设置圆角

border-top-left-radius          左上圆角

border-top-right-radius        右上圆角

border-bottom-left-radius    左下圆角

border-bottom-right-radius  右下圆角

-指定一个值是圆角，指定一对值是椭圆，第一个是水平方向，第二个是垂直：

border-radius：20px / 40px 椭圆

-指定四个值就是顺时针指定圆角；三个值 左上 右上&左下 右下；两个值 左上&右下 右上&左下

-border-radius:50% 变为圆形

2.表格和表单

（1）表格

1）table，使用table标签创建表格，默认没有边框

-在table中使用tr表示表格中的一行，td表示一个单元格

-语法：

<table>

              <tr>

                    <td></td>

          </tr>

</table>

-td里可以嵌套table

2）colspan，使用colspan来合并横向单元格，赋予给需要合并的一个td，且要把多余单元格删除

-语法：<td colspan="n">  n表示这一个单元格要占几个位置（加上本身合并了几个）

3）rowspan，使用rowspan来设置纵向的单元格，赋予给需要合并的一个td，且得把多余单元格删除

4）表格样式

①border-spacing 属性可以设置table和td间的距离，table和td间间是有个默认距离的

②border-collapse 属性可以用来设置表个边框合并，可选值：collapse

-设置这个属性则border-spacing自动失效

可以为table设置border-collapse属性，再为td单独设置边框

5）长表格

有一些情况下表格很长，这是html提供三个标签将表格分为三个部分：表头，主题，底部

thead 表头永远显示在表格头部；tbody 表格主体永远显示在表格中间；tfoot 表格底部远显示在表格底部：

<table>

              <thead>

                    <tr></tr>

                    <tr></tr>

              </thead>

                <tbody

                    <tr></tr>

                    <tr></tr>

              </tbody>

              <tfoot>

                    <tr></tr>

                    <tr></tr>

              </tfoot>

</table>

（2）表单

网页中的表单是用来向服务器提交信息的，最常用的就是baidu搜索框。

首先使用form 标签创建一个表单，必有属性action，该属性指向的是信息提交给何处服务器的地址，语法：

<form action=“”> </form>

 这时创建的是个空白表单，还需要添加不同的表单项，写在form标签里：

1）input 用input自结束标签，修改type值可以创建表单项：

①text 属性用来创建文本框，要提交表单的内容同时必须指定一个name属性，name表示提交内容的名称，用户填写的信息会附在URL地址后以查询字符串的形式发送给服务器 ：url地址？查询字符串

<form action=“”> 

            <input type=“text”  name=“” / >

             <input type=submit  value=“提交” / >

</form>

②submit 属性用来创建提交按钮，value 属性可以修改按钮的文字

 <form action=“”> 

      <input type=submit  value=“提交” / >

</form>

③password 属性可以来创建密码也必须指定name属性值。

④radio 创建单选按钮，单选按钮通过name属性进行分组，name属性相同的是一组，

-这种需要用户选择但是不需要用户直接填写内容的表单项，还必须指定一个value属性，这样被选中的表单项的value属性值将会最终提交给服务器

⑤checkbox 创建多选框，同样name值相同表示同一组，用value值指定值提交给服务器

⑥reset 设置重置按钮，表单所有内容恢复为默认值

⑦button 设置button属性可以用来创建一个单纯的按钮，结合js一起用

⑧color  设置后可以在浏览器中选择颜色

⑨autocomplete 可以设置自动补全，autocomplete=“on”开启自动补全

⑩ readonly 设置为只读，数据会提交

⑪disabled 设置为禁用，数据不会提交

⑫autofocus 设置表单项自动获取焦点

2）select标签创建下拉列表，使用option标签来创建一个个列表项：

-name属性需要指定给select标签

-value属性需要指定给option标签，表示提交给服务器的数据

-multiple 设置该属性下拉列表可以变为多选的下拉列表

-outgroup 标签可以将下拉列表中的列表项分组，使用label属性来设定分组的名字

-selected设置该属性，则默认选择下拉列表中的某一项

语法：

<select name="">

      <option value="">选项一</value>

      <option value="">选项二</value>

       <option selected value="">选项三</value>

</select >

3）textarea文本域 创建多行文本框

同样需指定name属性

css里使用resize属性设置文本域不能调整大小，值选择none，resize：none

4）button标签，可选type值：

-submit

-reset

-button

和input的三种type值作用相同，但button标签不是自结束标签，更灵活（按钮可以以图片形式存在），更推荐使用

3.定位

position，定位属性，可选值

（1）static 默认值，元素没有开启定位

（2）relative  相对自身原本位置开启元素的相对定位

-设置了相对定位的元素不会脱离文档流

-相对定位会使元素提升一个层级

-当开启了元素定位时，必须设置偏移量

-可以通过left right top bottom四个属性来设置元素偏移量

left：元素相对于其定位位置的左侧偏移量

right：元素相对于其定位位置的右侧偏移量

top：元素相对于其定位位置的上侧偏移量

bottom：元素相对于其定位位置的下侧偏移量

-相对定位不会改变元素的性质，块元素还是块元素，内联元素还是内联元素

（3）sticky 粘滞定位，滚动条到一定位置开启了的元素固定不动

{position：sticky；

top:n px;}

（4）absolute 开启元素绝对定位，

-开启绝对定位会使元素脱离文档流

-开启绝对定位后如果不设置偏移量，则元素位置不会发生变化

top：元素相对于其定位位置的上侧偏移量

left：元素相对于其定位位置的左侧偏移量

right：元素相对于其定位位置的右侧偏移量

bottom：元素相对于其定位位置的下侧偏移量

-绝对定位也会使元素提升一个层级

-绝对定位会改变元素性质，内联元素变成块元素，块元素的宽度高度默认被内容撑开

-位置偏移相对于离他最近的开启了定位的祖先元素：一般情况下，开启了子元素的绝对定位都会开启父元素的相对定位。如果所有祖先元素都没有开启定位，则会相对于浏览器窗口进行定位

当父元素开启relative，子元素开启absolute，可以：

position：absolute；

left：0；

right：0；

top：0；

bottom：0；

margin:auto;

使子元素水平垂直居中于父元素

（5）fixed 开启元素的固定定位（也是绝对定位的一种）

-开启固定位置fixed会使元素脱离文档流

-固定定位也是一种绝对定位，大部分特点都和绝对定位一样，不同的是固定定位永远是相对于浏览器窗口来定位的

-固定定位会固定在浏览器窗口某个位置，不会随滚动条滚动

（6）z-index 元素层级

对于开启了position的元素，用z-index可以修改元素层级，直接写整数，数值越高层级越高，但是父元素层级再高，也不会盖住子元素

4.响应式布局

网页可以通过不同设备或窗口大小呈现出不同的效果，使用响应式布局，可以是一个网页适用于所有的设备。

响应式布局关键是媒体查询，通过媒体查询可以为不同的设备，或设备的不同能力分别设置样式

媒体查询，语法：

@media查询规则{}

（1）媒体类型：

all 所有媒体类型

print 打印设备

screen 带屏幕的设备

speech 屏幕阅读器

例子：

@media print{background-color:#bfa}

表示打印出来的背景颜色是#bfa

使用逗号链接多个媒体类型，这样它们之间就是或的关系

@media  only print{background-color:#bfa}

添加only，避免老版本浏览器出现兼容性问题，新版本加不加效果一致，老版本会忽略以避免出现问题

（2）媒体特性：

width 视口宽度

height 视口高度

min-width 最小宽度

max-width 最大宽度

针对特定视口宽度设置样式

例子：

@media（min-width：500px）

    body{background-color:#bfa}

表示当视口大于500px时样式生效

样式切换的分界点，叫断点，网页样式会在这个点时发生变化，一般比较常用的断点，常用断点：

小于768 超小屏幕 max-width=768px

大于768 小屏幕  min-width=768px

大于992 中型屏幕 min-width=992px  (pad屏幕）

大于1200 大屏幕 min-width=1200px

例子：

@media only screen and（min-width：500px），（max-width：300px

    body{background-color:#bfa}

当视口大于500px或小于300px，时样式生效

@media only screen and（min-width：500px）and（max-width：700px

    body{background-color:#bfa}

当视口大于500px小于700px，时样式生效

---

撒花撒花🎉，写完啦！

写在后面：

到现在差不多学了有一个月的时间，感觉给自己定下一个学习目标是很愉快的事，学习前期每天感觉非常充实，到后面有些焦虑，也怀疑过我一个设计师学这个有用吗，更专注于专业不好吗？

但只是为了有始有终，不让之前的付出白白浪费，我也该学完它。且抓住最后的学生时期学些新内容不是很好嘛？

话又说回来，不管它在今后的工作中到底能发挥多大作用，我都认为是很值得的。

一方面，学习这些本身是愉快的，所谓的“所敲即所得”，学一节课的成果都能很清楚的反馈出来，比较有成就感，这个本身也使我产生了兴趣。仅仅学完这些基本内容，我也可以自信的说能敲出一般的静态网页了。

另一方面，尽管我的工作经验不够丰富，但我能感觉到，有了这些基本知识在与前端工程师沟通时，包括做自己份内工作时都会起到积极的作用，良好的沟通能使团队协作更加高效，氛围更加愉悦，从更深层次说也许能建立一个更有利的专业形象提升话语权也说不定。以前常听说懂些工作上对接方的知识方便“battle”，也许从一开始的认知就把彼此置于对立面了吧，但大家都是为一个项目的话，更有效的沟通不是更好吗？就当是我美好的心愿吧，hhhh~