HTML5/CSS3_colspan后长度不自适应-CSDN博客

本文链接：https://blog.csdn.net/lllsadsa/article/details/131603805

PS的使用

PS打开图片——拖拽图片到PS图标
PS调出标尺——ctr+r
放大缩小图片——ctr+ + / ctr + -
量取大小
做辅助线 ——从标尺上拉
切图——矩形选框选中——C——N——V——S，选择路径和jpg格式

遇到的问题及解决方法

《1》伪类和伪元素选择器的区分

单冒号是伪类选择器，双冒号是伪元素选择器

《2》滚动条占据17像素的位置

解决办法：使用伪元素选择器将滚动条宽度设置为0

.box main {
  width: 100%;
  height: 100%;
  /* background: red; */
  overflow-y: auto;
}

/* 隐藏滚动条  */
.box main::-webkit-scrollbar {
  width: 0px !important;
}

《3》高斯模糊

background-color: rgba(245, 245, 245, 0.60);

HTML

一.站点及文件名规范

1.以小写字母开头，数字，下划线命名，不得以中文，空格，特殊符号命名。

2.站点需要创建html，css，js，images 文件夹和 index.html 文件。

3.index.html 文件为首页文件，不得修改文件名称。

二.标签

《1》分为单双标签：

1.单标签，单标记，元素：单个出现，/ 可以省略。

<input type="text" /> <input type="parssword">

2.双标签，双标记，元素：成对出现，结束标签前面有 /。

<div> </div> <a href="" title="" target=""></a>

《2》标签特点：

第一个单词是标签名
标签名与属性之间用空格隔开
属性与属性值之间用=连接，属性值写在 " "内(单双引号都行)
属性与属性之间用空格隔开

三.常用标签

《1》快捷写法

*生成几个
$ 数字序号

  h$*6

  <h1></h1>
  <h2></h2>
  <h3></h3>
  <h4></h4>
  <h5></h5>
  <h6></h6>

lorem 出现一段文段测试时用

 <p>lorem</p>

<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quis ex vitae ea, inventore obcaecati debitis nulla voluptatum aspernatur ullam illum ducimus magnam nobis repellendus aliquid voluptas eum laborum dignissimos consequuntur.</p>

《2》标题标签 h1-h6

  <h1>我是1级标题</h1>
  <h2>我是2级标题</h2>
  <h3>我是3级标题</h3>
  <h4>我是4级标题</h4>
  <h5>我是5级标题</h5>
  <h6>我是6级标题</h6>

独占一行
字体自带加粗
不同标题的字号不同
自带间距
双标签

《3》段落标签 p

  <p>我是段落标签</p>
  <p>我是段落标签</p>
  <p>我是段落标签</p>

独占一行
自带间距
双标签

《4》空格符 & nbsp；(不属于标签，是特殊符号)

 <p>&nbsp;&nbsp;&nbsp;&nbsp;Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat corrupti culpa, cumquesequi
    pariatur debitis
    facere impedit doloribus corporis aliquam voluptates id facilis recusandae nemo alias vel, odio repudiandae.
    Excepturi.</p>

《5》换行标签 br

 <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat corrupti culpa, cumquesequi
    pariatur debiti<br>
    facere impedit doloribus corporis aliquam voluptates id facilis recusandae nemo alias vel, odio repudiandae.
    Excepturi.</p>

单标签，强制换行

《6》分割线 hr

 <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat corrupti culpa, cumquesequi
    pariatur debitis
    <hr>
    facere impedit doloribus corporis aliquam voluptates id facilis recusandae nemo alias vel, odio repudiandae.
    Excepturi.

单标签，强制出现分割线

《7》加粗 b ，strong

<b>加粗内容</b>只是显示加粗
<strong>强调的内容</strong>突出的文本

双标签，不独占一行，让文字加粗
strong 语义更强烈

《8》倾斜 i ，em

<em>强调文本</em>
<i>倾斜文本</i>

双标签，默认不独占一行，让字体倾斜
em 语义更强烈
font-style 文字倾斜（oblique 倾斜的文字， normal 取消倾斜）

《9》拓展

1.下划线 u

会在标签包含的文本下面显示一条下划线

 <p><u>Lorem ipsum</u>, dolor sit amet consectetur adipisicing elit. Quis ex vitae ea, inventore obcaecati debitis
    nulla
 </p>

双标签，默认不独占一行

2.删除线 s ，del

会在所包含的文字中显示一条横杠表示删除

  <p><s>Lorem ipsum</s>, dolor sit amet consectetur adipisicing elit. Quis ex vitae ea, inventore obcaecati debitisnulla
    <del>voluptatum aspernatur</del> ullam illum ducimus magnam nobis repellendus aliquid voluptas eum laborum
    dignissimos
    consequuntur.
  </p>

双标签，默认不独占一行
del 的语义更强烈

3.上标 sup 下标 sub

<p>15<sup>o</sup>C</p>

 <p>H<sub>2</sub>O=水</p>

双标签，默认不独占一行

四.列表

《1》无序列表 ul

 <ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>

《2》有序列表 ol

 <ol>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ol>

  <ol type="1" start="4">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ol>

  <ul type="1" start="4">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>

type 类型支持的属性值：数字 1，小写的 a，大写的 A，小写的罗马数字 i ，大写的罗马数字I

start 开始的属性值：只支持数字

《3》自定义列表 dl

  <dl>
    <dt></dt>
    <dd></dd>
    <dd></dd>
    <dd></dd>
    <dd></dd>
  </dl>

《4》特点

ul 和 ol 里面只能包含 li
li 里面可以包含其他标签元素
dl 里面只能有一个 dt 但是可以有多个 dd

五.路径

路径有三种及绝对路径，相对路径，网络路径

《1》相对路径：

相对与当前图片来说的
…/ 返回上一层
xx/ 进入某个文件夹

 <img src="images/web.jpg" alt="">

《2》绝对路径：

相对于计算机来说
路径不够灵活，文件移动后路径将会失效

 <img src="C:\Users\xxl10\Desktop\前端\day2\images\web.jpg" alt="">

《3》网络路径：

以https：// 或者http://

<img src="https://img2.baidu.com/it/u=174991003,1991123578&fm=253&fmt=auto&app=120&f=JPEG?w=780&h=1170" alt="">

六.图片标签 img

src 属性

<img src="images/web.jpg">

图片的路径

alt 属性

 <img src="images/web1.jpg" alt="前端">

图片无法加载时的文字提示

