Html-Css

HTML

input属性标签

<input type="text" name="text">//单行文本
<input type="password" name="password">//密码
<input type="radio" name="radio">//单选按钮
<input type="checkbox" name="checkbox">//复选按钮
<input type="button">//普通按钮
<input type="submit">//提交按钮
<input type="reset"">//重置按钮
<input type="image">//图像形式的提交按钮
<input type="file">//文件域

name	控件中的名称
value	input控件中的默认文本值
size	input控件在页面中的显示宽度
checked	定义选择控件默认被选中项
maxlength	控件允许输入的最多字符数
placeholder	填写输入字段提示

注：

<input type="submit">与双标签<button></button>
双标签<button></button>会触发默认行为，要加上人return false
建议用<input type="button">

<from action="url地址" method="提交方式" name="名称">
	各种表单控件
</form>

img属性标签

<img src="图像的路径" alt="图像不能显示时替换的文本" title="鼠标悬停时显示的内容" width="图像的宽度" height="图像的高度" border="图像的边框宽度">

CSS

1.复合选择器

1.后代选择器

.class h3 {color:red;font-size:16px}//父级 子级 {属性:属性值;属性:属性值}

2.子元素选择器

作用：只能选择作为某元素，子元素（亲儿子）的元素

.class>h3 {color:red;font-size:16px}//父级 子级 {属性:属性值;属性:属性值}

3.交集选择器

（即—又---的意思）

P.red {color:red; font-size:16px}

4.并集选择器

用逗号隔开，集体声明

P,span {color: red;font-size: 16px}

5.链接伪类选择器

a:link//未访问的链接
a:visited//已访问的链接
a:hover//鼠标移动到链接上
a:active//鼠标按下时的样子

6.优先级（权重计算公式）

继承或者*	0,0,0,0
标签选择器	0,0,0,1
类，伪类	0,0,1,0
id	0,1,0,0
style=""	1,0,0,0
!important	∞无穷大

7.继承性

子元素可以继承父元素的样式

（text-,font-,line-,这些可以继承以及color属性）

注：a不继承父级

8.层叠性

就近原则（长江后浪推前浪，前浪死在沙滩上）

2.元素

1.块级元素

<h1>-<h6>,<p>,<div>,<ul>,<ol>,<li>等
//特点：1.独占一行
//2.高，宽，外边距，内边距都可以控制
//3.宽度是默认容器的100%
//4.是一个容器及盒子，里面可以放行内或者块级元素
//注：文字类标签不能放其余的块级元素

1.BFC:块级模式格式化上下文

类似于div这类块级盒子所具备的一种特性

特点：

1. 触发BFC的元素会重新计算盒子的高度（包括内部浮动子盒子的高度）eg:overflower:hidden
2. 在BFC的盒子中元素是默认按照从左到右方式排列

2.行内元素

<a>,<strong>,<b>,<em>,<i>,<del>,<s>,<ins>,<u>,<span>
//特点：1.一行多个
//2.高，宽直接设置是无效的
//3.默认宽度就是它本身的内容的宽度
//4.只能容纳文本或其他行内元素
//注：1.链接里面不能再放链接2.特殊情况a里面可以放块级元素，但是给a转换一下块级模式最安全

3.行内块元素

<img />,<input />,<td>
//特点：1.和行内块在一行上，但是之间回有空白缝隙，一行可以显示多个
//2.默认宽度就是它本事内容宽度
//3.高度，行高，外边距，及内边距都可以控制

4.标签模式转换

块转行内：display:inline

行内转块：display:block

块，行内元素转换为行内块：display:inline-block

3.背景background

3.1 背景颜色(color)

• 语法：

  background-color:颜色值;   默认的值是 transparent  透明的
  

3.2 背景图片(image)

• 语法：

background-image : none | url (url) 

参数	作用
none	无背景图（默认的）
url	使用绝对或相对地址指定背景图像

background-image : url(images/demo.png);

• 小技巧： 我们提倡 背景图片后面的地址，url不要加引号。

