web前端实习Day5--css3

目录

1.样式初始化

 2.取消ul ol自带的序号

3.text开头的属性

4.overflow属性

 5.设置透明度：opacity & rgba

6.css隐藏占位

7.精灵图 

8.标准文档流

9. 浮动

1.样式初始化

页面很多标签自带margin和padding，实际开发中默认取消自带效果

<style>
​
    p,h1...h6,body,html,ul,ol,form{
 
        margin:0;
 
        padding:0
 
    }
 
    /*平时偷懒：*/
 
    *{
 
        margin:0;
 
        padding:0
 
    }
</style>
 
​复制

 2.取消ul ol自带的序号

<style>
    ol{
            list-style: none;
        }
        ul{
            width: 50%;
            margin: 0 auto;
        }
</style>复制

/* 行内块和文本之间无法对齐 使用以下属性 */
    vertical-align: 3px;
    margin-right: 5px;
/* 圆角边框 */
    border-radius: 4px;复制

3.text开头的属性

4.overflow属性

当前元素内部的内容超出当前盒子时使用

 5.设置透明度：opacity & rgba

<style>
    #box{
        background-color: rgba(0, 255, 0, 0.5);
    }
    #pox{
        opacity: 0.5;
        background-color: rgb(0, 255, 0);
    }
</style>复制

6.css隐藏占位

<style>
    #box{
        width: 400px;
        height: 400px;
        background-color: red;
        /* 不占位 */
        /* display */
        display: none;
        /* 行内块 块级 */
        width: 0;
        height: 0;
        overflow: hidden;
        /* 占位 */
        /* opacity属性 */
        opacity: 0;
        /* visibility属性 */
        visibility: hidden;
        /* margin属性 */
        margin-left: -1000px; 
    }
</style>复制

7.精灵图 

css Sprite(css精灵图)：又叫雪碧图，把多张小图片放到一张大图上面，减少向服务器发起请求的次数，提高代码运行速度。

通过 background-image 和 background-position 再加上元素的宽高来实现的

<style>
    span{
        display: inline-block;
        margin-right: 10px;
        width: 110px;
        height: 120px;
        background: url(./images/abcd.jpg) no-repeat;
    }
    .s{
        background-position: -257px -408px;
    }
    .u{
        background-position: -477px -408px;
    }
</style>
 
<span class="s"></span>
<span class="u"></span><br>复制

8.标准文档流

标准的情况下，文档的流向：

        在不进行任何修改的前提下，块级元素默认的排列方向：从上到下，行内和行内块元素的排列方向：从左到右

9. 浮动

float:left right none(不浮动默认值)

元素设置浮动，能够让当前元素脱离标准文档流（脱标），如：块级元素设置浮动后，可以放在一行显示，设置浮动的元素相当于具有了行内块的效果

左浮动：元素往左排列        右浮动：元素往右排列

浮动元素的特点：

1 浮动影响后面的元素

        浮动的元素脱标了，不再占有原来的位置，所以会对后面的元素造成影响

2 浮动找浮动 不浮动找不浮动

        浮动元素脱标，在上面的“图层”，不浮动的元素不脱标，还在下面的“图层”

        若两个元素都浮动了，还是遵循之前的规则

3 浮动以元素顶部为基准 无法超出父元素

让块级元素在一行显示，块级元素脱标

浮动可以实现模式转换

浮动带来的影响：

1 对后面的文字产生影响：

        给图片添加浮动，出现文字绕图效果

2.对父元素带来的影响：

        若父元素没有设置高度，由子元素撑开，子元素浮动，会导致父元素高度为0

        要想清除浮动带来的影响，可以在父元素中添加 overflow: hidden;