图片标签：

表单标签：

autocomplate开启的话会把之前输入过的内容自动提示出来

get：表单数据会显示在地址栏中，不安全，地址栏的url长度有限制！

post：表单数据不会显示在地址栏中，数据封装在请求体中，安全。长度没有限制。

标签：

该标签用于定义超链接，作用是从一个页面链接到另一个页面

1、语法格式：

2、属性

3、锚点链接

在href属性中，设置属性值为#名字的形式，如：

找到目标标签，里面添加一个id属性=刚才的名字，如：

特殊字符：

表单项标签：

type属性值：

radio为了达到单选的效果，name属性值必须一致



合并单元格


注意：

ul中只能放li，但是li中是可以放其他元素的

无序列表中各项是没有顺序之分的，是并列的

无序列表会带有自己的样式属性，在实际中我们会用css样式来控制


表单控件

是单标签

type属性设置不同的属性值来指定不同的控件类型

input标签的重要属性：

checked属性针对input中的radio和checkbox

lable标签

行内元素

行内块元素


背景颜色

background-color:transparent; 透明的，清澈的；

background-image: 属性描述了元素的背景图像

none是默认值

背景平铺：可以使用background-repeat属性来设置。

页面元素既可以添加背景图片，也可以添加背景颜色，但是背景图片会压住背景颜色

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


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

层叠样式

相同样式才会覆盖

继承

子元素会继承父元素的某些样式

优先级

复合选择器会有权重叠加的问题

权重虽然有叠加但是不会有进位

CSS

内边距Padding

内边距padding不会撑开盒子的情况

如果盒子本身没有指定width/height属性，此时padding不会撑开盒子

外边距margin

margin属性用于设置外边距，即控制盒子与盒子之间的距离

margin: 30px; 只写一个代表上下左右都是30px的距离

margin: 20px 30px; 写两个代表上下30，左右50像素

四个的话是上右下左

典型应用

外边距可以让块级盒子水平居中，但是必须满足2个条件

1. 盒子必须指定了宽度
2. 盒子左右外边距都设置为auto

常见的写法，以下三种都可以

• margin-left：auto; margin-right:auto;

• margin:aoto;

• margin: 0 auto;

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

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

对于两个嵌套关系的块元素，父元素有上外边距，同时子元素也有上外边距，此时父元素会塌陷较大的外边距值

解决方法：

1. 可以给父元素定义上边框
2. 可以给父元素定义内边距
3. 可以给父元素添加overflow:hidden;
4. 还有其他方法：比如浮动、固定、绝对定位的盒子不会有塌陷问题

清除内外边距

网页元素有很多默认的内外边距，而且不同浏览器默认的也不一致，因此在布局前，首先要清除下网页元素的内外边距

* {
	padding: 0;   /*清除内边距*/
	margin: 0;	  /*清除外边距*/
}

注意：行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距，但是转换为块级和行内元素就可以了

行内元素尽量只设置左右的内外边距

疑问？

1. 布局为啥不都用div？

   标签是有语义的，在合理的地方用合理的标签。比如产品标题就用h，大量文字就用P，靠积累

2. 为啥用南无多类名？

   类名就是给每个盒子都起来一个名字，可以更好地找到这个盒子，选取盒子更加容易，后期维护方便

3. 到底用margin还是padding

   大部分情况下可以混用，两者各有优缺点，根据实际情况来，总是有更简单的方法来实现。

   padding会把盒子撑大

4. 自己没有思路？

   布局有很多实现方式，先模仿后作出自己的风格

圆角边框

在css3中增加了圆角效果

border-radius: 属性设置元素的外边框圆角

语法：border-radius:length;

圆角边框的原理：

radius:半径圆的半径 ：椭圆与边框的交集形成圆角效果

参数可以为数值或者百分比的形式

要是圆形可以是宽度的一半，或者50%

可以跟4个值：左上 右上 左下 右下

两个值是对角线一样

可以只改变一个角：border-top-left-radius

盒子阴影

css3中增加了box-shadow这个属性为盒子增加阴影

语法：

文字阴影

text-shadow：设置文字阴影

浮动

网页布局的本质-用css来排放盒子，把盒子摆到相应位置

css中提供了3中传统布局方式

• 普通流

  就是标签按照规定好的方式进行排列

  1.块级元素会独占一行，从上到下顺序排序

  常用元素：div、hr、p、h1-h6、ul、ol、dl、form、table

  2.行内元素会按照顺序排序，从左到右顺序排序，碰到父元素边缘会自动换行

  常用元素：span、a、i、em等

  标准流是最基本的布局方式