3.3 背景平铺（repeat）

• 语法：

background-repeat : repeat | no-repeat | repeat-x | repeat-y 

参数	作用
repeat	背景图像在纵向和横向上平铺（默认的）
no-repeat	背景图像不平铺
repeat-x	背景图像在横向上平铺
repeat-y	背景图像在纵向平铺

3.4 背景位置(position) 重点

• 语法：

background-position : length || length

background-position : position || position 

参数	值
length	百分数 | 由浮点数字和单位标识符组成的长度值
position	top | center | bottom | left | center | right 方位名词

• 注意：
  • 必须先指定background-image属性
  • position 后面是x坐标和y坐标。 可以使用方位名词或者 精确单位。
  • 如果指定两个值，两个值都是方位名字，则两个值前后顺序无关，比如left top和top left效果一致
  • 如果只指定了一个方位名词，另一个值默认居中对齐。
  • 如果position 后面是精确坐标， 那么第一个，肯定是 x 第二的一定是y
  • 如果只指定一个数值,那该数值一定是x坐标，另一个默认垂直居中
  • 如果指定的两个值是 精确单位和方位名字混合使用，则第一个值是x坐标，第二个值是y坐标

3.5 背景附着

• 背景附着就是解释背景是滚动的还是固定的

• 语法：

  background-attachment : scroll | fixed 
  

参数	作用
scroll	背景图像是随对象内容滚动
fixed	背景图像固定

3.6 背景简写

• background：属性的值的书写顺序官方并没有强制标准的。为了可读性，建议大家如下写：
• background: 背景颜色 背景图片地址 背景平铺 背景滚动 背景位置;
• 语法：

background: transparent url(image.jpg) repeat-y  scroll center top ;

案例：

导航栏案例

3.7 背景透明(CSS3)

• 语法：

background: rgba(0, 0, 0, 0.3);

• 最后一个参数是alpha 透明度 取值范围 0~1之间
• 我们习惯把0.3 的 0 省略掉 这样写 background: rgba(0, 0, 0, .3);
• 注意： 背景半透明是指盒子背景半透明， 盒子里面的内容不受影响
• 因为是CSS3 ，所以 低于 ie9 的版本是不支持的。

4.盒子模型

盒子模型有元素的内容、边框（border）、内边距（padding）、和外边距（margin）组成。

4.1盒子边框（border）

• 语法：

border : border-width || border-style || border-color 

属性	作用
border-width	定义边框粗细，单位是px
border-style	边框的样式
border-color	边框颜色

• 边框的样式：
  • none：没有边框即忽略所有边框的宽度（默认值）
  • solid：边框为单实线(最为常用的)
  • dashed：边框为虚线
  • dotted：边框为点线

1.边框综合设置

border : border-width || border-style || border-color 

例如：

 border: 1px solid red;  没有顺序  

2.盒子边框写法总结表

很多情况下，我们不需要指定4个边框，我们是可以单独给4个边框分别指定的。

上边框	下边框	左边框	右边框
border-top-style:样式;	border-bottom-style:样式;	border-left-style:样式;	border-right-style:样式;
border-top-width:宽度;	border- bottom-width:宽度;	border-left-width:宽度;	border-right-width:宽度;
border-top-color:颜色;	border- bottom-color:颜色;	border-left-color:颜色;	border-right-color:颜色;
border-top:宽度 样式 颜色;	border-bottom:宽度 样式 颜色;	border-left:宽度 样式 颜色;	border-right:宽度 样式 颜色;

3.圆角矩形设置四个角

border-top-left-radious: 10px;
border-top-right-radious: 20px;
border-buttom-left-radious: 20px;
border-buttom-right-radious: 20px;
border-radious: 10px 20px 20px 20px;

4.2内边距（padding）

1 内边距：

​ padding属性用于设置内边距。 是指 边框与内容之间的距离。

2 设置

属性	作用
padding-left	左内边距
padding-right	右内边距
padding-top	上内边距
padding-bottom	下内边距

