html+css基础入门月总结
文章目录
一.HTML初识
二.HTML常见标签
三.CSS初识
四.基础选择器
五.后代选择器
六.display转换模式
七.CSS 背景(background)
八.选择器优先级
九.盒子边框（border）
十. 内边距（padding）
十一.外边距(margin)
十二.浮动(float)
十三定位(position)
十四.overflow 溢出
十五.鼠标样式cursor
十六.溢出的文字省略号显示
一.认识WEB。
网页主要由文字、图像和超链接等元素构成。当然，除了这些元素，网页中还可以包含音频、视频以及Flash等。
2. 常见的主流浏览器。
3.常见浏览器内核
| 浏览器 | 内核 | 备注 |
|---|---|---|
| IE | Trident | IE、猎豹安全、360极速浏览器、百度浏览器 |
| firefox | Gecko | 可惜这几年已经没落了，打开速度慢、升级频繁、猪一样的队友flash、神一样的对手chrome。 |
| Safari | webkit | 现在很多人错误地把 webkit 叫做 chrome内核（即使 chrome内核已经是 blink 了）。苹果感觉像被别人抢了媳妇，都哭晕再厕所里面了。 |
| chrome | Chromium/Blink | 在 Chromium 项目中研发 Blink 渲染引擎（即浏览器核心），内置于 Chrome 浏览器之中。Blink 其实是 WebKit 的分支。大部分国产浏览器最新版都采用Blink内核。二次开发 |
| Opera | blink | 现在跟随chrome用blink内核。 |
一.HTML初识
- HTML 指的是超文本标记语言 (Hyper Text Markup Language)是用来描述网页的一种语言。
- HTML 不是一种编程语言，而是一种标记语言。
- 标记语言是一套标记标签。
贴出html的骨架图：
1.HTML标签关系
①嵌套关系，缩进一个tab键的身位（一个tab是4个空格）
<head>
<title> </title>
</head>
②并列关系
<head></head>
<body></body>
2.常见的开发工具(个人比较喜欢VScode，用起来舒服极了^_^)
二.HTML常见标签
1.为了使网页更具有语义化，我们经常会在页面中用到标题标签，HTML提供了6个等级的标题，即
标题标签语义： 作为标题使用，并且依据重要性递减
其基本语法格式如下：
<h1> 标题文本 </h1>
<h2> 标题文本 </h2>
<h3> 标题文本 </h3>
<h4> 标题文本 </h4>
<h5> 标题文本 </h5>
<h6> 标题文本 </h6>
- 注： 加了标题的文字会变的加粗，字号也会依次变大
- 一行是只能放一个标题的
2.段落标签p（常见）
<p> 文本内容 </p>
3.水平线标签hr
<hr />是单标签
4.换行标签br
<br />
5.div 和 span标签
<div> 这是头部 </div> <span>今日价格</span>
注： 他们两个都是盒子，用来装网页元素
- div标签 用来布局的，但是现在一行只能放一个div
- span标签 用来布局的，一行上可以放好多个span
排版标签总结
| 标签名 | 定义 | 说明 |
|---|---|---|
| < h x> </ hx> | 标题标签 | 作为标题使用，并且依据重要性递减 |
| < p></ p> | 段落标签 | 把 HTML 文档分割为若干段落 |
| < hr /> | 水平线标签 | 就是一条线 |
| < br/> | 换行标签 | |
| < div>< /div> | div标签 | 用来布局，但是现在一行只能放一个div |
| < span>< /span> | span标签 | 用来布局，一行上可以放多个span |
6.文本格式化标签
7.图像标签img
正常的<br />
<img src="cz.jpg" width="300" height="300" /><br />
有提示文本的<br />
<img src="cz.jpg" width="300" height="300" border="3" title="这是个小蒲公英" /><br />
有替换文本的<br />
<img src="cz.jpg" width="300" height="300" border="3" alt="图片不存在" />
- 链接标签
<a href=“跳转目标” target=“目标窗口的弹出方式”>文本或图像
| 属性 | 作用 |
|---|---|
| href | 用于指定链接目标的url地址，（必须属性）当为标签应用href属性时，它就具有了超链接的功能 |
| target | 用于指定链接页面的打开方式，其取值有_self和_blank两种，其中_self为默认值，__blank为在新窗口中打开方式。 |
9.表格标签
创建表格的基本语法：
<table>
<tr>
<td>单元格内的文字</td>
...
</tr>
...
</table>
-
table用于定义一个表格标签。
-
tr标签 用于定义表格中的行，必须嵌套在 table标签中。
-
td 用于定义表格中的单元格，必须嵌套在标签中。
-
字母 td 指表格数据（table data），即数据单元格的内容。
例如：
<table width="500" height="300" border="1" cellpadding="20" cellspacing="0" align="center">
<tr> <th>姓名</th> <th>性别</th> <th>年龄</th> </tr>
<tr> <td>刘德华</td> <td>男</td> <td>55</td> </tr>
<tr> <td>郭富城</td> <td>男</td> <td>52</td> </tr>
<tr> <td>张学友</td> <td>男</td> <td>58</td> </tr>
<tr> <td>黎明</td> <td>男</td> <td>18</td> </tr>
<tr> <td>刘晓庆</td> <td>女</td> <td>63</td> </tr>
</table>
表格标题caption
<table>
<caption>我是表格标题</caption>
</table>
- 注： caption 元素定义表格标题，通常这个标题会被居中且显示于表格之上。
- caption 标签必须紧随 table 标签之后。
合并单元格2种方式
- 跨行合并：rowspan=“合并单元格的个数”
- 跨列合并：colspan=“合并单元格的个数”
| 标签名 | 定义 | 说明 |
|---|---|---|
| < table>< /table> | 表格标签 | 表格模型 |
| < tr>< /tr> | 表格行标签 | 行标签要再table标签内部才有意义 |
| < td>< /td> | 单元格标签 | 单元格标签是个容器级元素，可以放任何东西 |
| < th>< /th> | 表头单元格标签 | 它还是一个单元格，但是里面的文字会居中且加粗 |
| < caption> < /caption> | 表格标题标签 | 表格标题，跟着表格一起走，和表格居中对齐 |
| clospan 和 rowspan | 合并属性 | 合并单元格 |
10.列表标签
- 概念：
容器里面装载着结构，样式一致的文字或图表的一种形式，叫列表 - 特点：
列表最大的特点就是 整齐 、整洁、 有序，跟表格类似，但是他可组合自由度会更高。
①无序列表 ul
无序列表的各个列表项之间没有顺序级别之分，是并列的。其基本语法格式如下：
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
......
</ul>
②有序列表
有序列表即为有排列顺序的列表，其各个列表项按照一定的顺序排列定义，有序列表的基本语法格式如下：
<ol>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
......
</ol>
③自定义列表
定义列表常用于对术语或名词进行解释和描述，定义列表的列表项前没有任何项目符号。其基本语法如下：
<dl>
<dt>名词1</dt>
<dd>名词1解释1</dd>
<dd>名词1解释2</dd>
...
<dt>名词2</dt>
<dd>名词2解释1</dd>
<dd>名词2解释2</dd>
...
</dl>
| 标签名 | 定义 | 说明 |
|---|---|---|
| < ul>< /ul> | 无序标签 | 里面只能包含li， 没有顺序 |
| < ol>< /ol> | 有序标签 | 里面只能包含li， 有顺序 |
| < dl>< /dl> | 自定义列表 | 里面有2个兄弟， dt 和 dd |
11.表单标签
表单控件：
包含了具体的表单功能项，如单行文本输入框、密码输入框、复选框、提交按钮、重置按钮等。
提示信息：
一个表单中通常还需要包含一些说明性的文字，提示用户进行填写和操作。
表单域：
他相当于一个容器，用来容纳所有的表单控件和提示信息，可以通过他定义处理表单数据所用程序的url地址，以及数据提交到服务器的方法。如果不定义表单域，表单中的数据就无法传送到后台服务器。
① input 控件
语法：
<input type="属性值" value="你好">
- input 输入的意思
- <input />标签为单标签
- type属性设置不同的属性值用来指定不同的控件类型
- 除了type属性还有别的属性
| 属性 | 说明 | 作用 |
|---|---|---|
| type | 表单类型 | 用来指定不同的控件类型 |
| value | 表单值 | 表单里面默认显示的文本 |
| name | 表单名字 | 页面中的表单很多，name主要作用就是用于区别不同的表单。 |
| checked | 默认选中 | 表示那个单选或者复选按钮一开始就被选中 |
12.label标签
目标：
label标签主要目的是为了提高用户体验。 为用户提高最优秀的服务。
概念：
label 标签为 input 元素定义标注（标签）。
作用：
用于绑定一个表单元素, 当点击label标签的时候, 被绑定的表单元素就会获得输入焦点。
如何绑定元素呢？
1.第一种用法就是用label直接包括input表单。
<label> 用户名： <input type="radio" name="usename" value="请输入用户名"> </label>
2 . 第二种用法 for 属性规定 label 与哪个表单元素绑定。
<label for="sex">男</label>
<input type="radio" name="sex" id="sex">
13 . textarea控件(文本域)
- 语法：
<textarea >
文本内容
</textarea>
作用：
通过textarea控件可以轻松地创建多行文本输入框.
文本框和文本域区别
| 表单 | 名称 | 区别 | 默认值显示 | 用于场景 |
|---|---|---|---|---|
| input type=“text” | 文本框 | 只能显示一行文本 | 单标签，通过value显示默认值 | 用户名、昵称、密码等 |
| textarea | 文本域 | 可以显示多行文本 | 双标签，默认值写到标签中间 | 留言板 |
14.select下拉列表
目的：
如果有多个选项让用户选择，为了节约空间，我们可以使用select控件定义下拉列表.
语法：
<select>
<option>选项1</option>
<option>选项2</option>
<option>选项3</option>
...
</select>
- 注意：
- <select> 中至少包含一对 option
- 在option 中定义selected =" selected "时，当前项即为默认选中项。
15 . form表单域
- 目的：
在HTML中，form标签被用于定义表单域，以实现用户信息的收集和传递，form中的所有内容都会被提交给服务器。
**语法: **
<form action="url地址" method="提交方式" name="表单名称">
各种表单控件
</form>
常用属性：
| 属性 | 属性值 | 作用 |
|---|---|---|
| action | url地址 | 用于指定接收并处理表单数据的服务器程序的url地址。 |
| method | get/post | 用于设置表单数据的提交方式，其取值为get或post。 |
| name | 名称 | 用于指定表单的名称，以区分同一个页面中的多个表单。 |
HTML笔记整理到这里
这是最近收集到的前端中文手册，有需要自取了
整理不易，转载附上链接(# ^ .^#)这儿呢
链接：https://pan.baidu.com/s/1pJZeQb11Zn4euik5i8BtGg
提取码：u6my
三.CSS初识
- 概念：
CSS(Cascading Style Sheets) ，通常称为CSS样式表或层叠样式表（级联样式表） - 作用：
- 主要用于设置 HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局和外观显示样式。
1.行内式（内联样式）
概念：
称行内样式、行间样式.
是通过标签的style属性来设置元素的样式
<标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容 </标签名>
2.内部样式表（内嵌样式表）
- 概念：
是将CSS代码集中写在HTML文档的head头部标签中，并且用style标签定义 - 其基本语法格式如下：
<head>
<style type="text/CSS"> 选择器（选择的标签） { 属性1: 属性值1; 属性2: 属性值2; 属性3: 属性值3; } </style>
</head>
<style> div { color: red; font-size: 12px; } </style>
3 外部样式表（外链式）
- 概念：
是将所有的样式放在一个或多个以**.CSS**为扩展名的外部样式表文件中，
通过link标签将外部样式表文件链接到HTML文档中 - 其基本语法格式如下：
<head>
<link rel="stylesheet" type="text/css" href="css文件路径">
</head>
总结：
| 样式表 | 优点 | 缺点 | 使用情况 | 控制范围 |
|---|---|---|---|---|
| 行内样式表 | 书写方便，权重高 | 没有实现样式和结构相分离 | 较少 | 控制一个标签（少） |
| 内部样式表 | 部分结构和样式相分离 | 没有彻底分离 | 较多 | 控制一个页面（中） |
| 外部样式表 | 完全实现结构和样式相分离 | 需要引入 | 最多，强烈推荐 | 控制整个站点（多） |
四.基础选择器
1 标签选择器
- 概念：
标签选择器（元素选择器）是指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式。 - 语法：
标签名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
- 作用：
标签选择器 可以把某一类标签全部选择出来 比如所有的div标签 和 所有的 span标签 - 优点：
是能快速为页面中同类型的标签统一样式 - 缺点：
不能设计差异化样式。
2 类选择器
类选择器使用“.”（英文点号）进行标识，后面紧跟类名.
-
语法：
- 类名选择器
.类名 {
属性1:属性值1;
属性2:属性值2;
属性3:属性值3;
}
- 标签
<p class='类名'></p>
- 优点：
- 可以为元素对象定义单独或相同的样式。 可以选择一个或者==多个标签 ==
- 注意
- 类选择器使用“.”（英文点号）进行标识。
- 长名称或词组可以使用中横线来为选择器命名。
- 不要纯数字、中文等命名， 尽量使用英文字母来表示。
3.id选择器
id选择器使用#进行标识，后面紧跟id名
- 其基本语法格式如下：
- id选择器
#id名 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
- 标签
<p id="id名"></p>
- 元素的id值是唯一的，只能对应于文档中某一个具体的元素。
- 用法基本和类选择器相同。
5 . 通配符选择器
- 概念
通配符选择器用*号表示， * 就是 选择所有的标签 ,作用范围最广的，能匹配页面中所有的元素。 - 其基本语法格式如下：
* { 属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
例如下面的代码，使用通配符选择器定义CSS样式，清除所有HTML标记的默认边距。
* {
margin: 0;
padding: 0;
}
- 注意：
会匹配页面所有的元素，降低页面响应速度，不建议随便使用
| 选择器 | 作用 | 缺点 | 使用情况 | 用法 |
|---|---|---|---|---|
| 标签选择器 | 可以选出所有相同的标签，比如p | 不能差异化选择 | 较多 | p { color：red;} |
| 类选择器 | 可以选出1个或者多个标签 | 可以根据需求选择 | 非常多 | .nav { color: red; } |
| id选择器 | 一次只能选择器1个标签 | 只能使用一次 | 不推荐使用 | #nav {color: red;} |
| 通配符选择器 | 选择所有的标签 | 选择的太多，有部分不需要 | 不推荐使用 | * {color: red;} |
五.字体样式
1 font-size:大小
- 作用：
font-size属性用于设置字号
p {
font-size:20px;
}
- 单位：
- 可以使用相对长度单位，也可以使用绝对长度单位。
- 相对长度单位比较常用，推荐使用像素单位px，绝对长度单位使用较少。
注意：
- 单位基本就用px了
- 谷歌浏览器默认的文字大小为16px
- 但是不同浏览器可能默认显示的字号大小不一致，我们尽量给一个明确值大小，不要默认大小。一般给body指定整个页面文字的大小
2 .font-family:字体
- 作用：
font-family属性用于设置哪一种字体。
p{ font-family:"微软雅黑";}
| 字体名称 | 英文名称 | Unicode 编码 |
|---|---|---|
| 宋体 | SimSun | \5B8B\4F53 |
| 新宋体 | NSimSun | \65B0\5B8B\4F53 |
| 黑体 | SimHei | \9ED1\4F53 |
| 微软雅黑 | Microsoft YaHei | \5FAE\8F6F\96C5\9ED1 |
| 楷体_GB2312 | KaiTi_GB2312 | \6977\4F53_GB2312 |
| 隶书 | LiSu | \96B6\4E66 |
| 幼园 | YouYuan | \5E7C\5706 |
| 华文细黑 | STXihei | \534E\6587\7EC6\9ED1 |
| 细明体 | MingLiU | \7EC6\660E\4F53 |
| 新细明体 | PMingLiU | \65B0\7EC6\660E\4F53 |
3.font-weight字体粗细
总结：
| 属性 | 表示 | 注意点 |
|---|---|---|
| font-size | 字号 | 我们通常用的单位是px 像素，一定要跟上单位 |
| font-family | 字体 | 实际工作中按照团队约定来写字体 |
| font-weight | 字体粗细 | 记住加粗是 700 或者 bold 不加粗 是 normal 或者 400 记住数字不要跟单位 |
| font-style | 字体样式 | 记住倾斜是 italic 不倾斜 是 normal 工作中我们最常用 normal |
| font | 字体连写 | 1. 字体连写是有顺序的 不能随意换位置 2. 其中字号 和 字体 必须同时出现 |
五. CSS外观属性
1 color:文本颜色
- 作用：
color属性用于定义文本的颜色， - 其取值方式有如下3种：
| 表示表示 | 属性值 |
|---|---|
| 预定义的颜色值 | red，green，blue，还有我们的御用色 pink |
| 十六进制 | #FF0000，#FF6600，#29D794 |
| RGB代码 | rgb(255,0,0)或rgb(100%,0%,0%) |
2 text-align:文本水平对齐方式
-
作用：
text-align属性用于设置文本内容的水平对齐，相当于html中的align对齐属性 -
其可用属性值如下：
| 属性 | 解释 |
|---|---|
| left | 左对齐（默认值） |
| right | 右对齐 |
| center | 居中对齐 |
-
注意：
是让盒子里面的内容水平居中， 而不是让盒子居中对齐
3 line-height:行间距
- 作用：
line-height属性用于设置行间距，就是行与行之间的距离，即字符的垂直间距，一般称为行高。 - 单位：
- line-height常用的属性值单位有三种，分别为像素px，相对值em和百分比%
- 技巧：
一般情况下，行距比字号大7.8像素左右就可以了。
line-height: 24px;
4 text-indent:首行缩进
-
作用：
text-indent属性用于设置首行文本的缩进， -
属性值
- 其属性值可为不同单位的数值、em字符宽度的倍数、或相对于浏览器窗口宽度的百分比%，允许使用负值,
- 建议使用em作为设置单位。
1em 就是一个字的宽度 如果是汉字的段落， 1em 就是一个汉字的宽度
p {
line-height: 25px;
text-indent: 2em;
}
5 text-decoration 文本的装饰
| 值 | 描述 |
|---|---|
| none | 默认。定义标准的文本。 取消下划线（最常用） |
| underline | 定义文本下的一条线。下划线 也是我们链接自带的（常用） |
| overline | 定义文本上的一条线。 |
| line-through | 定义穿过文本下的一条线。 |
总结:
| 属性 | 表示 | 注意点 |
|---|---|---|
| color | 颜色 | 通常用 十六进制 比如 而且是简写形式 #fff |
| line-height | 行高 | 控制行与行之间的距离 |
| text-align | 水平对齐 | 可以设定文字水平的对齐方式 |
| text-indent | 首行缩进 | 通常用于段落首行缩进2个字的距离 text-indent: 2em; |
| text-decoration | 文本修饰 | 记住 添加 下划线 underline 取消下划线 none |
五.后代选择器
| 选择器 | 作用 | 特征 | 使用情况 | 隔开符号及用法 |
|---|---|---|---|---|
| 后代选择器 | 用来选择元素后代 | 是选择所有的子孙后代 | 较多 | 符号是空格 .nav a |
| 子代选择器 | 选择 最近一级元素 | 只选亲儿子 | 较少 | 符号是**>** .nav>p |
| 交集选择器 | 选择两个标签交集的部分 | 既是 又是 | 较少 | 没有符号 p.one |
| 并集选择器 | 选择某些相同样式的选择器 | 可以用于集体声明 | 较多 | 符号是逗号 .nav, .header |
| 链接伪类选择器 | 给链接更改状态 | 较多 | 重点记住 a{} 和 a:hover 实际开发的写法 |
六.display转换模式
| 元素模式 | 元素排列 | 设置样式 | 默认宽度 | 包含 |
|---|---|---|---|---|
| 块级元素 | 一行只能放一个块级元素 | 可以设置宽度高度 | 容器的100% | 容器级可以包含任何标签 |
| 行内元素 | 一行可以放多个行内元素 | 不可以直接设置宽度高度 | 它本身内容的宽度 | 容纳文本或则其他行内元素 |
| 行内块元素 | 一行放多个行内块元素 | 可以设置宽度和高度 | 它本身内容的宽度 |
七.CSS 背景(background)
1.背景颜色(color)
-
语法：
background-color:颜色值; 默认的值是 transparent 透明的
2 背景图片(image)
- 语法：
background-image : none | url (url)
| 参数 | 作用 |
|---|---|
| none | 无背景图（默认的） |
| url | 使用绝对或相对地址指定背景图像 |
background-image : url(images/demo.png);
3 背景平铺（repeat）
- 语法：
background-repeat : repeat | no-repeat | repeat-x | repeat-y
| 参数 | 作用 |
|---|---|
| repeat | 背景图像在纵向和横向上平铺（默认的） |
| no-repeat | 背景图像不平铺 |
| repeat-x | 背景图像在横向上平铺 |
| repeat-y | 背景图像在纵向平铺 |
4 . 背景位置(position) 重点
- 语法：
background-position : length || length
background-position : position || position
| 参数 | 值 |
|---|---|
| length | 百分数 | 由浮点数字和单位标识符组成的长度值 |
| position | top | center | bottom | left | center | right 方位名词 |
5 背景附着
-
语法：
background-attachment : scroll | fixed
| 参数 | 作用 |
|---|---|
| scroll | 背景图像是随对象内容滚动 |
| fixed | 背景图像固定 |
6 背景简写
- background：属性的值的书写顺序官方并没有强制标准的。为了可读性：
- background: 背景颜色 背景图片地址 背景平铺 背景滚动 背景位置;
- 语法：
background: transparent url(image.jpg) repeat-y scroll center top ;
7 背景透明(CSS3)
- 语法：
background: rgba(0, 0, 0, 0.3);
- 最后一个参数是alpha 透明度 取值范围 0~1之间
- 我们习惯把0.3 的 0 省略掉 这样写 background: rgba(0, 0, 0, .3);
8 背景总结
| 属性 | 作用 | 值 |
|---|---|---|
| background-color | 背景颜色 | 预定义的颜色值/十六进制/RGB代码 |
| background-image | 背景图片 | url(图片路径) |
| background-repeat | 是否平铺 | repeat/no-repeat/repeat-x/repeat-y |
| background-position | 背景位置 | length/position 分别是x 和 y坐标， 切记 如果有 精确数值单位，则必须按照先X 后Y 的写法 |
| background-attachment | 背景固定还是滚动 | scroll/fixed |
| 背景简写 | 更简单 | 背景颜色 背景图片地址 背景平铺 背景滚动 背景位置; 他们没有顺序 |
| 背景透明 | 让盒子半透明 | background: rgba(0,0,0,0.3); 后面必须是 4个值 |
八.选择器优先级
| 标签选择器 | 计算权重公式 |
|---|---|
| 继承或者 * | 0,0,0,0 |
| 元素（标签选择器） | 0,0,0,1 |
| 类，伪类 | 0,0,1,0 |
| ID | 0,1,0,0 |
| 行内样式 style="" | 1,0,0,0 |
| !important | ∞ 无穷大 |
九.盒子边框（border）
| 属性 | 作用 |
|---|---|
| border-width | 定义边框粗细，单位是px |
| border-style | 边框的样式 |
| border-color | 边框颜色 |
十. 内边距（padding）
1 内边距：
padding属性用于设置内边距。 是指 边框与内容之间的距离。
| 属性 | 作用 |
|---|---|
| padding-left | 左内边距 |
| padding-right | 右内边距 |
| padding-top | 上内边距 |
| padding-bottom | 下内边距 |
简写：
| 值的个数 | 表达意思 |
|---|---|
| 1个值 | padding：上下左右内边距; |
| 2个值 | padding: 上下内边距 左右内边距 ； |
| 3个值 | padding：上内边距 左右内边距 下内边距； |
| 4个值 | padding: 上内边距 右内边距 下内边距 左内边距 ； |
十一.外边距(margin)
| 属性 | 作用 |
|---|---|
| margin-left | 左外边距 |
| margin-right | 右外边距 |
| margin-top | 上外边距 |
| margin-bottom | 下外边距 |
十二.浮动(float)
| 属性值 | 描述 |
|---|---|
| none | 元素不浮动（默认值） |
| left | 元素向左浮动 |
| right | 元素向右浮动 |
什么时候用清除浮动?
- 父级没高度
- 子盒子浮动了
- 影响下面布局了，我们就应该清除浮动了。
| 清除浮动的方式 | 优点 | 缺点 |
|---|---|---|
| 额外标签法（隔墙法） | 通俗易懂，书写方便 | 添加许多无意义的标签，结构化较差。 |
| 父级overflow:hidden; | 书写简单 | 溢出隐藏 |
| 父级after伪元素 | 结构语义化正确 | 由于IE6-7不支持:after，兼容性问题 |
| 父级双伪元素 | 结构语义化正确 | 由于IE6-7不支持:after，兼容性问题 |
十三定位(position)
定位 = 定位模式 + 边偏移
1 边偏移
通过边偏移来移动位置的。
在 CSS 中，通过 top、bottom、left 和 right 属性定义元素的边偏移：（方位名词）
| 边偏移属性 | 示例 | 描述 |
|---|---|---|
top |
top: 80px |
顶端偏移量，定义元素相对于其父元素上边线的距离。 |
bottom |
bottom: 80px |
底部偏移量，定义元素相对于其父元素下边线的距离。 |
left |
left: 80px |
左侧偏移量，定义元素相对于其父元素左边线的距离。 |
right |
right: 80px |
右侧偏移量，定义元素相对于其父元素右边线的距离 |
2.定位模式 (position)
| 值 | 语义 |
|---|---|
static |
静态定位 |
relative |
相对定位 |
absolute |
绝对定位 |
fixed |
固定定位 |
总结：
| 定位模式 | 是否脱标占有位置 | 移动位置基准 | 模式转换（行内块） | 使用情况 |
|---|---|---|---|---|
| 静态static | 不脱标，正常模式 | 正常模式 | 不能 | 几乎不用 |
| 相对定位relative | 不脱标，占有位置 | 相对自身位置移动 | 不能 | 基本单独使用 |
| 绝对定位absolute | 完全脱标，不占有位置 | 相对于定位父级移动位置 | 能 | 要和定位父级元素搭配使用 |
| 固定定位fixed | 完全脱标，不占有位置 | 相对于浏览器移动位置 | 能 | 单独使用，不需要父级 |
十四.overflow 溢出
- 检索或设置当对象的内容超过其指定高度及宽度时如何管理内容。
| 属性值 | 描述 |
|---|---|
| visible | 不剪切内容也不添加滚动条 |
| hidden | 不显示超过对象尺寸的内容，超出的部分隐藏掉 |
| scroll | 不管超出内容否，总是显示滚动条 |
| auto | 超出自动显示滚动条，不超出不显示滚动条 |
十五.鼠标样式cursor
设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。
| 属性值 | 描述 |
|---|---|
| default | 小白 默认 |
| pointer | 小手 |
| move | 移动 |
| text | 文本 |
| not-allowed | 禁止 |
用户界面样式总结:
| 属性 | 用途 | 用途 |
|---|---|---|
| 鼠标样式 | 更改鼠标样式cursor | 样式很多，重点记住 pointer |
| 轮廓线 | 表单默认outline | outline 轮廓线，我们一般直接去掉，border是边框，我们会经常用 |
| 防止拖拽 | 主要针对文本域resize | 防止用户随意拖拽文本域，造成页面布局混乱，resize:none |
十六.溢出的文字省略号显示
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
