html基本的框架
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>我利用vscode创建的第一个页面</title>
</head>
<body>
写代码是一件非常快乐的事情 happy
</body>
</html><!DOCTYPE html> 声明了当前页面采取的是HTML5版本来显示网页 注意要在文档中最前面
<html lang="zh-CN"> 里面的设定语言版本 en为英语 最直接的影响就是用Chrome打开会翻译成对于语言
<meta charset="UTF-8"> 统一字符集的格式 UTF-8是万国码 没有它就会乱码的情况
简单一点来看<head></head>标签里面就是关于设置的东西而<body></body>里面就是主要显示在网页里面的内容
html基本常用标签
h标签
<h1>我是一级标题</h1>
h是单词head的缩写 可以作为标题使用 并且根据重要性递减p标签
<p>单词paragraph的缩写</p> 可以把html文档分为若干段落 会自动换行 并且留有足够的空隙br标签
单词break的缩写 换行标签 下面的文字会强制换行<br /> 但没有p标签换行的空隙大文本格式化标签
我是<strong>加粗</strong>的文字
我是<b>加粗</b>的文字
推荐使用strong标签
我是<em>倾斜</em>的文字
我是<i>倾斜</i>的文字
推荐使用em标签
我是<del>删除线</del>
我是<s>删除线</s>
推荐使用del标签
我是<ins>下划线</ins>
我是<u>下划线</u>
推荐使用ins标签div和span标签
div 一行只能放一个div 独占一行
span 是行内元素 一行内可以在一起
在后面会有详细笔记img标签
为了显示图片在网页里面
<img src="" alt="" title="" width="" height="" border=""/>
src为图片存放的路径
title为当用户鼠标悬放在图片上会显示的小标题
alt为当图片加载不出来 显示的文字
width height为宽和高
border为图像设定的边框
需要注意的是:
在开发中最好把图片全部放入项目文件的一个新文件夹里 便于调用
src有相对路径和绝对路径
相对路径: 以引用文件所在位置为参考基础 而建立的目录路径
绝对路径: 是指目录下的绝对位置 直接到达目标位置 通常是从盘符开始的路径
下一级路径/
上一级路径../
绝对路径实际开发中很少使用a标签
<a href="" target="">文本或图像</a>
单词anchor的缩写
href为指定链接目标的url地址
target为打开指定链接的方式一般默认_self在此页面显示 但_blank为打开新的页面
href还可以为下载链接 文件是压缩包形式的 点击之后下载文件
如果还没确定链接目标时可以先把href设为#
锚点链接
把目标位置标签 加入一个id属性然后href里写上#和属性的名字就可以实现跳转
<a href="#background">
...
<p id="background">因为他们的背景特殊所以不得不...</p>
这样 当点击a 就可以无论隔了多远跳过来了HTML中的特殊字符
像如果有很多个空格 它会自动变为一个 这个时候就可以用 
与之相似的还有 < 为&it > 为>table标签
为了展示数据 让数据更规范
<table>
<tr>
<th></th>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
tr为每一行的分界 td为表格数据 单元格里面的内容 th为第一行的表格标会加粗居中
table row table data table head
为了让表格更加清晰 可以用thead tbody 他们可以叠起来让代码更清晰
border 规定表格单元是否拥有边框 默认为没有边框
cellpadding 规定单左边沿与其内容之间的空白 默认1像素
cellspacing 规定单元格之间的空白 默认2像素
width 规定表格宽度
table合并表格
只需用到colspan和rowspan
column是列的意思 会左右扩张
row是行的意思 会上下扩张
扩张了再把之前位置的的td删除就看起来合并了表格列表标签:
列表最大的特点就是整洁自由
1. 无序列表（最常用）
<ul>
<li></li>
<li></li>
<li></li>
</ul>
ul只能嵌套li 但li可以容纳所有元素
2. 有序列表
<ol>
<li></li>
<li></li>
<li></li>
</ol>
ol只能嵌套li 但li可以容纳所有元素
3. 自定义列表
<dl>
<dt>关注我们</dt>
<dd></dd>
<dd></dd>
<dd></dd>
</dl>
dl只能嵌套dt dd
但dt dd可以容纳所有元素form和input标签
form为表单 即像填好的表格一样递交信息
<form action="xxx.php" method="get">
<!-- text 文本框 用户可以里面输入任何文字 -->
用户名: <input type="text" name="username" value="请输入用户名" maxlength="6"> <br>
<!-- password 密码框 用户看不见输入的密码 -->
密码: <input type="password" name="pwd" > <br>
<!-- radio 单选按钮 可以实现多选一 -->
<!-- name 是表单元素名字 这里性别单选按钮必须有相同的名字name 才可以实现多选1 -->
<!-- 单选按钮和复选框可以设置checked 属性, 当页面打开的时候就可以默认选中这个按钮 -->
性别: 男 <input type="radio" name="sex" value="男"> 女 <input type="radio" name="sex" value="女" checked="checked"> 人妖 <input type="radio" name="sex" value="人妖"> <br>
<!-- checkbox 复选框 可以实现多选 -->
爱好: 吃饭 <input type="checkbox" name="hobby" value="吃饭"> 睡觉 <input type="checkbox" name="hobby"> 打豆豆 <input type="checkbox" name="hobby" checked="checked">
<br>
<!-- 点击了提交按钮,可以把 表单域 form 里面的表单元素 里面的值 提交给后台服务器 -->
<input type="submit" value="免费注册">
<!-- 重置按钮可以还原表单元素初始的默认状态 -->
<input type="reset" value="重新填写">
<!-- 普通按钮 button 后期结合js 搭配使用-->
<input type="button" value="获取短信验证码"> <br>
<!-- 文件域 使用场景 上传文件使用的 -->
上传头像: <input type="file" >
</form>
checked属性为提前选中默认那个选项
当radio里面的属性name为一样的时候 就可以实现单选效果label标签
它有个特殊的作用和input结合之后
<label for="text"> 用户名:</label> <input type="text" id="text" >
<input type="radio" id="nan" name="sex"> <label for="nan">男</label>
<input type="radio" id="nv" name="sex"> <label for="nv">女</label>
用了它的for属性之后 当你点击文字之后 他就也可以自动聚焦到inputselect标签
<select>
<option>山东</option>
<option>北京</option>
<option>天津</option>
<option selected="selected">火星</option>
</select>
form标签
<textarea cols="50" rows="5">pink老师,我知道这个反馈留言是textarea来做的 </textarea>CSS语法规范
<style>
/* 选择器 {样式} */
/* 给谁改样式 { 改什么样式} */
p {
color: red;
/* 修改了文字大小为12像素 */
font-size: 12px;
}
</style>
<p>有点意思</p>标签选择器:
选中的全部标签会变成css里面的样式
p {
color: green;
}
div {
color: pink;
}
<p>男生</p>
<p>男生</p>
<p>男生</p>
<div>女生</div>
<div>女生</div>
<div>女生</div>
注意css目前得写在style标签里面类选择器
当有标签调用其中的class的时候 会让被调用的标签使用其中的样式
/* 类选择器口诀: 样式点定义 结构类(class)调用 一个或多个 开发最常用*/
.red {
color: red;
}
.star-sing {
color: green;
}
.memeda {
color: pink;
}
<ul>
<li class="red">冰雨</li>
<li class="red">来生缘</li>
<li>李香兰</li>
<li class="memeda">生僻字</li>
<li class="star-sing">江南style</li>
</ul>
<div class="red">我也想变红色</div>
注意style里写css的时候 得加上 . 不然不会生效
多类名选择器
顾名思义即为叠加类选择器使用
.red {
color: red;
}
.font35 {
font-size: 35px;
}
<div class="red font35">刘德华</div>id选择器
/* id选择器的口诀: 样式#定义, 结构id调用, 只能调用一次, 别人切勿使用 */
class 和id的区别：
id就像身份证号码 class像名字可能很多人重复 但id不会
id在css里面是# class是. 开头
#pink {
color: pink;
}
<div id="pink">迈克尔·杰克逊</div>
<div>pink老师</div>
通配符选择器
它可以把所有标签属性统一改变
* {
color: red;
}
<div>我的</div>
<span>我的</span>
<ul>
<li>还是我的</li>
</ul>字体属性
可以在font-family设置字体 设置三个的目的是 如果第一个失效了 就会启用第二个 再不行就会第三个 直到浏览器默认字体
p {
font-family: 'Times New Roman', Times, serif;
}
字体大小
直接使用font-size就可以完成设置
p {
font-size: 16px;
}
字体粗细
700 和bold 是加粗 400和normal是正常
.bold {
/* font-weight: bold; */
/* 这个700 的后面不要跟单位 等价于 bold 都是加粗的效果 */
/* 实际开发中,我们跟提倡使用数字 表示加粗或者变细 */
font-weight: 700;
}
h2 {
font-weight: 400;
/* font-weight: normal; */
}
字体斜体
italic 是斜体 normal是正常
p {
font-style: italic;
}
h2 {
/* 让倾斜的字体不倾斜 就是赶紧脉动回来 */
font-style: normal;
}
复合属性
font: font-style font-weight font-size/line-height font-family;
这样就可以节约代码
字体颜色
div {
/* color: deeppink; */
/* color: #cc00ff; */
color: rgb(255, 0, 255);
}
字体对齐
h1 {
/* 本质是让h1盒子里面的文字水平居中对齐 */
/* text-align: center; */
text-align: right;
}
字体装饰
div {
/* 下划线 */
/* text-decoration: underline; */
/* 删除线 */
text-decoration: line-through;
/* 上划线 */
text-decoration: overline;
}
a {
/* 取消a默认的下划线 */
text-decoration: none;
color: #333;
}
文本缩进
用1em就是一个文字大小的距离
p {
text-indent: 20px;
text-indent: 2em;
}
行间距
行间距是字体上面有一块部分和下面一块部分和字体本身组成的高度
div {
line-height: 26px
}
<h2>pink的秘密</h2>
<p>那一抹众人中最漂亮的颜色,</p>
<p>优雅,淡然,又那么心中清澈.</p>
<p>前端总是伴随着困难和犯错,</p>
<p>静心,坦然,攻克一个又一个.</p>
<p>拼死也要克服它,</p>
<p>这是pink的秘密也是老师最终的嘱托.</p>内部样式表
<style>
div {
color: pink;
}
</style>
<div>所谓内部样式表,就是在html页面内部写样式,但是是单独写到style标签内部.</div>行内样式表
<p>不能忘记你心里想的还是你</p>
<p>浪漫的夏季还有浪漫的一个你</p>
<p style="color: pink; font-size: 20px;">给我一个粉红的回忆</p>外部样式表
通常有一个css文件写好了文档之后 倒入到html文档进行使用
<link rel="stylesheet" href="style.css">
<div> Hello World </div>emmet语法使用
在用vscode时 如果想要生成
10个div标签 只需要用
div*10 然后回车
对于这样
<div class="demo1"></div>
<div class="demo2"></div>
<div class="demo3"></div>
<div class="demo4"></div>
<div class="demo5"></div>
也只需要使用
.demo$*5 即可快速生成
还有这样
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
也可以用
div{$}*5 回车快速生成
总结一下 $ 这个符号就是递增符后代选择器
可以快速让“子孙”增加样式
ol li {
color: pink;
}
ol li a {
color: red;
}
.nav li a {
color: yellow;
}
<ol>
变态写法
<li>我是ol 的孩子</li>
<li>我是ol 的孩子</li>
<li>我是ol 的孩子</li>
<li><a href="#">我是孙子</a></li>
</ol>
<ul>
<li>我是ul 的孩子</li>
<li>我是ul 的孩子</li>
<li>我是ul 的孩子</li>
<li><a href="#">不会变化的</a></li>
</ul>
<ul class="nav">
<li>我是ul 的孩子</li>
<li>我是ul 的孩子</li>
<li>我是ul 的孩子</li>
<li><a href="#">不会变化的</a></li>
<li><a href="#">不会变化的</a></li>
<li><a href="#">不会变化的</a></li>
<li><a href="#">不会变化的</a></li>
</ul>子元素选择器
顾名思义 只会选“子类”
.nav>a {
color: red;
}
<div class="nav">
<a href="#">我是儿子</a>
<p>
<a href="#">我是孙子</a>
</p>
</div>
这个时候孙子就没办法被选中 不会产生变化并集选择器
div,
p,
.pig li {
color: pink;
}
<div>熊大</div>
<p>熊二</p>
<span>光头强</span>
<ul class="pig">
<li>小猪佩奇</li>
<li>猪爸爸</li>
<li>猪妈妈</li>
</ul>
/* 约定的语法规范,我们并集选择器喜欢竖着写 */
/* 一定要注意,最后一个选择器 不需要加逗号 */链接伪类选择器
a:link {
color: #333;
text-decoration: none;
}
/*2. a:visited 选择点击过的(访问过的)链接 */
a:visited {
color: orange;
}
/*3. a:hover 选择鼠标经过的那个链接 */
a:hover {
color: skyblue;
}
/* 4. a:active 选择的是我们鼠标正在按下还没有弹起鼠标的那个链接 */
a:active {
color: green;
}
<a href="#">小猪佩奇</a>
<a href="http://www.xxxxxxxx.com">未知的网站</a>
hover非常的常用focus选择器
input:focus {
background-color: pink;
color: red;
}
<input type="text">
<input type="text">
<input type="text">
当点击了鼠标到输入框后 会自动加上设置的样式块级元素
特点为 独占一行 可以改变宽高 像男生一样
div {
/* width: 200px; */
height: 200px;
background-color: pink;
}
<div>比较霸道,自己独占一行</div> 瑟瑟发抖
<p>
<div>这里有问题</div>
</p>
注意 文字类的标签不能再嵌套块级元素了 比如p标签和h1～h6行内元素
高宽设置无效 文字的宽高就是他们的宽高 像女生一样
相邻行内元素在一行上 一行可以显示多个
其中 常见的行内标签有 a strong b em i del ins u span
span为最典型之一行内块元素
像人妖一样 既有“男人”的特点 也有女人的特点
比如
img input td 标签
行内块元素的特点：
1.和相邻行内元素（行内块）在一行上，但是他们之间会有空白缝隙。一行可以品示多个（行内元素特点）。
2.默认完度就是它本身内容的宽度（行内元素特点）。
3. 高度，行高、外边距以及内边距都可以控制（块级元素特点）。元素显示模式转换
a {
width: 150px;
height: 50px;
background-color: pink;
/* 把行内元素 a 转换为 块级元素 */
display: block;
}
div {
width: 300px;
height: 100px;
background-color: purple;
/* 把 div 块级元素转换为行内元素 */
display: inline;
}
这样div就可以在一排了 设置的宽度高度就无效了
span {
width: 300px;
height: 30px;
background-color: skyblue;
display: inline-block;
}
<a href="#">金星阿姨</a>
<a href="#">金星阿姨</a>
<div>我是块级元素</div>
<div>我是块级元素</div>
<span>行内元素转换为行内块元素</span>
<span>行内元素转换为行内块元素</span>单行文字垂直居中
div {
width: 200px;
height: 40px;
background-color: pink;
line-height: 40px;
}
<div>我要居中</div>
当height 和line-height一样的时候 文字会被挤在中间 就有了居中效果背景颜色
div {
width: 200px;
height: 200px;
/* background-color: transparent; 透明的 清澈的 */
/* background-color: red; */
background-color: pink;
}
<div></div>背景图片
div {
width: 200px;
height: 200px;
/* background-color: transparent; 透明的 清澈的 */
/* background-color: red; */
background-color: pink;
}
<div></div>超大背景图片
body {
background-image: url(images/bg.jpg);
background-repeat: no-repeat;
如果不设置这一步 就会默认重复显示
/* background-position: center top; */
background-position: center 40px;
}
背景图片平铺
div {
width: 300px;
height: 300px;
background-color: pink;
background-image: url(images/logo.png);
/* 1.背景图片不平铺 */
/* background-repeat: no-repeat; */
/* 2.默认的情况下,背景图片是平铺的 */
/* background-repeat: repeat; */
/* 3. 沿着x轴平铺 */
/* background-repeat: repeat-x; */
/* 4. 沿着Y轴平铺 */
background-repeat: repeat-y;
/* 页面元素既可以添加背景颜色也可以添加背景图片 只不过背景图片会压住背景颜色 */
}
背景方位名词
/* background-position: 方位名词; */
/* background-position: center top; */
/* background-position: right center; */
/* 如果是方位名词 right center 和 center right 效果是等价的 跟顺序没有关系 */
/* background-position: center right; */
/* 此时 水平一定是靠右侧对齐 第二个参数省略 y 轴是 垂直居中显示的 */
/* background-position: right; */
/* 此时 第一个参数一定是 top y轴 顶部对齐 第二个参数省略x 轴是 水平居中显示的 */
精确单位
/* 20px 50px; x轴一定是 20 y轴一定是 50 */
/* background-position: 20px 50px; */
/* background-position: 50px 20px; */
混合单位
/* 20px center 一定是x 为 20 y 是 center 等价于 background-position: 20px */
/* background-position: 20px center; */
/* 水平是居中对齐 垂直是 20 */
背景固定
/* 把背景图片固定住 */
background-attachment: fixed;
复合写法
/* background-image: url(images/bg.jpg);
background-repeat: no-repeat;
background-position: center top; */
/* 把背景图片固定住 */
/* background-attachment: fixed;
background-color: black; */
background: black url(images/bg.jpg) no-repeat fixed center top;
背景半透明写法
/* background-color: black; */
/* background: rgba(0, 0, 0, 0.3); */
background: rgba(0, 0, 0, .3);CSS三大特性值
层叠性
如果有两个div 都设置了color
div {
color: red
}
div {
color: blue
}
会默认执行最近的那一个 把之前的覆盖了
继承性
div {
color: red
font-size: 18
}
div {
color: blue
}
如果选择器里没有冲突的属性了 里面剩余的就会继承下来 也就还会把字体变为18
总结 同属性时 冲突的就近原则 其余继承下来
优先级
但还是有一个权重的算法来对比
选择器 选择器权重
继承 或者* 0,0,0,0
元素选择器 0,0,0,1
类选择器，伪类选择器 0,0,1,0
id选掙器 0,1,0,0
行内样式 style="" 1,0,0,0
!important 重要的 ∞无穷大
需要注意的是的 这样计算不会进位的 比如有人说11个元素选择器会不会就比类选择器权重高 但是即使是11个元素选择器也只是 0,0,0,11 比不了 0,0,1,0的
然后只要有继承 没有直接修改到那个元素 权重就是0
#father {
color: red
}
p {
color: green
}
<div id="father">
<p>
this is text
<p>
</div>
虽然id选择器为100 元素选择器只有1 理论上是应该变为红色 但是到p标签那里 继承了一下直接变为0了所以p标签的设置就直接生效了 即使加上最高权重的important也无能为力 只要继承就是0盒子模型
CSS盒子模型 包括 border边框 content内容 padding内边距 外边距margin
盒子边框
border-width
border-style soild实线边框
border-color
复合写法
border: 1px solid red; 没有顺序
边框分开写法
border-top: 5px solid pink;
/* 下边框 */
border-bottom: 10px dashed purple;
当然也有left right表格细线边框
表格的实质就是一个盒子 还有td一个个的小盒子 如果都给他们加上边框 就是一个有线的表格了
td {
border: 1px solid pink
border-collapse: collapse;
}
加上collapse的作用是你想要1px但是他们不会重合 看着就是2px 但如果加上它就可以达到目的
需要注意的是 加上border会把盒子变大 因为 border不属于之前设置的宽高
比如
div {
width: 200px
height: 200px
border: 10px
}
这个时候它的长宽都变为220了
所以设置的时候需要计算好宽高
要200的px 10的border就提前把宽高改为180内边距
padding为实际内容和盒子之间的距离
padding-left/right/top/bottom
复合写法 表达意思
padding: 5px; 上下左右都有5px内边距
padding: 5px 10px; 上下内边距为5px 左右为10px
padding: 5px 10px 20px; 上内边距5px 左右内边距10px 下内边距20px
padding: 5px 10px 20px 30px; 上5px 右10px 下20px 左30px
内边距和border一样 盒子会变大 在设置width和height要算好多出来的内边距
如果盒子本身没有指定width/height属性 则此时padding不会撑开盒子大小外边距
可以踹其他盒子 left/right/top/bottom 控制盒子之间的距离
复合写法和padding一模一样
块级水平居中
margin: 0 auto;
行内 行内块级元素居中
text-align: center;
嵌套块元素塌陷
当有两个块元素在一起 想让里面的元素向下 设置了里面的margin-top 20px 整个大小盒子都要下移 而且里面小盒子不会有任何变动 就像大盒子塌了砸下来一样
解决方法:
1. 设置一个边框 给大盒子 最好透明的border就一点也不影响了
2. 定义上类边距
3. 为父元素添加 overflow:hidden
清除内外边距
网页元素很多都带有默认的内外边距 而且不同浏览器默认的也不一致 因此我们在布局前 首先要清楚下网页元素的内外边距
* {
margin: 0;
padding: 0;
}
这也是我们css的第一行代码
注意 行内元素为了照顾兼容性 尽量只设置左右内外边距 不要设置上下内外边距 但是转换为块级和行内块元素就可以了圆角边框
border-radius: length;
可以单独设置每一个角
四个值为 左上 右上 左下 右下
一个值
圆角矩形
length就设置为高度的一半
圆角的原理为 设置四个半径为length的圆在四个角落和长宽相切 然后把圆外多余的部分去除盒子阴影
box-shadow: h-shadow y-shadow spread blur color inset;
第一二个属性为设置影子的 x轴和y轴的值
spread 为阴影的尺寸
blur 为模糊的距离
color 为颜色 通过rgba可以设置透明程度 会更好看
inset 设置为内部阴影 默认为外部 所以不能用outset
文字阴影
text-shadow: h-shadow v-shadow blur color;
属性和之前的值一样
浮动
网页设计第一准则 多个块级元素纵向排列找标准流 多个块级元素横向排列找浮动
float: left/right;
浮动特性：
1. 脱离了标准普通流的控制（浮）移动到指定的位置（动）俗称脱标
2. 浮动的盒子不再保留原先的位置
浮动具有行内块相似的元素
浮动可以搭配标准流的父元素进行布局 如果没有父元素限制 就会浮到浏览器左上右上 不美观
一个元素浮动了 理论上其余的兄弟元素也要浮动 如果在同一个父盒子里
浮动盒子只会影响浮动盒子后面的标准流 不会影响前面的标准流网页常见布局
<style>
* {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
.top {
height: 50px;
background-color: gray;
}
.banner {
width: 980px;
height: 150px;
background-color: gray;
margin: 10px auto;
}
.box {
width: 980px;
margin: 0 auto;
height: 300px;
background-color: pink;
}
.box li {
float: left;
width: 237px;
height: 300px;
background-color: gray;
margin-right: 10px;
}
.box .last {
margin-right: 0;
}
/* 只要是通栏的盒子(和浏览器一样宽) 不需要指定宽度 */
.footer {
height: 200px;
background-color: gray;
margin-top: 10px;
}
</style>
<body>
<div class="top">top</div>
<div class="banner">banner</div>
<div class="box">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li class="last">4</li>
</ul>
</div>
<div class="footer">footer</div>
</body>为什么需要清除浮动
由于父级盒子很多情况下 不方便给高度 但是子盒子浮动右不占有位置 最后父级盒子高度为0时 就会影响下面的标准流盒子
清除浮动的本质就是清除浮动元素造成的影响
如果父盒子本身有高度 则不需要清除浮动
清除浮动之后 父级就会根据浮动的子盒子自动检测高度
清除浮动策略是闭合浮动 只让浮动在父盒子内部影响 不影响父盒子外面的其他盒子
选择器 {clear: 属性值}
解决方法
1. 额外标签法 在浮动元素末尾添加一个空的块级标签
2. 父级添加 overflow: hidden 缺点 无法显示溢出的部分
3. :after伪元素清除浮动
.clearfix:after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
/* IE6、7 专有 */
*zoom: 1;
}
4. 双伪元素
.clearfix:before,
.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
为什么需要定位
可以让盒子自由自在的在某个盒子内移动位置或者固定屏幕中某个位置 并且可以压住其他盒子
定位组成
定位：将盒子定在某一个位置 所以定位也是在摆放盒子 按照定位的方式移动盒子
定位 = 定位模式 + 边偏移
定位模式用于指定一个元素在文档中的定位方式 边偏移则决定了该元素的最终位置
定位模式
它通过CSS的position属性来设置的
静态定位static
选择器 {position: static;}
它是默认定位方式 就是没有定位的意思
相对定位
相对定位是元素在移动位置的时候 是相对于它原来的位置来说的
选择器 {position: relative;}
它的位置移动之后 最开始的位置还是会保留
绝对定位 absolute 重要
绝对定位是在元素移动的时候 相对于它祖先元素来说的
选择器 {position: absolute;}
如果没有祖先元素或者祖先元素没有定位 则以浏览器为准定位
如果多个父元素重叠 只对准有定位的那个 其他的都无视
绝对定位不像相对定位 它移走之后 不保留原先的位置
固定定位 fixed 重要
固定定位是元素固定于浏览器可视区的位置
选择器 {position: fixed;}
也是不占位置的
粘性定位 sticky 少见
选择器 {position: sticky;}
以浏览器的可视窗口为参照点移动 （固定定位）
粘性定位占有原先的位置 （相对定位）
必须添加上下左右 一个属性才有效果
但兼容性较差 IE不支持
定位的叠放次序
选择器 { z-index: 1;}
值越大 就越在上面
注意只有定位才有这个属性
数值后面千万不能加单位绝对定位的盒子居中
定位中的盒子不能用 margin: 0 auto;来实现了 但可以用一个简单的算法实现
left: 50%; 让盒子的左侧移动到父级元素的水平中心位置
margin-left: -100px 让盒子向左移动自身宽度的一半
定位特殊性
1.行内元素添加绝对或者固定定位 可以直接设置高度和宽度
2.如果不给宽高 占用的面积也就是内容的大小
3.浮动定位不会压住标准流的文字 但是绝对定位和固定定位会压住文字
小知识：最初不是为了布局的 因为浮动最初的设计初衷就是为了文章里面的文字环绕图片display
display: none 改为none了就可以隐藏元素了
display: block 改为block就可以用了
后面应用非常广和js visibility
visibility: visible; 元素可视
visibility: hidden; 元素隐藏
visibility隐藏后 继续占有原来的位置
和display区别就是 visibility会保留原先的位置 但实际开发display更常用
overflow
overflow为了决定在盒子里面是否让超出的部分显示
overflow: visible 默认的
overflow: hidden 隐藏起来
overflow: scroll 滚动起来看 有滚动条
overflow: auto 自动设置 如果超出了就设置滚动条
有定位的盒子慎用HTML5 CSS3 提高
需要注意的是的HTML5新特性对浏览器版本要求很高 是否能兼容
HTML5新增的语义化标签
<header>: 头部标签
<nav>: 导航标签
<article>: 内容标签
<section>: 定义文档某个区域
<aside>: 侧边栏标签
<footer>: 尾部标签
这种语义化标准主要是针对搜索引擎
移动端其实更喜欢使用这些标签多媒体标签
音频: <audio>
视频: <video>
video只支持三种视频格式 但是尽量用mp4兼容性更好
audio元素只支持三种视频格式 但是尽量用mp3
Chrome一般会把这两个元素的自动播放关闭了
新增input类型
重点记住number tel seacrh
新增的表单属性 
只要对焦到了输入框 placeholder里面的文字就自动消失了
同时可以用
input::placeholder{
color: pink;
}
来修改里面的文字颜色
multiple需要在input type: file里使用CSS3的现状
新增的CSS3特性有兼容问题 ie9+才支持
移动端支持优于PC端
不断改进中
应用相对广泛
现阶段主要学习: 新增选择器和盒子模型以及其他特性
848
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
