Please enable Javascript to view the contents

CSS入门系列之三

 ·  ☕ 6 分钟

块元素及内联元素特性

块级元素

块级元素：就算没有内容，通过设置高宽也会占据页面

内联元素

内联元素（行内元素）：如果没有内容，就算指定高宽都不会显示，宽高由内容撑开。

  • 高宽由内容撑开
  • 不之处宽高
  • 一行上可以显示多个内联元素
  • 不支持上下的margin（支持左右的margin）
  • 代码换行被解析。（内联元素之间存在可被选中的空格，这在某些情况会带来问题）

解决行内元素存在间隙的bug问题 - 简书

当行内元素之间有"回车"、“tab”、“空格"时就会出现间隙。

inline-block

应用场景：有时我们在划分一个布局时喜欢用div来划分其上下左右的位置，但是 div是一个块元素，无法在同一行显示多个div。可能我们会想到使用display:inline将其转换微内联显示；但是这样一来又不能设置宽高；这时可以利用 display:inline-block 来设置，使得其既可以内联显示又可以设置高宽。

inline-block 内联块：既能用于内联元素也能用于块元素。

使得内联元素或者块元素，既能在一行显示又能设置宽高。

特征：

  • 块元素能在一行上显示
  • 内联元素支持设置宽高
  • 没有宽度时内容撑开宽高

选择器的特殊性问题和chrome的使用

这里涉及到选择器特殊性问题和chrome中的查看技巧

1
2
3
4
5
6
7

<div class="pageBox">
    <a class="pageBtn" href="">上一页</a>
    <a href="">1</a>
    <a href="">2</a>
    <a href="">3</a>
    <a class="pageBtn" href="">下一页</a>
</div>

相应的选择器

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

.pageBox a{
    width: 17px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    font: 14px "宋体";
    display: inline-block;
    border: 1px solid #c0c1e2;
}

.pageBtn{
    width: 64px;
    height: 20px;
}

由于 .pageBox a{}的特殊性比.pageBtn{}高，所以下图中显示.pageBtn{}中的高度为无效，并且它的位置也排在下面。

查看方式是：先在Elements中选中元素，然后就会在 Styles中看到该元素相关的样式。

更改了代码后，.pageBtn{}的特殊性比a{}的高，在下图中.pageBtn{}的位置排在上面，而a{}中的高宽失效。

浮动

**浮动的定义：**使元素脱离文档流，按照指定方向发生移动，遇到父级边界或者相邻的浮动元素便停下。

浮动的特征：

  • 块元素在一排显示
  • 内联支持宽高
  • 默认内容撑开宽度 （前三条和 inline-block 一样）
  • 脱离文档流
  • 提升层级的半层

使用浮动布局的优势：

布局时使用 inline-block 可能会存在 垂直对齐 和 内联(行内)元素 代码换行被解析的问题；如果使用浮动则可以不用考虑这些问题。

清除浮动

**清除浮动：**使该元素的某个方向上不能有浮动元素

如果对某个元素(该元素自身没有浮动)使用该属性,该元素和它后面的元素就会显示在浮动元素的下面。

示例：item浮动，导致box无法包裹item。

1
2
3
4
5
6

<div class="box">
    <!-- item 将会设置为浮动 -->
    <div class="item">
        
    </div>
</div>

清除浮动的方法:

  1. 给父级加高度 (扩展性不好)

  2. 给父级加浮动 (那么父级的父级呢？这样页面中所有元素都加浮动，margin左右自动失效（floats bad ！）)

  3. 给父级添加.inline-block 清浮动方法 (缺点：margin左右auto失效)

  4. 添加 div空标签清除浮动 (缺点：IE6 最小高度 19px；（解决后IE6下还有2px偏差）)

    1
2
3
4
5
6
7

    <style>
    .clearfix{clear:both;}
</style>
<div class="box">
    <div class="item"></div>
    <div class="clearfix"></div>
</div>

  5. br 清浮动，同样在item下添加<br clear="all"> (不符合工作中：结构、样式、行为，三者分离的要求)

  6. after伪类，清除浮动（现在主流方法，无任何副作用）

  7. 使用overflow清除浮动（存在副作用）

