04 - CSS3知识点汇总二

本文是针对刚学编程的小白,都是一些基础知识,如果想了解更多深层一点的东西,欢迎移步本人博客!!

博客地址点击跳转

文章中我所提到的快捷键是用的webstrom编辑器,如果你用的不是webstrom的话,那你也改成webstorm吧,初学者还是用这款编辑器比较好

背景相关的所有属性

背景颜色

示例代码 :

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

    <style>
        div{
            width: 200px;
            height: 200px;
        }
        .box1{
            background-color: red;
        }
        .box2{
            background-color: rgb(0,255,0);
        }
        .box3{
            background-color: rgba(0,0,255,1);
        }
        .box4{
            background-color: #0ff;
            opacity: 0.5;
        }
    </style>

背景图片

如何设置背景图片
background-image:url();的属性专门设置背景图片
注意点:

1.图片地址必须放在url中图片的地址可以是本地的也可以是外部链接的
2.如果网页上出现了图片浏览器会再次发送请求获取图片
3.如果图片没有指定的宽高那么大的话那么他会自动拉伸平铺

示例代码 :

<div class="box1"></div>
    <style>
        div{
            width: 400px;
            height: 400px;
        }
        .box1{
            background-image: url(images/girl.jpg);
            /*background-image: url(https://www.baidu.com/img/bd_logo1.png);*/

        }
    </style>

背景平铺

在CSS中有一个background-repeat属性
取值:

**1.repeat:默认在水平和垂直都需要平铺
2.no-repeat:在水平和垂直都不需要平铺
3.repeat-x:水平平铺

4.repeat-y:垂直平铺**

示例代码 :

<div class="box1"></div>
    <style>
        div{
            width: 500px;
            height: 500px;
        }
        .box1{
            background-image: url(images/girl.jpg);
            background-repeat: repeat-x;
        }
        body{
            background-image: url(images/bg2.jpg);
        }
    </style>

背景定位属性

CSS中有个background-position: 0 0;属性专门控制背景图片位置
格式:
background-position: 水平方向垂直方向;
取值

具体的方位名称
1.水平方向:left center right
2.垂直方向:top bottom center
具体的像素
1.background-position: 100px 200px;
2.一定要记住写单位(px) 可以写负值

注意点:
同一个标签可以同时设置背景颜色和背景图片如果同时存在那么图片会覆盖颜色
示例代码 :

<div class="box1"></div>
    <style>
        div{
            width: 500px;
            height: 500px;
        }
        .box1{
            background-color: green;
            background-image: url(images/girl.jpg);
            background-repeat: no-repeat;
            background-position: center top;
            background-position: 100px 200px;
            background-position: -20px -50px;
        }
        body{
            background-repeat: no-repeat;
            background-image: url(images/yxlm.jpg);
            background-position: center 0;
        }
    </style>

背景定位属性

背景的缩写

格式
background：背景颜色背景图片平铺方式关联方式定位方式；
background: green url(images/girl.jpg) no-repeat left bottom;
注意点:
background属性中任何一个属性都可以被省略
什么是背景的关联方式
默认情况下背景图片会随着滚动条的滚动而滚动那么我们就可以修改背景图片和滚动条的关联方式
如何修改背景的关联方式
CSS中有个background-attachment属性来修改关联方式
格式:
background-attachment:fixed;
取值:
fixed: 不会随着滚动而滚动
scroll: 会随着滚动条而滚动
示例代码 :

    <style>
        div{

            width: 500px;
            height: 500px;
            background-color: green;
            background-image: url(images/girl.jpg);
            background-repeat: no-repeat;
            background-position: left bottom;
            background: green url(images/girl.jpg) no-repeat left bottom;
        }
        body{
            background-image: url(images/girl.jpg);
            background-repeat: no-repeat;
            background-attachment:fixed;
        }
    </style>

背景图片和插入图片区别

区别:
1.背景图片仅仅是一个装饰不会占用位置插入图片会占用一个位置
2.背景图片有定位属性很方便的控制图片的位置
3.插入图片没有定位属性控制不了图片的位置
4.插入图片的语义比背景图片的语义要强所以在企业开发中如果你的图片想被搜索引擎收录
示例代码 :