title 属性

<img src="images/web.jpg" title="前端">

鼠标悬停在图片上的提示

七.超链接标签 a

href 属性

<a href="目标文件路径及全称/连接地址" title="链接的标题" target="_blank">链接文本/图片</a>
<a href="#"></a>空链接
<a href="1.zip">下载</a> 下载连接

文件的路径

target 属性

属性值：

_blank 在新页面跳转

_self 在当前页面跳转

<a href="#" target="_blank">新页面打开</a>

title 属性

<a href="https://www.baidu.com" title="百度">点击去百度</a>

鼠标悬停提示文字

锚记：

1，作用：可以在页面不同位置进行跳转

2，实现：

 <div id="box1"></div>
 <a href="#box1">跳转到box1</a>

3，原理：a标签可以进行跳转，当我们不写页面路径时，默认跳转到当前页面

id在一个页面时唯一的，那么我们的a标签，href 可以跟一个#id名就能跳转到指定的位置.

八.表单

表单的作用：用来收集用户信息
表单的组成：表单域(form) ，提示信息，表单元素(表单控件)
表单控件脱离表单域功能将会失效

一，表单控件

《1》input

特点：单标签，默认不占一行，自带大小

type：属性：

属性值	类型
text	文本框
password	密码框
submit	提交按钮
reset	重置按钮
name	参数名
value	默认值/默认文本
button	空白按钮
radio	单选框(想要搭配name使用)
checkbox	复选框(想要搭配name使用)

  <form action="">
    <input type="text"><br>
    <input type="password"><br>
    <input type="submit" value="登录"><br>
    <input type="reset" value="清空">
  </form>

《2》下拉框 select> 下拉选项 option

select 下拉框

option 下拉选项

《3》文本域 textarea

特点：可以随意改变大小。

设置 resize：none; 可以取消

《4》表单的其他标签

1， label 标签

作用：绑定标签

格式：标签的文字信息，图片等

功能：将label 里面的文字信息和有对应id名的标签进行绑定。

2，fieldset (负有来斯特) 表单字段集 legend (来g的) 字段集标题

fieldset 表单字段集可以对表单中的内容进行分类

legend 字段集标题 (一般放在fieldset里面)

二，表单框form

1，特点：所有的表单控件都必须写在表单框里。

2，结构

action 提交信息的接口地址

method 提交方式

get 数据在地址栏中传递

post 数据在请求体传输(更安全，传输体积更大)

三，input新增控件

type属性	：
color	拾色器
tel	唤醒拨号盘在移动端使用
search	搜索
number	数字框只能数字相关的0-9/e
range	滑动
email	邮箱框（会对邮箱格式进行简单的验证）
url	网址框（会对网址进行简单的验证）
date	日期选择框（选择年月日）
month	月份选择框（选择年月）
week	周选择框（选择年周）
time	时间选择框（选择时分）
datetime-local	本地时间选择框（选择本地年月日当前时间）

四，input新增属性

《1》搭配数值框和滑块使用的属性

属性	：
min	最小值
max	最大值
step	间距数值

《2》搭配邮箱框使用的属性

属性	：
multiple	允许邮箱输入多组值

《3》多搭配单选框和多选框使用（不属于新增）

属性	：
checked	默认选中
disabled	禁止使用/不可用

《4》其他新增属性

属性	：
placeholder	提示信息
autofocus	自动获取焦点（只识别第一个）
required	必填项
autocomplete	自动补全 on（默认开始自动补全）off（关闭自动补全）需要搭配name使用

《5》搭配标签使用的新属性 list

作用：绑定数据列表

格式：

 <datalist id="list1">
             <option value="xx">
             <option value="yy">
             <option value="zz">
     </datalist>
     <input type="search" name="search" autofocus placeholder="请输入关键词" list="list1">

《6》校验输入框内容格式 pattern

CSS

一.CSS又称层叠样式表

《1》结构：

选择器{声明;声明} 声明=属性+属性值

p {
   color: pink;
}

总结：

选择器写在 { } 前面，声明写在 { } 内，声明和声明之间用；隔开
声明是由属性和属性值组成，属性和属性值之间用：连接

《2》CSS样式

color	字体颜色
background-color	背景颜色
height	元素高度
width	元素宽度

《3》CSS三种样式表的使用

三种书写格式有：外部样式，内部样式，行内样式

1，外部样式表：

写在html文件外，创建一个 CSS 文件，通过在head里面创建link标签引入生效

可以实现代码复用(推荐外部写法)

<link rel="stylesheet" href="css/index.css">

2，内部样式表：

写在html文件内，通过在head里面创建style标签，在style标签内写CSS样式

  <style>
    p {
      color: pink;
      background-color: green;
    }
  </style>

3，行内样式表：

写在元素开始标签style属性中(是使用最少的方式)

<p style="color:red;background-color: pink;">啦啦啦啦啦</p>

二.CSS权重：

《1》权重相同：

如果属性不冲突都生效，如果属性冲突后者生效

《2》权重不同时：

如果属性不冲突都生效，如果属性冲突权重大的生效

选择器	权重
通配符	0-1
标签选择器	0001
class选择器	0010
id选择器	0100
群组选择器	自己算自己的
包含选择器	所有选择器权重之和
! important	权重最高

 <style>
  p {
  color: pink !important;}
 </style>

! important 尽量少用或者不用

三.优雅降级，渐进增强

《1》渐进增强 progressive enhancement：

针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。

《2》优雅降级 graceful degradation：

一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。

《3》区别：

优雅降级是从复杂的现状开始，并试图减少用户体验的供给，而渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要。降级（功能衰减）意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地带。

四.CSS选择器

《1》标签选择器/类型选择器：

直接用标签名作为选择器

 p {
      color: red;
    }

作用：统一某一类标签的样式

《2》id选择器

#p1 {
      color: pink;
    }
<p id="p1">零零零零</p>

注意：id 名不能重复，一个 id 名在页面中只能出现一次

作用：让某个标签具有唯一性

《3》class选择器/类选择器

.p2 {
      color: red;
    }
<p class="p2">零零零零</p>
<p class="p2">零零零零</p>
<p class="p2">零零零零</p>

特点：和 id 比较像，不具有 id 的唯一性，可以使用多次

作用：将不同的标签，划为一类，统一管理

《4》群组选择器

   p,
    h3 {
      background-color: pink;
    }
  <p>我是p</p>
  <h3>我是h3</h3>