由方法4，5可知，div和br都是块元素，这样我们可以通过为伪类设置display属性为block也可达到这种效果。

伪类和伪元素

伪类

示例：

1
2
3
4
5
6
7
8

<ul>
    <li>11</li>
    <li>12</li>
</ul>
<ul>
    <li>21</li>
    <li>22</li>
</ul>

1
2
3
4

/* 伪类：单冒号 */
li:first-child{
    color:red;
}

该选择器会选择作为父元素的第一个子元素的li元素，这里会同时让11和21显示为红色，也就是会选择到多个元素，这就是伪类的特性。

伪元素

示例：使用::first-letter或者::first-line选择元素的第一个字母或者第一行。

伪元素与伪类的区别：

  • 伪类选择的是一组元素，而伪元素选择的是元素的一部分内容
  • 伪元素是HTML中并不存在的元素。比如并不存在第一个字母这样的一个元素。
  • 伪类应用与一组HTML元素，而你无需在HTML代码中用类标记他们。

建议使用css3中的语法，既伪类前面只带一个冒号，而伪元素前面是两个冒号。

after伪类，overflow

:after 选择器在被选元素的内容后面插入内容。

请使用 content 属性来指定要插入的内容。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

<style>
    div:after{
        /* content 内容 */
        content: "- 这是由after伪类为各元素追加的内容"
    }
</style>
<body>
    <div>
    </div>
</body>

CSS :after 选择器

BFC和haslayout：只要触发了BFC或者haslayout，那么该区域就是一个独立的渲染区域，它将不受外界影响。

BFC（block formatting context ：块级元素格式化上下文）适用：标准浏览器。只要下面的某个值满足所给条件就可触发BFC。

  • float的值不是none
  • overflow的值不为visible
  • display的值是table-cell，table-caption，inline-block中的任何一个
  • position的值不为relative和static
  • width | height | min-width | min-height:!aotu

haslayout： IE浏览器特有 （IE6 、IE7；IE8属于半标准浏览器）它的的触发模式：

  • writing-mode:tb-rl
  • -ms-writing-mode:tb-rl
  • zoom:(!normal)

定位

相对定位

position:relative; 相对定位：

  • 不影响元素本身的特性；
  • 不使元素脱离文档流（元素移动之后原始位置会被保留）；
  • 如果没有定位偏移量，对元素本身没有任何影响； 提升层级定位元素位置控制

定位元素的位置控制：

top/right/bottom/left 定位元素某方向的偏移量。该偏移量的值表示从它的自然位置偏移的距离。

1
2
3
4
5
6
7
8

.div2{
    /*margin-top: 200px;
    margin-left: 200px;*/
    position: relative;
    left:200px;
    top:200px;
    background-color: blue;
}

绝对定位

position:absolute; 绝对定位：

  1. 使元素完全脱离文档流；
  2. 使内嵌支持宽高；
  3. 块属性标签内容撑开宽度；
  4. 如果有定位父级相对于定位父级发生偏移，没有定位父级相对于document发生偏移；
  5. 相对定位一般都是配合绝对定位元素使用；(这是结合第4条一起使用，即为父元素设置一个相对偏移量为0的相对定位，这样子就可以为子元素设置相对于父元素发生偏移的绝对定位)
  6. 提升层级

上面第4，5条结合使用，那么第1条和第6条结合就会使得元素脱离文档并遮盖其它元素。

定位元素的位置控制：

top/right/bottom/left 定位元素某方向的偏移量。该偏移量的值表示相对于其祖先元素偏移的距离或者相对于body偏移的距离。

z-index:[number]； 定位层级

  • 定位元素默认后者层级高于前者；
  • 建议在兄弟标签之间比较层级z-index:[number]; 定位层级

固定定位

position:fixed; 固定定位：

与绝对定位的特性基本一致，的差别是始终相对整个文档进行定位；

问题：IE6不支持固定定位。

定位与浮动

position:absolute; 绝对定位元素子级的浮动可以不用写清浮动方法；

position:fixed; 固定定位元素子级的浮动可以不用写清浮动方法；（IE6不兼容）

您的鼓励是我最大的动力
alipay QR Code
Felix
作者
Felix
如无必要，勿增实体。

相关内容

3

目录