HTML+CSS

星野317

已于 2025-05-07 21:53:17 修改

阅读量818

点赞数 21

文章标签： html css 前端

于 2025-05-05 15:33:22 首次发布

本文链接：https://blog.csdn.net/qq_63662109/article/details/147571814

版权

一、前端开发与开发工具介绍

1.前端开发

前端工程师“Front-End-Developer”源自于美国。大约从2005年开始正式的前端工程师角色被行业所认可，到了2010年，互联网开始全面进入移动时代，前端开发的工作越来越重要。

最初所有的开发工作都是由后端工程师完成的，随着业务越来越繁杂，工作量变大，于是我们将项目中的可视化部分和一部分交互功能的开发工作剥离出来，形成了前端开发。

2.vscode安装和使用

2.1 下载地址

Visual Studio Code - Code Editing. Redefined

2.2 插件安装

为方便后续开发，建议安装如下插件

第一个是中文，如果需要的话可以安装

二.HTML

1.什么是HTML？

Hyper Text Markup Language 超文本标记语言

标记语言（也称置标语言），是一种可以展现出关于文档结构和数据处理细节的文字编码。使用一套标记标签来描述网页。

web上用来传输内容的语言, html是超文本标记语言，它标记标签来声明描述的内容，主要学习的就是html的标签

2.html页面的基本结构

<html>



<head>

</head>



<body>

</body>

</html>

3.html常用标签

用来定义html标签的使用规范，例：

</!doctype>

<!DOCTYPE html>

文档类型声明：

1.声明这个文档是一个html文档

2.告诉浏览器html的使用规范，不同版本的html声明会进行不同的约束，也可以不写

常用标签：

每一个标签都有自己的结束标签，双标签是使用成对的标签，单标签是自己结束自己

<title><h1><p><img /><br /><hr />

<video><audio><a>

<style><script>......

3.1 文本标签

<h1>~<h6><p><span><b><i> <strong><em><sub><sup><ins><del>

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>文本标签</title>

</head>

<body>





<h1>今天星期五</h1>

<h3>明天星期六</h3>

<h6>后台星期日</h6>



<p>

常用标签：

每一个标签都有自己的结束标签，双标签是使用成对的标签，单标签是自己结束自己

</p>



<span>1111</span>

<span>2222</span>





<b>今天星期五</b>

<i>今天星期五</i>



<br/>

<strong>明天星期六</strong>

<em>明天星期六</em>

<br/>



<br/>

2.<sub>a</sub>

3.<sup>b</sup>



<br />

<ins>明天星期六</ins>

<del>明天星期六</del>

</body>

</html>

3.2 meta元数据标签

meta是用来在HTML文档中模拟HTTP协议的响应头报文

name和 http－equiv属性名

1).定义语言

<meta http-equiv="Content－Type" content="text/html; charset=utf-8">

<meta http-equiv="Content-Language" content="zh-CN">

2).描述网页

<meta name="Generator" contect="">用以说明生成工具（如Microsoft FrontPage 4.0）等；<meta name="KEYWords" contect="">向搜索引擎说明你的网页的关键词；

<meta name="DEscription" contect="">告诉搜索引擎你的站点的主要内容；

<meta name="Author" contect="你的姓名">告诉搜索引擎你的站点的制作的作者；

3).自动刷新页面

<meta http-equiv="refresh" content="8; URL=http://www.baidu.com">

3.3 列表标签

ul无序列表，也就是说没有排列限制可以随意加 li

type属性：默认表示实心小圆点，square表示前面符号是实心方形，circle空心圆形

ol有序列表，会按照你写的li前后依次排列

type属性：默认是1,2,…，i就是i,ii,….，I和a和A

dl定义分层列表，会默认前后层级关系。

以 <dl> 标签开始。每个列表项以 <dt> 开始。每个列表项的定义以 <dd> 开始。

3.4 表格标签

用来定义html中的表格的标签：

1）、表格的基本组成单位就是单元格，一个个单元格组成了行，再由行变成表格。但是代码却是反过来写的，首先定义表格<table>，再定义一个行<tr>，在定义行里面定义单元格<td>。

可以把表格分为：<tbody>,<thead>,<tfoot>,其中<thead>,<tfoot>只有一个，<tbody>可以有很多个

2）、表格当中的属性

border边框：单位是像素

cellspacing外边距,表格之间的间隙，又是单元格与外部边框之间的间隙

cellpadding内边距,表格内容与表格之间的距离

3）、合并单元格

行跨列：一行跨多列，colspan

列跨行：一列跨多行，rowspan

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=, initial-scale=1.0">

<title>Document</title>

</head>

<body>

<table border="1px" cellspacing="0" cellpadding="'0">



<caption><h3>课程计划表</h3></caption>

<tr>

<th rowspan="3">课表</th>

<th colspan="5">上课</th>

<th colspan="2">休息</th>

</tr>

<tr>

<th>星期一</th>

<th>星期二</th>

<th>星期三</th>

<th>星期四</th>

<th>星期五</th>

<th>星期六</th>

<th>星期日</th>

</tr>

<tr>

<th>计算机</th>

<th>计算机</th>

<th>计算机</th>

<th>计算机</th>

<th>计算机</th>

<th>休息</th>

<th>休息</th>

</tr>

</table>

</body>

</html>

3.5 frameset标签

属性

cols 是按列分

rows 是按行分

<frameset>将整个窗口分成几个部分，在不同的部分里嵌入不同的页面