<div class="box1">我是文字</div>
<div class="box2">
    ![](images/girl.jpg)
    我是文字
</div>
    <style>
        div{
            /*width: 150px;*/
            /*height: 170px;*/
            width: 300px;
            height: 300px;
            background-color: red;
        }
        .box1{
            background-image: url(images/girl.jpg);
            background-repeat:no-repeat;
            background-position: right bottom;
        }
    </style>

CSS精灵图

CSS的精灵图是一种合成技术

CSS精灵图的作用

可以减少请求的次数可以降低服务器处理的压力

如果使用CSS精灵图

CSS的精灵图需要配合背景图片和背景定位来使用
示例代码 :

div class="box1"></div>
    <style>
        div{
            width: 86px;
            height: 28px;
            background-image: url(images/weibo.png);
            background-position: -425px -200px;
        }
    </style>

**精灵图**

精灵图

边框属性1

边框就是环绕在标签宽度和高度周围的线条

格式

连写(同时设置四条边的边框)
border:边框的宽度边框的样式边框的颜色;
快捷键:
bd+ border: 1px solid #000;
注意点:

1.连写格式中颜色可以省略默认是黑色
2.连写格式中样式不可以省略省略之后就看不到边框了
3.连写格式中宽度可以省略省略之后还是可以看到
4.连写(分别设置四条边的边框)
**border-top:边框的宽度边框的样式边框的颜色;
border-bottom:边框的宽度边框的样式边框的颜色;
border-left:边框的宽度边框的样式边框的颜色;
border-right:边框的宽度边框的样式边框的颜色;
快捷键:
bt+
br+
bb+
bl+
**

示例代码 :

<div class="box1"></div>
    <style>
        .box1{
            width: 200px;
            height: 200px;
            background-color:red;
            /*border: 5px solid blue;*/
            border-top: 5px solid yellow;
            border-right: 10px dashed green;
            border-bottom: 15px dotted purple;
            border-left: 20px double pink;
        }
    </style>

边框

边框属性2

连写(分别设置四条边的边框)

border-width: 上右下左
border-style: 上右下左
border-color: 上右下左

注意点:

**1.这三个属性的取值是按照顺时针赋值的也就是按照上右下左
2.这三个属性的取值省略时的规律
2.1 上右下左 > 上右下 > 左边的取值和右边的一样
2.2 上右下左 > 上右 > 左边的取值和右边的一样下边的和上边的一样
2.3 上右下左 > 上 > 右下左和上边的一样
**

非连写(方向+样式)

border-top-width:;
border-top-style:;
border-top-color: #000;
以此类推 ..

示例代码 :

<div class="box"></div>
    <style>
        .box{
            width: 300px;
            height: 300px;
            background-color: red;
            /*border-width: 5px 10px 15px 20px;*/
            /*border-style:solid dashed dotted double;*/
            /*border-color: blue green purple pink;*/
            border-top-width:;
            border-top-style:;
            border-top-color: #000;
        }
    </style>

内边距属性

边框和内容之间的距离就是内边距

格式
非连写
padding-top
padding-bottom
padding-right
padding-left
连写
padding:上右下左
这三个属性的取值省略时的规律
2.1 上右下左 > 上右下 > 左边的取值和右边的一样
2.2 上右下左 > 上右 > 左边的取值和右边的一样下边的和上边的一样
2.3 上右下左 > 上 > 右下左和上边的一样
注意点:

1.给标签设置内边之后标签占有的原有宽度和高度会发生变化
2.给标签设置背景颜色内边距也会有背景颜色

外边距属性

标签和标签之间的距离就是外边距

格式
非连写
margin-top:;
margin-right:;
margin-bottom:;
margin-left:;
连写
margin:上右下左;
这三个属性的取值省略时的规律
2.1 上右下左 > 上右下 > 左边的取值和右边的一样
2.2 上右下左 > 上右 > 左边的取值和右边的一样下边的和上边的一样
2.3 上右下左 > 上 > 右下左和上边的一样
注意点:
外边距的那一部分是没有背景颜色的

外边距的合并现象