• 浮动

• 定位

为什么需要浮动？

1. 如何让多个块级盒子水平排成一行？

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

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

什么是浮动？

float属性用于创建浮动框，将其移动到一边，直到左边缘或者右边缘触及包含块或者另一个浮动框的边缘。

语法：

float:属性值;

浮动特性：

1. 浮动元素会脱离标准流（脱标）

2. 浮动的盒子不再保持原先的位置

3. 如果多个盒子都设置了浮动，则他们会按照属性值一行内显示并且顶端对其排列

4. 浮动元素会有行内块元素特性

   任何元素都可以浮动，不管原先是什么模式的元素，添加浮动后都具有行内块元素相似的特性

   如果块级盒子没有设置宽度，默认宽度和父级一样宽，但是添加浮动后，它的大小根据内容来决定

   浮动的盒子中间是没有缝隙的，是紧挨着一起的

   行内元素同理

为了约束浮动元素位置，我们网页布局一般采取的策略是：

先用标准流的父元素排列上下位置，之后内部子元素采取浮动左右位置，符合网页布局第一准则

网页布局第二准则：先设置盒子大小，后设置盒子位置

'>'子代选择器，div>li 只选择亲儿子

浮动布局注意点：

1. 浮动和标准流的父盒子搭配

   先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置

2. 一个元素浮动了，理论上其余兄弟元素也要浮动。

   一个盒子里面有多个盒子，如果其中一个盒子浮动了，那么其他兄弟也应该浮动，以防止引起问题。

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

元素的显示与隐藏

1. display显示隐藏
2. visibility显示隐藏
3. overflow溢出显示隐藏

display属性

display:none；隐藏对象

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

注意：display隐藏元素后，不再占有原来的位置

visibility

inherit:继承上一个父对象的可见性

visible:对象可视

hidden：对象隐藏

collapse:主要用来隐藏表格的行和列

注意：隐藏元素后继续占有原来的位置

overflow

overflow属性指定了如果内容溢出一个元素的框（超过其指定高度及宽度）时，会发生什么？

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

auto:此为body对象和textarea的默认值，在需要时剪切内容或者添加滚动条，溢出的时候才显示滚动条

hidden：不显示超过对象尺寸的内容

scroll：总是显示滚动条，不溢出也显示滚动条

CSS高级技巧

精灵图

为什么要学习精灵图？

为了有效地减少服务器接收和发送请求的次数，提高网页的加载效率，出现了CSS精灵技术

核心原理：将网页中一些小背景图整合到一张大图上，这样服务器只需要一次请求就·可以了。

vertical-align

用于设置一个元素的垂直对齐方式，但是他只针对行内元素或者行内块元素才有效

溢出的文字省略号显示

1. 先强制一行内显示文本

   white-sapce:nowrap; (默认是nomal自动换行)

2. 超出的部分隐藏

   overflow：hidden;

3. 文字用省略号替代超出部分

   text-overflow: ellipsis;

多行文本溢出显示省略号

多行文本溢出显示省略号有较大的兼容性问题，适合于webKit浏览器或者移动端（移动端大部分都是weKit内核）

1. overflow：hidden;
2. text-overflow: ellipsis;
3. display:-webkit-box; /弹性伸缩盒子模型显示/
4. -webkit-line-clamp: 2; /限制在一个块元素显示的文本行数/
5. -webkit-box-orient: vertical; /设置或检索伸缩盒子对象的子元素的排列方式/

常见的布局技巧

1. margin负值的应用
2. 文字围绕浮动元素
3. 行内块的巧妙运用
4. css三角强化

层叠样式表。

用于设置和布局网页的一种计算机语言，告知浏览器如何渲染解析页面元素。

组成：

选择器：选择HTML元素的方式，可以使用标签名，class属性值，id值等多种方式

样式声明：用于给HTML元素设置具体的样式，格式是 属性名：属性值

格式如下：

选择器{
	属性名：属性值;
	属性名：属性值;
	属性名：属性值;
}
h1{
	color: red;
	font-size: 5px;
}

基本语法

css的引入方式

1. 内联样式

   • 在标签中通过style属性来控制样式，只能影响当前这一行

   • 格式：

     <标签 style="属性名：属性值;属性名：属性值;">内容</标签>

2. 内部样式

   • 在标签中通过