<frame src="">指定窗口中的网页资源

3.6 iframe标签在网页中.内嵌html网页内容

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>iframe 标签</title>

</head>

<body>

<iframe src ="./6_超链接标签.html" width="200px" height="300px" name="i1"></iframe>

</body>

</html>

3.7超链接

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>超链接标签</title>

</head>

<body>



<a id="top"></a>



<a href="http://www.baidu.com" target="_blank">百度一下</a>

<br/>

<a href="./4_表格标签.html" target="i1">点击我的作品</a>

<br>

<img src="./img/1.jpg"/>

<br/>

<img src="./img/1.jpg"/>

<br/>

<img src="./img/1.jpg"/>

<br/>

<img src="./img/1.jpg"/>

<br/>

<img src="./img/1.jpg"/>



<a id="middle"></a>

<br/>

<img src="./img/1.jpg"/>

<br/>

<img src="./img/1.jpg"/>

<br/>

<img src="./img/1.jpg"/>

<br/>

<img src="./img/1.jpg"/>

<br/>

<a href="#top">返回顶部</a>

<a href="#middle">返回中部</a>

</body>

</html>

3.8 form表单

1）、表单是收集用户数据的地方，我们一般将表单中的数据收集提交给后台进行处理

2）、用户填写数据 -- 数据写在哪里？

输入框

3）、表单收集数据 -- 怎么收集，谁来收集，什么时候收集？

由浏览器自动收集，当用户去点击提交按钮时提交

4）、提交数据 -- 数据提交给谁，怎么提交的？

action 告诉提交给后台的哪个东西来处理

method 提交的方式

想把输入框中的数据提交出去，必须要有一个name属性

表单元素

<input>

属性

action、method、checked、selected

表单新元素

表单中的新属性

autofocus、placeholder

注意：

不同控件的不同属性的意义

不同控件数据传递的特点和注意事项

不同请求类型的使用

隐藏域的使用

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>智能表单</title>

</head>

<body>



<form action="#" method="get">

姓名：<input type="text" placeholder="请输入姓名" name="username" /><br />

密码：<input type="password" placeholder="请输入密码" name="password" /> <br />

性别:

<input type="radio" name="gender" value="boy" /> 男    

<input type="radio" name="gender" value="girl"/>女

<br/>

爱好：

<input type="checkbox" name="hobby" value="篮球" />篮球  

<input type="checkbox" name="hobby" value="篮球" checked="checked"/>篮球  

<input type="checkbox" name="hobby" value="乒乓球"/>乒乓球

<br />

家庭地址：

<select name="address" multiple="multiple">

<option value="wx">江苏无锡</option>

<option value="cz" selected="selected">江苏常州</option>

<option value="nj">江苏南京</option>

</select>

<br />

<input type="color" name="color"><br>

邮箱：

<input type="email" name="email" />

手机号：(大部分浏览器不支持使用)

<input type="tel" name="telphone"/>

<br/>

<input type="submit" /><br />

<input type="reset" /><br />

搜索框:

<input type="search" name="query"/> <br/>

<input type="range" min="0" max="10" value="2" step="2" name="range">

</form>

</body>

</html>

4.web语义化

web语义化是指使用语义恰当的标签，使页面有良好的结构，页面元素有含义，能够让人和搜索引擎都容易理解。<strong>和<b>都是加粗的意思，但是前者具有强调的意思，具有一定的语义，便于引擎搜索，而后者只是样式上的改变。

5.学习网站

HTML 系列教程

三.CSS

1.什么是CSS？

Cascading Style Sheets 层叠样式表

一种用来表现html或xml文件的语言

2.HTML中引入CSS的方式

行内式        在元素标签的style属性中设定css样式

内嵌式        写在<style>标签中,放置在head里

链接式        使用<link>，在head里写

<link href=”style.css” rel=”stylesheet”/>



<link href="xxx" rel="shortcut icon"/>

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>引入css的方式</title>



<link href="../img/TV.png" rel="short incon"/>



<style>

/* 标签选择器 */

div{

width: 200px;

height: 200px;

background-color: lightcoral;

}

/* 类class选择器 */

.p{

color: olive;

}

.p1{

font-size: 120px;

}

</style>

</head>

<body>



<h2 style="color: lightgreen;">这个一个大标签</h2>

<div></div>

<p class="p p1">我是第一个p标签</p>



<p class="p p2">我是第二个p标签</p>

<p class="p">我是第二个p标签</p>

</body>

</html>

3.选择器

用来选择需要渲染的元素对象(css选择器选择要给哪个对象添加样式)

3.1 基本选择器

·通配符选择器（*）

选择匹配所有元素

·元素选择器（E）

通过标签名来选择元素

·类选择器（.classname）

通过class的属性值来选择元素

·id选择器（#id）

通过id属性值选择元素

·属性选择器

标签名[class="xx"]

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>基本选择器</title>

<style>

/* 1.通配符选择器（*）选择匹配所有元素 */

*{

margin: 0px;

padding: 0px;

}

/* 2.元素选择器（E）通过标签名来选择元素 */

div{

width: 200px;

height: 200px;

}

p{

font-size: 24px;

}

/* 3.类选择器（.classname) 通过class的属性值来选择元素 */

.d1{

background-color: lightblue;

}

.d2{

background-color: lightcoral;

}

/* 4·id选择器（#id）通过id属性值选择元素 */

#p1{

color: olive;

font-style: italic;

}

/*5.属性选择器标签名[class="xx"]*/

