PHP8.1.21版本已发布
vue8.1.21版本已发布
jquery8.1.21版本已发布

css常用样式总结

php中世界最好的语言
php中世界最好的语言 原创
2018-05-24 15:28:24 1368浏览

这次给大家带来css常用样式总结,使用Css常用样式的注意事项有哪些,下面就是实战案例,一起来看一下。

居中

布局中居中是很重要的技术,掌握居中的技巧,对布局相当重要,

input

1.去除外边框:outline : none
2.去除内边距:padding : 0
3.去除type="number"类型的上下自旋按钮 :

input::-webkit-outer-spin-button {-webkit-appearance: none; }
input::-webkit-inner-spin-button {-webkit-appearance: none; }
input[type="number"]{-moz-appearance:textfield;}
注意:使用 number 时,安卓下可以调出数字键盘,并且只能输入数字,苹果手机不可以。

4.type="search" : 调出手机软键盘搜索,在苹果手机中需要使用from标签,

input::-webkit-search-cancel-button {display:none} 去除小差号
-webkit-appearance: textfield; 去除默认样式

background

1.background-image : 后面必须跟图片路径,如,background-image:url(xxx.jpg),url(xxx.png),...
2.background-position : 使用时需要与对应路径的图片保持一致,如,background-position:0 0,100px 100px,...
3.background-repeat : 使用规则与 background-position 相同
4.background-color : 设置背景色
注意:使用 background 时,如果不是使用多背景,可以使用复合写法。如果不是,分开写避免背景显示有误。需要强调如果使用了 background-image, 他的后面只能跟 url。
需要设置位置使用 background-position,是否重复使用 background-repeat,否则会出错。

box-shadow

box-shadow: h-shadow v-shadow blur spread color inset;
1.h-shadow : 必需。水平阴影的位置。允许负值。[ 相对于最近边界的位置 ]
2.v-shadow : 必需。垂直阴影的位置。允许负值。[ 相对于最近边界的位置 ]
3.blur :     可选。模糊长度 [ 实际长度是给定长度的一半 ]
4.spread : 可选。阴影的尺寸。[ 可以为负值 ]
5.color : 可选。阴影的颜色。请参阅 CSS 颜色值。
6.inset : 可选。将外部阴影 (outset) 改为内部阴影。

说明:
1.h-shadow 与 v-shadow 都为 0 时表示不偏移,表示四周扩散
2.blur : 表示模糊长度,实际模糊距离是设置值的一半
3.设置指定边,主要控制水平和垂直阴影的位置,可以分别指定没有个方向的阴影位置如分别指定四边:
.box{ box-shadow: 0 -2px 0 0 red, 2px 0 0 0 red, 0 2px 0 0 red, -2px 0 0 0 red;}
4.可以使用该属性替代 border 的边框属性,好处是阴影不占空间,动效不会出现移动
如:
box{background:green;width:200px;height:200px;}
// 做了位置处理,否则会对布局造成影响
.box1:hover{border:2px solid #ffffff;box-sizing:border-box;position:relative;top:-2px;left:-2px; }
.box2:hover{box-shadow:0 0 0 2px #ffffff;}

font

1.font-size-adjust : 设置字体在小字体时更易读,
比如,设置字体为100px,那么设置值为0.58,也就是小尺寸时是58px,这样显示更易读。详情

2.-webkit-text-size-adjust手机默认是 auto, 自动调节字体大小,一般情况需要关闭该功能,设置 none 或 100% 值,否则可能会导致样式出问题。

user-modify

user-modify有三个属性值:write-only(只写)、read-write(读写)、read-only(只读),用于普通元素的可编辑性和concenteditable属性功能类似。使用时需要加浏览器前缀。测试发现火狐并不支持

visibility

与opacity区别在于,当使用时属性设置为hidden,占据空间,但是不会影响事件的触发。比如一个使用了hidden属性的元素完全遮盖了另外的元素,被遮盖的元素事件依然正常触发。并且自己本身的事件不会触发。通过设置visible属性显示元素

flex

理解 flex 布局首先明白抓住2点

第一:父盒子属性。在父盒子中理解 2 个轴。

水平方向
flex-direction : 属性决定主轴的方向(即项目的排列方向)
    row : 横向,按元素顺序,居左[主轴为水平方向,起点在左端]
    row-reverse :横向,倒序,居右[主轴为水平方向,起点在右端]
    column :纵向,按元素顺序,[主轴为垂直方向,起点在上沿]
    column-reverse : 纵向,倒序[主轴为垂直方向,起点在下沿]
flex-wrap : 默认情况下,项目都排在一条线(又称"轴线")上。flex-wrap属性定义,如果一条轴线排不下,如何换行
    nowrap : (默认)不换行,盒子会自适应
    wrap : 换行,第一行在上方
    wrap-reverse : 换行,第一行在下方
flex-flow :<flex-direction> || <flex-wrap> 合并写法
justify-content : 属性定义了项目在主轴上的对齐方式,控制水平方向
flex-start : 左对齐
flex-end : 右对齐
center : 水平居中
space-between : 子元素间隔相等并自适应
space-around : 子元素两端间隔自适应</flex-wrap></flex-direction>
垂直方向
align-items : 属性定义项目在交叉轴上如何对齐,控制垂直方向
    flex-start : 上对齐
    flex-end : 下对齐
    center : 垂直居中
    baseline : 文字低端对齐
    stretch : 如果项目未设置高度或设为auto,将占满整个容器的高度( 默认值 )
align-content :属性定义了多根轴线的对齐方式。
 如果项目只有一根轴线,该属性不起作用。( 多个轴 ),控制垂直方向
    flex-start : 多轴上对齐
    flex-end : 多轴上下对齐
    center : 多轴居中
    space-between : 两端对齐,均分剩余空间

第二:子盒子属性

order : 指定元素权重,默认为 0,权重越大,对应的元素越靠后。在使用时注意 flex-direction 的属性值
flex-grow :定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大。
        分配空间的权重,按权重比均分剩余空间(注意是宽度,不包含 padding 和 margin )
flex-shrink : 定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。
        值为 0 :不缩小
flex-basis :定义了在分配多余空间之前,项目占据的主轴空间(main size)。
浏览器根据这个属性,计算主轴是否有多余空间。它的默认值为auto,即项目的本来大小
flex : 是flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto。后两个属性可选。
align-self : 属性允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性。
 默认值为auto,表示继承父元素的align-items属性,如果没有父元素,则等同于stretch。[注意换行]
    auto :默认值
    flex-start :上对齐
    flex-end :下对齐
    center : 垂直居中
    baseline : 文本基线对齐(设置所有的item)

其他

 1. 去除苹果点击事件的灰色阴影:-webkit-tap-highlight-color: rgba(0,0,0,0);有些元素需要设置背景色。
 2. 溢出出现省略号 : white-space: nowrap;text-overflow: ellipsis;overflow: hidden;
 3. 指定宽度数字不换行,需要指定换行属性:overflow:hidden; word-wrap:break-word;
 4. 文字平滑:-webkit-font-smoothing:none: 无抗锯齿;subpixel-antialiased (default): 次像素平滑 常见于Mac OS和MacType For Windows;antialiased: 灰度平滑 常用于Android和iOS等移动设备的

相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

推荐阅读:

react实现选中li高亮步骤详解

EasyCanvas绘图库在Pixeler项目开发中使用实战总结

声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。