当我们给盒子指定padding值之后， 发生了2件事情：

1. 内容和边框 有了距离，添加了内边距。
2. 盒子会变大了。

注意： 后面跟几个数值表示的意思是不一样的。

我们分开写有点麻烦，我们可以不可以简写呢？

值的个数	表达意思
1个值	padding：上下左右内边距;
2个值	padding: 上下内边距 左右内边距 ；
3个值	padding：上内边距 左右内边距 下内边距；
4个值	padding: 上内边距 右内边距 下内边距 左内边距 ；

4.3外边距（margin）

1. 外边距

​ margin属性用于设置外边距。 margin就是控制盒子和盒子之间的距离

2. 设置：

属性	作用
margin-left	左外边距
margin-right	右外边距
margin-top	上外边距
margin-bottom	下外边距

margin值的简写 （复合写法）代表意思 跟 padding 完全相同。

3. 块级盒子水平居中

• 可以让一个块级盒子实现水平居中必须：
  • 盒子必须指定了宽度（width）
  • 然后就给左右的外边距都设置为auto，

实际工作中常用这种方式进行网页布局，示例代码如下：

.header{ width:960px; margin:0 auto;}

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

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

4. 文字居中和盒子居中区别

5. 盒子内的文字水平居中是 text-align: center, 而且还可以让 行内元素和行内块居中对齐

6. 块级盒子水平居中 左右margin 改为 auto

text-align: center; /*  文字 行内元素 行内块元素水平居中 */
margin: 10px auto;  /* 块级盒子水平居中  左右margin 改为 auto 就阔以了 上下margin都可以 */

5. 插入图片和背景图片区别

6. 插入图片 我们用的最多 比如产品展示类 移动位置只能靠盒模型 padding margin

7. 背景图片我们一般用于小图标背景 或者 超大背景图片 背景图片 只能通过 background-position

 img {  
		width: 200px;/* 插入图片更改大小 width 和 height */
		height: 210px;
		margin-top: 30px;  /* 插入图片更改位置 可以用margin 或padding  盒模型 */
		margin-left: 50px; /* 插入当图片也是一个盒子 */
	}

 div {
		width: 400px;
		height: 400px;
		border: 1px solid purple;
		background: #fff url(images/sun.jpg) no-repeat;
		background-position: 30px 50px; /* 背景图片更改位置 我用 background-position */
	}

6 .清除元素的默认内外边距(重要)

为了更灵活方便地控制网页中的元素，制作网页时，我们需要将元素的默认内外边距清除

代码：

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

注意：

• 行内元素为了照顾兼容性， 尽量只设置左右内外边距， 不要设置上下内外边距。

7. 外边距合并

使用margin定义块元素的垂直外边距时，可能会出现外边距的合并。

(1). 相邻块元素垂直外边距的合并

• 当上下相邻的两个块元素相遇时，如果上面的元素有下外边距margin-bottom
• 下面的元素有上外边距margin-top，则他们之间的垂直间距不是margin-bottom与margin-top之和
• 取两个值中的较大者这种现象被称为相邻块元素垂直外边距的合并（也称外边距塌陷）。

解决方案：尽量给只给一个盒子添加margin值。

(2). 嵌套块元素垂直外边距的合并（塌陷）

• 对于两个嵌套关系的块元素，如果父元素没有上内边距及边框
• 父元素的上外边距会与子元素的上外边距发生合并
• 合并后的外边距为两者中的较大者

解决方案：

1. 可以为父元素定义上边框。
2. 可以为父元素定义上内边距
3. 可以为父元素添加overflow:hidden。

还有其他方法，比如浮动、固定、绝对定位的盒子不会有问题，后面咱们再总结。。。

5.浮动

1. 什么是浮动(float)

概念：元素的浮动是指设置了浮动属性的元素会

1. 脱离标准普通流的控制

   脱离文档流的三种方法

   1）.float

   2）.absolute

   3）.fixed

2. 移动到指定位置。

作用：