h2[class="hh"]{

color: red;

}

p[id="p2"]{

color: blue;

}

</style>

</head>

<body>

<h2>今天天气不错</h2>

<h2 class="hh">就是有点冷</h2>

<div class="d d1"></div>

<div class="d d2"></div>

<p id="p1">哈哈哈</p>

<p id="p2">呵呵呵</p>

</body>

</html>

·后代选择器（E 空格F）

选择E元素下所有的F选择器，无论是子元素还是子孙元素

·子元素选择器（E>F）

选择E元素的直接子元素F

·相邻兄弟选择器（E+F）

具有相同父元素，选择E后面紧挨着的F元素

·通用兄弟选择器（E~F）, CSS3新增加一种选择器

具有相同父元素，选择E后面所有的F元素

·群组选择器（s1,s2,s3）

将具有相同样式的元素分组在一起，每个选择器之间使用逗号“，”隔开

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>基本选择器</title>

<style>

/* 1.·群组选择器（s1,s2,s3）将具有相同样式的元素分组在一起，每个选择器之间使用逗号“，”隔开*/

#h,p,.p2{

color: brown;

}

/* 2·后代选择器（E 空格F）选择E元素下所有的F选择器，无论是子元素还是子孙元素 */

/*u1是数字1，不是字母L*/

/* .u1 li a{

color: royalblue;

} */

/* 3·子元素选择器（E>F）选择E元素的直接子元素F */

/* .u1>li>a{

color: blueviolet;

} */

/* 4·相邻兄弟选择器（E+F）具有相同父元素，选择E后面紧挨着的F元素 */

/* .u1+li{

color: aqua;

} */

/* 5·通用兄弟选择器（E~F）, CSS3新增加一种选择器具有相同父元素，选择E后面所有的F元素*/

.u1~li{

color: aqua;

}

</style>

</head>

<body>

<h1 id="h">今天星期一</h1>

<p>已经零下了</p>

<p class="p2">已经零下了</p>

<ul class="u1">

<li><a>aaaaaaaaa</a>

<ul>

<li><a>111111111</a></li>

<li><a>222222222</a></li>

<li><a>333333333</a></li>

</ul>

</li>

<li>bbbbbbbbb</li>

<li>ccccccccc</li>

</ul>

<li>AAAAAAAAAA</li>

<li>BBBBBBBBBB</li>

<li>CCCCCCCCCC</li>

</body>

</html>

3.2 伪类选择器

伪类这个并不是你通过class定义的，而是原来就有的，直接拿过来用

锚点（超链接）伪类选择器

:link连接跳转前

:visited连接被访问后

行为伪类选择器

:hover鼠标指针放在连接上

:active鼠标按下

使用方法： :伪类名

遵循爱恨原则： LoVe/HAte

link—visited—hover—active

:focus 只适用于输入框

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>伪类选择器</title>

<style>

/* 伪类选择器，用在超链接上时，遵循LoVe HAte原则 */

/* 超链接被访问前 */

a:link{

color: orange;

}

/* c超链接被访问后 */

a:visited{

color: cadetblue;

}

/* 鼠标悬浮在超链接上 */

a:hover{

background-color: lightcoral;

}

/* 鼠标点击超链接时 */

a:active{

background-color: royalblue;

}

/* 鼠标悬浮 */

input:hover{

line-height: 100px;

}

/* 鼠标点击时 */

input:active{

background-color: rosybrown;

}

</style>

</head>

<body>

<a href="#">点击领取大额优惠卷</a>

<br>

<input type="text"/>

</body>

</html>

4.盒子模型

4.1 块级元素和行内元素

div 块级元素：满行（独占一行，默认）可以控制宽度和高度

div p h1~h6

span 行级元素：内容撑开宽度，不可控制宽高，随内容改变，可以用行高line-height撑起来

但行标签img，textarea，input是可以设置宽和高并且有效的

4.2 块级和行内元素变换

将块级元素转为行级元素；丢失原有块级元素的特点，例如：设置的宽度

display:inline

行级元素转块级元素

display:block

隐藏，会丢失原来的位置

disp:none;

4.3 盒子边框 border

内容（content）

使用宽度属性width和高度属性height可以对盒子的大小进行控制。width和height的属性值可以为不同单位的数值或相对于父元素的百分比%，实际工作中最常用的是像素值。

/*外盒尺寸计算（元素所占的空间尺寸）*/

Element 空间高度 = content height + padding + border + margin

Element 空间宽度 = content width + padding + border + margin

/*内盒尺寸计算（元素实际大小）*/

Element Height = content height + padding + border （Height为内容高度）

Element Width = content width + padding + border （Width为内容宽度）

填充（padding）: 内边距，内容和边框的距离

padding属性用于设置内边距。是指边框与内容之间的距离。在border-box的情况下，内边距会撑大盒子本身的大小。

padding-top:上内边距

padding-right:右内边距

padding-bottom:下内边距

padding-left:左内边距

margin:上内边距右内边距下内边距左内边距

padding: 10px;

边界（margin）：外边距，边框与边框之间的距离

margin属性用于设置外边距。设置外边距会在元素之间创建“空白”，这段空白通常不能放置其他内容。

margin-top:上外边距

margin-right:右外边距

margin-bottom:下外边距

margin-left:上外边距

margin:上外边距右外边距下外边距左外边距

可以让一个盒子实现水平居中，需要满足一下两个条件：

必须是块级元素。

