第一天
<br/>换行
浏览器只识别一个空格 多个空格安一个来算 可以用 来当做空格
strong表情和b标签是加粗
em和i 是倾斜
del和s **是删除线**
ins和u是下划线
img 标签 alt属性的意思是当图片显示不出来的时候的文字替换
title属性的意思是当鼠标滑到图片上提示的文字
a标签 target代表的是打开窗口的默认方式 默认的值是_self 代表的是在本窗口打开新的页面
另一个是_blank 代表的是新打开一个页面
锚点定位 在当前a标签中herf中输入所要到达的那个标签的id
第二天
表格 table
里面有个thead和一个tbody标签
行标签tr 单元格td thead里面的可以用th标签与td标签意思一样只是加粗了
table里的属性有align border cellpadding cellspacing width height等等
其中align属性代表的是居中局左居右 align='center'
border代表是边框属性
cellpadding代表的是单元格内的文字或内容距离边框的距离
cellspacing代表的是单元格与单元格之间的距离
width和height分别代表的是表格的宽高
rowspan 代表的是合并行
colspan 代表的是和并列
合并几个之后把多余的删去
列表
无序列表 ul li
有序列表 ol li
自定义列表 dl dt dd
<dl>
<dt>关注我们</dt>
<dd>新浪微博</dd>
<dd>官方微信</dd>
<dd>联系我们</dd>
<dl/>
input
label 标签 的作用是当点击表单元素旁的文字时就相当于点中了这个input按钮
只需要将label属性包住文字并且label中的for属性的值是input中的id值
input 里有一个checked属性 checked='checked'代表的是默认选中
<input type="checkbox" id='check' checked='checked'><label for="check">我是谁</label>
第三天
<hr>分割线
标签选择器
类选择器
通配符选择器
*
注意使用分组选择器时 只能提出公共的部分，对于标签之间的不同点，要分别提出来
注意： h标题标签比较特殊，需要单独指定文字大小
font-style：italic；让字体倾斜跟em的作用样 font-style：normal；让倾斜的字体恢复正常
font-weight:blod;加粗
text-align本质上是让大盒子里的文字水平居中对齐
子盒子默认继承父盒子的宽度大小
text-decoration:none消除下划线 常用于消除a标签
text-decoration：underline 下划线
line-through删除线
overline 上划线
text-indent:2em 如果此时写了2em则是缩进了当前元素2个文字大小的距离
text-indent 文本的首行缩进了多少距离
注意：行内元素不能缩进
测量行高
第四天
标签或类名*数字 就会一次性出现多少个标签
标签或类名{嘻嘻嘻嘻嘻嘻} 就会出现 《标签》嘻嘻嘻嘻《标签》
标签或类名$*数字 就会出现 类名加数字 的多个标签按顺序排列
这几个快捷可以任意组合 例如div{$}*5 又或者 .aa$*5
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div class="aa1"></div>
<div class="aa2"></div>
<div class="aa3"></div>
<div class="aa4"></div>
<div class="aa5"></div>
<div class="aa6"></div>
background-position可以分为水平方向 和 垂直方向
left center right top center bottom
顺序无所谓
当他的方向是像素为单位时 顺序一定是 水平 垂直方向
background-attachment：fixed 把背景图片固定住不让他跟着内容跑
scroll 让他跟着内容跑
background：颜色 地址 是否平铺 背景是否固定 水平位置 垂直位置
box-sizing 最主要的用法是规定容器元素的最终尺寸计算方式。
如果你创造了一个 <div> 没有设置 box-sizing 属性为 border-box(不设置的话默认值为 content-box.)，同时你设置 width:100px; border:10px solid red;
padding:10px; 那么最终 div 容器的实际宽度为：
100px(width)+2*10px*(padding)+2*10px(border)=140px
所以你会得到一个比你预期（100px）还要更大的容器，结果就是会破坏网页布局。
注意：容易 margin 的尺寸不会被计算入最终容器宽度，因为对他的定义为对这个容器的留白，但不属于容器本身。
如果当我们定义一个容器的 box-sizing 属性为 border-box 时（表达式：br{box-sizing:border-box}），那么我们创建一个和上段中相同设置的 <div> 容器时，那么他的最终宽度即为
100px, 那么它的内容部分（content）的有效宽度变成了 100px-2*10px-2*10px =60px;
所以你会得到一个你预期大小的盒子容器，但是只是被压缩了内容部分尺寸而已，但是对于整体布局而言益处颇多。
所以要合理利用好这个属性，这个属性十分重要。
第五天
后面写的会覆盖前面写的
注意：子元素会默认继承父元素的color font-size 行高等属性
行高的继承
css的优先级 ！important 行内 id class 标签 *
继承的权重为零
border-collapse：collapse；合并相邻的边框
注意： padding不会影响盒子大小的情况 没有写宽的时候
注意：块级盒子水平居中对齐 margin: 100px auto;
行内元素或者行内块元素水平居中给其父元素添加 text-align:center 即可
外边距合并的解决方法
外边距合并-相邻块级元素垂直外边距合并：相邻块级元素垂直外边距合并以最大值为准
外边距合并-嵌套块级元素垂直外边距塌陷：遇到外边距合并就给父级元素加一个border或overflow：hidden
注意：浮动和定位都没有外边距合并问题
第六天
注意：
同时加#号在相应位置按下shift和alt键向下一拉输入#号
Ctrl+x --》shift+alt向下一拉 Ctrl+v 完成列表
浮动的盒子不会有外边距合并的问题
行高会继承
注意此地方会层叠 w 里面的margin
border-radius:50%代表圆
圆角矩形设置成高度的一半
border-top-left-radius:20px 代表左上角变圆
box-shadow:阴影水平移动 垂直移动 模糊度 大小 颜色
行内块元素中间有缝隙
浮动的特性（float）:
设置了浮动的元素会脱离标准流
浮动的盒子 不在 保留原先的位置
一浮全浮：
任何元素都可以浮动、不管原先是什么模式的元素，添加浮动之后具有行内块相似的特性 如果行内元素有了浮动，则不需要转换块级、行内块元素就可以直接给高度和宽度
如果一个子盒子浮动了，尽量保证其他盒子也跟着浮动 这样保证这些子元素在一行上显示
为什么需要清除浮动：
如果一个父盒子里没有设置高度，而是有子盒子来撑大盒子，这样的话，如果子盒子都浮动了，子盒子脱标，父盒子的高度还是为0，影响标准流的布局
清除浮动的方法
1、在子盒子后边新增一个空标签 添加一个类名 在样式里写clear：both 注意这个新增的盒子必须是块级元素
2、在父级盒子样式里加overflow：hidden
3、在父级盒子加一个类名clearfix 在样式里写
.clearfix:after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
/* IE6、7 专有 */
*zoom: 1;
}
4、在父级盒子加一个类名clearfix 在样式里写
.clearfix:before,
.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
PS切图
1、图层切图：最简单的切图方式：右击图层-》导出PNG 切片。
2、切片切图：1. 利用切片选中图片 2、文件菜单--》导出===》存储为web设备所用格式===》选择我们要的图片格式存储
第七天
第八天
只有定位的盒子才有z-index 属性
注意：加了绝对定位的盒子不能通过margin:0 auto 水平居中，但是可以通过以下计算方法实现水平和垂直居中。
①left: 50%;：让盒子的左侧移动到父级元素的水平中心位置。
②margin-left:-100px;：让盒子向左移动自身宽度的一半。
绝对定位和固定定位也和浮动类似。
1.行内元素添加绝对或者固定定位，可以直接设置高度和宽度。
2.块级元素添加绝对或者固定定位，如果不给宽度或者高度，默认大小是内容的大小
浮动元素、绝对定位(固定定位）元素的都不会触发外边距合并的问题
定位与浮动的不同点
绝对定位（固定定位）会完全压住盒子,浮动元素不同，只会压住它下面标准流的盒子，但是不会压住下面标准流盒子里面的文字（图片）但是绝对定位（固定定位）会压住下面标准流所有的内容。浮动之所以不会压住文字，因为浮动产生的目的最初是为了做文字环绕效果的。文字会围绕浮动元素1.11
让一个元素在页面中隐藏或者显示出来。
1.display 显示隐藏元素但是不保留位置
2.visibility 显示隐藏元素但是保留原来的位置
3.overflow 溢出显示隐藏但是只是对于溢出的部分处理
4、opacity
5、text-indent=-9999px
为啥需要定位：有很多效果标准流和浮动都无法快速实现。
1、浮动可以让多个块级盒子一行没有缝隙的排列显示，经常用于横向排列盒子。
2、定位则是可以让盒子自由的在某个盒子内移动或固定在屏幕中的某个位置，并且可以压住其他盒子。 */
相对定位的特点：
1、他是相对于自己原来的位置来移动的（移动位置的时候参照点事自己原来的位置
2、原来在标准留的位置继续占有，后面的盒子仍然以标准流的方式对待它因此，相对定位并没有脱标。它最典型的应用是给绝对定位当爹的
绝对定位的特点
/* 绝对定位是元素在移动的时候是相对于它祖先元素来说的
绝对元素的特点：1、如果没有祖先元素或者祖先元素没有定位，则以浏览器为准定位
2、如果祖先元素有定位（相对、绝对、固定定位），则以最近一级的有定位祖先元素为参考点移动位置。
3、绝对定位不再占有原先位置（脱标）所以绝对定位是脱离文档流的 */
浮动的元素不会压住下面标准流的文字
绝对定位固定定位会压住下面标准流所有的内容
固定定位的特点：（务必记住）
1.以浏览器的可视窗口为参照点移动元素。跟父元素没有任何关系不随滚动条滚动
2.固定定位不在占有原先的位置。固定定位也是脱标的，其实固定定位也可以看做是一种特殊的绝对定位
第九天
精灵图的坐标移动位置 都是负的
精灵图的使用
例子 .box2 {
width: 27px;
height: 25px;
/* background-color: pink; */
margin: 200px;
background: url(images/sprites.png) no-repeat -155px -106px;
x轴和y轴是负数
}
字体图标的使用
css三角制作 宽高为0 border有三边为transparent
input, textarea {
/* 取消表单轮廓 */
outline: none;
}
textarea {
/* 防止拖拽文本域 */
resize: none;
}
<li style="cursor: default;">我是默认的小白鼠标样式</li>
<li style="cursor: pointer;">我是鼠标小手样式</li>
<li style="cursor: move;">我是鼠标移动样式</li>
<li style="cursor: text;">我是鼠标文本样式</li>
<li style="cursor: not-allowed;">我是鼠标禁止样式</li>
利用vertical-align实现图片文字垂直居中对齐
img {
/* vertical-align: bottom; */
/* 让图片和文字垂直居中 */
vertical-align: middle;
/* vertical-align: top; */
}
图片底侧空白缝隙解决方案
给img加上 vertical-align: middle;
或display: block;
单行文本溢出显示省略号
white-space:nowrap 如果文字显示不开也必须强制一行内显示
overflow：hidden溢出部分隐藏
text-overflow:ellipsis；文字溢出的时候用省略号来显示
多行文本溢出显示省略号
overflow：hidden
text-overflow:ellipsis
display：-webKit-box；弹性伸缩盒子模型显示
-webKit-line-clamp：3 限制在一个块元素显示的文本的行数
-webKit-box-orient：vertical 设置或检索伸缩盒对象的子元素的排列方式
margin负值的巧妙运用
ul li {
position: relative;
float: left;
list-style: none;
width: 150px;
height: 200px;
border: 1px solid red;
margin-left: -1px;
}
/* ul li:hover {
1. 如果盒子没有定位，则鼠标经过添加相对定位即可
position: relative;
border: 1px solid blue;
} */
ul li:hover {
/* 2.如果li都有定位，则利用 z-index提高层级 */
z-index: 1;
border: 1px solid blue;
}
文字围绕浮动元素的妙用
css三角强化的巧妙运用
京东css初始化
第十天
新增的语义化标签
<header>：头部标签
<nav>：导航标签
<article>：内容标签
<section>：定义文档某个区域
<aside>：侧边栏标签
<footer>：尾部标签
video标签 autoplay="autoplay"自动播放 loop="loop" 无线循环 poster未播放时的图片 controls 显示播放组件 muted='muted'谷歌浏览器不允许这个是让谷歌浏览器允许的
audio标签
我们验证的时候必须添加form表单域
<form action="">
<ul>
<li>邮箱: <input type="email" /></li>
<li>网址: <input type="url" /></li>
<li>日期: <input type="date" /></li>
<li>时间: <input type="time" /></li>
<li>数量: <input type="number" /></li>
<li>手机号码: <input type="tel" /></li>
<li>搜索: <input type="search" /></li>
<li>颜色: <input type="color" /></li>
当我们点击提交按钮就可以验证表单了
<li> <input type="submit" value="提交"></li>
</ul>
</form>
新增表单属性
input::placeholder {
color: pink;
}
属性选择器
新增属性选择器 必须是input 但是同时具有 value这个属性 选择这个元素 []
input[value] {
color:pink;
}
只选择 type =text 文本框的input 选取出来
input[type=text] {
color: pink;
}
选择首先是div 然后 具有class属性 并且属性值 必须是 icon开头的这些元素
div[class^=icon] {
color: red;
}
选择首先是section 然后 具有class属性 并且属性值 必须是data结尾的这些元素
section[class$=data] {
color: blue;
}
CSS3新增结构伪类选择器
把所有的奇数 odd的孩子选出来
ul li:nth-child(odd) {
background-color: gray;
}
伪元素选择器 伪元素选择器before和after
/* div::before 权重是2 */
div::before {
/* 这个content是必须要写的 */
/* display: inline-block; */
content: '我';
/* width: 30px;
height: 40px;
background-color: purple; */
}
CSS3盒子模型 box-sizing: border-box;
图片模糊处理filter
img {
/* blur是一个函数 小括号里面数值越大，图片越模糊 注意数值要加px单位 */
filter: blur(15px);
}
CSS3属性calc函数
.son {
width: calc(100% - 30px);
height: 30px;
background-color: skyblue;
}
css3过渡效果 transition
重点----------------------------------
transition: 变化的属性 花费时间 运动曲线 何时开始;
transition: all 0.5s; 谁做过渡，给谁加
一般和hover搭配使用
transform：translate 作用和relative一样 只不过不会引起浏览器的重新渲染
行内元素不支持transform，需要先变成block
不是所有属性都能过渡
1、display: none => block 没法过渡 2.—般改成 visibility: hidden => visible 3.background颜色可以过渡:因为颜色是数字 4、opacity透明度可以过渡 5、过度必须要有起始（比如hover和非hover状态的过度）
第十一天
transform: translate(x,y);或者分开写 transform: translatex(n); transform: translateY(n)
translate最大的优点:不会影响到其他元素的位置
translate中的百分比单位是相对于自身元素的translate:(50%,50%);
重点：对行内标签没有效果
案例奔跑的熊大