1. 让多个盒子(div)水平排列成一行，使得浮动成为布局的重要手段。
2. 可以实现盒子的左右对齐等等…
3. 浮动最早是用来控制图片，实现文字环绕图片的效果。

语法

在 CSS 中，通过 float 中文， 浮 漏 特 属性定义浮动，语法如下：

选择器 { float: 属性值; }

属性值	描述
none	元素不浮动（默认值）
left	元素向左浮动
right	元素向右浮动

2.浮动口诀。通过 float ----- 浮 漏 特

1）浮

漂浮在普通流的上面，脱离标准流

2）漏

把自己原来的位置给下面的标准流盒子，不占有原来的位置

3）特

会改变元素display属性（display:inline-block)

任何元素都可以浮动，生成的块级框和行内块及其相似

**注：**浮动元素默认之间没有间隙，浮动元素互相贴靠一起，但是如果父级宽度装不下这些浮动的盒子，多出的盒子会另起一行对齐

3.浮动元素与各级盒子的关系

1）.浮动元素与父盒子的关系

1. 子盒子的浮动参照父盒子对齐
2. 不会与父盒子的边框重叠，也不会超过父盒子的内边距

2）.浮动元素与兄弟盒子的关系

当前一个兄弟盒子是

1. 浮动的，那么当前盒子会与前一个盒子的顶部对齐
2. 普通流的，当前盒子在前一个兄弟盒子下方

**注：**浮动只会影响当前或者后面的标准流盒子，不会影响前面的标准流

4.清除浮动

1.本质：

清除浮动主要为了解决父级元素因为子级浮动引起内部高度为0 的问题。清除浮动之后， 父级就会根据浮动的子盒子自动检测高度。父级有了高度，就不会影响下面的标准流了

2.清除浮动的方法

在CSS中，clear属性用于清除浮动，在这里，我们先记住清除浮动的方法，具体的原理，等我们学完css会再回头分析。

• 语法：

选择器{clear:属性值;}   clear 清除  

属性值	描述
left	不允许左侧有浮动元素（清除左侧浮动的影响）
right	不允许右侧有浮动元素（清除右侧浮动的影响）
both	同时清除左右两侧浮动的影响

但是我们实际工作中， 几乎只用 clear: both;

1).额外标签法(隔墙法)

是W3C推荐的做法是通过在浮动元素末尾添加一个空的标签例如 <div style=”clear:both”></div>，或则其他标签br等亦可。

• 优点： 通俗易懂，书写方便
• 缺点： 添加许多无意义的标签，结构化较差。

2).给父级添加overflow属性方法

可以给父级添加： overflow为 hidden| auto| scroll  都可以实现。

优点： 代码简洁

缺点： 内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素。

3).给父级使用after伪元素清除浮动

:after 方式为空元素额外标签法的升级版，好处是不用单独加标签了

使用方法：

 .clearfix:after {  content: ""; display: block; height: 0; clear: both; visibility: hidden;  }   

 .clearfix {*zoom: 1;}   /* IE6、7 专有 */

• 优点： 符合闭合浮动思想 结构语义化正确
• 缺点： 由于IE6-7不支持:after，使用 zoom:1触发 hasLayout。
• 代表网站： 百度、淘宝网、网易等

4).给父级使用双伪元素清除浮动

使用方法：

.clearfix:before,.clearfix:after { 
  content:"";
  display:table; 
}
.clearfix:after {
 clear:both;
}
.clearfix {
  *zoom:1;
}

• 优点： 代码更简洁
• 缺点： 由于IE6-7不支持:after，使用 zoom:1触发 hasLayout。
• 代表网站： 小米、腾讯等

3.什么时候用清除浮动

1. 父级没高度
2. 子盒子浮动了
3. 影响下面布局了，我们就应该清除浮动了。

6.定位(子绝父相)

1.边偏移

简单说， 我们定位的盒子，是通过边偏移来移动位置的。

在 CSS 中，通过 top、bottom、left 和 right 属性定义元素的边偏移：（方位名词）

