Hibop.github.io icon indicating copy to clipboard operation
Hibop.github.io copied to clipboard
verified publisher icon Hibop

关于css进阶——布局和BFC

Open Hibop opened this issue 7 years ago • 0 comments

display的几个常用的属性值，inline ， block， inline-block

  • inline:
    • 使元素变成行内元素，拥有行内元素的特性，即可以与其他行内元素共享一行，不会独占一行；
    • height，width设置无效，大小由内容撑开（可以撑开内容的padding、font-size、line-leight）；
    • padding有效，margin的left和right产生边距效果，但是top和bottom就不行；
  • block:
    • 使元素变成块级元素，独占一行，在不设置自己的宽度的情况下，块级元素会默认填满父级元素的宽度；
    • 能够改变元素的height，width的值；
    • 可以设置padding，margin的各个属性值，top，left，bottom，right都能够产生边距效果；
  • ** inline-block:**
    • 不独占一行的块级元素。

css中的百分比

  • width & height： 参照都是元素的包含块（Containing Block，详情）。width参照包含块的宽度，height参照包含块的高度。在大部分情况下，包含块就是父元素的内容区（盒模型里的content）。 直接父元素（包含块）是否有明确的高度定义，会影响height为百分比值时的结果。这就是为什么在之前的固定页脚一文中，有html, body{height:100%;}这样的写法。

  • margin & padding：对于margin和padding，其任意方向的百分比值，参照都是包含块的宽度。

  • border-radius： 为一个元素的border-radius定义的百分比值，参照物是这个元素自身的尺寸。

  • background-position：background-position的百分比值，取的参照是一个减法计算值，由放置背景图的区域尺寸，减去背景图的尺寸得到，可以为负值。

  • font-size： 参照是直接父元素的font-size。例如，一个元素的直接父元素的font-size是14px，无论这个是直接定义的，还是继承得到的，当该元素定义font-size:100%;，获得的效果就是font-size:14px;。

  • line-height： 参照是元素自身的font-size。例如，一个元素的font-size是12px，那么line-height:150%;的效果是line-height:18px;。

  • vertical-align： 参照是元素自身的line-height（和前面很有关联吧，所以我排在了这里）。例如，一个元素的line-height是30px，则vertical-align:10%;的效果是vertical-align:3px;。 对这个属性我还想说，尽管vertical-align可以使用数字，百分比值，但浏览器兼容性差异较大，在跨浏览器实现时可能需要较多hack。因此，我个人倾向于使用middle等相对来说兼容性差异较小的关键字类型的值。

  • 定位用的bottom、left、right、top： 参照是元素的包含块。left和right是参照包含块的宽度，bottom和top是参照包含块的高度。

  • transform: translate： 平移变换，在水平方向和垂直方向上也可以使用百分比，其参照是变换的边界框的尺寸（等于这个元素自己的border-box尺寸）。例如，一个宽度为150px，高度为100px的元素，定义transform:translate(50%, 50%)的效果是transform:translate(75px, 50px)。 还可以补充一点，translate3d对应是还有第三个维度的，但是，经过测试，最后的第3个值不可以使用百分比（否则样式定义无效）。

注意事项：当百分比值用于可继承属性时，只有结合参照值计算后的绝对值会被继承，而不是百分比值本身。

css隐藏元素的方法

    1. display: none;
    1. visibility: hidden;
    • 占位， 一般可以和position: abosute结合使用
    • 绑定上面是事件不会触发
    1. opacity: 0
    • 占位， 一般可以和position: abosute结合使用
    • **绑定上面是事件会触发 **
    • opacity会自动继承，写mask弹窗的时候有坑。此时我们可以使用 background: rgba( r, g, b, 0.8) 两个应用的例子

  1. 在passsword选择浏览器记住密码后， 后面页面得input框会自动填充，此时可以设置一个空的input放在这个有用的input之前 //此处必须使用opacity而不能用display或者visibility <input type="text" onClick...>

  2. input-file控件，重写定制化内置btn样式；

    .file {
      position:absolute;
      right:0;
      top:0;
      _zoom:30;
      font-size:300px\9;
      height:100%;
      _height:auto;
      opacity:0;
      filter:alpha(opacity=0);
      -ms-filter:"alpha(opacity=0)";
      cursor:pointer;
    }
    1. 什么widh: 0/height: 0
    1. 文字font-size:0; [可以hack display: inline-block; margin问题]
    1. 文字color: transparent;
    1. 文字text-indent： -99999999px;
    1. z-index: -999999999
    1. position: absolute left: -999999px；
    1. margin: -99899px
  • 11 transform: translate(-9999999px) skew(90deg) scale(0)

