CSS 相关记录

Judian_xd
138 阅读2分钟

通常处理

文字添加渐变效果

background:linear-gradient(to right,#f00,#fa0);
-webkit-background-clip: text;
color: transparent;

上下margin重合问题

在重合元素外包裹一层容器，并触发该容器生成一个BFC。

<div class="aside"></div>
<div class="text">
    <div class="main"></div>
</div>

.aside {
    margin-bottom: 100px;  
    width: 100px;
    height: 150px;
    background: #f66;
}
.main {
    margin-top: 100px;
    height: 200px;
    background: #fcc;
}
.text{
    /*盒子main的外面包一个div，
    通过改变此div的属性使两个盒子分属于两个不同的BFC，以此来阻止margin重叠*/
    overflow: hidden;  //此时已经触发了BFC属性。
}

浮动元素、绝对定位元素，'display' 特性为 "inline-block"，"table-cell"， "table-caption" 的元素，'overflow' 不是 "visible" 的元素，会创建新的 BFC(Block formatting contexts)。

简单来说，BFC就是一个独立不干扰外界也不受外界干扰的盒子啊

清楚浮动方式

  • 父级div定义height
  • 最后一个浮动元素后加空div标签 并添加样式clear:both。
  • 包含浮动元素的父标签添加样式overflow为hidden或auto。
  • 父级div定义zoom

媒体查询

  • head link方式

<head>
    <link rel=”stylesheet” type=”text/css” href=”xxx.css” 
        media=”only screen and (max-device-width:480px)”>
...

  • css方式

@media only screen and (max-device-width:480px) {
    ...
}

line-height

行高是指一行文字的高度，具体说是两行文字间基线的距离。CSS中起高度作用的是height和line-height，没有定义height属性，最终其表现作用一定是line-height。

  • 单行文本垂直居中：把line-height值设置为height一样大小的值可以实现单行文字的垂直居中，其实也可以把height删除。
  • 多行文本垂直居中：需要设置display属性为inline-block。

Chrome支持小于12px 的文字

p {
    font-size:10px;
    -webkit-transform:scale(0.8); //0.8是缩放比例
}

CSS3新特性

  • RGBA和透明度
  • background-image background-origin(content-box/padding-box/border-box) background-size background-repeat
  • word-wrap（对长的不可分割单词换行）word-wrap：break-word
  • 文字阴影：text-shadow： 5px 5px 5px #FF0000;（水平阴影，垂直阴影，模糊距离，阴影颜色）
  • font-face属性：定义自己的字体
  • 圆角（边框半径）：border-radius 属性用于创建圆角
  • 边框图片：border-image: url(border.png) 30 30 round
  • 盒阴影：box-shadow: 10px 10px 5px #888888
  • 媒体查询：定义两套css，当浏览器的尺寸变化时会采用不同的属性
avatar
文章
阅读
粉丝