文章目录
必写标签
路径
表格和列表
表单
css基础选择器
css复合选择器
css字体属性
css文本属性
css元素显示模式
单行文字垂直居中
css背景
盒子模型
圆角边框
盒子阴影
文字阴影
浮动
清除浮动
定位
定位叠放次序
网页布局
元素的显示与隐藏
必写标签
<!DOCTYPE html>不是一个html标签，它是文档类型声明标签，处于<html>标签之前
<html lang="en"> lang语言种类 ：定义当前文档显示的语言 en英语 zh-CN中文
<meta charset="UTF-8">规定HTML文档使用哪种字符编码
路径
相对路径：以引用文件所在位置为参考基础，而建立出的目录路径。
| 相对路径分类 | 符号 | 说明 |
|---|---|---|
| 同一级路径 | 图像文件位于HTML文件同一级 | |
| 下一级路径 | / | 图像文件位于HTML文件下一级 |
| 上一级路径 | …/ | 图像文件位于HTML文件上一级 |
绝对路径：是指目录下的绝对位置，直接达到目标位置，通常是从盘符开始的路径
表格和列表
表格用来展示数据，列表用来布局
<table>
<thead>头部区域 必须含有tr标签 </thead>
<tbody> 主体区域 </tbody>
</table>
th表头单元格标签 位于tbody中
| 标签名 | 定义 | 说明 |
|---|---|---|
<ul></ul> | 无序标签 | 里面只能包含li li里面可包含任何标签 |
<ol></ol> | 有序标签 | 里面只能包含li li里面可包含任何标签 |
<di></dl> | 自定义列表 | 里面只能包含dt和dd dt和dd里面可包含任何标签 |
表单
表单域<form></form>
表单控件（表单元素）
1.input输入表单元素
2.select下拉表单元素
3.textarea文本域元素
<input>标签中，包含一个type属性，根据不同的type，输入字段有很多种形式
type属性的属性值及描述如下：
| 属性值 | 描述 |
|---|---|
| button | 定义可点击按钮 |
| checkbox | 定义复选框 |
| file | 定义输入字段和“浏览”按钮，供文件上传 |
| hidden | 定义隐藏的输入字段 |
| image | 定义图像形式的提交按钮 |
| password | 定义密码字段。字符被掩码 |
| radio | 定义单选按钮 |
| reset | 定义重置按钮。重置会清空表单中的所有数据 |
| submit | 定义提交按钮。提交按钮会把表单数据提交到服务器 |
| text | 定义单行的输入字段，默认宽度20字符 |
name表单元素的名字，要求单选按钮和复选框要有相同的name值
页面中的表单元素很多，如何区别不同的表单元素？
name属性
<label>标签
<label>标签用于绑定一个表单元素，当点击<label>标签内的文本时，浏览器就会自动将焦点（光标）转到或者选择对应的表单元素上，用来增加用户体验。
<label for="sex" >男</label>
<input type='radio' name="sex" id="sex" />
核心：<label>标签的for属性要与相关元素的id属性相同
表单元素总结点
1.表单元素我们学习来3大组，input输入表单元素、select下拉表单元素、textarea文本域元素
2.这3组表单元素都应该包含在form表单域里面，并且有name属性
<form>
<input type="text" name="username">
<select name='jiguan'>
<option>北京</option>
</select>
<textarea name="message"></textarea>
</form>
CSS基础选择器
基础选择器包括：标签选择器、类选择器、id选择器和通配符选择器
| 基础选择器 | 作用 | 特点 | 使用情况 | 用法 |
|---|---|---|---|---|
| 标签选择器 | 可以选出所有相同的标签，比如p | 不能差异化选择 | 较多 | p{color：red；} |
| 类选择器 | 可以选择1个或多个标签 | 可以根据需求选择 | 非常多 | .nav{color:red;} |
| id选择器 | 一次只能选择1个标签 | ID属性只能在每个HTML文档中出现一次 | 一般和js搭配 | #nav{color：red；} |
| 通配符选择器 | 选择所有标签 | 选择的太多，有部分不需要 | 特殊情况使用 | *{color：red；} |
注意：
1.id属性只能在每个HTML文档中出现一次
2.多类名 类名之间用空格分开
3.通配符选择器不需要调用，自动就给所有的元素使用样式。
CSS复合选择器
| 选择器 | 作用 | 特征 | 使用情况 | 隔开符号及用法 |
|---|---|---|---|---|
| 后代选择器 | 用来选择后代元素 | 可以是子孙后代 | 较多 | 空格 .nav a |
| 子代选择器 | 选择最近一级元素 | 只选亲儿子 | 较少 | 大于 .nav>p |
| 并集选择器 | 选择某些相同样式的元素 | 可用于集体声明 | 较多 | 逗号 .nav，p |
| 链接伪类选择器 | 选择不同状态的链接 | 跟链接相关 | 较多 | 重点记住a{}和a：hover{}用法 |
| ：focus选择器 | 选择获得光标的表单 | 跟表单相关 | 较少 | input：focus 记住这个写法 |
a:link 选择所有未被访问的链接
a:visited 选择所有已被访问的链接
a:hover 选择鼠标指针位于其上的链接
a:active 选择活动链接（鼠标按下未弹起的链接）
: focus用于选取获得焦点的表单元素
css字体属性
| 属性 | 表示 | 注意点 |
|---|---|---|
| font-size | 字号 | 常用单位px像素，一定跟单位 |
| font-family | 字体 | 实际工作按团队约定写 |
| font-weight | 字体粗细 | 加粗700 不加粗400 数字不要跟单位 |
| font-style | 字体样式 | 倾斜italic 不倾斜normal 常用normal |
| font | 字体连写 | 1.字体连写有顺序，不能随意换位置 2.其中的字号和字体必须同时出现 |
CSS文本属性
| 属性 | 表示 | 注意点 |
|---|---|---|
| color | 文本颜色 | 常用16进制 #fff |
| text-align | 文本水平对齐 | 设置文本水平对齐方式 |
| text-indent | 文本缩进 | 常用于段落首行缩进2个字距离 text-indent：2em； |
| text-decoration | 文本修饰 | 添加下划线 underline 取消下划线none |
| line-height | 行高 | 控制行与行间的距离 |
CSS元素显示模式
块元素：<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等
特点：
1.自己独占一行
2.宽高、外边距及内边距都可以控制
3.默认宽度是容器（父级宽度）的100%
4.是一个容器及盒子，里面可放行内或者块级元素
注意：
1.文字类的元素内不能使用块级元素
2.<p>标签主要用于存放文字，里面不能放块级元素 ，特别是<div>
3.同理，<h1>~<h6>等都是文字类标签，里面不能放块级元素
行内元素：<a>、<span>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、等
特点：
1.相邻行内元素在一行上，一行可以显示多个
2.高宽设置无效
3.默认宽度内容本身
4.行内元素只能容纳文本或其他行内元素
注意：
链接里面不能再放链接
特殊情况链接a里面可放块级元素，要给a转换块级模式
行内块元素：<img />、<input />、<td>同时具有块元素和行内元素的特点
特点：
1.和相邻行内元素（行内块）在一行上，但是他们之间会有空白缝隙。一行可以显示多个（行内元素特点）
2.默认宽度是它本身内容的宽度（行内元素特点）
3.宽高、行高、内外边距都可控制（块级元素特点）
元素显示模式转换
转换为块级元素 display：block；
转换为行内元素 display：inline；
转换为行内块 display：inline-block；
单行文字垂直居中原理
line-height：height值；
行高小于盒子高度，文字偏上
行高大于盒子高度，文字偏下
CSS背景
| 属性 | 作用 | 值 |
|---|---|---|
| background-color | 背景颜色 | 颜色值 |
| background-image | 背景图片 | url（图片路径） |
| background-repeat | 是否平铺 | repeat/no-repeat/repeat-x/repeat-y |
| background-position | 背景位置 | 分别是x和y坐标 |
| background-attachment | 背景附着 | scroll（背景滚动）/fixed（背景固定） |
| 背景简写 | 背景颜色 背景图片地址 背景平铺 背景滚动 背景位置； | |
| 背景色半透明 | 背景颜色半透明 | background：rgba（0,0,0,0.3）; 4个值 |
背景图片：实际开发中常见于logo或者一些装饰性的小图片或超大背景图，优点便于控制位置 精灵图
盒子模型
页面布局3大核心：盒子模型、浮动、定位
border :border-width border-atyle border-color
border-style可设置如下值：
none：无边框
solid：单实线
dashed：虚线
dotted：点线
padding
如果盒子本身没有指定width/height属性，此时padding不会撑开盒子大小
margin
外边距让块级盒子水平居中，需满足2条件：
1.盒子指定了宽度
2.盒子的左右外边距都设置为auto
.header{
width:960px;
margin:0 auto;
}
行内元素或者行内块元素水平居中给其父元素添加text-align：center即可。
行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距。但是转换为块级和行内块元素就可以了。
圆角边框
border-radius:数值或百分比 ;
简写属性，可跟4个值，分别为 左上角、右上角、右下角、左下角
分开写：border-top-left-radius、border-top-right-radius、border-bottom-right-radius和border-bottom-left-radius
盒子阴影
box-shadow：h-shadow v-shadow blur spread color inset；
| 值 | 描述 |
|---|---|
| h-shadow | 必需 水平阴影位置 |
| v-shadow | 必需 垂直阴影位置 |
| blur | 可选 模糊距离 |
| spread | 可选 阴影尺寸 |
| color | 可选 阴影颜色 |
| inset | 可选 将外部阴影（outset）改为内部阴影 |
1.默认的是外阴影（ouset），但是不可写，否则阴影无效
2.圆角边框和盒子阴影都不会影响布局
文字阴影
text-shadow：h-shadow v-shadow blur color ；
浮动
网页布局第一准则：多个块级元素纵向排列找标准量，多个块级元素横向排列找浮动
浮动特性：
1.浮动元素脱标 脱离标准流，不再保留原先位置
2.浮动元素一行内显示且元素顶部对齐 无缝隙
3.浮动元素具有行内块元素的特性
浮动元素经常和标准流父级搭配使用
先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置
一个元素浮动了，理论上其余的兄弟元素也要浮动
浮动的盒子只会影响浮动盒子后面的标准流，不会影响前面的标准流
清除浮动
让盒子撑开父亲，有多少孩子，父盒子就有多高
- 清除浮动的本质就是清除浮动元素造成的影响
- 如果父盒子本身有高度，则不需要清除浮动
- 清除浮动之后，父级就会根据浮动的子盒子自动检测高度。 父级有了高度，就不会影响下面的标准流了
清除浮动的方法
1.额外标签法
2.父级添加overflow属性
3.父级添加after伪元素
4.父级添加双伪元素
额外标签法会在浮动元素末尾添加一个空的标签。如<div style="clear:both"><div>
会添加许多无意义标签，结构化差。而且要求这个新的空标签必须是块级元素
父级添加overflow属性
overflow属性值为hidden、auto、scroll
overflow：hidden；可清除外边距 清除浮动
父级添加after伪元素
父级添加双伪元素都有固定的代码
.clearfix:before,
.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
给清除浮动元素的父元素加上 clearfix类
定位
定位可以实现：
1.某个元素可以自由的在一个盒子内移动位置，并且压住其他盒子。
2.当我们滚动窗口的时候，盒子固定在某个位置
所以，
1.浮动可以让多个块级盒子一行没有缝隙排列显示，经常用于横向排列盒子
2.定位则是可以让盒子自由的在某个盒子内移动，并且可以压住其他盒子
定位=定位模式+边偏移
定位模式用于指定一个元素在稳定中的定位方式
边偏移决定该元素最终位置
| 定位模式position | 语义 |
|---|---|
| static | 静态定位 |
| relative | 相对定位 |
| absolute | 绝对定位 |
| fixed | 固定定位 |
静态定位 ：元素的默认定位方式 ，无定位意思
相对定位：不脱标
相对定位是元素在移动位置的时候，是相对于它原来的位置 来说的
1.它是相对于自己原来的位置来移动的（移动位置的时候参照点是自己原来的位置）
2.原来在标准流的位置继续占有，后面的盒子仍以标准流的方式对待它
绝对定位：脱标
绝对定位在元素移动位置的时候，是相对于它祖先元素 来说的
1.如果没有祖先元素或祖先元素没有定位，则以浏览器为准定位
2.如果祖先元素有定位（相对、绝对、固定），则以最近一级的有定位祖先元素为参考点移动位置
3.脱标 绝对定位不再占有原来的位置
子绝父相
1.子级绝对定位，不会占位置，可以放到父盒子里面的任何位置，不影响其他的兄弟盒子
2.父盒子需要加定位限制子盒子在父盒子内显示
3.父盒子布局时，需要占有位置，因此，父亲是相对定位
4.子绝父绝 也会有 父亲也不占位置
固定定位：脱标
固定定位是元素固定于浏览器的可视区的位置。主要使用场景：在浏览器页面滚动时元素的位置不变
1.以浏览器的可视窗口为参照点移动元素
跟父元素没有任何关系
不随滚动条滚动
2.固定位置不在占用原先的位置
定位总结：
注意是否脱标
以谁为基准点
子绝父相
| 边偏移 | 描述 |
|---|---|
| top | 顶端偏移量 元素相对于其父元素上边线距离 |
| bottom | 底端偏移量 元素相对于其父元素下边线距离 |
| left | 左侧偏移量 元素相对于其父元素左边线距离 |
| right | 右侧偏移量 元素相对于其父元素右边线距离 |
绝对定位的盒子居中
加了绝对定位的盒子不能margin：0 auto 水平对齐 可计算对齐
- left：50% ；让盒子的左侧移动到父级元素的水平中心位置
- margin-left：-100px； 让盒子向左移动自身宽度的一半
定位特殊特性
1.行内元素添加绝对或固定定位，可直接设置宽高
2.块内元素添加绝对或固定定位，若不给宽度或高度，默认大小是内容大小
脱标的盒子不会触发外边距塌陷
浮动元素、绝对定位、固定定位元素都不会触发外边距合并的问题
绝对定位（固定定位）会完全压住盒子
浮动元素不同，只会压住下面标准流的盒子，但不会压住下面标准流盒子里的文字、图片
文字围绕浮动元素
绝对定位、固定定位会压住下面标准流的所有内容
定位叠放次序z-index
定位布局时会出现盒子重叠现象。用z-index控制叠放
数值可是正整数、负整数、0，默认auto 数值越大，盒子越靠上
如果属性相同，则按照书写顺序，后来居上
数字后不能加单位
只有定位的盒子才有z-index属性、
网页布局
一个完整的网页，是标准流、浮动、定位一起完成的
1.标准流
垂直的块级盒子显示
2.浮动
多个块级盒子一行水平显示
3.定位
元素自由在某个盒子内移动or固定在窗口某位置
元素的显示与隐藏
- display显示隐藏
- visibility显示隐藏
- overflow溢出显示隐藏
display属性：设置元素如何显示
display：none；隐藏对象
display：block；转为块级元素 显示元素
display隐藏元素后，不再占用原来的位置 （重点）
visibility可见性
visibility：visible; 元素可视
visibility：hidden；元素隐藏
visibility隐藏元素后，继续占用原来的位置
overflow溢出
指定内容溢出一个元素的框时发生什么
| 属性值 | 描述 |
|---|---|
| visible | 不剪切内容也不加滚动条 |
| hidden | 超出部分隐藏掉 |
| scroll | 不管超出内容与否，总显示滚动条 |
| auto | 超出自动显示滚动条，不超出不显示滚动条 |
如果有定位的盒子，慎用overflow：hidden；因为它会隐藏多余部分
扫一扫
1680
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