作用：给不同标签添某种样式(每个选择器直接用，隔开)

《5》通配符选择器 *

* {
      margin: 0;
      padding: 0;
    }

选中页面中所有元素

主要功能：清除默认间距，是写SCC的起手式

《6》包含选择器/后代选择器

p b 选中p后面所有的b元素

 p b {
      color: red;
    }
  <p>
    <b>asdasdas</b>
    asdasdasd
    <b>asdasdas</b>
  </p>

《7》亲儿子选择器

div>p 选中div下一级的所有p元素

div>p {
      color: red;
    }
<div>
    <p>asdsa</p>
    <header>
      <p>asdas</p>
    </header>
  </div>

《8》相邻兄弟选择器

di’v+p div的第一个兄弟元素，如果时p则被选中,如果不是或者不在第一个则不被选中

 div+p {
      color: red;
    }
 <div></div>
  <p>p</p>  文字颜色为红色
  <p>p</p> 文字颜色为默认颜色

《9》同级兄弟选择器

div~p 选中与div同级的所有p元素

div~p {
      color: red;
    }
 <div></div>
  <p>p</p>  文字颜色为红色
  <p>p</p>  文字颜色为红色

《10》属性选择器

标签[attr] 选中具有属性attr的元素

标签[attr=“value”] 选中具有属性attr并且值为value的元素

标签[attr~=“value”] 选中具有属性attr，属性有多个，其中有一个时value的元素

补充：

标签[attr^=‘value’] 选中具有属性attr，并且属性值是以value开头的元素

标签[attr$=‘value’] 选中具有属性attr，并且属性值是以value结尾的元素

标签[attr*=‘value’] 选中具有属性attr，并且属性值包含value关键词的元素

标签[attr|=‘value’] 选中具有属性attr，并且属性值是以value或者calue-开头的元素

《11》伪类选择器

一，结构伪类选择器

F:first-child 选中第一个子元素，如果是F则选中

F:last-child 选中最后一个子元素，如果是F则选中

F:nth-child() 选中第n个子元素，如果是F，则选中

数字选中的几个

xn 选中x的倍数规律

2n/even 选中偶数

2n+1/2n-/odd 选中奇数

补充：

F:only-child 选中唯一的一个子元素F

F:root 选中文档的根源素，在html页面中，根源上永远都是html标签

F:empty 选中为空的标签F，F(有空格和换行都不为空 )

二，目标伪类选择器

当E处于锚记目标状态是，被选中

F:target 需要搭配目标使用

三，UI状态伪类选择器（一般用于表单）

F:enabled 选中可用的标签F

F:checked 选中处于选中状态下的标签F

F:disabled 选中不可用的标签F

四，UI状态伪元素选择器

F::selection 选中F标签中处于高亮状态下的内容

五，否定伪类选择器

F:not() 选中除了not()里面条件的F标签(除XX之外)

六，动态伪类选择器

选择器	：
:link	超链接初始状态
:visited	超链接访问后的状态
:hover	元素划过时的状态
:active	元素激活时的状态(或者说点击时)

总结： 1.在修饰a标签的四个状态时，需要保持以下顺序link-visited-hover-active (lvha)驴哈

2.hover和active对其他标签也能生效

八，用户行为选择器 (一般用于表单)

F:focus 用户获取焦点时，选中F

四.CSS核心属性

属性	：
width	宽度
height	高度
font-size	文字大小（px ，em ，rem）最小字体大小为12px，默认16px，没有最大值
font-family	字体类型，字体名称用记得用 " "，多个字体之间用 , 隔开
color	文字颜色 (颜色关键字英文单词，16进制，RGB，RGBA)
background-color	背景颜色 (颜色关键字英文单词，16进制，RGB,RGBA)
font-weight	文字加粗 ( 细体 300，标准粗细 400，加粗 700)
font-style	文字倾斜（oblique 倾斜的文字， normal 取消倾斜）
text-align	文本水平对其方式
line-height	行高，当行高等于元素高度，即可实现文字垂直居中
text-decoration	文本修饰 none:没有修饰，underline:添加下划线，overline:添加上划线，line-through:添加删除线，主要功能取消a标签的下划线 text-decoration：none；
text-indent	文本首行缩进：控制标签内第一行文本进行缩进支持复数
list-style	none清除 li 的默认样式

五.边框 border

《1》复合写法

  border: 1px solid red;
单属性书写
   border-width    边框宽度
   border-style    边框风格
       solid       实线
       dotted      点划线
       double      双线
       dashed      虚线
       none        取消边框
   border-color    边框颜色

《2》单一方向边框

 .box6 {
      width: 100px;
      height: 100px;
      background-color: yellow;
      border-top: 2px solid red;
      border-right: 2px solid red;
      border-bottom: 2px solid red;
      border-left: 2px solid red;
    }

《3》边框的多参数应用 (顺时针分配参数，参数不够复制对面参数)

一个参数四个方向

.box {
  width: 100px;
  height: 100px;
  border: 5px solid pink;
}

两个参数上下，左右

.box {
  width: 100px;
  height: 100px;
  border: 5px 5px solid pink;
}

三个参数上，左右，下

.box {
  width: 100px;
  height: 100px;
  border: 5px 4px 5px solid pink;
}

四个参数上，右，下，左

.box {
  width: 100px;
  height: 100px;
  border: 5px 4px 2px 3px solid blue;
}

六.CSS背景属性

《1》背景基本属性

background-color    背景色
background-image    背景图
     特点：
         1.背景图按照元素大小显示的，元素多大，背景图就占多大位置
         2.背景图默认平铺
         3.同时使用背景图和背景色是，背景图在上，背景色在下
background-repeat    背景图是否平铺  
        no-reprat    不平铺
        repeat       平铺(默认值)
        repeat-x     横向平铺
        repeat-y     纵向平铺
background-paostion  背景图定位
        backgeound-paostion: x y;
注意：背景图定位移动的是图片的位置不是盒子的位置
第一个参数    控制水平位置   正数向右，负数向左
第二个参数    控制垂直位置   正数向下，负数向上
background-size      背景图大小
         background-size：wdith height；
第一个参数是背景图宽度，第二个参数是背景图高度 
如果只写一个参数默认为宽度，高度等比例缩放 
参数还可以是百分比，占据盒子的百分比
还可以是关键词
   cover      等比例缩放   图片容易丢失(等元素都铺满，才停止缩放)
   contain    等比例缩放   图片容易留白(等元素一个边铺满，就停止缩放)
