学习前端的第十三天

今天学得东西还挺有意思的，学了新的选择器，不过重点还是对弹性盒布局的学习，发现这方法一用方便好多。

一、CSS3选择器

1、属性选择器

不通过对标记命名，可以直接使用标记自身的html属性选取元素

元素[属性]{}					选择指定属性							例：input[type]{}

元素[属性="属性值"]{}		选择指定属性与属性值					例：input[type="text"]{}

元素[属性^="属性值"]{}		选择指定属性与属性值开头字符			例：input[name^="J"]{}

元素[属性$="属性值"]{}		选择指定属性与属性值结尾字符			例：input[name$="p"]{}		

元素[属性*="属性值"]{}		选择指定属性与属性值所包含的字符		例：input[name*="p"]{}				

2、UI元素状态伪类

和表单标记有关系，描述的是某种状态。

:enabled					匹配所有处于可用状态的元素

:checked					匹配所有处于默认被选中状态的元素

:disabled					匹配所有处于禁用状态的元素

:selection					可以让鼠标选中文字的时候，给其设置背景和文本颜色，不能设置其他属性

3、否定选择器

除了它以为的元素都被选中

:not()			例如你只想对form表单里的input起作用，但却存在submit，这时你可以写input:not([type="submit"]){}

4、根元素选择器

将样式绑定在根元素中，也就是在HTML页面中的包含整个页面的html部分

:root{}			

5、层次选择器

标记后代之间的关系，标记兄弟之间的关系

1、后代选择器			E F{}		两者之间用空格隔开。F是E的后代，说明只要是E下的F都会起作用，子元素下的依然会起作用。

2、子元素选择器			E>F{}		两者之间有>。这里的F只是E的子元素，所以F以下的元素不起作用。

3、相邻兄弟选择器		E+F{}		两者之间有+。选取紧跟在自己后面的那个元素，不能选中被隔开的元素。

4、通用兄弟选择器		E~F{}		两者之间有~。选取跟在自己后面的所有的元素，可以被其他类型的标记给隔开。

二、CSS3属性

1、文字阴影：

text-shadow:值1 值2 值3 值4;

值1是阴影的水平位置，值2是阴影的垂直位置，值3是阴影的模糊程度（只能为正值）， 值4标识阴影的颜色

2 、容器阴影：

box-shadow:值1 值2 值3 值4 值5 ;

值1是阴影的水平位置，值2是阴影的垂直位置，值3是阴影的模糊程度，值4是阴影的颜色，值5是内外阴影

注意：内外阴影可以省略，默认是外阴影，内阴影是insert。color和insert的顺序可以改变。

3、过渡属性：

transition:值1 值2;

值1表示要过渡的属性 值2表示要过渡时间。

4、英文换行：

work-break:break-all | keep-all;

break-all：文本换行，暴力换行，直接让字母间进行换行，忽略长单词

keep-all：文本不换行，默认值

三、弹性盒flexbox

1、弹性盒布局：

• 名称：flexbox、伸缩布局盒模型，是css3新增的一种布局方式
• 与之前的布局（浮动布局、定位布局、自适应布局）相比较，会让我们对一些网页模块的编写更快速
• 思想：让容器（父元素）有能力去控制子元素，让子元素的水平或者垂直的位置发生改变，也可以改变子元素的顺序、大小，也可以分配多余的空间
• 怎么使用弹性盒布局？
  display:flex;给容器设置弹性的特性
• 当把容器设置为弹性盒布局后，子元素会默认横向排列
• 在弹性布局模式里面有一个轴的概念
  把水平位置称之为主轴 — X轴
  把垂直的位置称之为侧轴 — Y轴
• justify-content 控制子元素水平的对齐方式
• align-items 控制子元素的垂直对齐方式
• 在弹性盒布局中把父元素叫做容器（container），把子元素叫做项目（items）
• 把容器转成弹性盒布局后，子元素没有设置高度的情况下，高度会根据父元素自动拉伸

完成布局的需求：

• 一个容器里面有三个子元素
• 子元素都是横向排列的
• 子元素的水平位置，距离是均分
• 子元素的垂直位置，距离是居中的

2、弹性盒属性

1）伸缩流方向：

flex-direction 主要用来创建主轴，定义伸缩项目在伸缩容器中的方向

当容器转成弹性盒布局后，所有的项目会默认横向排列的。在实际的开发过程中有时候也需要项目垂直方向排列，伸缩流方向就是用来改变的

row：从左向右								例：左上123