盒子必须指定了宽度（width）

然后就给左右的外边距都设置为auto，就可使块级元素水平居中。

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

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

边框（border）

border: 边框粗细边框样式边框颜色

圆角边框（border-radius）

border-radius: 50%;

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>盒子模型-边框</title>

<style>

div{

width: 100px;

height: 100px;

/* 边框border:粗细，样式，颜色 */

}

.d1{

border-top-width: 10px; /*上*/

border-top-style: solid; /*实线*/

border-top-color: aqua;

}

.d2{

border-right-width: 10px; /*右*/

border-right-style: dashed; /*虚线*/

border-right-color: red;

}

.d3{

border-bottom-width: 10px; /*右*/

border-bottom-style: dotted; /*点状线*/

border-bottom-color: orange;

}

.d4{

border-left-width: 10px; /*左*/

border-left-style: double; /*双线*/

border-left-color:green;

}

/* 上右下左 */

.d5{

border-width: 1px 3px 5px 7px; /*右*/

border-color: lightblue lightcoral lightcyan lightgoldenrodyellow;

border-style: solid dotted dashed double;

}

/* 上右下左*/

.d6{

border-width: 10px 20px;

border-color: red green;

border-style: solid double; /*实线*/

}

/* 四边同一设置 */

.d7{

border-width: 10px;

border-color: blue;

border-style: double;

border-radius: 50%; /*设置圆角边框*/

}

</style>

</head>

<body>

<div class="d1"></div>

<div class="d2"></div>

<div class="d3"></div>

<div class="d4"></div>

<div class="d5"></div>

<div class="d6"></div>

<div class="d7"></div>

</body>

</html>

4.4 过渡

-webkit-transition 符合浏览器内核，过渡

transition：标签元素属性操作时间变化速度延迟时间

标签元素属性

all 表示给所有的属性都添加渐变过程,也可以针对某个属性

变化速度

linear 匀速变化 ease 由快到慢的过程 ease-in由慢到快的过程

4.5 阴影

box-shadow: [inset表示是内嵌，不写直接添加在外部] x轴偏移量 y轴偏移量模糊半径阴影面拓展颜色

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>过渡和阴影</title>

<style>

div{

width: 200px;

height: 200px;

background-color: orange;

/*过渡 transition 属性时间周期变化速度延迟时间*/

/* 属性：若是单个就直接写属性名，若是多个就写all */

/* 变化速度 linear 匀速变化 ease由快到慢 ease-in 由慢到快 */

transition: all 2s linear 0s;

}

div:hover{

border-radius: 50%;

/* box-shadow: [inset表示是内嵌，不写直接添加在外部] x轴偏移量 y轴偏移量模糊半径阴影面拓展颜色 */

box-shadow: inset 10px 10px 10px 10px black;

}

</style>

</head>

<body>

<div></div>

</body>

</html>

当鼠标放在方块上后会发生变化

5.浮动

5.1 浮动(float)

元素的浮动是指设置了浮动属性的元素会脱离标准普通流的控制，移动到其父元素中指定位置的过程。

在CSS中，通过float属性来定义浮动，其基本语法格式如下：

选择器{float:属性值;}

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

5.2 清除浮动

清除浮动本质是：为了解决父级元素因为子级浮动引起内部高度为0 的问题。

在CSS中，clear属性用于清除浮动，其基本语法格式如下：

选择器{clear:属性值;}

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

1）、额外标签法

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

优点：通俗易懂，书写方便

缺点：添加许多无意义的标签，结构化较差。

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 专有，星号表示IE7之下浏览器识别，其他浏览器不识别*/

然后给父元素加上clearfix类就可以了

优点：符合闭合浮动思想结构语义化正确

缺点：由于IE6-7不支持:after，IE7以下可以使用 zoom:1触发 hasLayout。

代表网站：百度、淘宝网、网易等

4）、使用before和after双伪元素清除浮动

使用方法：

.clearfix::before,.clearfix::after {

content:"";

display:table;

}

.clearfix:after {

clear:both;

}

.clearfix {

*zoom:1;

}

然后给父元素加上clearfix类就可以了

优点：代码更简洁

缺点：由于IE6-7不支持:after，使用 zoom:1触发 hasLayout。

代表网站：小米、腾讯等

6.定位

定位模式(定位的分类)

在CSS中，position属性用于定义元素的定位模式，其基本语法格式如下：

选择器{ position:属性值; }

position属性的常用值

值	描述
static	自动定位（默认定位方式）
relative	相对定位，相对于其原文档流的位置进行定位
absolute	绝对定位，相对于其上一个已经定位的父元素进行定位
fixed	固定定位，相对于浏览器窗口进行定位

定位的方式

绝对定位定位原点是和父元素有关的（父元素也要定位）会脱离文档流 absolute

相对定位相对的是原来的自己，表现是浮动的，但是原来的位置依然占领 relative

固定定位将位子固定死 fixed

6.1 静态定位(static)

静态定位是所有元素的默认定位方式，当position属性的取值为static时，可以将元素定位于静态位置。所谓静态位置就是各个元素在HTML文档流中默认的位置。

上面的话翻译成白话：就是网页中所有元素都默认的是静态定位哦！其实就是标准流的特性。

在静态定位状态下，无法通过边偏移属性（top、bottom、left或right）来改变元素的位置。

PS：静态定位其实没啥可说的。

6.2 相对定位relative(自恋型)

