简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > css盒子及背景色/图
Blogger Information
Blog 42
fans 5
comment 0
visits 38191
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
css盒子及背景色/图
张浩刚
Original
3250 people have browsed it

盒子（margin、border、padding）

margin外边距属性：margin-top; margin-left; margin-right; margin-bottom

margin缩写示例1：margin:10px 15px 10px 15px;（上10，右15，下10，左15）；可缩写为 margin:10px 15px;

margin缩写示例2：margin:10px 15px 20px; 意思为（上10，左右15，下20）；如果父级有长宽，margin:0 auto; 居中显示。

padding内边距属性：padding-left; padding-top; padding-right; padding-bottom

padding缩写示例1：padding:10px 15px 20px 意思为（上10，左右15，下20）；

padding缩写示例2：padding:10px 15px 为上下10，左右15；

注意：

1、margin/padding 两个盒子嵌套时，外盒无边框，内盒与外盒之前的间距最好用父级padding;

2、同级盒子的margin会重叠合并，故以最大的margin值为间距值。

border边框属性：border-left,right,bottom,top；border-width；border-style

示例1：border:1px solid red; 边框为1px的红色实心线；

示例2：border-left:10px dotted blue; 为10xp的蓝色圆点边框

示例3：border-style:solid dotted deshed double; 意思为：上实线，右点状线，下虚线，左双实线

注意：padding/border的宽度会影响盒子的大小，最简单的解决方式在盒子的css样式中加入：box-sizing:border-box;

背景色background-color

background-color:red; 设置背景色为红色 也可以用 如：rbg(225,255,10)

background-clip 设置背景色的应用范围，有三个属性

background-clip:border-box 背景裁切到边框

background-clip:padding-box 背景色裁切到内边距框

background-clip:content-box 背景色裁切到内容边框

线性渐变：background: linear-gradient();

background: linear-gradient(to right, blue, red); 意思为从左往右渐变，蓝到红过度。

上行颜色可任意变动，to right也可以变动  ro left 向左渐变；to left top 向左上渐变；to right bottom 向右下渐变；180deg 意思为180度渐变等！！

background: linear-gradient(green, blue, red, gray); 还可以多色值的渐变

径向渐变：background:radial-greadient()

background:radial-gradient(white, coral, yellow);  太阳色，圆；

background:radial-gradient(100px 150px, green, blue);  设置渐变宽高，只对第一个色有效。

background:radio-gradient(at left top, green, blue); 渐变方向设定，注意时 at , 不是 to .

背景图片background-image

background-image:url(..图片地址..); 背景图片调用方式

background-color: red; 背景色设定

background-repeat: no-repeat; 是否重复 no-repeat 不重复 只显示一次，repeat-x 按x轴重复，repeat-y 沿y轴方向重复；  repeat 默认重复属性

background-size: cover; 设置背景图片大小，cover 完全覆盖背景区域；75px 75px 设置背景图大小为这个；75% 75% 还可设百分比大小等；。。。

background-position: center center; 设置背景图位置；top center 向上居中对齐。。。；100% 50px 百分比 数值等！！！

以上可缩写为：background: red url(......) no-repeat center center;

盒子实例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .box1 {
            width: 400px;
            height: 400px;
            border: 1px solid red;
            background-color: bisque;
            /*设置父盒子与子盒子间距*/
            padding-top: 10px;
            /*与box3的间距*/
            margin-bottom: 15px;
        }

        .box2 {
            width: 200px;
            height: 200px;
            background-color: brown;
            /*居中对齐*/
            margin:0 auto;
        }

        .box3 {
            width: 200px;
            height: 200px;
            background-color: blue;
            /*与box1的间距，塌陷重叠，故与box1间距为30px*/
            margin-top: 30px;
        }
    </style>
</head>

<body>
    <div class="box1">
        <div class="box2"></div>
    </div>
    <div class="box3"></div>
</body>

</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

1.jpg

背景色实例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .box1 {
            box-sizing: border-box;
            width: 200px;
            height: 200px;
            border: 10px dotted red;
            background-color: bisque;
            padding: 20px;
            /*裁切到border边框，还可以设定为border-box/content-box*/
            background-clip: border-box;
            margin-bottom: 15px;
        }

        .box2 {
            width: 200px;
            height: 200px;
            /*线性渐变*/
            background:linear-gradient(to right, blue, green);
            margin-bottom: 15px;
        }
        .box3{
            width: 200px;height: 200px;
            /*径向渐变*/
            background:radial-gradient(at right top,green,red)
        }
    </style>
</head>

<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
</body>

</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

2.jpg

实例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .box1 {
            background-image: url(https://www.php.cn/static/images/index_banner.png?1);
            background-repeat: no-repeat;
            background-position: top center;
            background-size: 100% 100%;
            width: 500px;
            height: 300px;
            margin-bottom: 30px;
        }

        .box2 {
            background:yellow url(https://www.php.cn/static/images/index_yunv.jpg) repeat-y top center;
            width: 300px;
            height: 300px;
        }
    </style>
</head>

<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>

</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

3.jpg

4.jpg

Correction status：qualified

Teacher's comments：手写的好认真, 继续
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！