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开头的属性

首行缩进	text-ident
文本修饰	text-decoration	underline	下划线
		line-through	删除线
		over-line	上划线
		none	取消文本修饰
文本横向对齐方式	text-aline	left（默认） \| center \| right	针对行内、行内块文本，在一个有宽度的元素里面，横向的对齐方式

4.overflow属性

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

参数	效果
visible	溢出可见（默认值）
hidden	溢出隐藏
scroll	溢出时可以滚动
auto	只有溢出时才显示滚动效果

5.设置透明度：opacity & rgba

属性	效果	参数
opacity	针对元素透明，当前元素及内部所有内容一起半透明或者透明了	0~1设置元素的透明度 0透明 1不透明
rgba	只针对当前颜色透明	0~1设置元素的透明度 0透明 1不透明

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

6.css隐藏占位

不占位	display:none	实际开发中用的最多
	width:0; height:0; overflow:hidden;	只能针对行内块和块级元素
占位	opacity:0
	visibility:hidden
	margin-left:很大的数

<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;