background-attachment(额塔尺梅特)    背景图固定
              scroll     背景图滚动(默认值)
              fixed      背景图固定
当元素设置了背景图定位后，背景图参照物变成浏览器窗口
                      background-size 的参照物就变成了浏览器窗口
背景图复写形式：  
   background: 背景色(可以省略) 背景图片(可以省略) 背景是否平铺 背景图位置/背景图大小 背景图固定(可以省略)
   background：red ulr(路径) no-repeat center center/cover fixed;

《2》背景图的多背景使用

背景色在下层，背景图在上层。
写多个背景图时注意先写的会在后写的上层

七.浮动 float

功能：让元素标签能够横向排列。

left 左浮动

right 右浮动

特点：

同级元素要浮动都浮动，要不浮动都不浮动。
浮动元素，在父元素中放不下的时候会换行。
在使用浮动是记得给父元素和子元素规定宽高
行内元素浮动之后也可以加宽高

八.盒子模型

《1》padding 内间距：

说明：用来确定内容或子元素到达边界之间的距离

作用：给父元素添加padding，来调整内容和子元素之间的位置(为了保证总体大小不变，需要在父元素上减去对应的padding值)

padding单一写法：

padding-top：10px；

padding-right：10px；

padding-buttom：10px；

padding-left：10px；

《2》margin 外间距

说明：用来确认两个元素之间的距离

注意事项： margin 上下会重叠左右会相加

父元素下面的第一个子元素加 margin-top，这个 margin-top父元素也会生效

解决方法：：(1) 给父元素添加 overflow: hidden;

(2) 给父元素改为 padding-top 解决，记得父元素高度减去padding-top 值

补充：margin控制元素水平剧中

给元素添加宽度
给元素写 margin：0 auto；

margin单一写法：

margin-top：10px；

margin-left：10px；

margin-buttom：10px；

margin-right：10px；

《3》怪异盒子模型 box-sizing

《1》 border-box

padding和border算在width之内，因此不会改变盒子大小。

《2》content-box

常规盒子模型

《4》弹性盒

1，概念：

在弹性布局中有两条轴，一条默认水平的主轴，一条永远垂直于主轴的侧轴。

弹性盒中的子元素，叫做弹性元素，弹性元素默认沿着主轴排列。

2，补充：

元素变成弹性盒后，元素类型默认转为块元素，并且里面弹性元素的元素类型也转换为块元素。

3，弹性盒中的父类属性：（写给父元素的）

《1》display：flex；将元素变成弹性盒

注意弹性盒里面的子元素自动转换成弹性元素

《2》justify-content 弹性元素沿着主轴的排列方式

flex-start 默认，顶端对齐

flex-end 末端对齐

center 居中对齐

space-between 两端对齐，中间自动分配

space-around 自动分配距离

《1》改变主轴方向 flex-direction

row 主轴横向排列（默认值）

row-reverse 主轴横向反转排列

column 主轴纵向排列

column-reverse 主轴纵向反转排列

《2》单行侧轴对其方式 align-items

flex-start 沿着侧轴开始对其

flex-end 沿着侧轴结束对其

center 沿着侧轴中间对其

注意：

如果弹性盒换行了，align-items是控制换行后，每一行里面的弹性元素的侧轴对其方式

《3》弹性盒是否换行 flex-wrap

nowrap 不换行 (默认值)

wrap 换行

wrap-reverse 换行并反转

注意：

弹性元素默认在弹性盒中不换行，也不会超出，而是挤压自己的大小

《4》侧轴整体对其方式 align-content (必须搭配flex-wrap,且值不是nowrapo)

flex-start 多条侧轴开始对其

flex-end 多条侧轴结束对其

center 多条侧轴居中对其

space-between 多条侧轴整体两端对其

space-around 多条侧轴整体环绕分布

4，弹性盒中的子类属性(写给子元素的/弹性元素)

《1》align-self 控制单个元素在侧轴上的对其方式

flex-start 沿着侧轴开始对其

flex-end 沿着侧轴结束对其

center 沿着侧轴中间对其

《2》order 弹性元素的排列顺序

默认值为0，越大越靠后，越小越靠前，支持负数，如果值相同就按照html书写顺序排列。

《3》 flex 弹性元素的弹性特性(复写形式)

flex-grow 弹性元素是否放大

1 放大

0 不放大（默认值)

flex-shrink 弹性元素是否缩小

1 缩小（默认值）

0 不缩小

flex-basis 弹性元素项目长度

auto 按照书写的元素大小显示

总结：

格式： flex：flex-grow flex-shrink flex-basis;

默认值： flex：0 1 auto；空间多余我不放大，空间不够我缩小

缩写： flex：1； flex：1 1 0；优先放大，优先缩小

flex：auto； flex：1 1 auto；优先放大，一起缩小

flex：none； flex：0 0 auto；空间不够不缩小，空间够也不放大

5，多列

《1》column（卡类目）-count 将元素分为几列

补充：多列中的子盒子可能会折列显示，break-inside：avoid；可以禁止折列

《2》禁止多列折列显示 break-inside

break-inside：avoid；

《3》列间距 column-gap

column-gap:10px;

《4》列分割线 column-rule

column-rule 用法参考边框

《5》列高度是否统一（内容分配）column-fill

auto 高度不统一，优先填充第一列，第一列满了在填充后续列

balance 高度统一，内容平均分配（默认值）

《6》column-span 是否跨列（写给子元素）

all 跨列

none 不跨列(默认值)

《7》column-width 列宽

和column-count 一般不同时使用，如果同时使用，谁分的宽度大谁优先生效

九.文本溢出

《1》溢出属性 overflow

属性	：
visible(为z波)	内容溢出不隐藏（默认值）
hidden	内容溢出隐藏
scroll（s阔肉）	出现滚动条 (无论内容多少都出)
auto	自动，根据内容多少判断是否出现滚动条
overflow-x	x轴溢出属性
overflow-y	y轴溢出属性

《2》剩余空间 white-space(s培s)

属性	：
normal	自动换行，既不识别手动换行也不识别空格(默认值)
nowrap	强制一行显示
pre	不会自动换行，识别空格和手动换行
per-wrap	自动换行，识别空格和手动换行
per-line(赖)	自动换行，不识别空格但是识别手动换行

《3》是否显示省略号 text-overflow

属性	：
clip	默认值，不显示省略号(…)
ellipsis（啊雷普sis）	显示省略号

注意：text-overflow 单独使用没有效果