在默认布局的垂直方向默认情况下外边距是不会叠加的会出现合并现象谁的外边距比较大就显示谁的注意点:在盒子浮动的时候脱离标准流的时候他们的外边距在垂直方向是叠加的
示例代码 :

<span class="hezi1">我是span</span><span class="hezi2">我是span</span>
<div class="box1"></div>
<div class="box2"></div>
    <style>
        span{
            display: inline-block;
            width: 100px;
            height: 100px;
            border: 1px solid black;
        }
        div{
            height: 100px;
            border: 1px solid #000;
        }
        .hezi1{
            margin-right: 50px;

        }
        .hezi2{
            margin-left: 100px;
        }
        .box1{
            margin-bottom:50px;

        }
        .box2{
            margin-top: 100px;
        }
    </style>

盒子模型

盒子只是一个形象的比喻在HTML中所有的标签都是盒子

结论:

在HTML中所有的标签都可以设置
宽度/高度 == 指定可以存放内容区域
内边距 == 填充物
边框 == 手机盒子自己
外边距 == 盒子与盒子之间的间隙

示例代码 :

<span>我是Span</span>
<a href="#">我是超链接</a>
<b>我是加粗</b>
<strong>我是强调</strong>
    <style>
        span,a,b,strong{
            display: inline-block;
            width: 100px;
            height: 100px;
            border: 5px solid #000;
            margin: 20px;
            padding: 20px;
        }
    </style>

盒子模型

盒子模型宽度和高度

内容的宽度和高度

通过标签的width和height属性设置的宽度和高度

元素的宽度和高度

宽度 = 左边的边框+内边距+内容的宽度+右边内边距+右边边框
高度同理可证

元素空间的宽度和高度

宽度 = 左边的外边距+左边框+左内边距+内容的宽度

盒子的box-sizing属性

示例代码 :

<div class="content">
    <div class="aside"></div>
    <div class="article"></div>
</div>
    <style>
        .content{
            width: 300px;
            height: 300px;
            background-color: red;
        }
        .aside{
            width: 100px;
            height: 200px;
            background-color: green;
            float: left;
        }
        .article{
            /*
            1.CSS3中新增了一个box-sizing属性 这个属性可以保证我们给盒子新增padding和border之后 盒子元素的自身宽度和高度不会发生改变
            2.box-sizing属性是如何保证盒子的padding和border之后.盒子元素的宽度和高度不变
            原理还是减去内容的宽度和高度
            3.box-sizing
            3.1 content-box
            元素的宽高 = 边框 + 内边距 + 内容宽高
            3.2 border-box
            元素的宽高 = width属性
            */
            box-sizing: border-box;
            width: 200px;
            height: 200px;
            background-color: blue;
            float: right;
            border: 20px solid #000;
            padding: 20px;
        }

    </style>

盒子居中和内容居中

1.text-align:center;和margin:0 auto;之间的区别
1.1 text-align: center;
作用:设置盒子中存储的文字和图片水平居中
2.margin: 0 auto;
作用:让盒子自己居中
注意点:
2.1 使用margin:0 auto;的盒子必须要width 有明确的width 如果没有的话就通栏了
2.2 只有标准流的盒子才能使用 margin:0 auto; 浮动流和定位流都不能使用

<div class="father">
    我是文字<br>
    ![](images/girl.jpg)
    <div class="son"></div>
    <style>
        .father{
            width: 800px;
            height: 500px;
            background-color: green;
            text-align: center;
        }
        .son{
            width: 100px;
            height: 100px;
            background-color: blue;
            margin: 0 auto;
        }
    </style>

- #### 清空默认边距

1.为什么清空默认边距(外边距和内边距)
在企业开发中为了更好的控制盒子的宽高和计算盒子的宽高所以在开发中编写代码之前第一件事就是清空系统默认的边距
2.格式:

        *{
            margin: 0;
            padding: 0;
        }

3.注意点:
3.1 通配符的选择器会遍历当前界面中所有的标签所以性能不好
3.2 企业开发中可以直接在这个网站中拷贝
http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css

    <style>
        /*
        *{
            margin: 0;
            padding: 0;
        }
        */
        body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{
            margin: 0;
            padding: 0;
        }
        p{
            width: 610px;
            height: 110px;
            background-color: #cdcdcd;
            border: 1px solid #020202;
        }
    </style>

