html + css 常用属性
2022-06-25 本文已影响0人
Cola_Mr
一、html5 + css3
less中使用calc的时候要注意*
height: ~'calc(100vh - 80rpx)';
1.1 html5语义化标签
| 标签名 | 说明 |
|---|---|
| <header> | 头部标签 |
| <nav> | 导航标签 |
| <article> | 内容标签 |
| <section> | 定义文档某个区域 |
| <aside> | 侧边标签栏 |
| <footer> | 尾部标签 |
2.1 css属性选择器
| 选择符号 | 说明 |
|---|---|
| E[att] | 选择具有att属性的E元素 |
| E[att="val"] | 选择具有att属性且属性值等于val的E元素 |
| E[att^="val"] | 匹配具有att属性且值以val开头的E元素 |
| E[att$="val"] | 匹配具有att属性且值以val结尾的E元素 |
| E[att*="val"] | 匹配具有att属性且值中含有val的E元素 |
2.2 伪类选择器
| 选择符 | 简介 |
|---|---|
| E:first-child | 匹配父元素中的第一个子元素E |
| E:last-child | 匹配父元素中的最后子元素E |
| E:nth-child(n) | 匹配父元素中的第n个子元素 |
| E:first-of-type | 指定类型E的第一个 |
| E:last-of-type | 指定类型E的最后一个 |
| E:nth-of-type（n） | 指定类型E的第n个 |
nth-child(n) 与 E:first-of-type(n) 补充
- n 可以是数字，关键字和公式
- n 如果是数字，就是选择第n个子元素，里面数字从1开始
- n 可以是关键字：even偶数，odd奇数
- n 可以是公式：常见的公式如下（如果n是公式，则从0开始，但是0个元素或者超出元素的个数会被忽略）
| 公式 | 取值 |
|---|---|
| 2n | 偶数 |
| 2n + 1 | 奇数 |
| 5n | 5 10 15 .... |
| n + 5 | 从第5个开始（包含第五个）到最后 |
| -n - 5 | 前五个（包含第五个） |
ps：E:last-child(n) 与 E:last-of-type 可以选择倒数 n 个元素
2.3 伪类选择器
| 选择符 | 简介 |
|---|---|
| ::before | 在元素内部的前面插入内容 |
| ::after | 在元素内部的后面插入内容 |
| ::first-letter | 将特殊的样式添加到文本的首字母 |
| ::first-line | 将特殊的样式添加到文本的首行 |
::before 与 ::after 所创建出来的元素都是行内元素，并且必须要有content属性，伪元素选择器和便签选择器一样，权重都为1。
2.4 盒子模型
css3 可以指定box-siziing 指定盒子模型，属性为：content-box、border-box，这样盒子大小的计算方式就发生了改变。
- box-siziing: content-box 盒子大小为width + padding + border （html属性默认）
- box-siziing: border-box 盒子整体大小为定义的width大小，不会在受到 padding 或 border 的影响，撑大盒子。
2.5 css3 滤镜filter
filter css 属性将模糊或颜色偏移等图形效果应用于元素
filter: 函数() blur 模糊处理函数
div {
filter: blur(5px)
}
2.6 盒子宽度计算属性 calc()
div {
width: calc(100% - 80px)
}
2.7 transition过渡
transition: 要过渡的属性 花费时间 运动曲线 何时开始
- 属性：想要变化的css属性，宽度、高度、内外边距等 ，如果所有属性都要变化，写一个all，默认也是all。
- 花费时间：单位为 秒 s
- 运动曲线： 默认ease （可以省略）
ps：口诀：谁要过渡给谁加 transtion
2.8 2D转换 transform
- 移动：translate
- 旋转：rotate
- 缩放：scale
旋转rotate
transform: rotate(45deg) // 顺时针旋转45度
rotate 括号里面的参数正数为顺时针旋转，负数为逆时针旋转。
旋转中心点 transform-origin
语法：
transform-origin: x , y;
div {
transform: rotate(360deg)
transform-origin: center // 以中心尾旋转点
}
x y默认转换的中心点是元素的中心点（50%，50%）
还可以x, y设置 像素 或则 方位名词 （top bottom left rigth center）
缩放sacle
transform: scale(x, y);
sacle缩放最大优势：可以设置转换中心点缩放，默认就是中心点缩放，而且不影响其他盒子的排版
2D转换综合写法
transfrom: translate() rotate() scale()...等
ps：当我们同时有位移和其他属性的时候，记得要将位移放到最前。
2.9 css3 动画 animation
动画基本使用 ：
-
先定义动画
@keyframes 动画名称 { 0% { width: 100px } 100% { width: 200px } } -
再使用动画
div { // 调用动画 animation-name: 动画名称 // 动画持续时间 animation-duration: 持续时间 }
2.10 动画常用属性
| 属性 | 描述 |
|---|---|
| @keyfrmes | 规定动画 |
| animation | 所用动画属性的简写，除了animation-play-state |
| animation-name | 调用@keyfrmes动画，这里填写动画的名称 |
| animation-duration | 规定完成动画的一个周期所花费的时间 |
| animation-timing-function | 规定动画速度曲线，默认是“ease“ |
| animation-delay | 规定动画何时开始，默认是0 |
| animation-iteration-count | 规定动画被播放的次数，默认是1，还有infinite |
| animation-direction | 规定动画是否在下一周期逆向播放，默认是“normal”，“alternate”逆播放 |
| animation-play-state | 规定动画正在运行或者暂停，默认是“running”，还有“paused” |
| animation-fill-mode | 规定动画结束状态，保持forwards 回到起始位置backwards |
animation简写
animation: 动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向运动回 动画起始或则结束状态
animation: myfirst 5s linear 2s infinite alternate
- 简写属性里面不包含 animation-play-state
- 暂停动画： animation-play-state： paused 可以配合鼠标经过是做暂停效果
- 想要动画走回来，而不是跳过来： animation-direction： alternate
- 盒子动画结束后，停在结束的位置：animation-fill-mode： forwards
速度曲线参数细节
| 值 | 描述 |
|---|---|
| linear | 动画从头到尾的速度相同，匀速 |
| ease | 默认，动画以低速开始，然后加速，在结束前减速 |
| ease-in | 动画以低速开始 |
| ease-out | 动画以低速结束 |
| ease-in-out | 动画以低速开始和结束 |
| steps() | 指定了时间函数中间隔数量（步长） |
2.11 3D转换
主要点：
- 3D 位移：translate3d(x, y, z) 参数单位 px
- 3D 旋转：rotate3d(x, y, z) 参数单位 deg
- 透视：perspective
- 3D呈现：transfrom-style
perspective透视
透视写在被观察元素的父盒子上面
<style>
body {
/* 透视写到被观察元素的父盒子上面 */
perspective: 200px;
}
div {
width: 200px;
height: 200px;
background-color: pink;
/* transform: translateX(100px);
transform: translateY(100px); */
/* transform: translateX(100px) translateY(100px) translateZ(100px); */
/* 3d 移动有简写方法 */
transform: translate3d(400px,100px,100px);
}
</style>
</head>
<body>
<div></div>
</body>
3D旋转rotate3d
3d旋转可以让元素在三维平面内沿着x轴，y轴，z轴或则自定义轴进行旋转
3d呈现transfrom-style
- 控制子元素会否开启三维立体环境
- transform-style: flat子元素不开启3d立体空间 默认的
- transfrom-style：preserve-3d 开启元素立体空间
- 代码写给父级，但是影响的是子盒子
<style>
body {
perspective: 500px;
}
.box {
width: 200px;
height: 200px;
margin: 100px auto;
position: relative;
transition: all 2s;
transform-style: preserve-3d;
}
.box:hover {
transform: rotateY(60deg);
}
.box div {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-color: pink;
}
.box div:last-child {
background-color: purple;
transform: rotateX(60deg);
}
</style>
</head>
<body>
<div class="box">
<div></div>
<div></div>
</div>
</body>
2.12 浏览器私有前缀
- -moz-：代表firfox浏览器私有前缀
- -ms-: 代表ie浏览器私有属性
- -webkit=: 代表safari、chrome私有属性
- -o-: 代表opera私有属性
// 提倡写法
-moz-border-radius: 10px;
-ms-border-radius: 10px;
-webkit-border-radius: 10px;
-o-border-radius: 10px;
2.13 常用css属性集合
文字属性
color : #999999; /*文字颜色*/
font-family : 宋体,sans-serif; /*文字字体*/
font-size : 9pt; /*文字大小*/
font-style:itelic; /*文字斜体*/
font-variant:small-caps; /*小字体*/
letter-spacing : 1pt; /*字间距离*/
line-height : 200%; /*设置行高*/
font-weight:bold; /*文字粗体*/
vertical-align:sub; /*下标字*/
vertical-align:super; /*上标字*/
text-decoration:line-through; /*加删除线*/
text-decoration: overline; /*加顶线*/
text-decoration:underline; /*加下划线*/
text-decoration:none; /*删除链接下划线*/
text-transform : capitalize; /*首字大写*/
text-transform : uppercase; /*英文大写*/
text-transform : lowercase; /*英文小写*/
text-align:right; /*文字右对齐*/
text-align:left; /*文字左对齐*/
text-align:center; /*文字居中对齐*/
text-align:justify; /*文字分散对齐*/
text-indent:50px; /*文字段落首行缩进*/
vertical-align属性
vertical-align:top; /*垂直向上对齐*/
vertical-align:bottom; /*垂直向下对齐*/
vertical-align:middle; /*垂直居中对齐*/
vertical-align:text-top; /*文字垂直向上对齐*/
vertical-align:text-bottom; /*文字垂直向下对齐*/
CSS边框空白
padding-top:10px; /*上边框留空白*/
padding-right:10px; /*右边框留空白*/
padding-bottom:10px; /*下边框留空白*/
padding-left:10px; /*左边框留空白
CSS符号属性
list-style-type:none; /*不编号*/
list-style-type:decimal; /*阿拉伯数字*/
list-style-type:lower-roman; /*小写罗马数字*/
list-style-type:upper-roman; /*大写罗马数字*/
list-style-type:lower-alpha; /*小写英文字母*/
list-style-type:upper-alpha; /*大写英文字母*/
list-style-type:disc; /*实心圆形符号*/
list-style-type:circle; /*空心圆形符号*/
list-style-type:square; /*实心方形符号*/
list-style-image:url(/dot.gif); /*图片式符号*/
list-style-position: outside; /*凸排*/
list-style-position:inside; /*缩进*/
ccs背景样式
background-color:#F5E2EC; /*背景颜色*/
background:transparent; /*透视背景*/
background-image : url(/image/bg.gif); /*背景图片*/
background-attachment : fixed; /*浮水印固定背景*/
background-repeat : repeat; /*重复排列-网页默认*/
background-repeat : no-repeat; /*不重复排列*/
background-repeat : repeat-x; /*在x轴重复排列*/
background-repeat : repeat-y; /*在y轴重复排列*/
指定背景位置
background-position : 90% 90%; /*背景图片x与y轴的位置*/
background-position : top; /*向上对齐*/
background-position : buttom; /*向下对齐*/
background-position : left; /*向左对齐*/
background-position : right; /*向右对齐*/
background-position : center; /*居中对齐*/
css链接属性
a /*所有超链接*/
a:link /*超链接文字格式*/
a:visited /*浏览过的链接文字格式*/
a:active /*按下链接的格式*/
a:hover /*鼠标转到链接*/
鼠标光标样式：
链接手指 CURSOR: hand
十字体 cursor:crosshair
箭头朝下 cursor:s-resize
十字箭头 cursor:move
箭头朝右 cursor:move
加一问号 cursor:help
箭头朝左 cursor:w-resize
箭头朝上 cursor:n-resize
箭头朝右上 cursor:ne-resize
箭头朝左上 cursor:nw-resize
文字I型 cursor:text
箭头斜右下 cursor:se-resize
箭头斜左下 cursor:sw-resize
漏斗 cursor:wait
光标图案(IE6) p {cursor:url(“光标文件名.cur”),text;}
CSS框线一览表
border-top : 1px solid #6699cc; /*上框线*/
border-bottom : 1px solid #6699cc; /*下框线*/
border-left : 1px solid #6699cc; /*左框线*/
border-right : 1px solid #6699cc; /*右框线*/
以上是建议书写方式,但也可以使用常规的方式 如下:
border-top-color : #369 /*设置上框线top颜色*/
border-top-width :1px /*设置上框线top宽度*/
border-top-style : solid/*设置上框线top样式*/
其他框线样式
solid /*实线框*/
dotted /*虚线框*/
double /*双线框*/
groove /*立体内凸框*/
ridge /*立体浮雕框*/
inset /*凹框*/
outset /*凸框*/
border-collapse:collapse /*合并表格的边框属性设置在table标签上*/
outline：none设置点击输入框之后轮廓线隐藏
二、flex布局
父元素属性：
| 属性 | 说明 |
|---|---|
| flex-direction | 设置主轴的方向 |
| justify-content | 设置主轴上的子元素排列方式 |
| flex-wrap | 设置子元素是否换行 |
| flex-content | 设置侧轴上的子元素的排列方式（多行才有效） |
| align-items | 设置侧轴上的子元素的排列方式（单行） |
| flex-flow | 复合属性，相当于同时设置了flex-direction和flex-wrap |
1.1 flex-direction设置主轴方向
| 属性值 | 说明 |
|---|---|
| row | 默认值，从左到右 |
| row-reverse | 从右到左 |
| column | 从上到下 |
| colmn-reverse | 从下到上 |
1.2 justify-content设置主轴的对齐方式
| 属性值 | 说明 |
|---|---|
| flex-start | 默认值，从头部开始，如果主轴是x，则是从左到右 |
| flex-end | 从尾部开始 |
| center | 在主轴居中对齐 |
| space-around | 平分剩余空间 |
| space-between | 先两边贴边，再平分剩余空间 |
1.3 flex-wrap设置子元素是否换行
| 属性值 | 说明 |
|---|---|
| nowrap | 默认值，不换行 |
| wrap | 换行 |
ps： 换行之后flex-content属性才有用
1.4 align-items 设置侧轴子元素排列方式（单行）
| 属性值 | 说明 |
|---|---|
| flex-start | 从上到下 |
| flex-end | 从下到上 |
| center | 挤在一起（垂直居中） |
| stretch | 拉伸 |
1.5 align-content 设置侧轴子元素排列方式（多行）
| 属性值 | 说明 |
|---|---|
| flex-start | 默认值，在侧轴的头部开始排列 |
| flex-end | 在侧轴的尾部开始排列 |
| center | 在侧轴中间显示 |
| space-around | 子项在侧轴平分剩余空间 |
| space-between | 子项在侧轴点分布两头，再平分剩余空间 |
| stretch | 设置子项元素高度平分父元素高度 |
1.6 flex-flow复合写法
flex-flow属性是flex-direction和flex-wrap属性的复合属性
flex-flow: row wrap // 从左到右排列 换行
2.1 flex布局子元素常见属性
| 属性 | 说明 |
|---|---|
| flex | 子项目占的份数 |
| align-self | 控制子项目自己在侧轴的排列方式 |
| order | 定义子项目的排列顺序 |
2.2 align-self 子元素侧轴的排列方式
align-self 属性允许单个项目有其他项目不一样的对齐方式，可以覆盖align-items属性。默认是auto，表示继承父元素的align-items属性，如果没有父元素，侧等同于stretch
2.3 定义元素排列顺序
数值越小，排列元靠前，默认是0
注意：和z-index不一样
div span:nth-child(2) {
// 默认是0 -1比0 小 所以在前面
order: -1;
}
三、媒体查询
1.1 语法规范
@media mediatype and|not|only (media feature) {
CSS-Code;
}
- 用 @media 开头，注意@符号
- mediatype 媒体类型
- 关键字 and not only
- media feature 媒体特性 必须有小括号包含
1.2 mediatype查询类型
| 值 | 说明 |
|---|---|
| all | 用于所有设备 |
| 用于打印机和打印预览 | |
| scree | 用于电脑屏幕，平板电脑，手机等 |
1.3 关键字
关键字将谋体类型或者多个媒体特性链接到一起做为查询条件
| 值 | 说明 |
|---|---|
| and | 可以将多个媒体特性连接到一起，相当于 “且” 的意思 |
| not | 排除某个指定媒体类型，相当于 “非” 的意思，可以省略 |
| only | 指定某个特定的谋体类型，可以省略 |
1.4 媒体特性
| 值 | 说明 |
|---|---|
| width | 定义输出设备页面可见区域的宽度 |
| min-width | 定义输出设备页面最小可见区域的宽度 |
| max-width | 定义输出设备页面最大可见区域的宽度 |