row-reverse：与row相反						例：右上321

<!--将主轴变成侧轴，若此时子元素没有设置宽度，则随父元素的宽度自动拉伸-->
column：从上到下								例：上到下123

column-reverse：与column相反					例：下到上123

2）主轴对齐：

justify-content 主要用来定义伸缩项目沿主轴线的对齐方式

flex-start：		伸缩项目向一行的起始（左上）位置靠齐  	默认值									例：左上123

flex-end：			伸缩项目向一行的结束位置靠齐。元素的顺序不会像float:right;一样，直接平移过去		例：右上123

center：			伸缩项目向一行的中间位置靠齐													例：X轴中间123

space-between：		伸缩项目会平均的分布在行里，两边不留白											例：|1 2 3|

space-around：		伸缩项目会平均的分布在行里，两端保留一半的空间									例：| 1  2  3 |

space-evenly：		项目均匀分布，所有项目之间及项目与边框之间距离相等    							例：| 1 2 3 |

3)侧轴对齐：

align-items 伸缩项目行在侧轴上的对齐方式

flex-start：		伸缩项目在侧轴起点边的外边距 紧靠住 该行在侧轴起始边								例：左上123

flex-end：			伸缩项目在侧轴终点边的外边距 紧靠住 该行在侧轴终点边								例：左下123

center：			伸缩项目的外边距盒 在该行的侧轴上居中放置										例：Y轴中间123

baseline：			伸缩项目根据伸缩项目的基线对齐													例：123基线对齐

stretch：			伸缩项目拉伸填充整个伸缩容器	默认值											例：123与容器同高

4）flex

设置在子元素上，可以自动填充容器的剩余空间，可以让子元素按照比例划分区域

注意：如果项目都设置flex属性，会按着数值的大小分配空间，之前的宽度全部失效

5）注意：弹性盒里面一些好用的属性和属性值如果要用必须把容器转成弹性盒布局

四、补充

1、标记使用：

• HTML标记都是语言规定好的，不能更改的 — 不要自己去创造标记
• 标记要合理的去使用，根据语义化 — 专人做专事

2、XHTML和HTML区别：

• XHTML是HTML语言的严格模式
• XHTML元素必须正确嵌套
• XHTML元素必须始终关闭
• XHTML元素必须小写
• XHTML文档必须有一个根元素
• HTML5语法为什么比较宽松，没有那么严格，因为浏览器帮助你做了很多事情

3、XML标记语言

• 是一种数据格式，实际开发中需要前端和后端进行数据交换
• 数据需要特定的格式，理解为规范
• 它的标记可以自己定义，所以也叫做可扩展标记语言

XML数据格式：
<book>
	<name>编程语言从入门到放弃</name>
	<des>天才儿童</des>
</book>
JSON数据格式

4、标记空链接 可以执行js代码，js规定外面使用了双引号里面必须使用单引号，反之亦然

<a href="JavaScript:alert('123');">超链接标记</a>

5、浏览器私有前缀：

• 一个属性刚开始出来的时候，不会立马成为标准（w3c 万维网联盟）
• 这个时候需要测试使用，要在各个浏览器里面执行
• 每个浏览器对于属性的支持一样吗？不一样
• 这个时候需要使用这个新的属性，浏览器厂商做了一个约定，每个浏览器提供一种身份的标识，只要这个属性添加了
  就可以在自己的浏览器里面使用
• 这个标识称作为浏览器私有前缀 例如：普通用户、VIP会员
  浏览器私有前缀标识：
• -webkit- 谷歌
• -moz- 火狐
• -ms- IE
• -o- 欧朋

css解决浏览器兼容问题方式：

• hack 解决bug的问题方式，补丁
• filter 过滤器
• 浏览器私有前缀

以前一个元素可能得下好几行代码为了让不同浏览器进行识别

div{
		width: 200px;
		height: 200px;
		background-color: red;
		border-radius: 50%;
		-webkit-border-radius: 50%;
		-moz-border-radius: 50%;
		-ms-border-radius: 50%;
		-o-border-radius: 50%;
	}
	

6、元素垂直居中的方法：

css代码：

.ele-middle{
	display: flex;
	justify-content: center;
	align-items: center;
}
.box{
	width: 500px;
	height: 500px;
	background-color: yellow;
	margin: 50px auto;
	}
.box .div{
	width: 200px;
	height: 200px;
	background-color: red;
}

html代码：

<div class="box ele-middle">
	<div></div>
</div>