登录 用户中心() [退出] 后台管理 注册
   
您的位置: 首页 >> CLQ工作室开源代码 >> 主题: 我们常用的 CSS     [回主站]     [分站链接]
标题
我们常用的 CSS
clq
浏览(0) + 2019-11-21 13:16:36 发表 编辑

关键字:

[2020-11-17 18:34:52 最后更新]
我们常用的 CSS

我们作为老派程序员出身其实对于现在 web 优先的环境是很不适应的,笔者亦是经过多年积累后才窥其门径。收集了一些简单常用的 CSS 方便自己也方便大家。和其他 CSS 教程非常不同,不单单要说效果还要说原理,同时又不能太过官方,很多方式其实更像约定并不是 CSS 官方的。实际上很多 CSS 的使用方法与官方期待相去甚远。

1.div 中设置 "overflow: hidden;"
作用其实是让 div 自动拉伸高度以适应子控件(元素)。官方的原始意图其实并不是这个,具体大家自行百度吧。这个设置是一定要有的否则会出现不可思议的页面效果。以后大家精通了可以再给出不同的 overflow 值,不过一般情况下如此即可。

2.div 中设置 "box-sizing: border-box;"
作用是忽略掉 div 等元素计算边框、间距时的差异。这个问题造成的原因就很久远了,大家仍然可以自己百度,精通后也可以设置其他值。不过一般情况下这样设置很方便。

3.div 中设置 "word-break: break-all;"
作用是让 div 等元素中的文字内容折行。否则您会觉得为啥网页中的折行和你想象中的不一样:不是英文无法折行就是内容无法全部显示。同样的,精通后可以尝试其他的值。

4.不要用整体皮肤型的 css 库(例如 bootstrap 这些)
宁可自己累一点自己写,相信我,这样最后维护更轻松。

5.手机自适应页面并不难,在 html 开头使用如下的代码即可
--------------------------------------------------------
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width,
                                     initial-scale=1.0,
                                     maximum-scale=1.0,
                                     user-scalable=no">
<head>
--------------------------------------------------------
这是笔者学习 bootstrap  过程中总结归纳出来的一段好用的代码,同样的详情大家可以自行百度。也从一个侧面说明了 css 整体库虽然最好不要用,不过研究学习还是非常好的。

6.display:inline-block元素之间会有空隙
解决办法是合写成一行,或者加上下注释.
例如:
<div class="example">
    <span>inline-block之间存在空隙</span><!--
    --><span>inline-block之间存在空隙</span>
</div>



7.使用新的 flex 语法使某个div里面的子元素水平垂直居中
这个是 css3 中的弹性布局才有的功能,flex 语法过于复杂,但传统上用来实现此功能的方法都有缺陷,所以现在这个方式很流行。
只用于这一功能的语法倒也简单,父节点上设置以下三个属性即可:

display: flex;
display: -webkit-flex;
align-items:center;
justify-content:center;

8.div左边固定右边自适应
方法很多,我们使用 BFC 原理,让左边 float:left 右边 overflow: hidden 或 overflow: auto
之所以没有用 flex,是因为这样可以很方便的做到手机宽度布局自适应。右边的 div 能在宽度不足够时自动排到下一行。
也许以后会有更好的方法,不用如此取巧。

9.已经有静态页面内容的不要使用 document.write(s) 动态添加内容,可以使用 jquery ,熟悉后不想用 jquery 的话可以自己再研究原生方法。
例如:
if (null == _parent)
$(document.body).append(s); //不能用 document.write(s); 那样会清空整个 html 因为文档流已经结束了
else $("#" + _parent.name).append(s);

10.元素绝对定位 position: absolute 在普通 html 里很容易让人以为它是相对于整个 html 的位置进行定位的。但实际上它是相对定位!
只不过这个上一级并不一定是上层父节点,而是上一个 absolute/relative/fixed/inherit 节点
//所以这里是不需要再进行偏移了的,除非父节点是 position:static
//static 为 position 默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。
就因为一般的元素是 static ,所以对于普通 html 来说就是相对于整个 html 页面的绝对定位了。
所以我们使用 position: absolute 时最好将其父节点设置为 position:relative ,这样就可以在不改变父元素的情况下使用清晰的相对定位。
当然如果父节点已经是 position: absolute 了,那就不要改了。
参考 https://www.w3school.com.cn/cssref/pr_class_position.asp

11.js 的全局变量的定义位置很重要,这与 C++ 写在哪里都一样是不同的。一定要在第一次调用之前就定义好。

