标签 css 下的文章

background-size 属性规定背景图像的尺寸。
语法：
background-size: length|percentage|cover|contain;
参数说明：

值描述
length设置背景图像的高度和宽度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。
percentage以父元素的百分比来设置背景图像的宽度和高度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。
cover把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。
contain把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。

用菱形制作上箭头

css部分

        *{
            padding: 0;
            margin: 0;
        }
        .box{
            position: relative;
        }
        i{
            position: absolute;
            height: 7px;
            width: 15px;
            overflow: hidden;
        }
        s{
            position: absolute;
            top: 0px;
            font: 400 13px/15px Consolas;
        }

html部分

    <div class="box">
        <i><s>◇</s></i>
    </div>

CSS的盒子层次问题

  • 标准流盒子，低于浮动的盒子，浮动的盒子又低于定位的盒子（除去static），即：定位（除去static）高于浮动，浮动高于标准流。（盒子的高低和占不占位置无关）

  • 通过z-index改变盒子的层次关系

    • 使用前提：必须有定位（除去static）。
    • 给定z-index的值为层级的值（不给默认为0）
    • auto 默认。堆叠顺序与父元素相等。
    • number 设置元素的堆叠顺序。
    • inherit 规定应该从父元素继承 z-index 属性的值。

注意

  • 层级为0的盒子，也比标准流和浮动高。
  • 层级为负数的盒子，比标准流和浮动低。
  • 层级不取小数。
  • 层级一样，后面的盒子比前面的层级高。
  • 浮动或者标准流的盒子，后面的盒子比前面的层级高。
  • 定位中：abselute是不占位置的，relative是占位置的。而层级的高低，是和占不占位置没有关系的。

1.盒子需要使用背景图的时候必须用padding，margin不能设置背景。
2.会出现外边距合并或者margin塌陷的时候用padding，上下盒子都使用margin的时候，容易合并。
3.行内元素上下只能设置padding，不能设置margin。
4.看border，如果是a连接，看能不能让字体变色，或者显示小手。
5.根据开发过程中的需求来决定。

css圆角矩形的制作（border-radius）的表示方法

  • border-radius: 宽/高一半；
  • border-radius: 50%；
  • border-radius: 0.2em；
  • border-radius: 100px；
  • border-radius: 左上角 右上角 右下角 左下角。

绘制圆形

.one{
      width: 100px;
      height: 100px;
      background: #C81623;
      border-radius: 50%;
}

绘制小型引导框

.one{
    width: 20px;
    height: 20px;
    background: #C81623;
    border-radius: 50% 50% 50% 0;
}

绘制同心圆

.one{
     width: 100px;
     height: 100px;
     background: #C81623;
     border:20px solid yellow;
     border-radius: 50%;
}

绘制椭圆

 .one{
      width: 200px;
      height: 100px;
      background: #C81623;
      border-radius: 50%;
}

制作网页时，为了美观，常常需要为网页元素设置特殊形状的背景，如下图所示，即为设置了圆角背景的导航。而且每个元素的大小都是不确定的，有内容来决定元素的大小，但是每个元素的边框都是一样的。这就引入看滑动门技术。
20180221085243.png

特点：
1 实用性，能够根据导航条菜单文本长度自动调节宽度；
2 简洁性，它可以用简单背景小图来实现炫彩的导航条风格，大大减少网页载入内容。
3 适用性，可以多层套用，实现双层滑动门炫彩风格，也可以实现网页其他模块的一些特殊效果。

案例：
图片1.png
对于这种两端都为圆角的滑动门效果，一共需要3部分，首先把图片分为3部分：
20180221085621.png20180221085635.png20180221085648.png
两端采用两个div，采用两个圆角图形作为背景，或者直接img引入两张圆角图形，中间div采用平铺背景矩形。
如果有鼠标经过的效果，可以定义a标签，借助span标签，转换成行内块，实现此效果。
html

<div class="left"></div>
<div class="con">测试滑动门技术</div>
<div class="right"></div>

css

 .left{
        width:10px;
        height:100px;
        background-image:url(left.png);
        float:left;
}
.right{
       width:10px;
       height:100px;
       background-image:url(right.png);
       float:left;
}
.con{            
         height:100px;
         background-image:url(con.png);
         background-repeat:repeat-x;
         float:left;
         line-height: 100px;
}