《4》单行文本溢出显示省略号步骤：

width 设置宽度。
white-space: nowrap；强制一行显示。
overflow: hidden; 溢出隐藏。
text-overflow: ellipsis；如果内容有隐藏就用省略号告知用户。

十，CSS元素类型

1：元素类型分类：根据CSS显示分类可以分为三类类型：

块元素： block

1.独占一行显示,不给宽度时默认100%

2.可以设置宽高

3.可以做为元素的盒子（块元素，行内元素，行内块元素）

4.p标签里面不能套块元素，可以套行内元素和行内块元素

《1》行内元素：inline

默认不独占一行，横向显示
给宽高无效，实际大小由内容区域撑开
行内元素可以定义padding,border,margin等属性，padding,border,margin上下的值没有实际布局功能;只有视觉效果

《2》行内块元素：inline-block

常见的行内块元素有 img input video audio等
行内块元素即可以设置宽高也不独占一行，横向显示
一般都具有默认大小

2：元素类型转换 display 属性

inline 行内元素
block 块级元素
inline-block 行内块元素
none 隐藏元素当不为none时元素就显示我们不能划过自身让自身消失
flex 弹性盒子
grid 网格布局
元素类型的隐式转换：

有的属性在使用时，可以将元素偷偷的转换成块级元素，这样的属性包括

float 浮动

position 定位

flex 弹性布局

grid 网格布局

十一，伪类选择器

《1》:hover 鼠标划过触发

用法选择器:hover {}

.box:hover p {} 鼠标划过.box盒子的时候p标签要发生的样式

.box p:hover {} 鼠标划过p标签时p标签要发生的样式

十二，行内块元素的应用

《1》行内快元素对其方式默认时不统一的，我们可以通过vertical—align属性来调整

《2》vertical-align== ：

仅对行内块元素生效(多用于调整行内块元素的对其方式)

属性	：
top	顶部对齐
middle	中线对齐
baseline	基线对齐
bottom	底部对齐

《3》可以解决那些问题？

解决行内元素和文字之间的对其问题
解决图片基于父元素中线对其问题
3像素间距问题

行内块元素和块元素之间存在3像素的间距

解决方法： display：block；

vertical-align：top bottom；

十三，置换元素（了解）

《1》置换元素大多数都是行内块元素。

《2》除置换元素之后都是非置换元素。

十四，定位 position

属性值	：
static(斯太提可)	默认值
absolute (阿布斯露特)	绝对定位
relative(r了提悟)	相对定位
sticky(斯特可)	黏性定位
fixed	固定定位

《1》偏移量：

只对有定位的元素生效，对没有定位的元素无效。

概念：控制定位元素如何进行位移的：正数向元素内走，复数向元素外走

top：

right：

left：

bottom：

left和right 同时用，left优先生效

top和bottom 同时用，top优先生效

《2》定位属性的层叠性 z-index

层叠性的显示规则：

添加定位的元素会覆盖没添加定位的元素(添加 static 属性值的不算)
如果都添加定位，html结构后写的盖着先写的。
z-index 属性可以改变定位的层叠关系，z-index 越大，层级越高

《3》定位属性值：

static：默认值，无特殊定位，对象遵循HTML原则；

relative：相对定位：

相对自身原本的位置进行定位，不脱离文档流还占据原来的位置。

absolute：绝对定位：

1，定位的参照物为包含快，如果父元素是包含块就针对父元素定位，如果父元素不是包含块，就一层一层往上寻找，直到找到body为止

2，完全脱离文档流，不占据原本的位置

3，具体参考偏移量进行偏移

fixed：固定定位：

1，参考物为浏览器可视窗口

2，完全脱离文档流

sticky：粘性定位：

1，参考物为距离自己的具有滚动条的元素

2，不脱离文档流

《4》定位元素的一些应用

1，position 取值为absolute和fixed时，可以将元素转换为块元素

总结：脱离文档流的元素，基本都会将元素转换成块元素

2，元素在父元素中水平垂直居中

方法一：

1，给大盒子写一个position：relative；

2，给小盒子写··

position：absolute；

left：50%

top：50%

margin-top：负的小盒子高度的一半；

margin-left：负的小盒子宽度的一半；

方法二：

1，给大盒子写一个position：relative；

2，给小盒子写

position：absolute；

top：0；

left：0；

right：0

bottom：0；

margin：auto;

3，元素在页面中永远水平垂直居中

方法一:

1，给小盒子写

position：fixed；

left：50%

top：50%

margin-top：负的盒子高度的一半；

margin-left：负的盒子宽度的一半；

方法二：

1，给小盒子写

position：fixed；

top：0；

left：0；

right：0；

bottom：0；

margin：auto;

《5》元素透明 opacity (哦拍死提)

作用：让元素整体变得透明，包括里面的子元素和内容。

opacity 取值范围 0——1直接，0 时完全透明，1时完全不透明

十五，表格

《1》作用：

展示信息，多用于后台管理系统

《2》格式和组成

<table>       表格
  <tr>        行
    <td></td> 单元格(竖向的单元格构成列)
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>

《3》表格的CSS属性：

border-spacing (写在table) 单元格外间距(当值为0时可以合并外间距)、

border-collapse (扣来普斯)：collapse；(table)

collapse 合并单元格边框

separate(默认值) 不合并单元格边框

作用：可以解决border-spacing合并边框线时，无法完全合并的问题

empty-cells(table) 空白单元格是否显示

hide 隐藏

show(默认值) 显示

《4》表格的特点：

表格会根据单元格里的内容自动分配空间，保证了每个单元格的内容不会溢出；

当某些行或者列没有内容时，单元格会变的非常小很难看，建议使用table-layout：fixed；分配。高度通过给td添加高度分配。

《5》合并单元格

1，合并行竖向合并 rowspan

合并方法：

从那个单元格(td)开始合并，就给谁加 rowspan，和合并几行

2，合并列横向合并 colspan

合并方法：

从那个单元格(td)开始合并，就给谁加 colspan，和合并几列

《6》table表格标签

1，caption 表格标题(想要写在table里边)

2，表格行分组

表头 th一般用在表头里

表体(表体在表格中时必读存在的)

表尾

3，表格列分组

(写在table里面)span=几就是几列)

十六，自适应

《1》自适应概念

网页布局中经常要定义元素的宽和高。但很多时候我们希望元素的大小能够根据窗口或子元素自动调整，这就是自适。

《2》宽度自适应，

