css一些常用属性

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-spacingword-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
喜欢就支持一下吧
点赞6 分享
共3条
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

取消
昵称表情代码图片
    • 头像小归客0