边偏移属性	示例	描述
top	top: 80px	顶端偏移量，定义元素相对于其父元素上边线的距离。
bottom	bottom: 80px	底部偏移量，定义元素相对于其父元素下边线的距离。
left	left: 80px	左侧偏移量，定义元素相对于其父元素左边线的距离。
right	right: 80px	右侧偏移量，定义元素相对于其父元素右边线的距离

定位的盒子有了边偏移才有价值。 一般情况下，凡是有定位地方必定有边偏移。

2. 定位模式 (position)

在 CSS 中，通过 position 属性定义元素的定位模式，语法如下：

选择器 { position: 属性值; }

定位模式是有不同分类的，在不同情况下，我们用到不同的定位模式。

值	语义
static	静态定位
relative	相对定位
absolute	绝对定位
fixed	固定定位

1. 相对定位

   1).相对于自己原来在标准流中的位置来移动

   2).原来在标准流的区域继续占有后面的盒子仍然以标准流的方式对待它

2. 绝对定位

   1).父级盒子无定位，以浏览器为准定位

   2).父级有定位，以父级为准

3. 固定定位

   浏览器可视窗口+边偏移属性

   不保留原来位置(脱标)

   1).跟父级没有任何关系，单独使用

   2).不跟滚动条滚动

3.绝对定位的盒子居中

left: 50%;
margin-left: -**px

4.堆叠顺序（z-index）

1. 属性值：正整数，负整数或0（数值越大越靠上）
2. 属性值相同则按照书写顺序，后来居上
3. 不加单位

5.定位改变display属性

1. 可以用inline-block转换为行内块
2. 可以用浮动float默认转换为行内块（类似，不完全一样）
3. 绝对定位 和固定定位也和浮动类似

扩展： float: 转化为行内块元素，相邻元素之间没有间隙

​ display:inline-block 相邻元素之间有间隙

7.display显示

display: none//隐藏 不保留位置
display: block//显示 除了转换为块级元素外，同时还有显示元素的意思

8.visibility 可见性

visibility: visible//对象可视
visibility: hidden//对象隐藏，(保留位置)

9.overflow 溢出

visible: 不剪切内容也不添加滚动条
hidden:不显示超过尺寸的内容，超过的部分隐藏
scroll:不滚超出内容否，总是显示滚动条
auto:超出自动显示滚动条，不超出不显示

10.currsor 鼠标样式

default	小白默认
pointer	小手
move	移动
text	文本
not-allowed	禁止

11.轮廓线

input {
    outline: 0/none //去掉边框
    resize: none //防止文本拖拽
}
<input readonly="value">//把输入字段设置为只读。

12.图片表单文字对齐

基线对齐	vertical-align:baseline
垂直居中	vertical-align:middle
顶部对齐	vertical-align:top

**注：**1. 不影响块级元素

​ 2.只针对行内元素或者行内块元素

13.去除图片底侧空白缝隙（只能行内块）

1. img {
       vertical-align: middle/top/bottom
   }
   

2. 给img添加display:block(转化为块级元素就不会有问题)

14.溢出文字省略号显示

white-space: normal//文字显示不再自动换行
white-space:nowrap//强制显示行内文本
overflow: hidden//溢出隐藏
text-overflow:clip//不显示(...)
text-overflow:ellipsis//显示(...)

/*文字溢出隐藏*/
white-space:nowrap//强制显示行内文本
overflow: hidden//溢出隐藏
text-overflow:ellipsis//显示(...)

15.css三角形

{
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 10px;
    border-color:red transparent transparent transparent;
    font-size: 0;//照顾兼容性低版本浏览器
    line-height: 0;
}

16.过渡

transition: 要过度的属性，花费的时间，运动曲线，何时开始
transition: width 0.6s ease 0s;
transition: width 0.6s ease 0s,height 0.6s ease 0s;
transition: all 0.5s

运动曲线

linear	匀速
ease	逐渐慢下来
ease-in	加速
ease-out	减速
ease-in-out	先加速后减速