table>

    <tr>         <td>单元格内的文字</td>         ...     </tr>     ... </table>

th 常用于表格第一行突出重要性

先制作表格的结构.

1.第一行里面是 th 表头单元格

2.第二行开始里面是 td 普通单元格单元格里面可以放任何元素

3.文字链接图片等都可以

后书写表格属性

1.用到宽度高度边框cellpadding 和 cellspacing

2.表格浏览器中对齐 align

*跨行合并**：rowspan="合并单元格的个数"

    最上侧单元格为目标单元格, 写合并代码

跨列合并：colspan="合并单元格的个数"

    最左侧单元格为目标单元格, 写合并代码

表格的相关标签**

    table thead body tr th td

表格的相关标签**

    table thead body tr th td

表单

表单的组成：

表单域

表单域的常用属性：

表单控件(表单元素)

type 属性的属性值及其描述如下：

除 type 属性外，<input>标签还有其他很多属性，其常用属性如下：

语法：

cols=“每行中的字符数”

rows=“显示的行数”，

form表单域里面

基础选择器又包括：标签选择器、类选择器、id 选择器和通配符选择器

通配符选择器 权重 0

标签选择器

类选择器 伪类选择器 10

元素选择器权重 1

、id 选择器权重 100

行内式权重 1000

！important 权重 无穷大

选择器总结

css字体属性:选择器总结

css字体属性:

font-size 属性定义字体大小

谷歌浏览器默认的文字大小为16px

px（像素）大小是我们网页的最常用的单位

font-weight 属性设置文本字体的粗细

normal 默认值不加粗。

bold 定义加粗

font-style 属性设置文本的风格

normal 默认值浏览器显示标准的字样

italic 浏览器显示斜体的字体样式

字体的综合写法

body { font: font-style font-weight font-size/line-height font-family;}

文本对齐：

text-align 属性用于设置元素内文本内容的水平对齐方式。

修饰文本：

text-decoration：underline 加下划线

text-decoration：none 不加下划线

text-decoration：line-through 删除线

text-indent：2em；文本缩进

line-height: 26px; 行间距：

行高的文本分为 上间距 文本高度 下间距 = 行间距

css样式表：

行内样式表（行内式）：书写方便 权重高

内部样式表（嵌入式）：部分结构和样式分离

外部样式表（链接式） ：完全实现样式结构分离 需要引入

#

什么是复合选择器？

常用的复合选择器包括：后代选择器、子选择器、并集选择器、伪类选择器等等

链接伪类选择器

a:link    没有点击过的(访问过的)链接         a:visited    点击过的(访问过的)链接         a:hover    鼠标经过的那个链接         a:active    鼠标正在按下还没有弹起鼠标的那个链接

因为 a 链接在浏览器中具有默认样式，所以我们实际工作中都需要给链接单独指定样式

:focus 伪类选择器

:focus 伪类选择器用于选取获得焦点的表单元素。

        焦点就是光标，一般情况 <input> 类表单元素才能获取

元素显示模式的分类

块元素

块级元素的特点：

• 比较霸道，自己独占一行。

• 高度，宽度、外边距以及内边距都可以控制。

• 宽度默认是容器（父级宽度）的100%。

• 是一个容器及盒子，里面可以放行内或者块级元素。

注意：

        文字类的元素内不能放块级元素

2.2、行内元素

常见的行内元素：

<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>

        <span> 标签是最典型的行内元素。有的地方也将行内元素称为内联元素。

行内元素的特点：

• 相邻行内元素在一行上，一行可以显示多个。

• 高、宽直接设置是无效的。(能设置左右内外边距，上下不能设置)

• 默认宽度就是它本身内容的宽度。

• 行内元素只能容纳文本或其他行内元素。

2.3、行内块元素

常见的行内块标签：

<img />、<input />、<td>

        它们同时具有块元素和行内元素的特点。有些资料称它们为行内块元素。

行内块元素的特点：

• 和相邻行内元素（行内块）在一行上，但是他们之间会有空白缝隙。

• 一行可以显示多个（行内元素特点）。

• 默认宽度就是它本身内容的宽度（行内元素特点）。

• 高度，行高、外边距以及内边距都可以控制（块级元素特点）。

元素显示模式的转换

转换方式

• 转换为块元素：display:block;

• 转换为行内元素：display:inline;

• 转换为行内块：display: inline-block;

css的背景

background-color 定义元素的背景颜色

元素背景颜色默认值是 transparent（透明）

background-image 定义元素的背景图片

