zoukankan      html  css  js  c++  java
  • 高质量的css学习笔记

    怪异模式和DTD
    为了确保向后兼容,浏览器厂商发明了标准模式和怪异模式两种方法来解析网页
    在怪异模式中,width 包含padding + border ,在标准模式中 盒子由width 、border、padding组成
    块级元素居中的方法, width + margin-left:auto | margin-right:auto;
    怪异模式与DTD有关。如果漏写dtd,在ie中就会触发怪异模式。

    如何组织css
    应用css的能力分成两部分,使用css的api,会组织css
    组织方法有:按功能划分,布局layout.css,字体的font.css 按区块划分, header.css footer.css
    主体放main.css
    组织css的方法:
    按功能划分 base common page 知道了组织css的方法

    base.css
    提供css reset 功能 和最小的原子类
    它与具体的页面无关,所有风格的都可以引用它。力求精简和通用 。
    下面的例子很好。 例如建房子,base.css打地基(css reset),并提供砖块(原子类),具有高度可移植性。内容很少。

    common.css 提供组件级的css类。它是网站级别的,重复出现在的模块,要保持重用性和灵活性。
    比喻为门窗。 UI组件。

    page.css是页面级别的。 如果网站页面不多,可以放在一个page.css里,用注释标段落。需要有命名规则来避免冲突。

    推荐的base.css
    它具有无视美工设计,适用于任何网站的特点,关系到网站开发的效率和css文件的大小
    得到了一个base.css文件

    css reset 文字排版 定位 长度高度 边距

    css reset 删除浏览器的默认样式。主要是有差异 ul的边距 firefox 是用padding ie 是用marging

    *{ margin:0px;padding:0px} 不好就是在于性能,只需要将常用 的标签写出来。
    有时还喜欢把font-size 和color写进去 div ...p . dl ... { margin:0,padding:0,font-size:12px;color:#000; }
    不好的地方就是它会破坏css的继承性。
    可借鉴一些框架。

    .fl .fr display:inline 解决ie6的双外距问题(浮动的时候)
    .bc 使块级元素居中。 要加上w100才能使用,体现了原子类,只设置一个css规则的概念
    .clearfix 在父元素加clearfix类,解决。
    .zoom zoom:1 ie专有属性,解决些问题

    模块化css 在css中引入面向对象编程思想

    如何划分模块--单一职责。 写样式前,先分模块
    将面向对象的思想引入到css的模块化里。
    从视觉上进行划分 ,样式和功能相对独立且稳定的一部分就可以视为模块。
    模块与模块之间尽量不要包含相同的部分。如果有相同部分,应将它们提取出来。拆分成一个独立的模块。
    模块应当在尽可能少的原则下,做到尽可能简单,以提高重用性。

    css的命名 -- 命名空间的概念
    有意义的英语,驼峰式或分隔线
    不要滥用子选择符,因为会有冲突的危险
    骆驼命名法用于区别不同单词,划线用于表明从属关系
    .timeList-lastItem
    在page层有不同工程师将代码写重复的可能,加前缀可以解决。
    .ysw-timelineList-lastItem
    可以带来好的可读性、避免多人合作的冲突。
    多用组保,少用继续。
    例子很好。在写的时候分多个类来写,单一职责

    如何处理上下margin
    如果不确定模块的上下margin,那么可以用组合的方式来写,并且同时不要使用margin-top 和margin-bottom ,会产生合并的风险。

    css选择器的权重
    标签 1 类名10 id 100
    相同权重时最后定义的优先。

    子选择器定义样式会造成权重过高,不好覆盖样式,难维护。多使用些类名就能解决。

    Css sprite
    为了减少http请求,要不要使用这种技术看网站流量。它的负作用是维护性。
    模向的放一起,纵向的放一起。
    图片翻转时,将背景图作在一张图上。 background-position

    css编码风格
    一行式编码风格 减少文件体积
    尽量使用css,少用id

    Css hack 有三种方法
    条件注释法
    <!--[if IE 6]> if gt IE 6
    <![endif]-->
    选择符前缀法, 样式前缀法 _ie6 * ie6,7

    链接点击后 hover样式不出现问题是因为a事件顺序放置, love-hate link visited hover active

    hasLayout ie的css解析引擎有时会出问题,要手动触发一个hasLayout zoom:1 height:1% position:relative;

    块级元素可以设置width,height 行内元素不能设置
    块级元素margin padding 行内元素 左右的设置没事,,,上下不起作用,只会增加面积

  • 相关阅读:
    BZOJ 2212/BZOJ 3702
    BZOJ 4761 Cow Navigation
    BZOJ 3209 花神的数论题
    BZOJ 4760 Hoof, Paper, Scissors
    BZOJ 3620 似乎在梦中见过的样子
    BZOJ 3940 Censoring
    BZOJ 3942 Censoring
    BZOJ 3571 画框
    BZOJ 1937 最小生成树
    BZOJ 1058 报表统计
  • 原文地址:https://www.cnblogs.com/yushunwu/p/2369008.html
Copyright © 2011-2022 走看看