- #### 行高和字号

1.什么是行高
在CSS中所有的行都有它自己的行高
注意点:
行高和盒子的高不是同一个概念
规律:
文字在行高中是默认垂直居中的
在企业开发中我们经常把盒子的高度和文字的行高设置成一样这样可以保证一行文字在盒子的高度中垂直居中简言而之就是要想一行文字在盒子中垂直居中那么只需要设置这行文字的行高即可
在企业开发中如果一个盒子中有多行文字那么我们就不能通过设置盒子高等于行高来实现文字垂直居中只能通过padding来实现居中

    <style>
        /*
        *{
            margin: 0;
            padding: 0;
        }
        */
        body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{
            margin: 0;
            padding: 0;
        }
        p{
            width: 610px;
            height: 110px;
            background-color: #cdcdcd;
            border: 1px solid #020202;
        }
        div{
            box-sizing: border-box;
            width: 100px;
            height: 80px;
            border: 1px solid #000;
            /*line-height: 80px;*/
            line-height: 20px;
            padding-top: 20px;
            padding-bottom: 20px;

        }
    </style>

- #### 还原字体和字号

注意点:
1.在企业开发中如果一个盒子中存储的是文字那么一般情况下我们会以盒子左边的内边距为准因为右边的内边距有误差
2.误差就是当右边的文字和边框之间的距离不够存放一个文字的时候就会自动换行所以导致的误差
3.顶部的内边距并不是从边框到文字顶部的距离而是从边框到行高顶部的距离

    <style>
        body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{
            margin: 0;
            padding: 0;
        }
        p{
            box-sizing: border-box;
            width: 610px;
            height: 110px;
            background-color: #cdcdcd;
            border: 1px solid #020202;
            font-family:"黑体";
            font-size: 20px;
            line-height: 40px;
            color: #67676d;
            padding: 10px;
        }
    </style>

- #### 文章界面

<div>
    <h1>我是标题/<span>New Articles</span>></h1>
    <ul>
        <li>我是第一行,我是第一行</li>
        <li>我是第二行,我是第一行</li>
        <li>我是第三行,我是第一行</li>
        <li>我是第四行,我是第一行</li>
        <li>我是第五行,我是第一行</li>
    </ul>
</div>
    <style>
     body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{
            margin: 0;
            padding: 0;
        }
        body{
            background-color: #efefef;
        }
        div{
            box-sizing: border-box;
            width: 372px;
            height: 232px;
            border: 1px solid #666;
            margin: 0 auto;
            padding: 15px;
        }
        h1{
            font-family:"微软雅黑";
            font-size: 18px;
            border-bottom: 1px solid #666;
            padding-bottom:10px;
        }
        span{
            font-size: 14px;
        }
        ul{
            list-style:none;
            margin-top: 10px;
        }
        ul li{
            line-height:30px;
            border-bottom: 1px dashed #666;
            font-family:"微软雅黑";
            font-size:12px;
            color: #242424;
            padding-left:20px;
        }
    </style>

文章界面

- #### 网页布局方式

1.什么是网页布局方式
就是指浏览器是如何对网页中的元素进行排版的
1.标准流(文档流/普通流)的排版方式
1.1 浏览器默认的排版方式就是标准流
1.2 在CSS中元素分为三类块级/行内/行内块级
1.3 标准流中有两种排版方式垂直(块级标签都是垂直排版)和水平(行内和行内块级都是水平)排版
2.浮动流的排版方式
2.1 浮动流是一种半脱离标准流的排版方式
2.2 浮动流只有一种排版方式就是水平排版只能设置某个元素的左对齐和右对齐
```
注意点:
```

1.没有居中对齐 没有center取值
2.在浮动流中不可以使用margin:0 auto;的 是无效的

```
特点:
```

1.在浮动流中是不区分 块级标签/行内标签/行内块级标签 都可以水平排版
2.在浮动流中无论是块级标签/行内标签/行内块级标签都可以设置宽高
3.综上所述 浮动流中的元素和标准流中的行内块级元素很像\