background-repeat 设置元素背景图像的平铺

no---repeat 背景不平铺

repeat--X 背景在横向上平铺

repeat--Y 背景在纵向上平铺

background-position 属性可以改变图片在背景中的位置

background-attachment 属性设置背景图像是否固定或者随着页面的其余部分滚动。

background-attachment 后期可以制作视差滚动的效果。

background-attachment：scroll 背景图像随着对象内容滚动

background-attachment：fixed 背景图像固定

background: rgba(0, 0, 0, .3); 提供了背景颜色半透明的效果。

URL 路径 同时里面的路径不要加引号。

、css三大特性

层叠性

样式冲突，遵循的原则是就近原则，哪个样式离结构近，就执行哪个样式

继承性

继承性口诀：龙生龙，凤生凤，老鼠生的孩子会打洞

优先级

• 选择器相同，则执行层叠性

• 选择器不同，则根据选择器权重执行

  边框（border）

边框样式 border-style 可以设置如下值：

• none：没有边框即忽略所有边框的宽度（默认值）

• solid：边框为单实线(最为常用的)

• dashed：边框为虚线

• dotted：边框为点线

• border-collapse: collapse; 表示相邻边框合并在一起

• 边框会影响盒子实际大小

内边距（padding）

方位词

laft right top bottom 左右上下

padding影响了盒子实际大小

解决方案：

        如果保证盒子跟效果图大小保持一致，则让 width/height 减去多出来的内边距大小即可。

外边距（margin）

方位词

laft right top bottom 左右上下

以上方法是让块级元素水平居中，行内元素或者行内块元素水平居中给其父元素添加 text-align:center 即可。

嵌套块元素垂直外边距的塌陷

解决方案：

• 可以为父元素定义上边框。

• 可以为父元素定义上内边距。

• 可以为父元素添加 overflow:hidden。

注意：

浮动 和固定定位，绝对定位的元素。不会发生外边距塌陷问题

border-radius 属性用于设置元素的外边框圆角。

盒子阴影

box-shadow 属性为盒子添加阴影

box-shadow：（水平位置）（垂直位置）（模糊距离）（阴影尺寸）（阴影颜色）outset 内部阴影 inset 外部阴影

text-shadow 属性将阴影应用于文本。

传统网页布局的三种方式

• 普通流（标准流）

• 所谓的标准流: 就是标签按照规定好默认方式排列