SkinButton(...; //1 这里调用时 gButtonList 还没初始化。所以 gButtonList 应该放在更上面的代码中。
//按钮的 skin
var gButtonList = null; //全局变量要放在第一次调用 SkinButton 之前,这和 c++ 这样的传统语言是非常不一样的
function SkinButton(panel, caption)
{
...

SkinButton(...; //2 这里调用时 gButtonList 就是正确初始化的了。


上面的示例中,如果 gButtonList 定义在那个位置,那么在 SkinButton 调用时有可能 gButtonList 还没初始化 -- 比如在 SkinButton 函数定义代码之前调用了的话。

12.一般情况下手机的浏览器也是 webkit 基本上 ie6 不支持的那些特性它都可以支持,或者说 cef2623 版本的特性都支持,但也有特殊。这条要说的就是:
iframe 在手机浏览器下居然是不能滚动的!处理方法是再加两个 css
$("#" + _this_control.clientPanel.name).css("-webkit-overflow-scrolling", "touch");
//$("#" + _this_control.clientPanel.name).css("overflow-y", "scroll");
$("#" + _this_control.clientPanel.name).css("overflow-y", "auto");

估计以后浏览器的发展有大概率会有更改,不过目前的方法就是如此。
参考 http://newbt.net/ms/vdisk/show_bbs.php?id=DBC4DED6C4F8F41A24561A270DCCE0FB&pid=160

13.又是关于 iframe 的。目前网上很多根据 html 内容撑开 iframe 失败的原因其实是跨域名安全限制造成的。感觉 iframe 这种形式浏览器一直想取消掉它,只是有些地方又不得不用而已。
错误提示大概类似于:
Uncaught DOMException: Blocked a frame with origin "null" from accessing a cross-origin frame.

14.要给 100% 高度的 iframe(其他高度的最好也如此)加两个属性:display:block; box-sizing: border-box;
这是因为 iframe 默认的 display 属性值为 inline ,这会把外层的 div 多撑开 4 px 左右的高度。除非 html 文档没有 <!DOCTYPE html> 标记。
参考 http://newbt.net/ms/vdisk/show_bbs.php?id=67B5EEA2BF98395B06E8ABDE110039A8&pid=160

15.jquery 只能得到页面大小改变的事件,无法得到 div 的。
//$("#" + gHisForm.name).resize( //jquery 的 resize 对 div 无效
$(window).resize( //这个可以多次执行
function() {
gHisForm.OnSize();
}
);
其实 ie 倒是支持。参考 http://newbt.net/ms/vdisk/show_bbs.php?id=701A552AD6FE73A35178679D2456B549&pid=160

16.跨域比想象的复杂很多,另开主题详见
http://newbt.net/ms/vdisk/show_bbs.php?id=81E4ACE5F5898543534A7C88C8090573&pid=164

17.dom 节点的提示 hint 原生为设置属性 title 即可
奇怪的时,现在搜索会看到很多第三方 css 实现,不知是否原生的有缺陷。其实原生的 dom.title = "hint" 即可。
如果是 html 的话则是
<img src="#" title="hint" /> 这样。

18.判断一个变量是否是 jquery 可用
function is_jquery(obj)
{
//https://www.cnblogs.com/conis/archive/2010/03/20/1720385.html

//var obj = $("body");
if(obj instanceof jQuery){
//alert("这是一个jQuery对象");
return true;
}else{
//alert("这是一个其它对象")
return false;
}
}//
原理参考 http://newbt.net/ms/vdisk/show_bbs.php?id=6FD57C050A819F2166B334DB12969CB0&pid=160

19.css 中的top height 属性不用时一定要设置为 auto
参考本站文章 “[目录未定]模拟器 css 中的一个超级大坑 -- top height 属性不用时一定要设置为 auto”
主要是安卓模拟器的问题。
http://newbt.net/ms/vdisk/show_bbs.php?id=F2A98091B4CB1ABAF5172742DBE99FB7&pid=160



总数:0 页次:1/0 首页 尾页  
总数:0 页次:1/0 首页 尾页  


所在合集/目录
常用 css/js 更多
js常用 更多



发表评论:
文本/html模式切换 插入图片 文本/html模式切换


附件:



NEWBT官方QQ群1: 276678893
可求档连环画,漫画;询问文本处理大师等软件使用技巧;求档softhub软件下载及使用技巧.
但不可"开车",严禁国家敏感话题,不可求档涉及版权的文档软件.
验证问题说明申请入群原因即可.

Copyright © 2005-2020 clq, All Rights Reserved
版权所有
桂ICP备15002303号-1