不写宽度让元素的宽度随着浏览器的大小改变而改变

默认值 width：auto；

《3》高度自适应：

不写高度，高度由子元素撑开，随着子元素的多少，自动调整。(好处是不会溢出)

默认值 height：auto;

《4》浮动元素的宽度自适应，

块元素如果不写宽度默认独占一行，但是浮动有宽度由内容撑开。

《5》浮动元素的高度自适应，

高度塌陷，如果父元素不写高度，子元素添加浮动，会造成高度塌陷。

解决：

《1》给父元素添加高度，(父元素就不自适应了)

《2》给父元素添加overflow：hidden；(当我们需要元素超出盒子范围时，使用此属性不合适)

《3》在父元素后面添加一个子元素，使用clear：both；解决高度塌陷。(页面中多了很多空标签，影响页面结构)

《4》万能清除浮动法。

塌陷元素：：after{

content：" "；

display：block；

height：0；

overflow：hidden；

clear：both；

}

总结：能用overflow：hidden;解决就用它解决，如果不能再用万能浮动法。

《6》BFC：块级格式化上下文

作用：有些属性可以出发BFC，为自身创建一个作用域模块，以用来解决

margin-top穿透问题，高度塌陷问题

float：left/right；

position：absplute/fixed；

弹性盒

inline-block

《7》clear 清除浮动影响

clear：both

《8》伪元素选择器

伪类选择器

：hover {

}

伪元素选择器

选择器：：after{ 在XXX之后(需要搭配content使用)

content： “ ”；

}

选择器：：before{ 在XXX之前(需要搭配content使用)

content： “ ”；

}

选择器：：first-line{ 选中XX 的第一行

}

选择器：：before{ 选中XXX的第一个字符

}

《9》万能清除浮动法。

塌陷元素：：after{

content：" "；

display：block；

height：0；

overflow：hidden；

clear：both；

}

区别：伪类选择器是单冒号，伪元素选择器是双冒行

十七，元素隐藏，显示，透明

《1》元素隐藏：

1，opacity:0; 元素透明，元素没有消失

2，display:none; 元素隐藏

3，height：0px；高度为0

overflow：hidden；溢出隐藏

4，visibility :visible(显示)/hidden(隐藏) 消失后还占据完本的空间

5，transform：scale（0）；元素缩放，缩放到元素的0倍

《2》元素透明：

1，opacity 元素透明 0-1 0透明——1不透明

2，transparent 透明色

3，rgba(0-255，0-255，0-255，0-1) 透明色，前三位代表红，绿，蓝，a代表透明度（0-1）

十八，最小最大宽高

max-width 最大宽度

min-width 最小宽度

max-height 最大高度

min-height 最小高度

总结：

不写宽高时

宽度按照最大宽度或者实际宽度显示(浏览器窗口小于最大宽度时)

高度按照内容高度去显示，如果没有内容就按照最小值显示，如果由内容就显示内容高度

十九，iframe 页面嵌套（现在基本不用）

作用：iframe 是用来再网页中插入第三方页面，可以把一些网站的公共部分摘离出来，通过iframe按需引入即可

二十，满屏布局

1，高度满屏：元素宽度写100%继承body的宽度，但是body的高度为0所以元素继承的高度也是0，因此需要写html,body,{height:100%}

2，calc计算函数

作用：动态计算宽度和高度

二十一，五大浏览器

1，IE浏览器

2，火狐浏览器

3，谷歌浏览器

4，苹果浏览器

5，欧鹏浏览器

拓展：市面上的一款浏览器叫做网景浏览器，又叫网景领航者

二十二，HTML5

《1》HTML5语法

DOCTYPE声明

不区分大小写

指定字符集编码

meta charset=“UTF-8”
可省略标记的元素不允许写结束标记的元素：br、col、embed、hr、img，input、、link、meta
可以省略结束标记的元素：li、dt、dd、p、option、colgroup、thead、tbody、tfoot、tr、td、th
可以省略全部标记的元素：html、head、body、colgroup、tbody
省略引号属性值可以使用双引号，也可以使用单引号。

html5特点：

相较于之前更新了很多的内容，而且语法相较于之前更加的灵活，而且兼容性和包容性更好，语法没有之前那么严格。

《2》HTML5新增（语义化）标签

1，header 头部标签

2，main 主体模块

3，footer 脚步区域

4，nav 导航栏

5，section 模块

6，article 与上下文不管的独立模块，文章

7，aside 搭配article使用，对article内的内容做解释，写在article外

8，figure 表示独立的流内容，figcaption 元素作为他的标题，一般放在内部的第一个或者最后一个

总结：对于浏览器搜索引擎和渲染引擎更加的友好，搜素排名比重更高

《3》视频和音频标签

video 视频

元素类型：行内块元素

属性：

src 视频路径

controls 控制台

muted 静音

autoplay 自动播放要搭配 muted 静音使用

loop 循环播放

poster 视频未播放时的加载封面

audio 音频

元素类型：行内块元素

属性：

src 音频路径

controls 控制台不加控制台啥都看不到

autoplay 自动播放看浏览器，浏览器支持就行

muted 静音

loop 循环播放

补充：视频和音频有很多种格式，一些老版本的浏览器对于所有格式并不是都支持，我们可以做兼容

格式如下：
```
<video controls>
      <source src="..Apublic/3theA.mp4">
      <source src="../ public/ 3theA.ogg">
      <source src="../public/ 3theA.webm">
</video>
```

二十三，自定义字体

作用：有些字体类型是用户电脑上没有的，为了能够让他生效，我们需要将字体文件引入页面中，并进行命名使用，具体如下：

@font-face{

font-family:“自定义字体名”；

src:url(文字存放路径)；

}

xx{font-family:“自定义字体名”}

二十四，阴影 shadow（啥都）

《1》文字阴影

text-shadow：0px 0px 0px rgb；

参数格式：text-shadow：文字阴影水平偏移文字阴影垂直偏移文字阴影模糊距离文字阴影的颜色；

参数1：文字阴影水平偏移正右，负左

参数2：文字阴影垂直偏移正下，负上

参数3：文字阴影模糊距离数字越大越模糊，不支持负数

参数4：阴影颜色

多重阴影写法：

text-shadow：阴影1，阴影2，…；

先写的会覆盖后写的

《2》盒子阴影

box-shadow：0px 0px 0px 0px rgb inset；

阴影水平偏移阴影垂直偏移阴影模糊距离阴影大小阴影的颜色内外阴影；

