每一个知识点都有相应的测试代码,你可以将代码复制到文件中,然后在浏览器中打开测试即可 |
---|
推荐使用谷歌浏览器Chrome ,因为都没有做hack浏览器兼容 |
一、基础(HTML和CSS中较复杂内容)
1、meta标签
meat标签 |
---|
meta标签提供关于HTML文档的元数据。元数据不会显示在页面上,但是对于机器是可读的。它可用于浏览器(如何显示内容或重新加载页面),搜索引擎(关键词),或其他 web 服务。 |
浏览器不会解析meta标签内容显示在页面中(页面中无法直接看到meta标签),搜索引擎搜索时会解析meta标签中的关键字和描述内容 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="keywords" content="HTML5,javaScripts"/>
<meta name="description" content="这是一个讲解meta标签用法的网页" />
<meta http-equiv="refresh" content="5;url=http://www.baidu.com" />
<title></title>
</head>
</html>
2、CSS选择器
1、伪类选择器
伪类选择器 |
---|
专门用来表示元素的一种特殊状态 |
访问过的超链接,获得焦点的文本框,鼠标移入的文本等等 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{//给所有标签设置公有属性
border: 0;
padding: 0;
margin: 0;
}
a:link{
color: blue;
}
a:visited{
color:black;
}
a:hover{
color: chartreuse;
}
a:active{
color: red;
}
.text:focus{
border: 0;
background-color: rgba(0,0,0,0.5);
border-radius: 25px;
box-shadow: 5px 5px 15px rgba(0,0,0,0.3);
color: aliceblue;
}
.text:hover{
border: 0;
background-color: rgba(0,0,0,0.5);
border-radius: 25px;
box-shadow: 5px 5px 15px rgba(0,0,0,0.3);
}
.testSelection::selection{
color: coral;
}
</style>
</head>
<body>
<a href="index.html">还没访问的超链接,设置为蓝色</a><br />
<a href="www.baidu.com">访问后的超链接,设置为黑色</a><br />
因为link和visited伪类只能用于超链接,而现在超链接基本都用默认样式,所以一般不使用<br/>
<hr />
<a href="index.html">鼠标移入的超链接,设置为绿色</a><br />
<a href="index.html">鼠标点击超链接,超链接被激活时,设置为红色</a><br />
<input class="text" type="text" placeholder="获取焦点时,修改样式"/><br />
<span class="testSelection"> 选中文字添加样式 </span><br />
</body>
</html>
2、伪元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{//给所有标签设置公有属性
border: 0;
padding: 0;
margin: 0;
}
p:first-letter{
color: red;
}
p:first-line{
color:cyan;
}
p:before{
content: url(http://img2.imgtn.bdimg.com/it/u=3219733219,2454729155&fm=26&gp=0.jpg);
}
p:after{
content: url(http://a.hiphotos.baidu.com/zhidao/wh%3D450%2C600/sign=98d64487bc315c6043c063ebb881e725/d52a2834349b033b239d144815ce36d3d539bd0f.jpg);
}
h2:after{
content: "====比如文字=====";
color: #FF0000;
}
h2:hover:after{
color: aqua;
}
</style>
</head>
<body>
<p>一段文字,通过伪元素设置<br/>
第一个文字为红色,第一行为蓝色
最后分别在标签的最前面和最后面添加一个图片</p>
<h2>不光可以添加图片,可以添加多种形式的内容</h2>
<hr/>
想要对添加的内容设置css样式动画,可以重复对伪元素设置样式,比如h2:hover:after这个样式
<br/>主要掌握before 和 after两个,first-letter较少使用,first-line基本不使用,而且目前基本不支持了
</body>
</html>
3、属性选择器
属性选择器 |
---|
首先title属性 可以给任何一个标签使用,当我们鼠标移入到元素后,会显示title属性中的文字 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{//给所有标签设置公有属性
border: 0;
padding: 0;
margin: 0;
}
h2{
font-size: 15px;
}
h2[title]{
background-color: darkgrey;
}
h2[title=red]{
color: red;
}
h2[title="green"]{
color: green;
}
h2[title^="ab"]{
color:chocolate;
}
h2[title$="f"]{
color: deeppink;
}
h2[title*="x"]{
color: blueviolet;
}
</style>
</head>
<body>
<h2 title="red">红色</h2>
<h2 title="green">绿色</h2>
<h2 title="ab">title属性ab开头1</h2>
<h2 title="abc">title属性ab开头2</h2>
<h2 title="cf">title属性f结尾</h2>
<h2 title="axc">title属性包含x的</h2>
<h2 >普通(除了以上常用的,还有很多,可以参考w3cShool文档)</h2>
</body>
</html>
4、子元素伪类
子元素伪类 |
---|
在所有父标签中找子元素,只要元素中包含子元素,这个元素就是父元素 |
我们会直接找所有父元素中的子元素,而不是指定的在某一个特定父元素中找 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{//给所有标签设置公有属性
border: 0;
padding: 0;
margin: 0;
}
body{
border: #0000FF 15px solid;
}
div{
width: 300px;
height: 300px;
border: #DC143C 5px solid;
}
button:first-child{
background-color: crimson;
}
button:last-child{
background-color: blue;
}
button:nth-child(3){
background-color:chartreuse;
}
*:nth-child(5){
background-color: coral;
}
h2:nth-child(odd){
color: blueviolet;
}
h2:nth-child(even){
color: crimson;
}
input:first-of-type{
background-color: #0000FF;
}
input:last-of-type{
background-color: #7FFF00;
}
input:nth-of-type(3){
background-color: #DC143C;
}
</style>
</head>
<body>
<button>我是body中的第一个子元素</button><br/>
<button>我是body中的第三个子元素,没错第二个子元素是上面内个< br /></button><br/>
<button>我是body中的第五个子元素,没错,我不是最后一个,可以看到body中最后一个元素是div</button>
<div class="div">
<button>我是div中第一个子元素</button><br/>
<button>我是div中第三个子元素</button><br/>
<button>我是div中最后一个子元素</button>
</div>
<h2>我是body中第七个子元素</h2>
<h2>我是body中第八个子元素</h2>
<div>
<h2>我是div中第一个子元素</h2>
<h2>我是div中第二个子元素</h2>
</div>
<div>
我是body中最后一个子元素div<br/>
<input type="text" value="我是div中第二个子元素,但同时是第一个input类型子元素,第一个元素是br"/>
<input type="text" value="我是div中第三个子元素,但同时是第二个input类型子元素"/>
<input type="text" value="我是div中第四个子元素,但同时是第三个input类型子元素"/>
<input type="text" value="我是div中第五个子元素,但同时是第四个input类型子元素"/>
<input type="text" value="我是div中最后一个子元素,但同时是第五个input类型子元素"/>
</div>
</body>
</html>
5、兄弟选择器
兄弟元素选择器 |
---|
可以选中一个元素的兄弟,比如它的前一个或者后一个元素 |
注意只能选同级元素,比如它在一个div中,那么它只对div中兄弟元素生效 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{//给所有标签设置公有属性
border: 0;
padding: 0;
margin: 0;
}
body{
border: #0000FF 15px solid;
}
div{
width: 300px;
height: 300px;
border: #DC143C 5px solid;
}
span + h3{
color: #0000FF;
}
span ~ h4{
color: #DC143C;
}
</style>
</head>
<body>
<h3>我是h3</h3>
<h3>我是h3</h3>
<h3>我是h3</h3>
<span>我是span</span>
<h3>我是h3</h3>
<h4>我是h4</h4>
<h3>我是h3</h3>
<h4>我是h4</h4>
<h3>我是h3</h3>
<h4>我是h4</h4>
<h3>我是h3</h3>
</body>
</html>
6、否定伪类选择器
否定伪类 |
---|
排除指定元素,比如给除去class属性为test的p标签 以外剩下的 所有p标签添加样式 |
语法:not(选择器) |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{//给所有标签设置公有属性
border: 0;
padding: 0;
margin: 0;
}
body{
border: #0000FF 15px solid;
}
div{
width: 300px;
height: 300px;
border: #DC143C 5px solid;
}
p:not(.test){
color: #DC143C;
}
</style>
</head>
<body>
<p>我是p标签</p>
<p>我是p标签</p>
<p>我是p标签</p>
<p class="test">我是p标签</p>
<p>我是p标签</p>
<p>我是p标签</p>
<p>我是p标签</p>
<p>我是p标签</p>
<p>我是p标签</p>
</body>
</html>
7、选择器的优先级和顺序
权重值(每个选择器都有属于直接的权重值,权重值越高,优先级越高) |
---|
内联样式 1000 |
id选择器 100 |
类和伪类选择器 10 |
元素选择器 1 |
* 通配 0 |
继承 无 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{
font-size: 10px;
}
#testID{
font-size: 40px;
}
.testClass{
font-size: 30px;
}
p{
font-size: 20px;
}
</style>
</head>
<body>
<p>标签选择器权重为1
<p class="testClass">类选择器权重为10,没有使用标签选择器的样式
<p id="testID" class="testClass">id选择器权重为100,没有使用标签和类选择器的样式
<br/><span>没有样式,继承父元素样式,你如果删掉通配*样式,就会采用继承,因为通配权重为0,而继承样式没有权重</span>
<p style="font-size: 100px">内联样式权重最高1000</p>
</p>
</p>
</p>
</body>
</html>
权重叠加 |
---|
不同的样式组合,可以使权重叠加,从而影响选择器优先级 |
注意:多个相同选择器叠加,不会超过其最大权重 ,比如11和类选择器叠加,权重最多也就99,不可能和id选择器相同或超过id选择器权重 |
多个选择器权重相同时,生效的是最先声明的选择器,也就是位置靠前的选择器 |
并集 选择器,权重独立计算 ,不会叠加 |
在某个样式中的属性添加!important 此属性的优先级将无视一切,毁天灭地 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{
font-size: 10px;
}
#testID{
color: red;
}
p#testID{
color: blue;
}
#testID,.testclass,p,h2,h3{
font-size: 50px;
}
h1{
font-size: 40px !important;
background-color: black;
}
h1{
font-size: 10px;
background-color: red !important;
}
</style>
</head>
<body>
<p id="testID">我是p标签</p>
<h1>我是h1</h1>
</body>
</html>
伪类的顺序 |
---|
link visited hover 和active4个伪类优先级相同(只是举例子,不是就它们4个) |
那么我们应该注意伪类的顺序,如果你将active放在hover上面,会导致hover失效 |
a:link{/*给正常的超链接设置样式*/
color: blue;
}
a:visited{/*给访问过后的超链接设置样式,此选择器只能设置color属性,设置其他属性不生效*/
color:black;
}
a:hover{/*给鼠标移入的标签设置样式(可以对几乎所有标签生效)*/
color: chartreuse;
}
a:active{/*给鼠标点击的标签设置样式(可以对几乎所有标签生效)*/
color: red;
}
3、盒模型
盒模型 |
---|
html页面,每一个标签元素,都是一个盒子 |
而每个盒子都具有4部分 |
内容区 |
padding 内边距 |
border 边框 |
margin 外边距 |
内容区的大小通过width 和height来控制 |
但是行模型不能设置大小,比如span,p;div等块模型可以设置大小 |
其余3个部分都有其特定属性设置 |
设置3个部分,不会影响内容区大小 ,只会让盒模型整体改变 |
如果边距指定为auto ,则边距大小浏览器会自动设置,一般自动设置为最大值 |
我们经常给margin和padding设置百分比,它参照的是包含块的width和height |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{
font-size: 10px;
}
.testDiv{
width: 100px;
height: 100px;
background-color:blue ;
border: 30px solid blueviolet;
padding:100px;
margin: 20px;
}
</style>
</head>
<body>
<div class="testDiv"></div>
<div class="testDiv"></div>
</body>
</html>
从上面的图片可以看到,第一个div的下外边距和第二个div的上外边距重合了,也就是说:垂直外边距是会重叠的 |
---|
两个相邻的元素之间外边距,会取最大值。 |
如果父子元素垂直外边距相邻,子元素的值会传给父元素 |
盒子模型分类 |
---|
块级元素和内联(行)元素 |
内联元素不可以设置宽高,可以设置水平边距,但垂直边距不会影响页面布局,垂直边距只有边框可以生效 |
块级元素独占一行 |
盒子模型类型转换 |
---|
display :此属性可以转换元素的类型(inline转换为行内元素)、(block转换为块级元素)(inline-block转换为行内块元素)(none设置为无类型,直观效果为元素消失) |
visibility :设置元素的显示(visible)和隐藏(hidden),不会影响类型,直观感觉为看不见,但还占着页面中的位置 |
处理盒模型溢出 |
---|
如果子元素大小超过父元素大小,子元素会溢出,此时可通过overflow 属性处理,此属性专门处理盒模型溢出内容 |
hidden:隐藏溢出内容 |
auto 溢出内容隐藏,并添加滚动条,以查看完整内容 |
1、浮动
浮动 |
---|
float此属性可以设置浮动(left向左浮动)、(right向右浮动) |
如果上个盒模型没有设置浮动,那下一个浮动元素不会超过上一个元素也不会超过其他兄弟元素 |
任何元素脱离文档流,就会变成行内块级元素 |
浮动高度塌陷 |
---|
当子元素浮动后,父元素会因为没有内容撑开而丢失高度,造成高度塌陷 |
解决办法 |
1、写死父容器高度(不推荐) |
2、设置父容器 zoom:1;overflow:hidden;解决高度塌陷 |
3、如图 |
这个可以解决高度坍塌的同时解决父子元素重叠
2、定位
position定位属性 |
---|
relative 相对定位,保留原来的位置 |
absolute 绝对定位,原来的位置消失 |
fixed 固定定位,固定在一个位置不动 |
通过top、left、right、bottom 属性设置基于包含块的位置 |
如果不设置top,left 等值,默认为auto ,而不是0,包括width和height默认值也是auto ,而不是0 |
注意:绝对定位是参考第一个设置了定位属性的祖先元素 (就是包含它的元素,必须是块级元素),没有 就参考根元素的包含块 (就是初始包含块,页面大小的一个框(但不是页面),也就是参照页面定位) |
对于相对定位 ,参考的是最近的块级父元素,否则参照根元素 |
z-index 可以设置定位的层次 ,值越大层次越高,会覆盖下层的内容 |
我们经常给margin和padding设置百分比,它参照的是包含块的width和height |
margin和padding的默认值为0 |
3、浮动与定位的区别,以及一些常用技巧
1、区别
区别 |
---|
浮动刚做出来,就是为了排开文字的,所以严格来讲,浮动会上升半层,而不是完整的一层 |
我们可以想象,一个底层容器,比如div就是最底层,而div中的内容,是处于半层的位置,而浮动也是上升半层,这时会和这些内容处于同一层 |
比如,我们有两个div,其中一个包含若干其它元素(比如文字),这时我们浮动另一个时,下面的div在底层,而内容在半层,所以会出现div上移,而内容被浮动元素卡住的情况,就是因为浮动上升半层 |
而定位会让元素上升完整一层,还可以通过z-index设置更高层 |
2、技巧
另外,修改元素边界(不是边距而是边界,常见做法是将某一边距设置为负值),是不会影响元素位置的 |
---|
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
border: 0;
}
body{;
background-size: ;
}
.test1{
width: 100%;
height: 100px;
background-color: rgba(255, 255, 0,1);
float: left;
}
.test2{
width: 100px;
height: 100px;
background-color: red;
float: left;
margin-left: -100%;
}
</style>
</head>
<body>
<div class="test1"></div>
<div class="test2">我是下面的div中的内容</div>
<input type="text" />
</body>
</html>
二、css2.1
1、圣杯布局
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
border: 0;
}
.h,.jiew{
border: aqua 1px solid;
height: 100px;
background-color: #00FFFF;
}
.cont{
padding: 0 50px;
}
.center{
background-color: blueviolet;
height: 30px;
float: left;
width: 100%;
}
.left,.rigth{
background-color: brown;
width: 50px;
height: 30px;
}
.left{
margin-left: -100%;
float: left;
position: relative;
left: -50px;
}
.rigth{
float: right;
margin-left: -50px;
position: relative;
right: -50px;
}
.clearfix{
zoom: 1;
}
.clearfix:after{
content: "";
display: block;
clear: both;
}
</style>
</head>
<body>
<div class="h"></div>
<div class="cont clearfix">
<div class="center">centerxxxxxxxxxxxxxxxxx</div>
<div class="left">left</div>
<div class="rigth">rigth</div>
</div>
<div class="jiew"></div>
</body>
</html>
2、等高布局
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
border: 0;
}
.c{
border: blue 1px solid;
overflow: hidden;
}
.a{
background-color: blueviolet ;
height: 300px;
width: 150px;
float: left;
padding-bottom: 1000px;
margin-bottom: -1000px;
}
.b{
background-color: chartreuse;
height: 710px;
width: 150px;
float: left;
padding-bottom: 1000px;
margin-bottom: -1000px;
}
.clearfix{
zoom:1;
}
.clearfix:after{
content: "";
display: block;
clear: both;
}
</style>
</head>
<body>
<div class="c clearfix">
<div class="a"></div>
<div class="b"></div>
</div>
</body>
</html>
3、双飞翼布局
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
border: 0;
}
.h,.jiew{
border: aqua 1px solid;
height: 100px;
background-color: #00FFFF;
}
.content{
width: 100%;
}
.center{
background-color: blueviolet;
height: 30px;
float: left;
width: 100%;
}
.left,.rigth{
background-color: brown;
width: 50px;
height: 30px;
}
.left{
float: left;
margin-left: -100%;
}
.rigth{
margin-left: -50px;
float: right;
}
.clearfix{
zoom: 1;
}
.clearfix:after{
content: "";
display: block;
clear: both;
}
.center_content{
width: 100%;
padding: 0 50px;
}
</style>
</head>
<body>
<div class="h"></div>
<div class="content clearfix">
<div class="center">
<div class="center_content">辛苦了组件父类卡精神分裂静安寺的父类</div>
</div>
<div class="left">left</div>
<div class="rigth">rigth</div>
</div>
<div class="jiew"></div>
</body>
</html>
与圣杯布局区别 |
---|
是把主列嵌套在一个新的父器中,在利用左右进行调整 |
4、禁止系统默认滚动条
5、footer粘连布局
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name= "viewport" content= "width= device-width,initial-scale= 1.0,user-scalable=no"/>
<title></title>
<style>
*{
margin: 0;
padding: 0;
border: 0;
}
html,body{
height: 100%;
}
.wrap{
min-height: 100%;
background-color: palevioletred;
}
.main{
padding-bottom:50px;
}
.footer{
height: 50px;
background-color: aqua;
margin-top: -50px;
}
</style>
</head>
<body>
<div class="wrap">
<div class="main">
main<br />
main<br />
main<br />
main<br />
main<br />
main<br />
main<br />
main<br />
main<br />
main<br />
main<br />
main<br />
main<br />
main<br />
main<br />
main<br />
main<br />
main<br />
main<br />
main<br />
main<br />
main<br />
main<br />
main<br />
main<br />
main<br />
main<br />
main<br />
main<br />
main<br />
main<br />
main<br />
main<br />
main<br />
main<br />
main<br />
main<br />
main<br />
main<br />
main<br />
main<br />
main<br />
main<br />
main<br />
main<br />
main<br />
main<br />
main<br />
main<br />
</div>
</div>
<div class="footer">footer</div>
</body>
</html>
6、BFC
BFC是什么 |
---|
BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域,只有Block-level box参与, |
它规定了内部的Block-level Box如何布局,并且与这个区域外部毫不相干 |
##BFC布局规则 |
---|
内部的Box会在垂直方向,一个接个地放置 |
BFC的区域不会与float box重叠 |
内部的Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠 |
计算BFC的高度时,浮动元素也参与计算。(清除浮动haslayout) |
BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。反之也如此 |
如何开启BFC |
---|
根元素默认开启BFC |
float属性不为none |
osithpn为absolute或fixed |
overftow不为visible |
display为inline-block, table-cell, table-caption, flex, inline -flex |
注意:display为inline-block时,它不对自己生效启动BFC而是给自己的子元素开启 |
7、两列布局
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
border: 0;
}
.wrap{
width: 200px;
background-color: palevioletred;
border: #DB7093 3px solid;
}
.left{
background-color: aqua;
width: 100px;
height: 6.25rem;
float: left;
}
.right{
padding-left:1.25rem ;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
</style>
</head>
<body>
<div class="wrap">
<div class="left"></div>
<div class="right">
alskdjflajfljasdlkfjklsajflksjalkfjlksajf<br />
alskdjflajfljasdlkfjklsajflksjalkfjlksajf<br />
alskdjflajfljasdlkfjklsajflksjalkfjlksajf<br />
alskdjflajfljasdlkfjklsajflksjalkfjlksajf<br />
alskdjflajfljasdlkfjklsajflksjalkfjlksajf<br />
alskdjflajfljasdlkfjklsajflksjalkfjlksajf<br />
</div>
</div>
</body>
</html>
8、元素的垂直水平居中
9、垂直水平居中
vertical-align |
---|
此属性用来指定行块元素垂直对齐 |
text-top:元素顶端与父元素字体的顶端对齐。 |
text- bottom:元素底端与父元素字体的底端对齐。 |
middle:元素中线与父元素的小写x中线对齐。 |
sub:元素基线与父元素的下标基线对齐。( 使元素的基线相对于基准基线下降,下降的幅度有浏览器厂商决定) |
super:元素基线与父元素的上标基线对齐。( 使元素的基线相对于基准基线升高,升高的幅度有浏览器厂商决定) |
< length>:元素基线超过父元素的基线指定高度。可以取负值。 |
< percentage>:同< length> ,百分比相对于line-height 。 |
三、CSS3
1、概念
一、css的组成
由样式表组成
样式表由多个规则组成
规则由选择器+声明块组成
声明块由多个声明组成
声明由css属性+css属性值的键值对形式组成
*{
margin:0;
padding:0;
border:0;
}
二、css选择器是从右往左找的
h1 .test ul{ //这时会先找ul,极有可能会直接找到目标,比如整个页面只有一个ul标签,大大减少工作量
...
}
2、CSS3选择器的扩展使用
1、后代选择器和子选择器(直接后代选择器)的区别
子选择器标识符> ,只能选择直接子元素;后代选择器用空格分隔,可以选择所有后代 |
---|
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
border: 0;
}
body > p{
color: pink;
}
body > span{
color:blue;
}
body h1{
color: blueviolet;
}
</style>
</head>
<body>
<p> 我是body中 直接子元素p,我会设置为粉色
<br/>
<span>我是p标签的一个直接子元素span,不是body中直接子元素,我会设置为蓝色</span>
<h1>我是p标签中的一个直接子元素h1,不是body中直接子元素,我会设置为紫色</h1>
</p>
</body>
</html>
2、属性选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
border: 0;
}
h2[title~="test"]{
color: blue;
}
h2[title|="test"]{
color:pink;
}
</style>
</head>
<body>
<h2 title="test 1">我是h2空格分隔单词</h2>
<h2 title="test 2">我是h2空格分隔单词</h2>
<h2 title="test-1">我是h2横杠分隔单词</h2>
<h2 title="test-2">我是h2横杠分隔单词</h2>
</body>
</html>
3、伪类和伪元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
border: 0;
}
body{
height: 1000px;
}
a{
text-decoration: none;
}
div{
background-color: pink;
width: 200px;
height: 200px;
text-align: center;
font: 55px/200px "宋体";
display: none;
}
:target{
display: block;
}
#div4{
position: absolute;
bottom: -200px;
}
input:enabled{
background-color: #FFC0CB;
}
input:disabled{
background-color: aqua;
}
input[type="checkbox"]:checked{
width: 50px;
height: 50px;
}
input[type="text"]:focus{
box-shadow: 5px 5px 15px #FFC0CB;
height: 55px;
}
label{
display: block;
width: 15px;
height: 15px;
border-radius: 15px;
box-shadow: 5px 5px 15px #FFC0CB;
position: relative;
overflow: hidden;
}
input[type="radio"]{
position: absolute;
left: -50px;
}
label > span{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
input[type="radio"]:checked + span{
background-color: #00FFFF;
border: brown 1px solid;
}
:nth-last-child(1){
color: #00FFFF;
}
body h3:nth-last-of-type(1){
color: #A52A2A;
}
</style>
</head>
<body>
<a href="#div1">显示div1</a>
<a href="#div2">显示div2</a>
<a href="#div3">显示div3</a>
<a href="#div4">显示div4</a>
<div id="div1">div1</div>
<div id="div2">div2</div>
<div id="div3">div3</div>
<div id="div4">div4</div>
<br/>
<input type="text" placeholder="我是可以被使用的文本框"/><br/>
<input type="text" disabled="disabled" placeholder="我是被禁用的文本框"/><br/>
<input type="checkbox" />我是复选框<br/>
<label><input type="radio" /><span></span></label>
<h3>我是body中最后一个h3元素</h3>
<h2>我是body中最后一个元素</h2>
</body>
</html>
3、自定义字体(字体图标)
方法 |
---|
@font-face |
允许网页开发者为其网页指定在线字体,网页作者自备字体,消除对不同用户电脑字体的依赖 |
font-family :指定名字,会被用于css中font和font-family属性指定时使用 |
src :字体资源路径 |
注意,不能在CSS选择器内部定义@font-face |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
border: 0;
}
@font-face {
font-family: 'FontAwesome';
src: url('../fonts/fontawesome-webfont.eot?v=4.7.0');
src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'), url('../fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');
font-weight: normal;
font-style: normal;
}
.test::before{
content: "\f001";
}
</style>
</head>
<body>
<i class="test"></i>
</body>
</html>
4、新增UI样式
1、文本
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
border: 0;
}
.h1{
text-shadow: pink 5px 5px 15px,blue 5px 5px 2px;
}
.h2{
filter: blur(10px);
}
.h3{
direction: rtl;
unicode-bidi: bidi-override;
}
div{
width: 105px;
height: 30px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
</style>
</head>
<body>
<h2 class="h1">我是h2</h2>
<h2 class="h2">我是h2</h2>
<h2 class="h3">我是h2</h2>
<div class="div">
阿斯利康定界符拉斯科技风路径是否
</div>
</body>
</html>
2、盒模型
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
border: 0;
}
html,body{
height: 100%;
overflow: hidden;
}
#div2:after{
content: "";
display: inline-block;
height: 100%;
vertical-align: middle;
}
img{
vertical-align: middle;
width: 100px;
}
a{
text-decoration: none;
}
:target{
display: block;
}
div{
background-color: pink;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
width: 200px;
height: 200px;
text-align: center;
line-height: 200px;
display: none;
}
.add-box-shadow{
box-shadow: #FFC0CB 15px 5px 25px 5px;
}
.add-resize{
overflow: auto;
resize: both;
}
.add-border-radius{
border-radius: 5px 25px 30px 40px;
}
#div5{
width: 500px;
height: 500px;
background-color: rgba(255,192,223,0.01);
transition: 10s;
}
#div5:hover{
transform: rotate(2520deg);
}
#div5 > div{
display: block;
position: static;
margin: 10px;
width: 230px;
height: 230px;
float: left;
box-sizing: border-box;
background-color: pink;
}
.add-border-radius-left{
border-radius: 0 200px;
}
.add-border-radius-right{
border-radius: 200px 0;
}
.add-border-image{
border: 30px solid;
border-image-source:url("https://d.lanrentuku.com/down/png/2004/4coronavirus-icons/coronavirus-icons-05.png");
border-image-slice: 30.3%;
border-image-repeat: round;
border-image-width: 10px;
}
</style>
</head>
<body>
<a href="#div1">盒子阴影</a><br />
<a href="#div2">图片居中方案</a><br />
<a href="#div3">可控大小盒子(此元素可以拖动改变大小)</a><br />
<a href="#div4">圆角</a><br />
<a href="#div5">圆角动画,需要设置html,body的overflow:hidden;否则会出现页面大小变化的情况</a><br />
<a href="#div6">图片边框</a><br />
<div id="div1" class="add-box-shadow">div</div>
<div id="div2" class="add-box-shadow">
<img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3225163326,3627210682&fm=26&gp=0.jpg" />
</div>
<div id="div3" class="add-box-shadow add-resize"></div>
<div id="div4" class="add-border-radius add-box-shadow"></div>
<div id="div5">
<div class="add-border-radius-left">1</div>
<div class="add-border-radius-right">2</div>
<div class="add-border-radius-right">3</div>
<div class="add-border-radius-left">4</div>
</div>
<div id="div6" class="add-border-image"></div>
</body>
</html>
5、背景
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
border: 0;
}
html,body{
height: 100%;
overflow: hidden;
}
div{
width: 700px;
height: 43.75rem;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
border: 2px aqua solid;
display: none;
}
a{
text-decoration: none;
}
:target{
display: block;
}
.background-image{
background-image:url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1593690385222&di=503854e860db28f72a16793c2e52add0&imgtype=0&src=http%3A%2F%2Fa2.att.hudong.com%2F36%2F48%2F19300001357258133412489354717.jpg);
}
.background-no-repeat{
background-repeat: no-repeat;
}
.background-position{
background-position: 100px 100px;
}
.background-origin{
padding: 50px;
background-origin: content-box;
}
.background-clip{
background-clip: content-box;
}
.background-size{
background-size: cover;
}
</style>
</head>
<body>
<a href="#div1">平铺</a><br />
<a href="#div2">不平铺</a><br />
<a href="#div3">让不平铺的图片位置移动</a><br />
<a href="#div4">让背景起始渲染位置为内容区</a><br />
<a href="#div5">让背景从内容区开始剪裁</a><br />
<a href="#div6">背景自动调整大小适应容器</a><br />
<div id="div1" class="background-image"></div>
<div id="div2" class="background-image background-no-repeat"></div>
<div id="div3" class="background-image background-no-repeat background-position"></div>
<div id="div4" class="background-image background-origin"></div>
<div id="div5" class="background-image background-origin background-clip"></div>
<div id="div6" class="background-image background-size"></div>
</body>
</html>
6、渐变
注意:渐变是图片,而不是颜色,所以我们设置渐变颜色,应该使用图片属性,background-image |
---|
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
border: 0;
}
html,body{
height: 100%;
overflow: hidden;
}
div{
width: 200px;
height: 50px;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
border: 2px aqua solid;
display: none;
}
a{
text-decoration: none;
}
:target{
display: block;
}
.linear-gradient{
background-image: linear-gradient(45deg,pink 10%,darkmagenta 20%,blue 30%);
}
.repeating-linear-gradient{
background-image: repeating-linear-gradient(45deg,pink,darkmagenta,blue 50%);
}
#div3{
overflow: hidden;
}
.light{
display: block;
width: 1000px;
height: 100%;
background-image: repeating-linear-gradient(45deg,pink 0px,pink 10px,darkmagenta 10px,darkmagenta 20px);
}
.light:hover{
transition: 5s;
background-position: -500px;
}
#div4{
width: 700px;
height: 100px;
font-size:40px;
text-align: center;
line-height: 100px;
background-color: black;
}
h1{
color: rgba(128,128,128,0.3);
background-image: linear-gradient(95deg,rgba(255,255,255,0) 10px,rgba(255,255,255,1) 20px,rgba(255,255,255,0) 40px);
-webkit-background-clip:text;
}
.radial-gradient{
background-image: radial-gradient(pink,darkmagenta);
}
</style>
</head>
<body>
<a href="#div1">线性渐变</a><br />
<a href="#div2">重复线性渐变</a><br />
<a href="#div3">发廊灯使用js,css实现鼠标指入触发发廊灯,注释js代码即可</a><br />
<a href="#div4">文字渐变特效</a><br />
<a href="#div5">径向渐变</a><br />
<div id="div1" class="linear-gradient"></div>
<div id="div2" class="repeating-linear-gradient"></div>
<div id="div3">
<div class="light"></div>
</div>
<div id="div4">
<h1>T e s t 文 字 </h1>
</div>
<div id="div5" class="radial-gradient"></div>
</body>
<script type="text/javascript">
let light=document.querySelector(".light");
let h1=document.querySelector("h1");
let flag=0;
let flag2=0
setInterval(function(){
if(flag++===1000) flag=0;
if(flag++===700) flag=0;
light.style.backgroundPosition=-flag+"px";
h1.style.backgroundPosition=flag+"px";
},1000/60)
</script>
</html>
7、过渡
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
border: 0;
}
html,body{
height: 100%;
overflow: hidden;
}
div{
width: 200px;
height: 50px;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
border: 2px aqua solid;
display: none;
}
a{
text-decoration: none;
}
:target{
display: block;
}
.div1_transtion:hover{
width: 100px;
height: 25px;
transition-property:width ;
transition-duration:2s;
}
.div2_transtion:hover{
width: 100px;
height: 25px;
transition-property:width,height ;
transition-duration:5s,2000ms;
}
.div3_transtion:hover{
width: 100px;
height: 25px;
transition-property:width;
transition-duration:5s;
transition-timing-function: linear;
}
.div4_transtion:hover{
width: 100px;
height: 25px;
transition-property:width;
transition-duration:5s;
transition-delay: 1s;
}
.div5_transtion:hover{
transition-property:width,height;
transition-duration:1s,1s;
}
</style>
</head>
<body>
<h1>注意,我这里为了方便将设置过渡的代码都放在了伪类里面,也就会造成进入伪类有动画,而移出伪类的时候没有动画</h1>
<a href="#div1">仅仅使宽度发生过渡动画(2s),你会发现其他可以过渡的内容都是瞬间完成,而只有宽度的变化,持续了2秒</a><br />
<a href="#div2">同时让高度和宽度发生过渡,高度使用2s,宽度使用5秒</a><br />
<a href="#div3">让宽度发生过渡动画,设置其过渡类型为匀速</a><br />
<a href="#div4">让宽度发生过渡动画,让其过渡延迟1s后在过渡</a><br />
<a href="#div5">让宽度和高度发生过渡动画,监听过渡完成事件,你会发现一共触发了两次,也就是说,每当有一个可过渡属性过渡完成,都会触发一次过渡完成事件</a><br />
<div id="div1" class="div1_transtion"></div>
<div id="div2" class="div2_transtion"></div>
<div id="div3" class="div3_transtion"></div>
<div id="div4" class="div4_transtion"></div>
<div id="div5" class="div5_transtion"></div>
</body>
<script type="text/javascript">
window.onload=function(){
let div5=document.querySelector("#div5");
div5.onmouseover=function(){
div5.style.width="100px";
div5.style.height="25px";
}
div5.addEventListener("transitionend",function(){
alert("触发了过渡动画完成事件")
})
}
</script>
</html>
常见问题 |
---|
过渡在元素首次渲染之前不会触发(经常会遇到用js代码来改变元素属性,但是这个改变在元素渲染之前运行,导致过渡动画无法触发);解决办法,等待所有页面元素渲染完再执行js,常用做法就是windows.onload() |
/*简写属性transition:
transition是一个简写 属性,用于
transition- property, transition- duration, transition- timing- function,和transition- delay。
CSS过渡由简写属性transition定义是最好的方式,可以避免属性值列表长度不一,节省调试时间
默认值:
transition- delay: 0s
transition- duration: 0s
transition- property: all
transition- timing- function: ease
注意
在transition属性中,各个值的书写顺序是很重要的:第一个可以解析为时间的值会被赋值给
transition-duration;第二个可以解析为时间的值会被赋值给transition- delay*/
8、变换(变形)
1、2D变形
通过transform属性完成,只能对block元素生效 |
---|
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
border: 0;
}
html,body{
height: 100%;
overflow: hidden;
}
a{
text-decoration: none;
}
:target{
display: block;
}
div{
background-color: pink;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
width: 200px;
height: 200px;
text-align: center;
line-height: 200px;
display: none;
transition: 2s;
}
.add-translate:hover{
transform: translate(200px,200px);
平移(translate)
X方向平移: transform: transatex(tx)
Y方向平移: transform: translateY(ty)
二维平移: transform: translate(tx[, ty]); 如果ty没 有指定,它的值默认为0。
可设单值,也可设双值。
正数表示XY轴正向位移,负数为反向位移。设单值表示只X轴位移,Y轴坐标不变,
例如transform: translate( 100px);等价于transform: translate(100px,0);
}
.add-skew:hover{
transform: skew(12deg,0);
}
.add-scale:hover{
transform: scale(.9,1.2);
}
.add-rotate:hover{
transform: rotate(720deg);
}
.add-origin{
transform-origin: left top;
}
</style>
</head>
<body>
<a href="#div1">平移</a><br />
<a href="#div2">倾斜</a><br />
<a href="#div3">缩放</a><br />
<a href="#div4">旋转</a><br />
<a href="#div5">改变基点旋转(左上)</a><br />
<div id="div1" class="add-translate">div</div>
<div id="div2" class="add-skew">div</div>
<div id="div3" class="add-scale">div</div>
<div id="div4" class="add-rotate">div</div>
<div id="div5" class="add-rotate add-origin">div</div>
</body>
</html>
2、矩阵
二维变形都是通过矩阵来实现的,你需要知道矩阵不满足交换律 |
---|
/* 这两个组合变形结果不相同,因为矩阵不满足交换律 */
transform: translate(200px,200px) rotate(34deg);
transform: rotate(34deg) translate(200px,200px);
4、3D变形
学过素描的都知道,想要在二维平面画出立体效果,一定要遵循近大远小的原则 |
---|
css中,通过设置景深来实现变形的近大远小,达到立体的效果,所以我们想要3d变换时,必须先设置景深 |
景深的原理就是设置灭点(人看物体,比如火车轨道,越远,你就会发现轨道越小,最后成一个点,这个点就是灭点,我们通过设置灭点的远近,控制变换的幅度) |
最后,想要更好的效果还需要层级transform-style: preserve-3d;/* 给3d变换一个层级,光近大远小是不够的 */ |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
border: 0;
}
html,body{
height: 100%;
overflow: hidden;
}
a{
text-decoration: none;
}
:target{
display: block;
}
div{
background-color: pink;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
width: 200px;
height: 200px;
text-align: center;
line-height: 200px;
display: none;
transition: 2s;
}
body{
perspective: 700px;
}
.add-scale3d:hover{
transform: rotate3d(150,20,0,360deg);
}
.add-translateZ:hover{
transform: translateZ(350px);
}
.add-scaleZ:hover{
transform: scaleZ(2);
transform: translateZ(450px);
backface-visibility: hidden;
}
</style>
</head>
<body>
<a href="#div1">3d旋转</a><br />
<a href="#div2">3d移动</a><br />
<a href="#div3">3d缩放</a><br />
<div id="div1" class="add-scale3d">div</div>
<div id="div2" class="add-translateZ">div</div>
<div id="div3" class="add-scaleZ">div</div>
</body>
</html>
9、动画
1、动画api
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
*{
margin: 0;
padding: 0;
border: 0;
}
html,body{
height: 100%;
overflow: hidden;
}
a{
text-decoration: none;
}
:target{
display: block;
}
body > div{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
width: 200px;
height: 200px;
text-align: center;
line-height: 200px;
display: none;
transition: 2s;
}
body > div div{
background-color: pink;
}
.add-animation-rotate{
animation-name: rotate;
animation-duration: 3s;
animation-timing-function: linear;
animation-delay: 1.25s, 100ms;
animation-iteration-count:infinite;
animation-direction: alternate-reverse;
animation-fill-mode: both;
}
.add-animation-rotate:hover{
animation-play-state: paused;
}
@keyframes rotate{
from{
transform:rotate(720deg);
}
to{
transform: rotate(0deg);
}
}
.add-animation1{
width: 15px;
transform-origin:bottom ;
animation-name: animation1;
animation-duration: 3s;
animation-timing-function: linear;
animation-iteration-count:infinite;
}
@keyframes animation1{
0%{
transform: rotate(0deg);
}
25%{
transform: rotate(-15deg);
}
50%{
transform: rotate(0deg);
}
75%{
transform: rotate(15deg);
}
100%{
transform:rotate(0deg)
}
}
</style>
</head>
<body>
<a href="#div1">旋转</a><br />
<a href="#div2">百分比多帧动画</a><br />
<div id="div1">
<div class="add-animation-rotate">旋转</div>
</div>
<div id="div2">
<div class="add-animation1">|</div>
</div>
</body>
</html>
10、flex布局
概念 |
---|
容器,就是设置布局的块元素 |
项目,就是容器中的子元素 |
主轴,就是x轴,右面是正方向 |
侧轴,y轴,下面是正方向 |
项目永远排列在主轴的正方向上 |
新旧两个版本都需要掌握,带-webkit-box前缀的都是旧版 |
1、新旧对比
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
*{
margin: 0;
padding: 0;
border: 0;
}
html,body{
height: 100%;
overflow: hidden;
}
a{
text-decoration: none;
}
:target{
display: block;
}
body > div{
width: 500px;
height: 500px;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
border: 3px blue solid;
overflow: auto;
resize: both;
display: none;
}
.item{
width: 50px;
height: 50px;
background-color: pink;
text-align: center;
line-height: 50px;
float: left;
}
#wrap1删掉汉字测试{
display: flex;
flex-direction: column;
}
#wrap1删掉汉字测试{
display: flex;
flex-direction: column-reverse;
}
#wrap1{
display: flex;
justify-content:center;
}
</style>
</head>
<body>
<h3>每一个盒子都可以控制大小,体会不一样的布局效果吧!注意测试前删掉选择器中的汉字</h3>
<a href="#wrap1">容器布局方向</a><br />
<a href="#wrap1">容器排列方向</a><br />
<a href="#wrap1">富裕空间</a><br />
<div id="wrap1">
<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>
</body>
</html>
2、容器和项目
项目因子 |
---|
给项目设置因子,会将主轴空间按照因子比例,分配到width属性上 |
旧版-webkit-box-flex: 因子; |
新版flex-grow: 因子; |
注意是给每个项目(容器中元素)单独设置,你可以给第一个元素4,剩下的都是1,那么会按照比例将空间赋值给每个项目的width属性 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
*{
margin: 0;
padding: 0;
border: 0;
}
html,body{
height: 100%;
overflow: hidden;
}
a{
text-decoration: none;
}
:target{
display: block;
}
body > div{
width: 500px;
height: 500px;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
border: 3px blue solid;
overflow: auto;
resize: both;
display: none;
}
.item{
width: 50px;
height: 50px;
background-color: pink;
text-align: center;
line-height: 50px;
float: left;
flex-grow: 1;
}
#wrap1{
display: flex;
flex-direction: column;
}
</style>
</head>
<body>
<h3>每一个盒子都可以控制大小,体会不一样的布局效果吧!注意测试前删掉选择器中的汉字</h3>
<a href="#wrap1">容器布局方向</a><br />
<div id="wrap1">
<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>
</body>
</html>
新版功能 |
---|
flex-wrap,控制容器单列显示还是多列显示,定义侧轴方向 |
align-content,多行多列时,富裕空间的管理 |
flex- flow,设置“flex- direction”和“flex-wrap"的简写 |
order,设置弹性容器中,项目布局时的顺序,order越大,排名越后,默认0 |
align-self会对齐当前flex行中的flex元素,并覆盖align-items的值.如果任何flex 元素的侧轴方向margin值设置为auto,则会忽略align-self |
flex-shrink属性指定了flex 元素的收缩因子默认值为1,注意与flex-grow区分 |
flex-basis指定了flex 元素在主轴方向上的初始大小 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
*{
margin: 0;
padding: 0;
border: 0;
}
html,body{
height: 100%;
overflow: hidden;
}
a{
text-decoration: none;
}
:target{
display: block;
}
body > div{
width: 500px;
height: 500px;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
border: 3px blue solid;
overflow: auto;
resize: both;
display: none;
}
.item{
width: 50px;
height: 50px;
background-color: pink;
text-align: center;
line-height: 50px;
}
#wrap1{
display: flex;
flex-wrap: wrap;
align-content: flex-start;
}
#wrap1 :nth-child(3){
color: #0000FF;
order: 3;
align-self:flex-end;
}
</style>
</head>
<body>
<h3>每一个盒子都可以控制大小,体会不一样的布局效果吧!注意测试前删掉选择器中的汉字</h3>
<a href="#wrap1">容器布局方向</a><br />
<div id="wrap1">
<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>
</body>
</html>
3、等分布局与flex简写
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
*{
margin: 0;
padding: 0;
border: 0;
}
html,body{
height: 100%;
overflow: hidden;
}
a{
text-decoration: none;
}
:target{
display: block;
}
body > div{
width: 500px;
height: 500px;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
border: 3px blue solid;
overflow: auto;
resize: both;
display: none;
}
.item{
width: 50px;
height: 50px;
background-color: pink;
text-align: center;
line-height: 50px;
flex-grow: 1;
flex-shrink: 1; */
flex: 1;
}
#wrap1{
display: flex;
}
</style>
</head>
<body>
<h3>每一个盒子都可以控制大小,体会不一样的布局效果吧!注意测试前删掉选择器中的汉字</h3>
<a href="#wrap1">容器布局方向</a><br />
<div id="wrap1">
<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>
</body>
</html>
四、响应式布局
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
*{
margin: 0;
padding: 0;
border: 0;
}
html,body{
height: 100%;
overflow: hidden;
}
#wrap1{
width: 100px;
height: 100px;
background-color: pink;
}
@media all {
#wrap1{
border: 1px aqua solid;
}
}
@media screen and (min-width:800px) {
#wrap1{
border: 10px #00FFFF solid;
}
}
</style>
</head>
<body>
<div id="wrap1">
<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>
</body>
</html>