day43:CSS样式相关

发布时间：2020-12-20 09:57:39 所属栏目：Python 来源：网络整理

导读：目录 1.高度和宽度 2.字体相关 3.字体对齐 4.颜色设置 5.背景 6.边框 7.盒子模型 8.display属性 9.伪元素选择器 10.伪类选择器 11.浮动 12.文字装饰 13.相对定位和绝对定位 14.固定定位 1.高度和宽度 ! DOCTYPE html html lang ="en" head meta charset ="UT


        .c1 600px
            
            background-image url("1.jpg") 设置背景图片 
            background-repeat no-repeat 是否平铺整个标签 
            background-position center center 当前图所在整个标签的位置  50px 100px 当前图距离左上的位置 
            border 1px solid red 画一个边框 div class="c1"></>

效果如下所示

background也可以简写成一行

    
            background green url("1.jpg") no-repeat center center>

6.边框

 1px dashed red 边框线为虚线  边框线是实线 */

             也可以将一句话拆成三句话写 
            border-width 10px 线宽 
            border-style solid 线样式 
            border-color yellow 线颜色  也可以四个方向单独设置 
            border-left 10px solid yellow;

             也可以单方向单参数设置 
            border-right-width>

7.盒子模型

4px solid red 边框 
            padding 7px 8px 9px 10px 内容到边框之间的距离 上右下左 
            margin11px 12px 13px 14px 距离其他标签或者自己父级标签的距离 上右下左 >我是最帅的！="c2">

盒子模型包含四部分:

　　1.content:内容部分,设置的width和height

　　2.padding:内边距,内容和边框之间的距离

　　3.border:边框

　　4.margin:外边距,距离其他标签或者自己父级标签的距离

盒子模型如下图所示:

还有几个需要知道的:

    {
             margin可以设置上 右 下 左格式  1px 2px 3px 4px;
             margin也可以设置上下 左右格式 15px 10px 也可以单独设置各个方向 
            margin-top padding可以设置上 右 下 左格式  padding也可以设置上下 左右格式  15px 10px
            padding-top}

    >

要注意的是:如果两个相邻标签都设置了margin两者之间的距离，那么不会累加，而是选最大值为两者的距离

8.display属性


            display inline 将块级标签改为内联标签  inline-block 将标签改为具有内联标签和块级标签属性效果的标签 可以设置高度，而且不独占一行  none 隐藏标签 
        .c2 blue block 将内联标签改为块级标签 
        悟空
    >

    span 
        八戒
    >

9.伪元素选择器


        div:after{  在文字前加一个问号 ? 
            content '?'
        div:before 在文字后加一个星号 *  '*'
        雷霆嘎巴，ZBC
    >

效果如下图所示

10.伪类选择器



        .c1:hover orange 触碰时变成橙色 
            cursor pointer 鼠标的小手效果 }


         a标签未访问时设置样式 
        a:link gold}

         点击按下去之后，抬起之前显示样式 
        a:active 网址被访问之后，显示样式 
        a:visited 鼠标悬浮时，设置样式 
        a:hover>小鸟伏特加a href="http://www.4399.com">点击进入花园宝宝乐园a>

11.浮动


        .main-left
            float left

        .main-right right 浮动起来的元素，可以设置高度和宽度，并且不会独占一行 

        .content 100%="main">
        ="main-left"="main-right"="content">

这样做，会造成父级标签塌陷问题

什么是父级标签塌陷?

如果父元素只包含浮动元素，且父元素未设置高度和宽度的时候。那么它的高度就会塌缩为零，也就是所谓的“高度塌陷”

在上面代码中，父元素为main，在main中只包含浮动元素main-left和main-right，并且没有给父元素main设置高度和宽度,所以会有父级塌陷

父级塌陷如图所示

正常非塌陷如图所示

如果想解决父级标签塌陷，有如下几种方法

1.给父级标签加高度(不常用)

         /* 1.给父级标签加高度 */
        .main{
            height: 100px;
        }

2.清除浮动

我content标签上面不能有浮动的元素盖着我

        .content{
            width: 100%;
            height: 200px;
            background-color: yellow;
            clear: both; /* 2.清除浮动 */

3.最常用的方法

       /* 3.最常用的方法 */
        .clearfix:after{
            content: '';
            display: block;
            clear: both;
        }
    ="main clearfix"> <!-- class类值可以写多个 -->
        >

4.常用方法

        /* 4.常用方法 */
        .main{
            overflow: hidden;
        }

12.文字装饰


            text-decoration line-through 文字被横线贯穿  overline 横线在文字上方 
        .c3 underline 横线在文字下方 
        a 去除a标签的下划线效果 >床前明月光>疑是地上霜="c3">举头望明月="">博伦>

实现效果如下图所示

13.相对定位和绝对定位

相对定位


        body 让body标签紧贴左上，没有任何空隙  0
        .c2 
            position relative
            left 30px 距离自己原来位置的左边有30px距离 
        .c4
        .cc
            margin-left 带有cc类的整体偏移100px ="c4"="cc">

实现效果如图所示

绝对定位

 absolute 绝对定位 >

实现效果如图所示

如果不对cc进行相对定位设置,效果如下图所示

关于相对定位和绝对定位，你需要注意的点:

相对定位：

　　1.相对定位可以使用top/bottom/left/right控制标签位置

　　2.是按照自己原来的位置进行移动的

　　3.标签还占据自己原来的位置

　　4.脱离正常文档流，所以可以覆盖别的标签

绝对定位：

　　1.并不占用自己原来的空间

　　2.如果父级标签或者祖先辈标签没有设置相对定位,那么绝对定位的元素会按照整个html文档的位置进行移动

　　3.如果父级标签或者祖先辈标签设置了相对定位，那么按照父级标签或者祖先辈标签的位置进行移动

14.固定定位

 800px 相对于浏览器窗口来设置位置  fixed 40px
            bottom 60px 80px aqua
            border-radius 正方形的园度 
        .c3 a blackid="top">顶部位置="#top">回到顶部>

实现效果如下图所示

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!