你好，如果你看到这篇博客，应该是带着问题的。如果问题没有解决，请将问题写在留言区，交流。
************************************************************************************************
html
markup language,不是编译语言。
<meta charset="UTF-8">媒体标签
描述、针对搜索引擎的关键词以及刷新频率
浏览器默认字体大小16px
<b></b>
<strong></strong>两个加粗标签，这个对搜索引擎来说，权重大。
<i><i>
<em><em>两个斜体标签，这个对搜索引擎权重大些。
<s></s>
<del></del>两个删除标签，这个对搜索引擎权重大些。
<u></u>下划线标签，underline
<ins>下划线</ins>
<hr>水平分割线，horizon
<br>换行标签
<p></p>段落标签
<h1></h1>标题标签，h1的权重非常大，所以一个页面只用一个，用在logo上。
两种能发出请求的标签：一是a，二是img
<a></a> 锚anchor
a链接既能链接网址，又能链接到锚点。
<a href="" target="_blank"></a> 默认_self，单独设置这个地址的打卡方式。
样式表里面base target: "_blank">就是让所有<a>标签都打开新页面。
样式表里面text-decoration: none;就是让a标签没有修饰，也就没有下划线。
<img src="" alt="">
找路径的方式如下：
<img src="..\..\untitled\学成在线\images\logo.png" alt="图片加载失败">
..\找到上一级目录，
..\..\找到上两级的目录
<img src="01.gif" alt="">
这样直接在同级目录里面找
<img src=".\学成在线\images\logo.png" alt="加载失败">
在同级的文件夹“学成在线”里面找。".\"可以不写。
*********三种元素，三种标签*********************************************
行内inline。宽高设置不起作用。可以并排。
span
a
em i
strong b
del s
ins u
块级block。宽高设置起作用。不能并排
div
p
ul li
ol li
dl
table
form
行块级inline-block。宽高设置起作用，可以并排。
input
img
display: 转换类型
******************************************************
******************************************************
目标选择器 :target
点击“锚点”，就做target里面的事
<head>
#mao:target{
font-size:50px;
color:red;
}
<\head>
<body>
<p id="mao">
锚点
<p>
<\body>
******************************************************
伪类选择器
鼠标移入span，就触发
<style>
span:hover{
color:red;
background-color:gold;
}
</style>
******************************************************
CSS的三个特性：层叠性，继承性，优先级
常用的7种选择器,下面4中的优先级是0 1 10 100
1、通配符选择器，全选
*
2、标签选择器
标签名{}
3、类选择器
.类名{}
4、id选择器，权重大，和后台数据交互相关，所以前台尽量不用。
#id名{}
5、子代选择器
只能选儿子，不能选孙子
color是继承属性，即子代从父代继承color属性，text-，line-等也是继承属性
调用方法：父代 > 子代
.father > div{} 选中三个子代div
.father > div > .sun{} 这个的权重是10+1+10
.sun 这个的权重是10
.b 这个的权重是10，权重一样，
<div class="father">
<div>
<div class="sun b">我是孙子</div>
</div>
<div></div>
<div></div>
</div>
6、后代选择器
子代选择器把>换成空格
7、交集选择器
标签.类
p.b 在类名叫b的里面选出带p标签的。
8、结构伪类选择器
元素:first-child{}
元素:last-child{}
.span:nth-child(3){}找的是span标签的父元素中的第3个，不是找第三个span
span:first-of-type{}找的是span标签的父元素中的第一个span
:last-of-type{}
:nth-of-type{}
.a span:nth-of-type(2n){}
.a span:nth-of-type(2n+1){}
.a span:nth-of-type(-n+3){}选前三个
.a span:nth-of-type(n+4){}选第4个，第五个，第六个··· ···
*******盒模型，CSS2盒模型，盒模型宽度=width+padding*2+border*2***********************************************
margin
border
padding
content
盒子外边距塌陷（重叠），父盒子和子盒子的外边距的作用域重叠。解决方法：
一种是，优先设置内边距padding，同时外盒子的高宽减去被撑大的部分。
二种是，设置外盒子重叠边border-top:1px solid white。这根线不影响用户，同时能隔开内外盒子的外边距作用域。
margin: 0 auto;这一句用于把盒子水平居中。这个盒子必须是块级元素，且盒子有宽度。也就是不能用margin: 0 auto 使span居中。
用text-align: center可以把span水平居中。行内元素和行内块元素，其本质是文本。
********CSS3 盒模型，主要用在移动端，**********************************************
旧盒模型，CSS2盒模型，盒模型宽度=width+padding*2+border*2
新盒模型，盒模型宽度 = width 这个width=旧盒子的width+padding*2+border*2
要使用新盒模型，需要声明 box-sizing:border-box
旧盒是box-sizing:content-box(默认盒子)
旧盒模型的缺点就是，当你加了padding，盒子整体变大，可能造成溢出，使移动端产生横向滚动条。这是不好的用户体验，所以就出现了新盒模型。
大屏设备 PC 1200px
中屏 工厂设备屏幕 992px-1200px
小屏 Ipad 768px-992px
超小屏 Iphone <768px
******************************************************
圆角边框
border-radius: 50%
border-radius: 30px 50px
主对角线 副对角线
斜率为正的对角线 斜率为负的对角线
左上右下两个角 左下右上两个角
border-radius: 20px 30px 40px 50px 从左上开始顺时针
border-radius: 20px/50px
******************************************************
图片和文字的对齐方式。
图片默认vertical-align:baseline，文字默认vertical-align:bottom
top
center
baseline
bottom
消除图片下边框的方法？?
答案：
<head>
<style>
div{
border: 1px solid chartreuse;
line-height: 0px; 方法二，行高设置0，文字能显示。图片本质是文字。
font-size: 0px; 方法三，字体大小设置0，不显示文字了，只显示图片。
}
img{
vertical-align: bottom; 方法一，改变图片垂直对齐方式。
}
</style>
</head>
<body>
<div>
<img src="学成在线/images/课程11.png"/>
"中文English"
</div>
</body>
（搞定）
******************************************************
浮动
标准流。
这是指西方语言中文本从左向右，从上向下显示，这也是我们熟悉的传统的HTML文档中的文本布局。注意，在非西方的语言中，流方向可能不同。大多数元素都在正常流中，要让一个元素不在正常流中，唯一的方法就是使之成为浮动元素或定位元素。
标准流中，块级元素独占一行，垂直放置。行级元素在水平方向上一个接一个的排列。
设置inline-block达到排成一行，这种方式用在移动端
浮动 打破标准流，达到排成一行，这种方式用在PC端。在所有需要并排的盒子身上设置浮动。
浮动属性只有3个值
float: left; right both左右都浮动
程序执行顺序中，谁先得到浮动属性，谁就先占位置。比如3个div都设置右浮动，如下box3先浮动到父盒子的最后边，
<div class=box3></div>
<div class=box1></div>
<div class=box2></div>
并集选择器
.box1,.box2,.box3,.box4{}
盒子一旦浮动，就不占位置。盒子拥有浮动后就脱标了，就不占位置了，其他标准流的元素就会占用其位置，显示在其下面，被遮住。
浮动产生的影响：1、浮动后，元素不占位置。会造成父盒子高度为0，即高度塌陷。2、元素浮动后不占位置，元素原来的位置空出来了，新的元素将会布置到空出来的位置上，看起来就是新元素跑到浮动元素的下面了，被遮住了。应对办法？?清除浮动的影响的4个办法
清除 浮动影响 的4个办法：
1、父元素定高（BFC）
2、overflow: hidden 溢出隐藏，设置父盒子的溢出隐藏
3、clear:both left right清除浮动
结构（必须是块级元素）加一个属性 clear:both;
<div style="clear: both"></div>把这一句放在浮动元素后面，受浮动影响的元素的前面
4、CSS伪元素法。不在html结构树中增加新节点，在样式上模拟形成一个元素。但凡是小结构，都可以不用结构体现，用CSS生产伪元素的方法。
比如小米网页上，商品div上面的新品小块。
******************************************************
BFC, Box Formatting Context
元素的类型和display属性，决定了这个Box的类型。不同类型的Box，会参与不同的Formatting Context（一个决定如何渲染文档的容器），因此Box内的元素会以不同的方式渲染。
最常见的Formatting Context有Block Formatting Context
******************************************************
伪元素写法
伪元素的实质是inline-block，所以常常会变成block后再设置。
要插入一个元素在父元素的所有内容之后，这里“父元素”可以是父元素的类名 .father::after
父元素::after
要插入一个元素在父元素的所有内容之前
父元素::before
clearFix这个几个字母的组合，是行业统一。
.clearFix::after,.clearFix::before{
content:'' 默认不放文本，“新品”标签就写新品
line-height:0; IE浏览器可能默认给高度，所以设置行高0
display:block; 伪元素本身是inline-block，清浮动的属性必须要用在block上面。
clear:both; 就为了这一句，清除浮动
}
<div class="box1 tips"></div>
.tips{
content:"新品";
display:block;
clear:both;
width: 40px;
height: 25px;
margin: 0 auto;
line-height: 25px;
background-color: green;
}
现在学了浮动，所以要把block放成一排的时候，就不要用display:block了，直接用浮动。
元素一旦浮动，就变成inline-block了，就会排成一行。
******背景属性************************************************
background: transparent url("") no-repeat center center fixed
背景 背景透明 背景图 背景图的位置 是否跟随滚动条
background-color
background-image: url("")
background-repeat:repeat 默认铺满，不拉伸
background-position:x,y 背景图片放在（x,y）位置
背景图是否附着， 滚动条动背景不动是fixed，滚动条动背景动是scroll
background-attachment
css3的属性，背景图片尺寸，调节背景图片大小
background-size: %、px、cover（铺满）、contain（按比例缩放将宽放满）
********定位**********************************************
标准流的盒子，定位的默认值是静态定位
position
1 static 静态定位
2 relative 相对定位，没有脱标，原来的位置还在，
3 absolute 绝对定位，找最近的有定位属性的盒子作为。脱标
4 fixed 固定定位，以body为参考，不动。脱标
位置值 right left top bottom 是被定位元素的左上角 相对于 父盒子的 位置。
所以，想要把盒子放在任意地方，用绝对定位后，盒子能随着滚动条动。用固定定位后，盒子不能跟随滚动条动。
注意，子绝父相，绝对定位的盒子要找最近的有定位属性的盒子作为参考，注意是往父层，爷爷层去找，不会找兄弟层。固定定位以body作为参考。
******************************************************