3.定位流的排版方式

<div class="box1"></div>
<div class="box2"></div>
    <style>
        .box1{
            width: 200px;
            height: 200px;
            background-color: red;
            display: inline-block;
            float: left;
        }
        .box2{
            width: 200px;
            height: 200px;
            background-color: blue;
            display: inline-block;
            float: right;
        }
    </style>

- #### 浮动元素的脱标

1.什么是浮动元素脱标
脱标:脱离标准流
当某个元素浮动之后那这个元素看上去就像被从标准流删除一样这就是浮动元素脱标
2.浮动元素脱标之后会有什么影响
如果前面一个元素浮动了而后面一个元素没有浮动那么这时候前面的一个元素就会盖住后面的一个

<div class="box1"></div>
<div class="box2"></div>
    <style>
        .box1{
            float: left;
            width: 100px;
            height: 100px;
            background-color: red;
        }
        .box2{
            width: 150px;
            height: 150px;
            background-color: blue;
        }
    </style>

脱标的盒子

- #### 浮动元素的排序规则

1.浮动元素的排序规则
1.1 相同方向上的浮动元素先浮动的元素会显示在前面后浮动的元素会显示在后面
1.2 不同方向上的浮动左浮动会找左浮动右浮动会找右浮动
1.3 浮动元素浮动之后的位置由浮动元素浮动之前的标准流的位置来确定

<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
<div class="box4">4</div>
    <style>
        .box1{
            width: 50px;
            height: 50px;
            background-color: red;
            float: left;
        }
        .box2{
            /*float: left;*/
            width: 100px;
            height: 100px;
            background-color: pink;
        }
        .box3{
            float: left;
            width: 150px;
            height: 150px;
            background-color: yellow;
        }
        .box4{
            float: left;
            width: 200px;
            height: 200px;
            background-color: blue;
        }
    </style>

浮动的排序规则

- #### 浮动元素的贴靠现象

<div class="father">
    <div class="box1">1</div>
    <div class="box2">2</div>
    <div class="box3">3</div>
</div>
    <style>
        .father{
            width: 400px;
            height: 400px;
            border: 1px solid #000;
        }
        .box1{
             float: left;
             width: 50px;
             height: 300px;
             background-color: red;
         }
        .box2{
            float: left;
            width: 50px;
            height: 100px;
            background-color: green;
        }
        .box3{
            float: left;
            width: 250px;
            height: 100px;
            background-color: blue;
        }
    </style>

浮动元素的贴靠

- #### 浮动元素字围现象

![](images/picture.jpg)<p>养老金个账空账率超九成 将来兑现或入不敷出养老金个账空账率超九成 将来兑现或入不敷出养老金个账空账率超九成 将来兑现或入不敷出养老金个账空账率超九成 将来兑现或入不敷出养老金个账空账率超九成 将来兑现或入不敷出养老金个账空账率超九成 将来兑现或入不敷出养老金个账空账率超九成 将来兑现或入不敷出养老金个账空账率超九成 将来兑现或入不敷出养老金个账空账率超九成 将来兑现或入不敷出养老金个账空账率超九成 将来兑现或入不敷出养老金个账空账率超九成 将来兑现或入不敷出养老金个账空账率超九成 将来兑现或入不敷出养老金个账空账率超九成 将来兑现或入不敷出养老金个账空账率超九成 将来兑现或入不敷出养老金个账空账率超九成 将来兑现或入不敷出养老金个账空账率超九成 将来兑现或入不敷出养老金个账空账率超九成 将来兑现或入不敷出养老金个</p>
    <style>
        div{
            float: left;
            width: 100px;
            height: 100px;
            border: 1px solid #000;
            background-color: red;
        }
        p{
            width: 500px;
            height: 500px;
            background-color: pink;
        }
        img{
            float: left;
        }
    </style>

自围现象

- #### 浮动练习

<div class="header">
    <div class="logo"></div>
    <div class="language"></div>
    <div class="nav"></div>
</div>
<div class="content">
    <div class="aside"></div>
    <div class="article">
        <div class="articleTop">
            <div class="articleTopLeft">
                <div class="xinwen1"></div>
                <div class="xinwen2"></div>
            </div>
            <div class="articleTopRight"></div>
        </div>
        <div class="articleBottom"></div>
    </div>