相对定位是将元素相对于它在标准流中的位置进行定位，当position属性的取值为relative时，可以将元素定位于相对位置。

对元素设置相对定位后，可以通过边偏移属性改变元素的位置，但是它在文档流中的位置仍然保留。

注意：

相对定位最重要的一点是，它可以通过边偏移移动位置，但是原来的所占的位置，继续占有。
其次，每次移动的位置，是以自己的左上角为基点移动（相对于自己来移动位置）

就是说，相对定位的盒子仍在标准流中，它后面的盒子仍以标准流方式对待它。（相对定位不脱标）

如果说浮动的主要目的是让多个块级元素一行显示，那么定位的主要价值就是移动位置，让盒子到我们想要的位置上去。

6.3 绝对定位absolute (拼爹型)

如果文档可滚动，绝对定位元素会随着它滚动，因为元素最终会相对于正常流的某一部分定位。

当position属性的取值为absolute时，可以将元素的定位模式设置为绝对定位。

注意：绝对定位最重要的一点是，它可以通过边偏移移动位置，但是它完全脱标，完全不占位置。

1）、父级没有定位

若所有父元素都没有定位，以浏览器为准对齐(document文档)。

2）、父级有定位

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

3）、子绝父相

这个“子绝父相”太重要了，是我们学习定位的口诀，时时刻刻记住的。

这句话的意思是子级是绝对定位的话，父级要用相对定位。

首先，我们说下，绝对定位是将元素依据最近的已经定位绝对、固定或相对定位）的父元素（祖先）进行定位。

就是说，子级是绝对定位，父亲只要是定位即可（不管父亲是绝对定位还是相对定位，甚至是固定定位都可以），就是说，子绝父绝，子绝父相都是正确的。

但是，在我们网页布局的时候，最常说的子绝父相是怎么来的呢？

因为子级是绝对定位，不会占有位置，可以放到父盒子里面的任何一个地方。

父盒子布局时，需要占有位置，因此父亲只能是相对定位.

这就是子绝父相的由来。

6.4 绝对定位的盒子水平/垂直居中

普通的盒子是左右margin 改为 auto就可，但是对于绝对定位就无效了

定位的盒子也可以水平或者垂直居中，有一个算法。

首先left 50% 父盒子的一半大小
然后走自己外边距负的一半值就可以了 margin-left。

6.5 固定定位fixed(认死理型)

固定定位是绝对定位的一种特殊形式，类似于正方形是一个特殊的矩形。它以浏览器窗口作为参照物来定义网页元素。当position属性的取值为fixed时，即可将元素的定位模式设置为固定定位。

当对元素设置固定定位后，它将脱离标准文档流的控制，始终依据浏览器窗口来定义自己的显示位置。不管浏览器滚动条如何滚动也不管浏览器窗口的大小如何变化，该元素都会始终显示在浏览器窗口的固定位置。

固定定位有两点：

固定定位的元素跟父亲没有任何关系，只认浏览器。
固定定位完全脱标，不占有位置，不随着滚动条滚动。

6.6 叠放次序（z-index）

当对多个元素同时设置定位时，定位元素之间有可能会发生重叠。

在CSS中，要想调整重叠定位元素的堆叠顺序，可以对定位元素应用z-index层叠等级属性，其取值可为正整数、负整数和0。

比如： z-index: 2;

注意：

z-index的默认属性值是0，取值越大，定位元素在层叠元素中越居上。
如果取值相同，则根据书写顺序，后来居上。
后面数字一定不能加单位。
只有相对定位，绝对定位，固定定位有此属性，其余标准流，浮动，静态定位都无此属性，亦不可指定此属性。

四种定位总结

定位模式	是否脱标占有位置	是否可以使用边偏移	移动位置基准
静态static	不脱标，正常模式	不可以	正常模式
相对定位relative	不脱标，占有位置	可以	相对自身位置移动（自恋型）
绝对定位absolute	完全脱标，不占有位置	可以	相对于定位父级移动位置（拼爹型）
固定定位fixed	完全脱标，不占有位置	可以	相对于浏览器移动位置（认死理型）

跟浮动一样，元素添加了绝对定位和固定定位之后，元素模式也会发生转换，都转换为行内块模式，

因此比如行内元素如果添加了绝对定位或者固定定位后浮动后，可以不用转换模式，直接给高度和宽度就可以了。

7.CSS属性

7.1 背景

background-color

background-image 背景图片，默认平铺

background-repeat:no-repeat;值为不平铺

background-position: 出现位置 top bottom right left

background-attachment 背景固定，值为：fixed

background-size:100%

7.2 颜色

/* 颜色:# 6位0~f的数表示 */

color:#FF6600;

/* 颜色:英文单词 */

color:cornflowerblue;

/* rgba(0~255,0~255,0~255,0~1) rgba red green blue 透明度*/

color: rgba(0,100,200,1); /* 值越小透明度越高 */

/*hsl hue-saturation-lightness 色相（0~359）饱和度（0~100%）亮度（0~100%）

hsla 色相（0~359）饱和度（0~100%）亮度（0~100%）透明度（0~1）*/

color: hsla(300,70%,80%,0.8);

/* 透明度 0~1*/

opacity: 0.6;

7.3 字体

font-family 字体样式系列

可以使用多个字体，每个字体之间用“，”隔开，上一个不存在，才会去查看下一个

font-weight 控制字体的粗细normal，bold，bolder 更粗,lighter 更细

font-size:字体大小，(百分比或px表示)

font-style: italic; 斜体

