CLQ工作室开源代码 - 我们常用的 CSS - CLQ工作室提供技术支持

您的位置：首页 >> CLQ工作室开源代码 >> 主题: 我们常用的 CSS [回主站] [分站链接]

您的位置：首页 >> CLQ工作室开源代码 >> 主题: 我们常用的 CSS [最新] [回主站]

标题

我们常用的 CSS

clq

浏览(565) + 2019-11-21 13:16:36 发表编辑

关键字:

[2021-01-02 19:04:36 最后更新]
我们常用的 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

20.现在对 textarea 会加了一些新的属性，有时候要去掉才好看。
outline:none; 去掉 chrome 下的焦点边框。resize:none; 去掉可拉伸大小特性。

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