1 css选择器
基本选择:标签,id,类class,通配符*,并集,后代(空格),子元素(>),伪类(元素:link,hover,active,visited)
结构选择器:按位置选择
- 元素:first-child
- 元素:last-child
- 元素:nth-child(n)
- 元素:nth-last-child(n)
目标伪类选择器
元素:target 作为超链接锚点目标时,被定位后样式会发生变化
属性选择器
- 元素[属性=’取值’] { }
- 元素[属性^=’取值’] { } 从开始位置匹配
- 元素[属性$=’取值’] { } 从结束位置匹配
- 元素[属性*=’取值’] { } 任意位置匹配
伪元素选择器
- 元素::first-letter
- 元素::first-line
- 元素::selection 被选择时的样式
- 元素::before 在元素前添加内容,并设置样式
2 布局:盒子模型,定位,浮动,伸缩
标准(普通)文档流
-
定位文档流:
- position取值为非static以外的值
- Position:static(默认) | absolute | relative | fixed
- Absolute:以离它最近上层非static元素定位的,层层向上查找,直到根元素(html没被激活body是根元素,反之html是根元素)
- Relative:以离它最近上层元素定位,与上层元素的定位方式无关
- Fixed:以client(浏览器的可视区)定位的
-
浮动文档流:
- float取值为非none以外的值
- float:none(默认) | left | right
塌陷:在不设置父容器的高度情况下,子元素浮动后,会产生父元素的高度缩减情况
处理塌陷的方法是在父元素的最后加上一个div,并设置样式属性clear
- 盒子模型:
- 任何元素都是盒子(box)
- Margin:外边距
- Border:边框
- Padding:内边距
- Content:内容,一般情况设置元素高,宽的属性指的是内容样式
- Box-sizing:content-box(默认值)|border-box
- 当不改变box-sizing默认值时,整个盒子所占空间指的是:以上四个属性值之和
伸缩布局
- Display:flex
- 属性
- 1 .flex-direction: column(默认) 按列排
flex-direction: row 按行排 - 2 . justify-content:center
space-between 左右两则的内容紧贴父容器的边,剩下的内容平均分布剩下空间
space-around 在水平方向平分容器的空间
flex-start 从容器左侧开始
flex-end 从容器右侧开始 - 3 . flex-wrap:wrap|nowrap 水平方向换行
- 4 . align-content: center
当是derection方向是行的时候,这个指的方向
当是derection方向是列的时候,这个指行的方向
Space-between
Space-around
Flex-start
Flex-end - 5 . align-items
- 1 .flex-direction: column(默认) 按列排
补充样式属性:
Max-width(height):在父容器具体伸缩布局属性情况,子元素可以放大的最大宽度
Min-height(height):在父容器具体伸缩布局属性情况,子元素可以放大的最大高度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>一列规定宽度且居中</title>
<style>
.son1{
width: 70%;
height: 180px;
background-color: #edecfa;
line-height: 180px;
border: 2px dotted gray;
margin-bottom: 5px;
}
.son2{
width: 70%;
height: 160px;
background-color: #edecfa;
line-height: 160px;
border: 2px dotted gray;
margin-bottom: 5px;
}
.son3{
width: 70%;
height: 350px;
background-color: #edecfa;
line-height: 350px;
border: 2px dotted gray;
margin-bottom: 5px;
}
.son4{
width: 70%;
height: 200px;
background-color: #edecfa;
line-height: 200px;
border: 2px dotted gray;
margin-bottom: 5px;
}
</style>
</head>
<body>
<center>
<div class="son1">top</div>
<div class="son2">banner</div>
<div class="son3">main</div>
<div class="son4">footer</div>
</center>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>两列左窄右宽型</title>
<style>
div{
box-sizing: border-box;
}
.top{
width: 80%;
height: 200px;
line-height: 200px;
border: 2px dotted gray;
margin-bottom: 5px;
background-color: #edecfa;
}
.banner{
width: 80%;
height: 170px;
line-height: 170px;
border: 2px dotted gray;
margin-bottom: 5px;
background-color: #edecfa;
}
.zong{
width: 80%;
height: 302px;
margin-bottom: 5px;
display: flex;
justify-content: space-between;
}
.left{
width: 20%;
height: 300px;
line-height: 300px;
float: left;
border: 2px dotted gray;
background-color: #edecfa;
}
.right{
width: 80%;
height: 300px;
line-height: 300px;
float: left;
margin-left: 5px;
border: 2px dotted gray;
background-color: #edecfa;
}
.footer{
width: 80%;
height: 210px;
line-height: 210px;
border: 2px dotted gray;
background-color: #edecfa;
}
</style>
</head>
<body>
<center>
<div class="top">top</div>
<div class="banner">banner</div>
<div class="zong">
<div class="left">left</div>
<div class="right">right</div>
</div>
<div class="footer">footer</div>
</center>
</body>
</html>s
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>通栏平均分布型</title>
<style>
.top{
width: 90%;
height: 150px;
line-height: 150px;
border: 2px dotted gray;
margin-bottom: 10px;
background-color: #edecfa;
}
.banner{
width: 75%;
height: 250px;
line-height: 250px;
border: 2px dotted gray;
margin-bottom: 10px;
background-color: #edecfa;
}
#shang{
display: flex;
width: 75%;
height: 202px;
justify-content: space-between;
margin-bottom: 10px;
}
.shang1{
height: 200px;
width: 24%;
border: 2px dotted gray;
background-color: #edecfa;
}
#xia{
display: flex;
width: 75%;
height: 262px;
justify-content: space-between;
margin-bottom: 10px;
}
.xia1{
height: 260px;
width: 24%;
border: 2px dotted gray;
background-color: #edecfa;
}
.footer{
width: 90%;
height: 200px;
line-height: 100px;
border: 2px dotted gray;
margin-bottom: 10px;
background-color: #edecfa;
}
</style>
</head>
<body>
<center>
<div class="top">top</div>
<div class="banner">banner</div>
<div id="shang">
<div class="shang1"></div>
<div class="shang1"></div>
<div class="shang1"></div>
<div class="shang1"></div>
</div>
<div id="xia">
<div class="xia1"></div>
<div class="xia1"></div>
<div class="xia1"></div>
<div class="xia1"></div>
</div>
<div class="footer">footer</div>
</center>
</body>
</html>
3.html5标签
Header 网页头
Nav 导航
Footer 底部
Article 文章
Section 区域
Aside 侧边
Datalist 选项列表，文本框可以通过list属性捆绑datalist的id
Fieldset 对表单控件进行分组，分组标题可以通过legend标签设置
input type新增的值：datatime-local 设置日期时间
| 类型**** | 使用示例**** | 含义**** |
| email**** | < input type="email"> | 输入邮箱格式 |
| tel**** | < input type="tel"> | 输入手机号码格式 |
| url**** | < input type="url"> | 输入url格式 |
| number**** | < input type="number"> | 输入数字格式 |
| search**** | < input type="search"> | 搜索框（体现语义化） |
| range**** | < input type="range"> | 自由拖动滑块 |
| time**** | < input type="time"> | 小时分钟 |
| date**** | < input type="date"> | 年月日 |
| datetime**** | < input type="datetime"> | 时间 |
| month**** | < input type="month"> | 月年 |
| week**** | < input type="week"> | 星期 年 |
| 属性**** | 用法**** | 含义**** |
| placeholder**** | < input type="text" placeholder="请输入用户名"> | 占位符 当用户输入的时候 里面的文字消失 删除所有文字，自动返回 |
| autofocus**** | < input type="text" autofocus> | 规定当页面加载时 input 元素应该自动获得焦点 |
| multiple**** | < input type="file" multiple> | 多文件上传 |
| autocomplete**** | < input type="text" autocomplete="off"> | 规定表单是否应该启用自动完成功能 有2个值，一个是on 一个是off on 代表记录已经输入的值 1.autocomplete 首先需要提交按钮 2.这个表单您必须给他名字 |
| required**** | < input type="text" required> | 必填项 内容不能为空 |
| accesskey**** | < input type="text" accesskey="s"> | 规定激活（使元素获得焦点）元素的快捷键 采用 alt + s的形式 |
- 过渡：
- Transition-property: 过渡的属性
- Transition-duration: 过渡周期时间 s(秒) ms(毫秒)
- transition-timing-function:linear(匀速) ease(渐慢) ease-in(加速) ease-out(减速) ease-in-out 过渡速度变化
- transition-delay: 2s; 过渡开始时间
- transition: 要过渡的属性 花费时间 运动曲线 何时开始
2D&3D
2D
- Transform:
- 移动 translateX() translateY() translate(x,y)
- 缩放 scaleX() scaleY() scale(x,y)
- 旋转 rotate(数值deg)
- 倾斜 skew(数值deg，数值deg)
- Transform-origin: 旋转原点属性
3D
- Transform:
- 旋转 rotateX() rotateY() rotateZ()
- 移动 translateX() translateY() translateZ()
- Perspective 透视，实现远小近大的效果，这个给父容器设置该属性
- Backface-visibility: hidden | visible 设置图片旋转后，是否可见背面
补充样式属性取值知识：inherit(继承父元素) initial（默认值） unset(inherit initial 之和)
动画
@keyframes 动画名称{ 编排动画 }
运行动画
选择器｛
Animation-name:动画名称
Animation-duration:动画运行的时间
｝
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>小汽车</title>
<style>
body{
background-color: #f6f6f6;
}
/*animation需要配合@keyframes使用*/
@keyframes car{
0%{
transform: translateX(0px) rotateY(0deg);
}
49%{
transform: translateX(500px) rotateY(0deg);
}
50%{
transform: translateX(500px) rotateY(180deg);
}
100%{
transform: translateX(0px) rotateY(180deg);
}
}
#car{
width: 220px;
height: 200px;
/*动画名称*/
animation-name: car;
/*动画运行时间*/
animation-duration: 10s;
/*规定动画应该播放的次数 infinite：无限循环*/
animation-iteration-count: infinite;
animation: car 10s infinite; /*car: 动画名称 10s 动画运行时间 infinite: 无限循环*/
}
</style>
</head>
<body>
<img src="imgs/qiche.jpg" alt="" id="car">
</body>
</html>
5018
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