7.4 雪碧图处理

/* 超出部分隐藏 */

overflow: hidden;

/* 输入框边框样式无 */

outline: none;

7.5 鼠标形状的改变

cursor: wait;

cursor: url(img/pointer_cursor.png),auto;

8.版心和布局流程

“版心”(可视区) 是指网页中主体内容所在的区域。一般在浏览器窗口中水平居中显示，常见的宽度值为960px、980px、1000px、1200px等。

看透网页布局的本质：把网页元素比如文字图片等等，放入盒子里面，然后利用CSS摆放盒子的过程，就是网页布局。

8.1 布局流程

为了提高网页制作的效率，布局时通常需要遵守一定的布局流程，具体如下：

1、确定页面的版心（可视区）。

2、分析页面中的行模块，以及每个行模块中的列模块。

3、制作HTML结构。

4、CSS初始化，然后开始运用盒子模型的原理，通过DIV+CSS布局来控制网页的各个模块。

8.2 一列固定宽度且居中

最普通的，最为常用的结构

8.3 两列左窄右宽型

比如小米小米官网

8.4 通栏平均分布型

比如锤子锤子官网

9.CSS动画

9.1 转换2D

/* scale(w,h) 缩放对应的比例 */

-webkit-transform: scale(0.5,0.5);

/* translate(left,top) 进行移动 */

-webkit-transform: translate(100px,100px);

/* rotate(度数deg) 旋转度数 */

-webkit-transform: rotateX(180deg);

/* 通过skew(x,y)方法，元素翻转给定的角度，围绕 X 轴把元素翻转 x 度，围绕 Y 轴翻转 y 度 */

-webkit-transform:skew(30deg,60deg);

9.2 动画

/*

动画animation绑定选择器:

动画名称完成动画的时间速度曲线做动画的次数(默认1,infinite) reverse(反向)

*/

-webkit-animation: my 4s linear infinite alternate ;

10.小技巧

div居中

div{

margin:auto; //可以让div块自动居中

}

文字居中

text-align:center;

输入框的高度

line-height: 20px;

background-position计算

水平偏移量 = （容器的宽度 - 图片宽度）*百分比 left

垂直偏移量 = （容器的高度 - 图片高度）*百分比 top

即 left的百分比 = 水平偏移量/（容器的宽度-图片的宽度）

字符图标

SVG Icon Libraries and Custom Icon Font Organizer ❍ IcoMoon

iconfont-阿里巴巴矢量图标库

四 CSS3 特性

1.CSS3新增选择器

位置伪类选择器

:first-child :选取属于其父元素的首个子元素的指定选择器
:last-child :选取属于其父元素的最后一个子元素的指定选择器
:nth-child(n) ：匹配属于其父元素的第 N 个子元素，不论元素的类型
:nth-last-child(n) ：选择器匹配属于其元素的第 N 个子元素的每个元素，不论元素的类型，从最后一个子元素开始计数。
n 可以是数字、关键词或公式

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>

<style>

/* 选择第一个元素 */

ul li:first-child{

background-color: cadetblue;

}

/* 选择最后一个元素 */

ul li:last-child{

background-color: aqua;

}

/* 选择第三个元素 */

ul li:nth-child(3){

background-color: lightpink;

}

/* 选择偶数个元素 n=0 2 4 6 8*/

ul li:nth-child(2n){

color: blue;

}

/* 选择奇数个元素 n=1 3 5 7 9*/

ul li:nth-child(2n+1){

color: red;

}

</style>

</head>

<body>

<ul>

<li>aaaaaaaaaaaaa</li>

<li>bbbbbbbbbbbbb</li>

<li>ccccccccccccc</li>

<li>ddddddddddddd</li>

<li>eeeeeeeeeeeee</li>

</ul>

</body>

</html>

目标伪类选择器

:target目标伪类选择器 :选择器可用于选取当前活动的目标元素

:target{

/* 给当前选择的锚点设置样式 */

color: red;

font-size: 100px;

}

属性选择器

选取标签带有某些特殊属性的选择器

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>CSS3-属性选择器</title>

<style>

/* 属性选择器：选取标签带有某些特殊属性的选择器 */

div[class^=font] { /* class^=font 表示 font 开始位置就行了 */

color: pink;

}

div[class$=footer] { /* class$=footer 表示 footer 结束位置就行了 */

color: skyblue;

}

div[class*=tao] { /* class*=tao *= 表示tao 在任意位置都可以 */

color: green;

}

</style>

</head>

<body>

<div class="font12">属性选择器</div>

<div class="font12">属性选择器</div>

<div class="font24">属性选择器</div>

<div class="font24">属性选择器</div>

<div class="font24">属性选择器</div>

<div class="24font">属性选择器123</div>

<div class="sub‐footer">属性选择器footer</div>

<div class="jd‐footer">属性选择器footer</div>

<div class="news-nav-tao">属性tao选择器</div>

<div class="news‐tao‐header">属性tao选择器</div>

<div class="tao‐header">属性tao选择器</div>

</body>

</html>

E::first-letter文本的第一个单词或字（如中文、日文、韩文等）
E::first-line 文本第一行；
E::selection 可改变选中文本的样式；
E::before和E::after

在E元素内部的开始位置和结束位创建一个元素，该元素为行内元素，且必须要结合content属性使用。

E:after、E:before 在旧版本里是伪元素，CSS3的规范里“:”用来表示伪类，“::”用来表示伪元素，但是在高版本浏览