• 浮动

  • 总结： 有很多的布局效果，标准流没有办法完成，此时就可以利用浮动完成布局。 因为浮动可以改变元素标签默认的排列方式.

        浮动最典型的应用：可以让多个块级元素一行内排列显示。

        网页布局第一准则：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动。

  浮动元素会脱离标准流(脱标

  为什么需要清除浮动？

          由于父级盒子很多情况下，不方便给高度，但是子盒子浮动又不占有位置，最后父级盒子高度为 0 时，就会影响下面的标准流盒子。

  浮动的盒子只会影响浮动盒子后面的标准流,不会影响前面的标准流

  清除浮动本质

  清除浮动的本质是清除浮动元素造成的影响：浮动的子标签无法撑开父盒子的高度

  注意：

  • 如果父盒子本身有高度，则不需要清除浮动

  • 清除浮动之后，父级就会根据浮动的子盒子自动检测高度。

  • 父级有了高度，就不会影响下面的标准流了

  • 清除浮动的多种方式

    4.1、额外标签法

    额外标签***在浮动元素末尾添加一个空的标签。

    可以给父级添加 overflow 属性，将其属性值设置为 hidden、 auto 或 scroll

    为什么需要清除浮动？

    1. 父级没高度。

    2. 子盒子浮动了。

    3. 影响下面布局了，我们就应该清除浮动了。

    4. 父级添加after伪元素

    5. 优点：没有增加标签，结构更简单

#定位(position) 介绍

1.浮动可以让多个块级盒子一行没有缝隙排列显示， 经常用于横向排列盒子。

2.定位则是可以让盒子自由的在某个盒子内移动位置或者固定屏幕中某个位置，并且可以压住其他盒子。

定位 = 定位模式 + 边偏移

边偏移 top、bottom、left 和 right 4 个属性。

一般情况下，凡是有定位地方必定有边偏移

static**静态**定位

relative**相对**定位

相对定位是元素在移动位置的时候，是相对于它自己原来的位置来说的

• 1.它是相对于自己原来的位置来移动的（移动位置的时候参照点是自己原来的位置）。

• 2.原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待它。

  因此，相对定位并没有脱标。它最典型的应用是给绝对定位当爹的。。。

absolute` 绝对定位

绝对定位是元素在移动位置的时候，是相对于它祖先元素来说的

完全脱标 —— 完全不占位置

父元素没有定位，则以浏览器为准定位

元素将依据最近的已经定位（绝对、固定或相对定位）的父元素（祖先）进行定位。

定位口诀 —— 子绝父相

子级是绝对定位的话，父级要用相对定位

因为父级需要占有位置，因此是相对定位， 子盒子不需要占有位置，则是绝对定位

fixed` 固定定位

固定定位是元素固定于浏览器可视区的位置。（认死理型） 主要使用场景： 可以在浏览器页面滚动时元素的位置不会改变。

• 固定定位的特点：（务必记住）：

  1.以浏览器的可视窗口为参照点移动元素。

  • 跟父元素没有任何关系

  • 不随滚动条滚动。

  2.固定定位不在占有原先的位置。

• 固定定位也是脱标的，其实固定定位也可以看做是一种特殊的绝对定位

粘性定位(sticky) - 了解

边偏移需要和定位模式联合使用，单独使用无效；

堆叠顺序（z-index）

在使用定位布局时，可能会出现盒子重叠的情况。此时，可以使用 z-index 来控制盒子的前后次序 (z轴)

z-index 只能应用于相对定位、绝对定位和固定定位的元素，其他标准流、浮动和静态定位无效。

1. left: 50%;：让盒子的左侧移动到父级元素的水平中心位置；

2. margin-left: -100px;：让盒子向左移动自身宽度的一半。

3. 脱标的盒子不会触发外边距塌陷

4. 绝对定位（固定定位）会完全压住盒子

5. 浮动之所以不会压住文字，因为浮动产生的目的最初是为了做文字环绕效果的。 文字会围绕浮动元素

6. 但是绝对定位（固定定位） 会压住下面标准流所有的内容

7. 但是绝对定位（固定定位） 会压住下面标准流所有的内容

   display: none 隐藏对象

   display：block 除了转换为块级元素之外，同时还有显示元素的意思。

   • display 隐藏元素后，不再占有原来的位置。

   • 后面应用及其广泛，搭配 JS 可以做很多的网页特效。实际开发场景

   • visibility：visible ; 　元素可视

     visibility：hidden; 　 元素隐藏

特点：visibility 隐藏元素后，继续占有原来的位置

• 如果隐藏元素想要原来位置， 就用 visibility：hidden

• 如果隐藏元素不想要原来位置， 就用 display：none (用处更多 重点）###

#overflow 溢出（重点）

visible 不剪切内容也不添加滚动条

hidden 不显示超过对象尺寸的内容，超出的部分隐藏掉

scroll 不管超出内容否，总是显示滚动条

scroll 不管超出内容否，总是显示滚动条

auto 超出自动显示滚动条，不超出不显示滚动条

#精灵图（重点）

为什么需要精灵图:

为了有效地减少服务器接收和发送请求的次数，提高页面的加载速度

字体图标的优点

轻量级：

一个图标字体要比一系列的图像要小。一旦字体加载了，图标就会马上渲染出来，减少了服务器请求

灵活性:

本质其实是文字，可以很随意的改变颜色、产生阴影、透明效果、旋转等

兼容性：

几乎支持所有的浏览器，请放心使用

字体图标不能替代精灵技术，只是对工作中图标部分技术的提升和优化。

#字体图标

1.字体图标的下载

2.字体图标的引入 （引入到我们html页面中）

3.字体图标的追加

#鼠标样式 cursor

轮廓线 outline

给表单添加 outline: 0; 或者 outline: none; 样式之后，就可以去掉默认的蓝色边框。

防止拖拽文本域

resize:none

#vertical-align 属性应用

vertical-align : baseline 基线对齐

vertical-align :top 顶端对齐

vertical-align : middle 中部对齐

vertical-align : bottom最低边对齐

单行文本溢出显示省略号--必须满足三个条件：

/1. 先强制一行内显示文本/ white-space: nowrap;

1. 超出的部分隐藏*/ overflow: hidden;

2. 文字用省略号替代超出的部分*/ text-overflow: ellipsis;

#移动端

平面转换概念 目标：使用transform属性实现元素的位移、旋转、缩放等效果

transform: translate(水平移动距离, 垂直移动距离);

取值（正负均可） Ø 像素单位数值 Ø 百分比（参照物为盒子自身尺寸

translate()如果只给出一个值, 表示x轴方向移动距离 Ø 单独设置某个方向的移动距离：translateX() & translateY()

transform: rotate(角度); 注意：角度单位是deg l 技巧：取值正负均可 Ø 取值为正, 则顺时针旋转 Ø 取值为负, 则逆时针旋转

transform-origin属性改变转换原点 默认值是中心

transform-origin: 方位词

Ø 方位名词（left、top、right、bottom、center）

百分比（参照盒子自身尺寸计算）

transform复合属性

先移动后选转 空格分开

#缩放：使用scale改变元素的尺寸

transform: scale(x轴缩放倍数, y轴缩放倍数);

scale值大于1表示放大, scale值小于1表示缩小

透明度（opacity

#渐变背景：使用background-image属性实现渐变背景效果

background-image：linear--gradinent(

transparent,rgba()

)

#生命力的意义在于平博，因为世界本身就是一个竞技场!

#空间位移 使用translate实现元素空间位移效果

语法 l transform: translate3d(x, y, z); l transform: translateX(值); l transform: translateY(值); l transform: translateZ(值); l 取值（正负均可） l 像素单位数值 l 百分比

使用perspective属性实现透视效果

：近大远小、近清楚远模糊

属性（添加给父级） Ø perspective: 值; Ø 取值：像素单位数值， 数值一般在800 – 1200。 l 作用 Ø 空间转换时，为元素添加近大远小、近实远虚的视觉效果

空间旋转 使用rotate实现元素空间旋转效果

Ø transform: rotateZ(值); Ø transform: rotateX(值); Ø transform: rotateY(值);

判断旋转方向: 左手握住旋转轴, 拇指指向正值方向, 手指弯曲方向为旋转正值方向

Ø rotate3d(x, y, z, 角度度数) ：用来设置自定义旋转轴的位置及旋转的角度 Ø x，y，z 取值为0-1之间的数字

立体呈现 transform-style: preserve-3d呈现立体图形

盒子父元素添加transform-style: preserve-3d；

1. 按需求设置子盒子的位置（位移或旋转

空间内，转换元素都有自已独立的坐标轴，互不干扰

空间缩放 transform: scale3d(x, y, z)

#动画 使用animation添加动画效果

定义动画

@Keyframes 类名 {

动画的样式

0%开始

过程

100%结束

}

调用动画

animation 类名 时长 延迟时间

animation：属性

执行完的状态

forwards：最后一帧状态 backwards：第一帧状态

速度曲线 steps(数字)：逐帧动画

重复次数infinite为无限循环

动画方向 alternate为反向

animation-play-state 暂停动画 paused为暂停，通常配合:hover使用

逐帧动画：帧动画。开发中，一般配合精灵图实现动画效果。

animation-timing-function: steps(N)； Ø 将动画过程等分成N份

# 如果你的前面有阴影别怕 那是因为你后面有光！

分辨率

物理分辨率是生产屏幕时就固定的，它是不可被改变的 Ø 逻辑分辨率是由软件（驱动）决定的

viewport：视口 l width=device-width：视口宽度 = 设备宽度 l initial-scale=1.0：缩放1倍（不缩放

百分比布局

宽度自适应，高度固定

#Flex布局

目标： 能够使用Flex布局模型灵活、快速的开发网页

是一种浏览器提倡的布局模型 Ø 布局网页更简单、灵活 Ø 避免浮动脱标的问题

Flex布局模型构成

父元素添加 display: flex，子元素可以自动的挤压或拉伸

弹性容器 弹性盒子 主轴 侧轴 / 交叉轴

主轴对齐方式

使用justify-content调节元素在主轴的对齐方式

在Flex布局模型中，调节主轴或侧轴的对齐方式来设置盒子之间的间距。

justify-content 属性值

flex-start 默认值, 起点开始依次排列

flex-end 终点开始依次排列

center 沿主轴居中排列

space-around 弹性盒子沿主轴均匀排列, 空白间距均分在弹性盒子两侧

space-between 弹性盒子沿主轴均匀排列, 空白间距均分在相邻盒子之间

space-evenly 弹性盒子沿主轴均匀排列, 弹性盒子与容器之间间距相等

侧轴对齐方式

：使用align-items调节元素在侧轴的对齐方式

伸缩比

使用flex属性修改弹性盒子伸缩比

属性 Ø flex : 值; l 取值分类 Ø 数值(整数) 注意 : 只占用父盒子剩余尺寸