css小结2

发表于

再次认识font

http://www.cnblogs.com/fsjohnhuang/p/4310533.html#a32

  • 盒模型

  • 标准盒模型

外盒模型

元素空间宽度 = content width + padding + border + margin的宽度

元素空间高度 = content height + padding + border + margin的高度

内盒模型

元素宽度 = content width + padding + border的宽度

元素高度 = content height + padding + border的高度

－ IE盒模型 当IE6~8处于怪异模式下就会使用IE盒子模型，否则将使用W3C标准盒子模型。

外盒模型

元素空间宽度 = content width + margin的宽度

元素空间高度 = content height + margin的高度

内盒模型

元素宽度 = content width

元素高度 = content height

－box-sizing IE8+

box-sizing有三个值，默认是content-box（表示元素使用W3C盒子模型），而border-box（表示元素使用IE盒子模型），inherit（从父元素上继承）

－float 浮动 

具有包裹性 本意作用是做文字环绕 float布局只是歪打正着的产物

  • 清除浮动

    使用带clear属性的空元素
使用CSS的overflow属性 给浮动元素的容器添加overflow:hidden;或overflow:auto;可以清除浮动，另外在 IE6 中还需要触发 hasLayout ，例如为父元素设置容器宽高或设置 zoom:1。

在添加overflow属性后，浮动元素又回到了容器层，把容器高度撑起，达到了清理浮动的效果。

－给浮动的元素的容器添加浮动

给浮动元素的容器也添加上浮动属性即可清除内部浮动，但是这样会使其整体浮动，影响布局，不推荐使用。

-使用邻接元素处理 给浮动元素后面的元素添加clear属性。

－使用CSS的:after伪元素 结合 zoom

结合 :after 伪元素（注意这不是伪类，而是伪元素，代表一个元素之后最近的元素）和 IEhack ，可以完美兼容当前主流的各大浏览器，这里的 IEhack 指的是触发 hasLayout。

给浮动元素的容器添加一个clearfix的class，然后给这个class添加一个:after伪元素实现元素末尾添加一个看不见的块元素（Block element）清理浮动。

    .clearfix:after{
      content: "."; 
      display: block; 
      height: 0; <!--line-height:0-->
      clear: both; 
      visibility: hidden;  
      }

    .clearfix {
      /* 触发 hasLayout */ 
      zoom: 1; 
    }
    添加到父级，清除浮动

  • IE hack 有IE就有hack hack主要是针对IE浏览器

    所有 IE{property:value\9;}
大于或等于 IE 8{property:value\0;}
小于或等于 IE 7{*property:value;}
.IE 8/9{property:value\0;}
.IE 9{property:value\9\0;}
.IE 7{+property:value;}
.IE 6{_property:value;}
非 IE{property//:value;}

－ zoom 定义缩放比例。不允许负值 有兼容问题 主要用于IE67浏览器 触发haslayout 达到清除浮动等功能

zoom:1

－ 垂直居中

－ 使用绝对定位垂直居中

flex居中：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        html,body{margin: 0;padding: 0;height: 100%;}
        div{
            display: flex;
            height: 100%;
            justify-content:center;
            align-items:center;
            background: blue;
        }
        h2{
            text-align: center;
            line-height: 100px;
            width: 100px;
            height: 100px;
            border: 2px red solid;
        }

    </style>
</head>
<body>
        <div><h2>默认值</h2></div> 
</body>
</html>

兼容性最好 absolute结合margin 需要知道尺寸

http://www.cnblogs.com/dojo-lzz/p/4419596.html

-自动换行 

word-wrap 是控制换行的

break-word 是将强制换行 

word-break 表明是否断开单词换行 面对长度较长单词

break-all 允许断开单词换行

white-space

pre :空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签

nowrap: 文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止

pre-wrap: 保留空白符序列，但是正常地进行换行

当文本溢出包含元素时发生的事情

  • text-overflow: clip|ellipsis|string;

clip默认值 超出裁剪
ellipsis 超出显示…

－单行文本溢出显示省略号(…)

overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap; 不换行

部分浏览器 需要带上width

－多行文本溢出显示省略号(…) 仅支持webkit内核浏览器 移动端

display: -webkit-box; 将对象作为弹性伸缩盒子模型显示
-webkit-box-orient: vertical; 伸缩盒对象的子元素的排列方式
-webkit-line-clamp: 3; 用来限制在一个块元素显示的文本的行数
overflow: hidden;

利用 after

p{position: relative; line-height: 20px; max-height: 40px;overflow: hidden;}
p::after{content: "..."; position: absolute; bottom: 0; right: 0; padding-left: 40px;

-Opacity属性用来设置一个元素的透明度，取值范围是0~1之间，不可为负值。opacity取值为1是完全不透明，取值为0是完全透明

opacity:0.5;
filter:alpha(opacity=50);/* IE 4+ */  ||

filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=50);  
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";  /*i e 8+*/

－Overflow 

overflow属性有四个值：visible (默认), 

hidden 将所有超出盒子的所有内容都给隐藏掉。

scroll 始终出现滚动条

auto 现代浏览器的默认属性 有超出内容 才有滚动条


overflow-x

overflow-y