css选择符的命名规则及规范：

css语法对于命名字符有更多的规定。以下是W3C关于命名标识符的说明中的内容：

In CSS, identifiers (including element names, classes, and IDs in selectors) can contain only the characters [a-zA-Z0-9] and ISO 10646 characters U+00A0 and higher, plus the hyphen (-) and the underscore (_); they cannot start with a digit, two hyphens, or a hyphen followed by a digit. Identifiers can also contain escaped characters and any ISO 10646 character as a numeric code.

意思是说，css中允许使用的命名字符，包括大小写英文字母、数字、连字符-、下划线_及其他ISO 10646字符集（等同于Unicode）中的字符。同时，起始字符部分不能是数字，或连续2个-，或1个-后接1个数字。此外，允许使用转义字符和任意ISO 10646字符的数字代码。

可以看出，命名允许使用的字符其实是非常多的。但是，有一个地方需要注意，就是特殊字符。特殊字符是指在css语法中，被认定用来表示特定含义的字符（相当于编程语言中的关键字）。例如，...这样的class命名是不合法的，因为.是css选择符中表示class的字符，因此不允许直接用在命名中（...这位沉默着的class名你感觉如何？）。

css中的特殊字符包含：!, ", #, $, %, &, ', (, ), *, +, ,, -, ., /, :, ;, <, =, >, ?, @, [, , ], ^,`, {, |, }, 和~。

这个时候，想要在命名中也加入这些特殊字符，就要使用字符转义（character escape）。字符转义通过反斜杠\实现，在css选择符中，你可以通过在特殊字符前加\的方法，取消特殊字符的特定含义，使其可以正确地被用于命名。

经过测试，IE6对起始字符是下划线_和单个连字符-的情况，也会认定样式规则无效。 eg:

<div class="^_^"></div>  合法
<div class="♫">music on~</div> 合法
.3-column 不合法

一套css书写规范：

rscss和rsjs是一套比较小巧的前端开发规则和约定，其中rs代表Reasonable System。

rscss希望有效地改善写css中的这样几个常见问题（css哲学三问）：

  • 这个class到底什么意思？
  • 这个class还有地方用到吗？
  • 我新写的这个class，会有冲突吗？

主要要点：

  • 组件至少使用两个单词命名 ===> 建议 kd-dashboard(公司名缩写+模块)
  • 组件内元素使用一个单词，使用子选择符 > 而不是包含选择符 嵌套关联；
  • 属性或状态（Variants，也可以叫变体： 使用短横线（-）；
  • 布局： 推荐除一些具有固定宽高的特定元素（如头像，logo）外， 组件本身不定义任何影响布局位置的属性：
    • 定位（position、top、left、right、bottom）
    • 浮动（float、clear）
    • 外边距（margin）
    • 尺寸（width、height）
  • js操作相关： 加js-；
  • rscss推荐辅助类（Helpers）单独存放一个文件，且class名以下划线（_）开头。辅助类也常会用到!important，对应的，应尽可能少使用辅助类。 image

SMACSS认为css有5个类别：

  • Base基础样式reset等
  • Layout（Major Components）布局样式 .l-
  • Module（Minor Components）模块组件样式
  • State 状态样式 .is-
  • Theme 主题样式 .theme

Hibop avatar Jun 20 '18 04:06 Hibop