阴影大小和内外阴影可以省略

参数1：阴影水平偏移正右，复左

参数2：阴影垂直偏移正下，复上

参数3：阴影模糊距离数字越大越模糊，不支持负数

参数4：阴影大小（可以省略）默认为0 大于0放大，小于0缩小

参数5：阴影颜色

参数6：内外阴影（可以省略）默认为外阴影，内阴影徐设置inset

多重阴影写法：

text-shadow：阴影1，阴影2，…；

先写的会覆盖后写的

二十五，边框圆角

border-radius

格式：

border-radius：圆角X轴距离/圆角Y轴距离

如果x轴距离和y轴距离一致可以进行简写 border-radius：xx;

正方形写50%为圆形，长方形写50%是椭圆形，宽高一半是胶囊型

四个角不同边框圆角的写法：

两个数值的时候时参数1：左上右下，参数2：右上左下

三个数值的时候时参数1：左上参数2，右上左下，参数3：右下

四个数值的时候时参数1：左上，参数2：右上，参数3：右下，参数4：左下

二十六，渐变

概念：渐变可以让你在两个或多个颜色直间显示平稳的渐变。

开发实现方法：

CSS3渐变属性实现（放大时显示效果更好）

背景图实现

《1》线性渐变 linear-gradient（个瑞顶特）

概念；从一个方向向另一个方向的颜色渐变

格式： background-image:linear-gradient(渐变方向，渐变初始颜色，…，渐变结束颜色)；

特点和使用：

渐变的默认方向为自上而下

第一个参数为渐变方向，此参数可以省略，省略时采用默认方向，也可以如下设置。

朝着某个方向渐变 linear-gradient(to left,red,blue) ;
朝着某个角落渐变 linear-gradient(to left bottom,red,blue) ;
朝着某个角度渐变 linear-gradient(30deg,red,blue) ;
渐变颜色至少有两种，至多不限

《2》经向渐变 radial-gradient

格式： background-image:radial-gradient(渐变起始点，渐变形状，渐变大小，渐变初始颜色，…，渐变结束颜色)；

概念：经向渐变是从一个点向四周的颜色渐变。

使用：

一般我们很少去调整前三个参数，如果不需要调整我们可以进行省略，如果需要调整，最好加上浏览器前缀。
第一个参数为渐变的起始点，第一参数可以写两个数字，第一个数值为X轴坐标，第二个数值为Y轴坐标。
第二个参数为渐变的形状，默认为椭圆形（ellipse）可以通过circle设置为圆形。
第三个参数为渐变大小，支持以下数值。

closest-side(可咯瑟斯特) 最近边

farthest-side 最远边

closest-corner(法吹斯特) 最近角

farthest-corner 最远角

《3》非规律渐变

非规律线性渐变

