首页 前端知识 web前端实习Day5--css3

web前端实习Day5--css3

2024-05-14 22:05:43 前端知识 前端哥 730 50 我要收藏

目录

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-decorationunderline下划线
line-through删除线
over-line上划线
none取消文本修饰
文本横向对齐方式text-alineleft(默认)  |  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;

转载请注明出处或者链接地址:https://www.qianduange.cn//article/8621.html
标签
评论
发布的文章

1、SpringBoot简介及返回json

2024-05-25 09:05:17

mysql 的jsonTable使用

2024-05-25 09:05:41

MySQL中的JSON

2024-05-25 09:05:32

JSON简介(1)

2024-05-25 09:05:22

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!