css知识点

最新推荐文章于 2024-04-27 12:50:08 发布

霜贝

最新推荐文章于 2024-04-27 12:50:08 发布

阅读量202

点赞数

本文链接：https://blog.csdn.net/weixin_42496856/article/details/105810746

版权

display: flex;

flex-direction: column;

align-items:center;

.box {
  display: flex;
  justify-content: space-between;
}

.item:nth-child(2) {
  align-self: flex-end;
}

小程序js设置标题

wx.setNavigationBarTitle({

title: title,

success: function() {

console.log('setNavigationBarTitle success')

fail: function(err) {

console.log('setNavigationBarTitle fail, err is', err)

}

})

/*禁止文字被选中*/

user-select: none;

-moz-user-select:none;/*火狐*/

-webkit-user-select:none;/*webkit浏览器*/

-ms-user-select:none;/*IE10*/

-khtml-user-select:none;/*早期浏览器*/

-webkit-font-smoothing: antialiased; /*chrome、safari*/   // 设置字体抗矩尺 
-moz-osx-font-smoothing: grayscale;/*firefox*/

box-orient:horizontal;  // 属性规定框的子元素应该被水平或垂直排列

white-space: nowrap; /* 自适应宽度*/

word-break: keep-all; /* 避免长单词截断，保持全部 */

img{

border-radius:50%; // 图片变圆形

}

box-shadow: 10px 10px 5px #888888;

background:rgba(255, 255, 255, 0.6) !important; 背景透明文字不透明

设置点偏移

markers[i].setOffset( {offset:AMap.Pixel(-14.5, -36.8)} );

markers[i].setOffset({x:-14.5, y:-36.8});

// 一行变省略号

.max-200{

max-width: 200px;

text-overflow:ellipsis;

white-space:nowrap;

overflow: hidden;

}

// 两行变省略号

{

overflow:hidden;

text-overflow:ellipsis;

display:-webkit-box;

-webkit-box-orient:vertical;

-webkit-line-clamp:2;

}

border-collapse: collapse;

img{
            height: 200px;
            margin: 0;
            padding: 0;
            border-bottom: 1px solid red;

            vertical-align: middle; //
        }

textarea{
            resize:both;
        }
        div{
            width: 100px;
            height: 100px;
            background-color: #ccc;
            resize: both;
            overflow: auto;
        } 自定义缩放

.father{ flex 布局
                    display: box;
                    display: -webkit-box;
                    display: -moz-box;
                    display: -o-box;
                }
                .one{
                    box-flex:2;
                    -webkit-box-flex:2;
                    -moz-box-flex:2;
                    -o-box-flex:2;
                    background: red;
                }
                .two{
                    background: pink;
                }
                .three{
                    background: blue;
                }
                .two,.three{
                    box-flex:1;
                    -webkit-box-flex:1;
                    -moz-box-flex:1;
                    -o-box-flex:1;
                }

viaiOS 4.0+ 使用英文字体 Helvetica Neue，之前的iOS版本降级使用 Helvetica。

中文字体设置为华文黑体STHeiTi。

body {
        font-family: "Helvetica Neue", Helvetica, STHeiTi, sans-serif;
}

元素被触摸时产生的半透明灰色遮罩怎么去掉

a,button,input,texture{

-webkit-tap-highlight-color: rgba(0,0,0,0;) -webkit-user-modify:read-write-plaintext-only;

禁止ios 长按时不触发系统的菜单，禁止ios&android长按时下载图片

.css{-webkit-touch-callout: none}

禁止ios和android用户选中文字

.css{-webkit-user-select:none}

打电话

<a href="tel:0755-10086">打电话给:0755-10086</a>

发短信

<a href="sms:10086">发短信给: 10086</a>

写邮件

<a href="mailto:peun@foxmail.com">peun@foxmail.com</a>

body 中写 ontouchstart 激活 active

<body ontouchstart>

window.orientation，取值：正负90表示横屏模式、0和180表现为竖屏模式；

window.onorientationchange = function(){

switch(window.orientation){ case -90: case 90: alert("横屏:" + window.orientation); case 0: case 180: alert("竖屏:" + window.orientation); break; } }

//竖屏时使用的样式
@media all and (orientation:portrait) {
.css{}
}

//横屏时使用的样式
@media all and (orientation:landscape) {
.css{}
}

audio元素和video元素在ios和andriod中无法自动播放

应对方案：触屏即播

$('html').one('touchstart',function(){ audio.play() })

手机拍照和上传图片

<!-- 选择照片 --> <input type=file accept="image/*”>

<!-- 选择视频 -->
<input type=file accept="video/*”>

ios使用-webkit-text-size-adjust禁止调整字体大小

body{-webkit-text-size-adjust: 100%!important;}

取消input在ios下，输入的时候英文首字母的默认大写

<input autocapitalize="off" autocorrect="off" />

html{-ms-touch-action: none;}/* 禁止winphone默认触摸事件 */

iPhone click 事件失效解决办法

将 click 事件直接绑定到目标元素（即 .target）上
将目标元素换成 <a> 或者 button 等可点击的元素
将 click 事件委托到非 document 或 body 的父级元素上
给目标元素加一条样式规则 cursor: pointer;

function setLimitBounds() {

map.setLimitBounds(map.getBounds());

}

// 未知高度元素垂直居中

#infoBox[id]{text-align:center; width:100%; height:100%; display:table;}
#info[id]{ display:table-cell; vertical-align:middle;} /

设置文字外发光： text-shadow: 0 0 0.4em #02eee0, 0 0 0.4em #02eee0;

项目配置相关

base：放置一些基本样式的SCSS文件，比如重置样式_normalize.scss，基本样式_base.scss，文本排版样式_typography.scss等
components：放置一些公用组件，比如：按钮_buttons.scss、表单_form.scss、表格_tables.scss、选项卡_tabs.scss等
helps：放置一些辅助功能性文件，比如：_css3.scss、_variables.scss、_mixins.scss、_helpers.scss和_function.scss等
layout：放置一些跟页面布局相关的，比如：_layout.scss、_header.scss、_footer.scss、_sidbar.scss等
pages:放置跟具体项目页面相关的样式文件。
themes：对于一些有前后台页面，或者需换肤的项目，就可以将相关文件放置在这里。
vendors：引用的外部插件或者框架的SCSS文件，比如_bootstrap.scss、_foundation.scss。
style.scss: 这是主样式文件，最终编译，就编译这个问题。当然根据项目大小，可做一些其他处理。比如说针对不同的页面,创建不同的