background: linear-gradient(#cc99ff 30%, #cc66ff 60%, #cc33ff 70%);；

非规律经向渐变

background: radial-gradient(#cc99ff 30%, #cc66ff 60%, #cc33ff 70%);；

总结：我们可以在颜色后边跟上颜色出现的位置

《4》重复渐变 repeating-（瑞皮停）

重复线性渐变

background: repeating-linear-gradient(#cc99ff 0%, #cc66ff 20%, #cc33ff 40%);；

重复经向渐变

background: repeating-radial-gradient(#cc99ff 0%, #cc66ff 20%, #cc33ff 40%);；

二十七，浏览器前缀

概念：某些CSS属性还只是最新版的预览版，部分浏览器已经为这些属性提供了支持，这些自行扩展的CSS属性为了让:这些浏览器识别这些专属属性，CSS规范允许在CSS属性前增加各自的浏览器前缀。

IE -ms-

google -webkit-

opera -o-

firefox -moz-

safari -webkit-

二十八，CSS3过渡 transition

《1》概念：

transition 允许CSS属性在一定时间区间内做平滑的过渡，但是我们需要一个触发条件。

《2》格式：

transition ：transition -property(过渡对象) transition-duration(持续时间) transition-timing-function(过渡动画) transition-delay(延迟时间)；

《3》案例：

transition :all 1s linear 0s;

各个参数：

参数1 参与过渡对象/属性 all所有

参数2 过渡时间

参数3 过渡速率

linear 匀速

ease（1字）逐渐慢下来

ease-in 加速

ease-out 减速

ease-in-out 先加速再减速

steps( ) 分步骤

cubic-bezier() 贝塞尔曲线

参数4 延迟时间如果不需要延迟可以省略

《4》注意事项：

谁用给谁加
我们把过渡加给触发后的代码，触发时有过度效果，停止触发后则没有过渡效果，如果需要触发前和触发后都有过渡效果，我们应将过渡加给初始状态。
一般过渡可以对数值变化生效，如果属性值是两单词，过度则无法生效
过渡会对同一属性的不同数值型生效。

二十九，2D效果 - transform

属性	：
translate	位移
scale（sko）	缩放
rotate	旋转
skew	倾斜
transform-origin（o人机）	转换原点

《1》2D位移 translate

translate （使用起来和relative写运动差不多）

格式：

transform：translate（x，y）；

特点：

《1》参数1控制水平位移，正右负左

《2》参数2控制垂直位移，正下负上

《3》位移后不会影响页面布局

《4》支持 transform: translateX（x）和 transfoetranslateY（y）；

《5》如果只写一个数值，默认为第一个参数，第二个参数默认为0

《2》2D缩放 scale

scale（）

格式：

transform；scale(x，y）；

特点：

《1》参数1控制宽度的缩放，参数2控制高度的缩放，默认值为scale（1,1）

《2》参数>1放大,0<参数<1缩小，参数=0消失，参数<0，先缩小后反转放大。

《3》支持 transform:scaleX(x) 和 transform:scaleY(y)；

《4》默认从中心向四周缩放

《5》如果只写一个数值，默认为宽高共同的缩放倍数

《3》2D旋转 rotate

rotate（）

格式：

transform； rotate（）；

特点：

《1》 rotatex（）元素绕着x轴旋转， rotatey（）元素绕着y轴旋转， rotate（）元素绕着中心旋转。

《2》（）内只写一个参数，单位为deg，旋转度数，支持负数

《4》2D倾斜 skew

skew（）

格式：

transform； skew（xdeg，ydeg）；

特点：

《1》第一个参数为x倾斜度数，第二个参数是y轴倾斜度数，两个参数支持负数。

《2》支持 skewX（）和 skewY（）。

《3》如果只写一个值，默认为第一个参数，第二个参数为0。

《5》2D转换原点 transform-origin

格式：

transform-origin：（left top）；

作用：

可以改变2D效果的默认参考点。

注意：

2D转换原点可以设置在元素外边。

《6》transform 的多效果使用

transform：rotate() translate();

如果我们需要同时使用多个2d效果，可以在transform后面直接写多个2d属性值。

注意：

先旋转再位移和先位移再旋转的效果完全不同，但是最终的位置是相同的。

三十，CSS3D效果

概念：

《1》3D属性

3D位移：

transform:translate3d(x,y,z)；

transform:translateZ(z)；

3D旋转：

transform：rotade3d(矢量，矢量，矢量，旋转角度)；矢量0不转，1转

transform：rotadeZ(xxdeg)；

3D缩放：

transform：scale3d(x,y,z);

transform：scaleZ(z);

3D缩放注意：

3d的z轴缩放，单独给子元素使用无效，一般我们把3d缩放加给父元素

《2》景深（视觉3D效果）-perspective

概念：

物体离我们较远时，看这个物体就比较小，当物体不断靠近我们时，看这个物体会越来越大，这个就叫近大远小也叫景深，页面时一个平面，可以个元素添加景深，来使页面具有近大远小的效果。

使用：

perspective: 1200px;（在父元素中使用，较为常用）

transform:perspective(1200px) （在子元素中使用）

注意：

进过大量测试，景深在900-1200之间，效果最佳，但不绝对

补充：

perspective-origin 设置景深观察点，默认值在正中间(center

,center)

《3》3D空间-transform-style

属性值：

flat 子元素在里面按照平面显示

preserve-3d 子元素在里面按照3d空间显示

三十一，CSS3动画属性-animation

《1》animation和transition的区别

相同点：

都可以随着时间改变元素的属性值

不同点：

1， animation 不需要触发条件，transition需要条件才能触发

2， animation 可以一直触发，transition触发一次执行一次

《2》格式：

animation：动画名称单次持续时间动画速率延迟时间执行次数运动方向运动状态；

《3》关键帧：

@keyframe 动画名字 {

0% {

}

。。。

100%{

}

特点：

《1》每一帧的参考点都是起始点，

《2》我们可以控制每一帧的所在位置

《3》前面的百分百是时间执行的进度，当时间过了百分之多少时就执行 { }的代码

移动端

一，移动端相关概念

移动端概念：可以移动的设备称之为移动端，一般指手机，平板，手表等。
我们开发时主要考虑的是手机界面，app
移动端查看模拟器功能

二，移动端手机像素

《1》物理像素

设备出厂时的屏幕像素点

《2》逻辑像素/CSS像素

CSS样式表中使用的像素就叫逻辑像素

《3》设备像素比/DPR

设备像素比=物理像素/CSS像素

三，视口

《1》布局视口:

布局视口是指网页的宽度，一般移动端浏览器都默认设置了布局视口的宽度，布局视口的默认宽度有可能是768px、980px或1024px等。

1，浏览器设置布局视口的原因：

有些网站是没有对移动端进行开发的，为了能够让用户观看，设置了布局视口，但是布局视口只是能看，并不能给用户最佳的观看体验。

《2》视觉视口:

是指用户看到的区域，及屏幕窗口的大小

《3》理想视口:

理想视口是指对设备来讲最理想的视口尺寸，能够给用户最佳的移动端观看体验

设置理想视口代码如下：

<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

四，移动端布局（PX固定布局）

《1》设置理想视口

《2》*{margin:0; padding:0;}

body{display :flex;

flex-direction: column; }

中间模块{flex :1;

overflow-y : auto; }

《3》设计图量出来，根据设计图的设备像素比，计算出来我们要使用的CSS像素进行开发

缺点：

只能在出具设计图的机型上才能适配，无法适配其他机型。

五，其他的移动端布局方案

《1》可切换的固定布局

同样以像素作为页面单位，参考主流设备尺寸，设计几套不同宽度的布局。通过识别的屏幕尺寸或浏览器宽度，选择最合适的那套宽度布局；

总结：

响应式布局的理念，有部分网页时这么做的

《2》弹性布局/百分比布局（常用）

比百分比作为页面的基本带我，多使用弹性盒布局，可以适应一定范围内所有尺寸的设备屏幕及浏览器宽度，并能完美利用有效空间展现最佳效果。

《3》等比缩放布局/rem布局

使用rem作为移动端开发的基本单位，可以实现页面随着屏幕大小变化而等比缩放

《4》混合布局

弹性盒盒等比缩放布局综合使用。

六，响应式布局

《1》优缺点：

优点：

1，面对不同分辨率设备灵活性强

2，能够快捷解决多设备显示适应问题

缺点：

1，兼容各种设备工作量大，效率低下

2，代码累赘，会出现隐藏无用的元素，加载时间加长

3，其实这是一种折中性质的设计解决方案，多方面因素影响而达不到最佳效果

4，一定程度上改变了网站原有的布局结构，会出现用户混淆的情况

《2》如何实现响应式布局-媒体查询 @media

(1) 概念:

媒体查询可以让我们根据设备显示器的特性为其设定CSS样式.

(2) 组成：

媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成。

(3) 格式：

@media all and (min-width:320px) and (max-width:480px){

需要响应的CSS样式

}

（4）媒体类型

前端常用的类型有：

all 所有设备

screen 显示器，笔记本，移动端（前端页面显示设备）

handled 便携设备（移动端）

七，弹性布局/百分比布局

《1》特点：

控件弹性：

（1）关键模块高度和位置不变，宽度根据窗口大小自适应。

（2）布局多使用弹性布局，控件左右，左中右，居中分布，让左右固定，中间伸缩

文字流试：

（1）文字内容模块不去写固定的宽高，让内容自动撑开

图片等比缩放：

（1）图片不写固定的高度，宽度写百分比，让图片随着窗口大小等比缩放

《2》总结：

弹性布局比较吃设计，开发时对于一些关键模块宽高固定，中间伸缩。

多使用弹性盒，百分比开发。

八，前端常用开发单位

单位	：
px	像素
em	相对父元素的字体大小去，参照物是父元素字体大小，而不是父元素身上的其他属性大小
rem	相对根元素的字体大小，相对于html标签字体大小
vw	vw视窗宽度单位(1vw视窗宽度的百分之1)
vh	vh视窗高度单位(1vw视窗高度的百分之1)