1.鼠标样式 cursor
cursor:pointer; /* 光标为一只手 */
cursor:crosshair; /* 光标为十字架 */
cursor:help; /* 帮助 */
cursor:wait; /* 沙漏 */
其他请参考手册cursor
2.轮廓线 outline
这个我们用的多的地方恐怕就是隐藏button点击时的边框
outline:none; /* 隐藏button点击时的轮廓线 */
其他请参考手册outline
3.文本固定行数超出隐藏显示省略号
display: -webkit-box;
-webkit-line-clamp: 2; /* 行数 */
-webkit-box-orient: vertical;
overflow: hidden;
4.设置文本在几行显示等其他操作
white-space: normal; /* 正常 */
white-space: nowrap; /* 一行 */
overflow: hidden; /* 溢出隐藏 */
text-overflow: ellipsis; /* 超出内容显示省略号 */
/* 超出换行 */
text-align: justify;
text-justify: newspaper;
word-break: break-all;
其他请参考手册white-space
5.字符间距 letter-spacing
letter-spacing:8px; /* 字符之间间距 */
其他请参考手册letter-spacing与word-spacing
6.阴影 box-shadow
box-shadow: 1px 1px 5px #888888;
其他请参考手册box-shadow
7.弹性盒子
display: flex; /* 设置为弹性容器 */
/* 定义排列方向,下面遍历出来,用的时候只需要写一个 */
flex-direction: row; /* 主轴正方向 */
flex-direction: row-reverse; /* 沿主轴反方向排列 */
flex-direction: column; /* 纵向排列/沿交叉轴正方向排列 */
flex-direction: column-reverse; /* 沿交叉轴反方向排列 */
/* 定义在主轴对齐方式 */
justify-content: space-around; /* 每个项目两边留出相同距离 */
justify-content: space-between; /* 两两之间留出距离,首尾没有 */
justify-content: center; /* 沿主轴中间对齐 */
justify-content: flex-start; /* 沿主轴开始对齐 */
justify-content: flex-end; /* 沿主轴末尾对齐 */
/* 定义在交叉轴对齐方式,用的时候括号里的注释自行删掉 */
align-items: flex-start | flex-end | center | baseline(基线对齐) | stretch(拉伸占满父级) /* 定义超出容器是否折行 */
flex-wrap: nowrap(默认单行) | wrap(多行) | wrap-reverse(反转wrap排列);
其他请参考手册弹性盒子
8.过渡动画 transition
当元素状态发生改变时,不想直接变化,而是逐渐变化,就使用过渡
不多写,自己看吧 transition
9.渐变属性
background: linear-gradient(to right, #5769f9, #d658fe); /* 线性渐变 */
background: radial-gradient(center, shape size, start-color, ..., last-color); /* 径向渐变 */
其他请参考手册渐变属性
10.overflow
overflow:visible; /* 默认值。内容不会被修剪,会呈现在元素框之外 */
overflow:hidden; /* 溢出隐藏 */
overflow:scroll; /* 溢出隐藏,但是浏览器会显示滚动条 */
overflow:auto; /* 如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容 */
overflow:visible; /* 从父元素继承 overflow 属性的值 */
其他请参考手册overflow
11.让盒子水平垂直居中
/* 方法1:*/
position: absolute; top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
/* 方法2:*/
position: absolute;
top: 50%;
left: 50%;
margin-top: -(height/2)px;
margin-left: -(height/2)px;
/* 方法3:*/
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
position详细属性请参考手册position
12.媒体查询
详见 媒体查询
13.伪类选择器
:link 元素初始状态
:hover 鼠标悬停上去的状态
:active 点击之后的状态
:visited 访问之后的状态
14.overflow 滚动条美化
::-webkit-scrollbar {
/*滚动条整体样式*/
width: 6px;
/*高宽分别对应横竖滚动条的尺寸*/
height: 1px;
}
::-webkit-scrollbar-thumb {
/*滚动条里面小方块*/
-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
background: #969696;
border-radius: 9px;
}
::-webkit-scrollbar-track {
background-color: #ddd;
} /* 滚动条的滑轨背景颜色 */
扩展:一些前端面试常问的问题
1.常见浏览器及内核
IE: trident 内核
Firefox: gecko 内核
Safari: webkit 内核
Opera: 以前是 presto 内核,Opera 现已改用 Google Chrome 的 Blink 内核
Chrome: Blink(基于 webkit,Google 与 Opera Software 共同开发)
2.html5新增的标签及属性
- H5新增的布局标签
<header></header> 标记页面或区域头部,与div用法相同,只是语义变了
<footer></footer> 页脚
<nav></nav> 导航
<article></article> 定义独立的内容区,如一篇文章
<section></section> 定义页面内容的分区
<aside></aside> 侧边栏
<hgroup></hgroup> 可以为标题与子标题进行分组,常与h1-h6组合使用
<figure></figure> 定义媒体内容及标题
<mark></mark> 定义带有记号的文本
<time></time> <time datetime=”2019-02-19″>元宵节</time>
- 新增的多媒体标签
<audio></audio> 音频
<video></video> 视频
<source> 为媒介元素,为上面两个定义媒介资源
- 新增的Input表单元素
Input类型:url 提交时会验证url域的值
Input类型:email 提交时会验证email域的值
Input类型:search 用于搜索域
Input类型:tel 用于输入电话号码的文本域
Input类型:number 用于包含数值的输入域
Input类型:range 用于包含一定范围内数字的输入域,显示为滑动条
Input类型:color 用于选取颜色
Input类型:date 用于选取日期
Input类型:datetime 允许手动输入日期及时间
Input类型:mouth 允许选择一个月份
Input类型:time 允许选择一个时间
Input类型:week 允许选择周和年
Input类型:mouth 允许选择一个月份
- 新增的Input表单属性
max 规定输入域所允许的最大值
min 规定输入域所允许的最小值
step 规定输入域合法的数字间隔
placeholder 描述输入域所期待的值
autofocus 页面加载时获取焦点
autocomplete 实现自动完成内容输入 on / off
form 规定输入域所属表单
required 规定必须填写
pattern 用于验证输入域的模式,模式是正则表达式
multiple 规定输入域可选择多个值,用于上传域和email输入域
list 实现数据列表下拉效果
required 规定必须填写
3.css3新增的属性
- 新增了一些选择器(属性选择器/结构伪类选择器/状态伪类选择器)
- 边框属性
/* border-radius 圆角 */ border-radius:top-left top-right bottom-left bottom-right; /* box-shadow 阴影 */ box-shadow: h-shaow v-shadow blur spread color inset; /* h-shadow:水平阴影位置 v-shadow:垂直阴影位置 blur:迷糊距离 可选 spread:阴影尺寸 可选 color:阴影颜色 可选 inset:将外阴影改为内阴影 outset 可选 */
- 背景属性
background-image: url(),url(); /* 多背景 */ background-size: length | percentage | cover | contain; /* 背景尺寸 */ /* length:设置头像高度和宽度,允许两个或一个值 percentage:以父元素的百分比来设置,允许两个或一个值 cover:背景图像扩展至足够大,完全覆盖背景区域 contain:扩展至最大尺寸,使其宽高适应内容 */ background-origin:content-box | padding-box | border-box; /* 背景图片定位区域 */ /* content-box:背景图像相对于内容框来定位 padding-box:背景图像相对于内边距来定位 border-box:背景图像相对于边框盒来定位 */ background-clip:border-box | padding-box | content-box; /* 背景的绘制区域 */ /* border-box:背景被裁剪到边框盒 padding-box:背景被裁剪到内边距框 content-box:背景被裁剪到内容框 */
- 渐变属性
background: linear-gradient(to right, #5769f9, #d658fe); /* 线性渐变 */ background: radial-gradient(center, shape size, start-color, ..., last-color); /* 径向渐变
其他请参考手册渐变属性
4.对BFC规范的理解
Formatting Context:指页面中的一个渲染区域,并且拥有一套渲染规则,他决定了其
子元素如何定位,以及与其他元素的相互关系和作用。
BFC(块级格式化上下文),一个创建了新的 BFC 的盒子是独立布局的,盒子内元素的布局
不会影响盒子外面的元素。在同一个 BFC 中的两个相邻的盒子在垂直方向发生 margin 重叠
的问题
BFC 是指浏览器中创建了一个独立的渲染区域,该区域内所有元素的布局不会影响到区域外
元素的布局,这个渲染区域只对块级元素起作用
© 版权声明
站内部分资源由网友投稿或收集于网络,若侵犯了您的合法权益,请联系我们删除
THE END
- 最新
- 最热
只看作者