第八章 其他属性

8.1 background背景

  • 给一个元素设置一个或多个背景图

  • 属性属性值描述
    background-color 单词颜色表示法、rgb、十六进制 设置元素的背景颜色
    background-image url(‘http://www.aaa.com/1.png‘) 给一个元素设置一个或多个背景图像
    background-position top,left,center,百分比，px, 为每一个背景图片设置初始位置
    background-repeat repeat-x\repeat-y\no-repeat/repeat\ 定义背景图像的重复方式。 背景图像可以沿着水平轴，垂直轴，两个轴重复，或者根本不重复。

  • background-position 表示背景图定位初始位置

    • 语法：

    • background-position:x  y;
background-position: position  position

       

    • 取值
    • 关键词：比如top、right、bottom、left和center

长度值：比如px、em

百分值：50%

另外，它的默认值为： 0% 0%。此时背景图像将被定位与内容区域的左上角。

最常用的是值也可以说最了解的值是关键词和长度值，当然百分比也会使用，然而百分比使用最多的是0%、50%和100%。

background-position:top left; /*背景图像在起始位置 跟：background-position: 0 0; 一样。*/
background-position:top right; /*背景图像在右上角*/
background-position:top center; /*背景图像上方居中显示*/

background-position:top left; /*左上角*/
background-position:top center;/*上方居中*/
background-position:top right;/*右上角*/
background-position:center top;/*中间靠左*/
background-position:center center;/*中心显示*/
background-position:center right;/*中间靠右*/
background-position:bottom left;/*左下角*/
background-position:bottom center;/*下方居中*/
background-position:bottom right;/*右下角*/

ackground-position:100% 0%; /*right top*/
background-position:50% 0%; /*top center*/
background-position:50% 50%;/*center center*/
background-position:50% 100%;/*center bottom*/

       

    • 例子
/*设置背景图*/
background-image: url("xiaohua.jpg");
background-repeat: no-repeat;--默认是repeat水平方向和垂直方向都平铺
repeat-x水平方向平铺
repeat-y 垂直方向平铺
no-repeat 不平铺
/*调整背景图的位置*/
background-position: -164px -106px;

8.2 雪碧图

  • CSS雪碧图技术：即CSS Sprite,也有人叫它CSS精灵图，是一种图像拼合技术。该方法是将多个小图标和背景图像合并到一张图片上，然后利用css的背景定位来显示需要显示的图片部分。

  • 使用雪碧图的使用场景

    • 静态图片，不随用户信息的变化而变化

    • 小图片，图片容量比较小(2~3k)

    • 加载量比较大

  • 优点

    • 有效的减少HTTP请求数量

    • 加速内容显示

  • 雪碧图的实现原理

    它通过css的背景属性的backrground-position的来控制雪碧图的显示。

    控制一个层，可显示的区域范围大消息，通过一个窗口，进行背景图的移动。

 

8.3 border

border-radius：值px；值等于宽高的一半是圆，设置圆角或者圆

border-radius可以同时设置1到4个值。如果设置1个值，表示4个圆角都使用这个值。如果设置两个值，表示左上角和右下角使用第一个值，右上角和左下角使用第二个值。如果设置三个值，
表示左上角使用第一个值，右上角和左下角使用第二个值，右下角使用第三个值。如果设置四个值，则依次对应左上角、右上角、右下角、左下角（顺时针顺序）。

border-radius还可以用斜杠设置第二组值。这时，第一组值表示水平半径，第二组值表示垂直半径。第二组值也可以设置1到4个值，应用规则与第二组值相同border-radius:15px 5px / 3px;

单个圆角的设置

border-top-left-radius
border-top-right-radius
border-bottom-right-radius
border-bottom-left-radius
这四个属性都可以同时设置1到2个值。如果设置1个值，表示水平半径与垂直半径相等。如果设置2个值，第一个值表示水平半径，第二个值表示垂直半径。

例题

#实现一个无边框圆
.circle{
    width:200px;
    height:200px;
    brogrund-color:rend;
    border-radius:50%;
}

#实现一个圆环
.circle{
    width:200px;
    height:200px;
    brogrund-color:rend;
    border-radius:50%;
    border:3px solid #fc0107;
}

#制作一个半圆
.circle{
    width:200px;
    height:100px;
    brogrund-color:rend;
    border-top-left-radius:100px;
    border-top-right-radius:100px;
}

 

8.4 阴影

box-shadow: 水平距离 垂直距离 模糊程度 阴影颜色 inset内阴影/outset外阴影默认
doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css阴影</title>
    <style>
        .box{
            width: 200px;
            height: 200px;
            background-color: red;
            box-shadow: 0 0 30px gray;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

 

8.5行内的水平和垂直居中

  • 第一种line-height+text-align

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p{
            width: 200px;
            height: 200px;
            background: #666;
            color:#fff;
            line-height: 200px;
            text-align: center;
        }
    </style>
</head>
<body>
    <p>
        MJJ
    </p>
</body>
</html>
  • 第二种 给父元素设置display:table-cell;,并且设置vertical-align:middle
div{
    position: relative;
    width: 200px;
    height: 200px;
    background: #666;
    color:#fff;
    text-align: center;
    display: table-cell;
    vertical-align: middle;
}

 

8.6 块的水平和垂直居中

  • 方法一：position+margin

  • <style type="text/css"> .father{ width: 200px; height: 200px; background-color: red; position: relative; } .child{ position: absolute; width: 100px; height: 100px; background-color: green; margin: auto; left:0; right: 0; top: 0; bottom: 0; } </style> </head> <body> <div class="father"> <div class="child">我是个居中的盒子</div> </div> </body> </html>
  • 方法二：display:table-cell
<style type="text/css">
        .father{
            width: 200px;
            height: 200px;
            background-color: red;
            display: table-cell;
            vertical-align: middle;
            text-align: center;
        }
        .child{
            width: 100px;
            height: 100px;
            background-color: green;
            display: inline-block;
            vertical-align: middle;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="child">我是个居中的盒子</div>
  • 第三种：纯position
<style type="text/css">
        .father{
            width: 200px;
            height: 200px;
            background-color: red;
            position: relative;
        }
        .child{
            width: 100px;
            height: 100px;
            background-color: green;
            position: absolute;
            left: 50%;
            top: 50%;
            margin-left: -50px;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="child">我是个居中的盒子</div>
    </div>
</body>
</html>

 

posted @ 2020-04-26 11:46  炜琴清  阅读(138)  评论(0)  编辑  收藏  举报