器下E:after、E:before会被自动识别为E::after、E::before，这样做的目的是用来做兼容处理。

":" 与 "::" 区别在于区分伪类和伪元素 之所以被称为伪元素，是因为他们不是真正的页面元素，html没有对应的元素，但是其所有用法和表现行为与真正的页面元素一样，可以对其使用诸如页面元素一样的css样式，表面上看上去貌似是页面的某些元素来展现，实际上是css样式展现的行为，因此被称为伪元素。是伪元素在html代码机构中的展现，可以看出无法伪元素的结构无法审查

注意：

伪元素:before和:after添加的内容默认是inline元素**；这个两个伪元素的 content 属性，表示伪元素的内容,设

置:before和:after时必须设置其 content 属性，否则伪元素就不起作用。

2.CSS3盒模型

CSS3中可以通过box-sizing 来指定盒模型，即可指定为content-box、border-box，这样我们计算盒子大小的方式就发生了改变。

可以分成两种情况：

1、box-sizing: content-box 盒子大小为 width + padding + border content-box:此值为其默认值，其让元素维持W3C的标准Box Mode

2、box-sizing: border-box 盒子大小为 width 就是说 padding 和 border 是包含到width里面的注：上面的标注的width指的是CSS属性里设置的width: length，content的值是会自动调整的。

3.CSS3伸缩布局

布局的传统解决方案，基于盒状模型，依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便。

CSS3在布局方面做了非常大的改进，使得我们对块级元素的布局排列变得十分灵活，适应性非常强, 可根据剩余的宽高，灵活布局，其强大的伸缩性，在响应式开中可以发挥极大的作用。

传统布局和伸缩布局比较

一般情况下，当我们对一部分内容进行布局的时候，会使用盒模型。

常见的布局手段即是结合padding与margin设置元素的display、float和position。但是这三种方法在设置元素位置的时候，有时会相对死板并且使css语句过多。

主轴和侧轴

1.主轴：Flex容器的主轴主要用来配置Flex项目，默认是水平方向

2.侧轴：与主轴垂直的轴称作侧轴，默认是垂直方向的

3.方向：默认主轴从左向右，侧轴默认从上到下

4.主轴和侧轴并不是固定不变的，通过flex-direction可以互换。

Flex布局的语法规范经过几年发生了很大的变化，也给Flexbox的使用带来一定的局限性，因为语法规范版本众多，浏览器支持不一致，致使Flexbox布局使用不多

各属性详解

1.display:flex

display:flex 如果一个容器设置了这个属性，那么这个盒子里面的所有直接子元素都会自动的变成flex item

2.flex-direction

flex-direction 调整主轴方向（默认为水平方向）

flex-direction: column 垂直排列

flex-direction: row 水平排列

/*

flex-direction：设置子元素的排列方向：就是用来主轴方向，默认主轴方向是row(水平方向)

row:水平排列方向，从左到右

row-reverse:水平排列方向，从右到左

column:垂直排列方向，从上到下

column-reverse：垂直排列方向，从下到上

*/

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>CSS3-传统布局vs伸缩布局</title>

<style>

/* 传统布局 */

.box1{

width: 500px;

height: 300px;

background-color: red;

}

.box1 .item1{

width: 16.66%;

height: 300px;

border: 2px solid black;

background-color: lightpink;

box-sizing: border-box;

float: left;

}

/* 伸缩布局

1.主轴：Flex容器的主轴主要用来配置Flex项目，默认是水平方向

2.侧轴：与主轴垂直的轴称作侧轴，默认是垂直方向的

3.方向：默认主轴从左向右，侧轴默认从上到下

4.主轴和侧轴并不是固定不变的，通过flex-direction可以互换。

5.一旦父元素设置了display: flex; 则开启了伸缩布局，父元素中的每一个子元素变成伸缩布局

不再区分行类元素和块级元素

*/

.box2{

width: 500px;

height: 300px;

background-color: red;

/* 设置box2是伸缩盒子 */

display: flex;

flex-direction: column-reverse; /*默认从左到右(row),从右到左(row-reverse)),从上至下(column),从下至上(column-reverse)*/

}

.box2 .item2{

flex: 1; /*每个伸缩项各占一份*/

border: 1px solid black;

background-color: lightpink;

}

</style>

</head>

<body>



<div class="box1">

<div class="item1">1</div>

<div class="item1">2</div>

<div class="item1">3</div>

<div class="item1">4</div>

<div class="item1">5</div>

<div class="item1">6</div>

</div>



<div class="box2">

<div class="item2">1</div>

<div class="item2">2</div>

<div class="item2">3</div>

<div class="item2">4</div>

<div class="item2">5</div>

<div class="item2">6</div>

</div>

</body>

</html>

3.justify-content

justify-content调整主轴对齐（水平对齐） , 子盒子如何在父盒子里面水平对齐方式

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>CSS3-传统布局vs伸缩布局</title>

<style>

.box{

width: 500px;

height: 300px;

background-color: red;

/* 设置box2是伸缩盒子 */

display: flex;

flex-flow: row wrap;

/*justify-content: flex-start; /*默认靠左*/

/*justify-content: flex-end; /*靠右*/

/*justify-content: center; /*子元素在父元素中居中显示*/

/*justify-content: space-between; /*左右的盒子贴着父元素，中间平均分配空白间距*/

justify-content: space-around; /*每个子盒子在左右添加margin*/

}