</div>
<div class="footer"></div>
    <style>
        body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, dialog, figure, footer, header, hgroup, nav, section{
            margin: 0;
            padding: 0;
        }
        .header{
            width: 980px;
            height: 100px;
            margin: 0 auto;
        }
        .header .logo{
            float: left;
            width: 250px;
            height: 100px;
            background-color: pink;
        }
        .header .language{
            float: right;
            width: 150px;
            height: 50px;
            background-color: skyblue;
        }
        .header .nav{
            float: right;
            width: 650px;
            height: 50px;
            background-color: purple;
        }
        .content{
            width: 980px;
            height: 400px;
            margin: 0 auto;
            margin-top: 10px;
        }
        .content .aside{
            float: left;
            width: 320px;
            height: 400px;
            background-color: yellow;
        }
        .content .article{
            float: right;
            width: 650px;
            height: 400px;
        }
        .content .article .articleTop{
            width: 650px;
            height: 350px;
        }
        .content .article .articleTop .articleTopLeft{
            width: 400px;
            height: 350px;
            float: left;
        }
        .content .article .articleTop .articleTopLeft .xinwen1{
            width: 400px;
            height: 200px;
            background-color: deepskyblue;
        }
        .content .article .articleTop .articleTopLeft .xinwen2{
            width: 400px;
            height: 140px;
            background-color: deeppink;
            margin-top: 10px;
        }
        .content .article .articleTop .articleTopRight{
            width: 240px;
            height: 350px;
            background-color: blueviolet;
            float: right;
        }
        .content .article .articleBottom{
            width: 650px;
            height: 40px;
            background-color: brown;
            margin-top: 10px;
        }
        .footer{
            width: 980px;
            height: 40px;
            background-color: tomato;
            margin: 0 auto;
            margin-top: 10px;
        }
    </style>

浮动练习

书山有路勤为径学海无涯苦作舟

更多精彩内容请点击跳转

最后编辑于：2017.12.06 01:40:58

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 203,456评论 5赞 477
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 85,370评论 2赞 381
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 150,337评论 0赞 337
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 54,583评论 1赞 273
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 63,596评论 5赞 365
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 48,572评论 1赞 281
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 37,936评论 3赞 395
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 36,595评论 0赞 258
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 40,850评论 1赞 297
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 35,601评论 2赞 321
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 37,685评论 1赞 329
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 33,371评论 4赞 318
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 38,951评论 3赞 307
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 29,934评论 0赞 19
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 31,167评论 1赞 259
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 43,636评论 2赞 349
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 42,411评论 2赞 342

04 - CSS3知识点汇总二

本文是针对刚学编程的小白,都是一些基础知识,如果想了解更多深层一点的东西,欢迎移步本人博客!!

博客地址 点击跳转

文章中我所提到的快捷键是用的webstrom编辑器,如果你用的不是webstrom的话,那你也改成webstorm吧,初学者还是用这款编辑器比较好

背景相关的所有属性

背景颜色

背景图片

背景平铺

背景定位属性

背景的缩写

背景图片和插入图片区别

CSS精灵图

CSS的精灵图是一种合成技术

CSS精灵图的作用

如果使用CSS精灵图

边框属性1

边框就是环绕在标签宽度和高度周围的线条

格式

边框属性2

连写(分别设置四条边的边框)

非连写(方向+样式)

内边距属性

边框和内容之间的距离就是内边距

外边距属性

标签和标签之间的距离就是外边距

外边距的合并现象

盒子模型

盒子只是一个形象的比喻 在HTML中所有的标签都是盒子

盒子模型宽度和高度

内容的宽度和高度

元素的宽度和高度

元素空间的宽度和高度

盒子的box-sizing属性

盒子居中和内容居中

书山有路勤为径 学海无涯苦作舟

更多精彩内容 请点击跳转

推荐阅读更多精彩内容

博客地址点击跳转

盒子只是一个形象的比喻在HTML中所有的标签都是盒子

书山有路勤为径学海无涯苦作舟

更多精彩内容请点击跳转