原理：
CSS 精灵其实是将网页中的一些背景图像整合到一张大图中（精灵图）。然而，各个网页元素通常只需要精灵图中不同位置的某个小图，要想精确定位到精灵图中的某个小图，就需要使用CSS的background-image、background-repeat和background-position属性进行背景定位，其中最关键的是使用background-position属性精确地定位。
案例

#home a:hover{background: url('img_navsprites_hover.gif') 0 -45px;}
#prev a:hover{background: url('img_navsprites_hover.gif') -47px -45px;}
#next a:hover{background: url('img_navsprites_hover.gif') -91px -45px;}

CSS的隐藏

  • overflow:hidden; 溢出隐藏 ，超出元素范围的内容会被剪切掉。
  • visibility:hidden; 隐藏元素， 隐藏之后还占据原来的位置。
  • display:none; 隐藏元素， 隐藏之后不占据原来的位置。

  • display:block; 元素可见。
    注意：display:none 和display:block 常配合js使用。

    内容移除

    • 使用text-indent:-5000em;这样可以隐藏文字内容，使内容不显示在网页可见范围内，通常用于SEO优化。值一般不会超过7位，超出7位页面会出现bug。
    • 将元素高度设置为0,使用内边距将盒子撑开，给盒子使用overflow:hidden;将文字隐藏。如果想占据位置，可以通过设置盒子的内边距（padding）来控制。

vertical-align 其实就是垂直对齐的意思。

值描述
baseline默认。元素放置在父元素的基线上。
sub垂直对齐文本的下标。
top把元素的顶端与行中最高元素的顶端对齐
text-top把元素的顶端与父元素字体的顶端对齐
middle把此元素放置在父元素的中部。
bottom把元素的顶端与行中最低的元素的顶端对齐。
text-bottom把元素的底端与父元素字体的底端对齐。
length-
%使用 "line-height" 属性的百分比值来排列此元素。允许使用负值
inherit规定应该从父元素继承 vertical-align 属性的值。

应用：
图片和文字垂直居中对齐

img{vertical-align:middle;}

定位一共有4个方向，left,right,top,bottom;
格式为：先写定位方式，后写方向。

position:absolute;
top:20px;
left:30px;

静态定位

语法：position:static;
默认值：文档流（元素自上而下，自左而右，块元素独占一行，行内元素在一行上显示，碰到父集元素的边框换行）。这是默认的定位方式。

绝对定位

语法：position:absolute;
特点：

  • 元素使用绝对定位之后不占据原来的位置（脱标）。
  • 元素使用绝对定位，位置是从浏览器出发。
  • 嵌套的盒子，父盒子没有使用定位，子盒子绝对定位，子盒子位置是从浏览器出发，如果父盒子使用了定位，子盒子的位置就从父盒子位置出发。
  • 给行内元素使用绝对定位之后，转换为行内块。（不推荐使用此方法转行内块）

相对定位

语法:position: relative;
特点：

  • 使用相对定位，位置从自身所在的位置出发。
  • 元素一走后，还会占据原来的位置，不会有其他元素填补。
  • 父元素相对定位，子元素绝对定位，子元素就会从父元素位置开始计算。（建议使用）

  • 行内元素使用相对定位不能转行内块

    固定定位

    语法：position:fixed;
    特点：

  • 元素使用绝对定位之后不占据原来的位置（脱标）。
  • 元素使用固定定位之后，位置从浏览器出发。
  • 给行内元素使用固定定位之后，转换为行内块。（不推荐使用此方法转行内块）

附录：定位的盒子垂直居中

  • margin:0 auto; 只能让标准流的盒子居中对齐。
  • 定位的盒子居中：先水平移动父元素盒子的一半50%，在向反方向移动子盒子的一半(margin-left:负值。)

注意：

  • left比right，权重高。有left又有right的时候，执行left的值。
  • top比bottom，权重高。有top又有bottom的时候，执行top的值。
  • 定位中，两个定位（static和relative）不能将行内元素转化为行内块,另外两个可以。
  1. 1
  2. 2
  3. 3
  4. 4