.box .item{

width: 50px;

height: 200px;

border: 1px solid black;

background-color: lightpink;

}

</style>

</head>

<body>



<div class="box">

<div class="item">1</div>

<div class="item">2</div>

<div class="item">3</div>

<div class="item">4</div>

<div class="item">5</div>

<div class="item">6</div>

</div>

</body>

</html>

4.flex-wrap

flex-wrap控制是否换行 , 当我们子盒子内容宽度多于父盒子的时候如何处理

值描述
nowrap 默认值。规定灵活的项目不拆行或不拆列。不换行，则收缩（压缩）显示强制一行内显示
wrap 规定灵活的项目在必要的时候拆行或拆列。
wrap-reverse 规定灵活的项目在必要的时候拆行或拆列，但是以相反的顺序。

5.flex-flow

flex-flow是flex-direction、flex-wrap的简写形式

flex-flow: flex-direction flex-wrap;

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>CSS3-传统布局vs伸缩布局</title>

<style>

.box{

width: 500px;

height: 300px;

background-color: red;

/* 设置box2是伸缩盒子 */

display: flex;

/*flex-direction: row;*/ /*默认从左到右(row),从右到左(row-reverse)),从上至下(column),从下至上(column-reverse)*/

/*flex-wrap: nowrap; */ /*默认对每个子盒子进行伸缩处理，不换行*/

/*flex-wrap: wrap;*/ /*如何子盒子超过父盒子的大小，可以设置换行显示*/

/*flex-wrap: wrap-reverse; */ /*反转的顺序，可以设置换行显示*/

flex-flow: row wrap;

}

.box .item{

width: 120px;

height: 200px;

border: 1px solid black;

background-color: lightpink;

}

</style>

</head>

<body>



<div class="box">

<div class="item">1</div>

<div class="item">2</div>

<div class="item">3</div>

<div class="item">4</div>

<div class="item">5</div>

<div class="item">6</div>

</div>

</body>

</html>

6.flex-grow

flex-grow：扩展可以来扩展子元素的宽度, 设置当前元素应该占据剩余空间的比例值

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>

</head>

<style>

*{

padding: 0;

margin: 0;

}

.box{

width: 900px;

height: 600px;

border: 1px solid red;

margin:0 auto;

/*设置父容器为盒子：会使每一个子元素自动变成伸缩项

当子元素的宽度和大于父容器宽度的时候，子元素会自动平均收缩*/

display: flex;

/*设置子元素的主轴方向上的排列方式*/

justify-content: space-around;

}

.first{

width: 200px;

height: 200px;

background-color: red;

/*flow-grow:可以来扩展子元素的宽度：设置当前元素应该占据剩余空间的比例值

比例值计算：当前空间的flex-grow/所有兄弟元素的flex-grow的和

flex-grow的默认是0:说明子元素并不会去占据剩余的空间*/

flex-grow: 1;

}

.second{

width: 200px;

height: 200px;

background-color: green;

flex-grow: 1;

}

.third{

width: 200px;

height: 200px;

background-color: blue;

flex-grow: 2;

/* first,second,third宽度都为200，而盒子的宽度为900，还剩下100的宽度

first的宽度为 200 flex-grow:1; 表示占剩余宽度的1份（一共1+1+2=4份) 实际宽度 225

second的宽度为 200 flex-grow:1; 表示占剩余宽度的1份（一共1+1+2=4份) 实际宽度 225

third的宽度为 200 flex-grow:2; 表示占剩余宽度的2份（一共1+1+2=4份) 实际宽度 250

*/

}

</style>

<body>

<div class="box">

<div class="first">1</div>

<div class="second">2</div>

<div class="third">3</div>

</div>

</body>

</html>

7.flex-shrink

flex-shrink：收缩定义收缩比例，通过设置的值来计算收缩空间

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>

<style>

*{

padding: 0;

margin: 0;

}

.box{

width: 500px;

height: 600px;

border: 1px solid red;

margin:0 auto;

/*设置父容器为盒子：会使每一个子元素自动变成伸缩项

当子元素的宽度和大于父容器宽度的时候，子元素会自动平均收缩*/

display: flex;

/*设置子元素的主轴方向上的排列方式*/

justify-content: space-around;

}

.first {

width: 200px;

height: 200px;

background-color: red;

/*flex-shrink:定义收缩比例，通过设置的值来计算收缩空间

比例值计算：当前空间的flex-shrink/所有兄弟元素的flex-shrink的和

默认值为1*/

flex-shrink: 2;

}

.second{

width: 200px;

height: 200px;

background-color: green;

flex-shrink: 1;

}

.third{

width: 200px;

height: 200px;

background-color: blue;

flex-shrink: 1;

}

/*

盒子宽度为500,first+second+third=600，溢出了100px

总压缩值：200*2+200*1+200*1=800px 看flex-shrink:2;

first的压缩率为 400/800=0.5

first的压缩值为 100*0.5=50px

first的实际宽度为200-50=150px

second与third以此类推

second的压缩率为 200/800=0.25

second的压缩值为 100*0.25=25px

second的实际宽度为 200-25=175px;

third的实际宽度为175px

*/

</style>

</head>

<body>

<div class="box">

<div class="first">1</div>

<div class="second">2</div>

<div class="third">3</div>

</div>

</body>

</html>

8.flex

flex属性

4个孩子第一个孩子宽100写死其他三个都是flex:1

父亲总宽度500

4个孩子第一个孩子宽250写死第二个孩子300写死其他孩子都是flex:1