专栏首页小码农漫漫积累路前端-CSS-更改标签样式-长宽字体-背景-边框-显示方式-定位-透明度-扩展点-02

前端-CSS-更改标签样式-长宽字体-背景-边框-显示方式-定位-透明度-扩展点-02

目录

控制标签元素样式

小心得: 样式有继承(遗传)效果(子元素将继承父元素的样式,如果子元素单独设置了该样式,那么子元素的样式就是子元素单独设置的样式) (可以做统一设置) 注意在调样式时,加了没用的样式记得删除掉(避免造成冲突,对后续新增的样式造成影响) ​ 当然你先要排除样式冲突时选择器优先级导致的情况(class=“d1” id=“id1” --> #id{color: red;} 中间一堆css代码 .d1{color: red;},你会发现 d1的css代码中color不生效,冲突,且优先级不够) 注意行内元素(标签)和块级元素的区别 ​ 行内元素的宽度(width)、高度(height)、内边距的top/bottom(padding-top/padding-bottom)和外边距的top/bottom(margin-top/margin-bottom)设置无效(padding/margin-left/right还是有效的),测试参见博客:行内元素的padding和margin是否无效

长宽属性、字体属性、文本对齐、文本装饰、首行缩进

div{
    ------------长宽属性--------
    设置长宽只对块级标签有效(没有占满一行会自动用margin占位)
    width: 300px;
    height: 300px;
}

p{    
    ------------字体属性--------
    文字字体
    font-family: "Microsoft Yahei", "微软雅黑", "Arial", sans-serif;
    字体大小
    font-size: 24px;
    字重
    font-weight: lighter;
    字体颜色
    color: red;
    color: #ffffff;
    color: rgb(0,0,0);
    color: rgba(0,0,0,0);  最后一个参数a只能调节颜色透明度,不能调节文本
    
    ------------文字对齐--------
    text-align: center;
    text-align: left;
    text-align: right;
    text-align: justify;  好像没效果
    垂直对齐
    line-height: 50px;  垂直对齐(这个50是它父标签的高度,在父标签中垂直对齐)
    
    ------------文字装饰(可以改a标签属性)--------
    text-decoration: underline;
    text-decoration: overline;
    text-decoration: line-through;  和 <s></s> 的效果一样
    text-decoration: none;  一般给<a></a>加
    
    ------------首行缩进--------
    font-size: 16px
    text-indent: 32px;  调成字体大小的两倍,就是空两格

}

背景属性、边框属性、圆角

div{
        ------------背景属性--------
    背景颜色
    color: white;
    background-color: black;
    
    背景图片
    width: 400px;
    height: 400px;
    background-image: url("1.png");
    
    重复
    background-repeat: no-repeat;  不重复
    background-repeat: repeat-x;  水平方向重复
    background-repeat: repeat-y;  垂直方向重复
    
    背景位置(精灵图)
    background-position: center center;  第一个参数调节左右,第二个参数调上下, 负的的是反过来的,x负的,从右往左移
    
    简写
    background: black no-repeat center center;
    
    固定背景(窗口背景的效果)
    background-attachment: fixed;     
   
    ------------边框属性--------
    border-color: red;
    border-style: solid;
    border-width: 1px;
    简写
    border: 1px solid red;  顺序无所谓,可以调线宽、虚实线型、边框颜色
    border-left: 1px solid red;  可以单独设置不同的边
    
    ------------圆角(画圆)--------
    border-radius: 50%;  园
    
}

雪碧图/精灵图(比较老的技术) 教你来使用雪碧图(CSS sprite) ​ 利用的是 background-position ​ svg(可以了解一下)

display 显示方式

div{
    ------------display显示方式-------
    display: none;  标签不显示,且不再占位置
    visibility: hidden;  标签不显示,但是位置还占着(透明度应该也可以实现)
    
    display: block; 转换成块级元素(标签)(可以设置长宽)
    display: inline; 转换成行内元素(长宽会失效,没有内容会直接看不到(行内元素的大小是由内容决定的))
    display: inline-block; 既有块级标签能设置长宽的特点,又有行内标签都在一行的特点
    
    阴影
    box-shadow: 3px 3px grey;

}

盒子模型 margin、padding...

div{ 
    ------------盒子模型--------
    外边距(margin)、边框(border)、内边距(padding)、内容本身大小(content)
    外边距: 标签与标签的距离(两个盒子之间的距离)
    边框: 边框(盒子厚度)
    内边距:内容与边框的距离(盒子里物体和盒子边框的距离)
    内容:标签内的内容(盒子里放的东西)
    
    margin: 5px 10px 15px 25px; 上右下左(顺时针)参数效果不同,根据浏览器调调看就行了,不用记
    margin: 0;  body自带8px的外边距,子元素会继承这一特性(验证一下*****)
    margin: 0 auto; 水平居中(垂直没用,padding用不了auto)
    margin-top: 10px;  上边距10px
    
    border: 3px solid red;
    
    padding: 10px;  写法和margin差不多,只是作用对象(外边距/内边距)不一样
}

科普(可以谷歌检查去看该元素的盒模型,然后把不需要的改成0)

  • body自带8px的外边距margin
  • p标签默认自带 16px(根据字体大小来的)的外边距
  • ul自带40px的padding内边距

float浮动

浮动的元素是脱离正常文档流的,也就意味着没有独占一行之说,也不再占用原来的位置(不会把父元素撑大)-----浮动的元素会造成父标签塌陷

.c1{
    float: left;  浮动之后就相当于浮起来了,脱离了文档流,有多大就多大
}

div{
    # clear 清除浮动带来的父标签塌陷,
    clear: left;  clear  left 左边不能有浮动元素,如果有,另起一行(变向撑大父标签)
    
}

清除浮动的终极写法(要想用的地方加上这个class即可 --> class="clearfix")
.clearfix:after{   clearfix清除浮动的通用名字
    content: '';
    display: block;
    clear: both;  左右两边都不能有浮动的元素
    
}

这里的线是边框(不然div没有内容没有没有边框会直接看不出来)

overflow 清除溢出(超出div大小的部分)

div{
    overflow: hidden;
    overflow: auto;  自适应,有个滚动条可以看
    overflow: scoll;  有水平和垂直滚动条
    overflow: visible; 默认值,不会清除溢出,直接显示
    
    overflow-x: auto;  可以设置水平的溢出
    overflow-y: auto;  可以设置垂直的溢出
    
    (圆形头像)图片最大宽度
    max-width: 100%;
    width: 100%;  和上面一样
}

position 定位

相对定位 相对于标签自身原来的位置做一个定位 绝对定位 ​ 相对于已经定位过的父标签做一个定位(购物车展开)*** ​ 当只给你一个父标签的属性让你做定位时,就用绝对定位 固定定位 ​ 相对于浏览器窗口,一直固定在某个位置(回到顶部) 所有标签默认都是静态的,无法直接调节位置

div{
    position: static;  默认值,静态的,top、left无法改变位置
    position: relative;
    top: 100px;
    left: 50px;
    
    position: fixed;
    bottom: 100px;  这些都是相对于浏览器而言的了
    right: 60px;
}

想用绝对定位一定要先让父元素定位(position: relative; 不用指定 top 、left等,不会影响父元素位置),自身再postion: abosulte; top: 50px; left: 50px

浏览器会优先展示文本内容,哪怕文本被盖住了(浏览器做的优化)

对文档流的影响

参考链接(可以了解一下):css层叠顺序探究

浮动的元素都是脱离文档流

相对定位(relative)的元素不是脱离文档流

绝对定位(absolute)的元素也是脱离文档流的(只要变了就脱离文档流了)

固定定位(fixed)的元素也是脱离文档流的(只要变了就脱离文档流了)

z-index 层级

模态框(百度登录)

<!--模态框案例-->

<!--文档流默认值 0-->
<!--只要比上一个大,就在上面-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            margin: 0;
        }

        .cover {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(128,128,128,0.45);
            z-index: 999;
        }

        .modal {
            height: 200px;
            width: 400px;
            background-color: white;
            position: fixed;
            left: 50%;
            top: 50%;
            z-index: 1000;
            margin-top: -100px;
            margin-left: -200px;
        }

    </style>
</head>
<body>
<div>我是最底层的</div>
<div class="cover"></div>
<div class="modal">
    <p><label for="d1">username:<input type="text" id="d1"></label></p>
    <p><label for="d2">password:<input type="text" id="d2"></label></p>
    <input type="submit">
</div>
</body>
</html>

opacity 标签整体透明度

p{
    opacity: 0.4;  可以调节颜色、字体等属性的透明度
}

去掉li 前面的标识

li{
   list-style: none;
   或
   list-style-type: none;
}

文本垂直居中

多行垂直剧中可参考:CSS多行文字垂直居中的两种方法

有很多种写法,但其他的不太熟悉,还是比较习惯这个
.text-center{
    height: 50px;  div的高度
    line-height: 50px;  此时文本就可以居中了
    border: 2px solid red;  加个边框让效果更明显一点
}

单行文本居中

作业案例

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style rel="stylesheet">
        body{
            margin: 0;

            background-color: lightgrey;
        }
        .blog-left{
            width: 18%;
            float: left;
            background-color: darkslategrey;
            text-align: center;
            color: darkgray;

            position: absolute;
            height: 100%;
        }
        .blog-right{
            width: 82%;
            float: right;
            padding-bottom: 10%
        }

        .avatar{
            width: 60%;
            border: 5px solid white;
            border-radius: 50%;
            margin: 50px auto;
            overflow: hidden;
        }
        .avatar img{
            width: 100%;
        }

        .blog-left p{
            font-size: 20px;
        }

        .blog-left ul{
            list-style: none;
            padding: 0;
            font-size: 26px;
            margin-top: 70px;
        }
        .blog-left ul li a{
            text-decoration: none;
            color: darkgray;
        }
        .blog-left ul li a:hover{
            text-decoration: none;
            color: whitesmoke;
        }


        .blog-article{
            width: 95%;
            background-color: white;
            margin: 20px;
            box-shadow: 3px 3px grey;

            border-radius: 10px;
        }
        .blog-article hr{
            margin: 0;
        }
        .title h1{
            border-left: 5px solid rgb(235,50,35);
            padding-left: 30px;

            display: inline-block;
            float: left;
            margin: 0;
        }
        .title b{
            display: inline-block;
            float: right;
            padding: 14px;
            padding-bottom: 0px;
        }
        .clearfix:after{
            content: '';
            display: block;
            clear: both;
        }


        .content{
            border-bottom: 2px solid darkslategrey;
            padding: 20px;
        }

        .bottom-tag{
            padding: 15px;
        }
    </style>
</head>
<body>
    <div class="blog-left">
        <div class="avatar">
            <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1567680319452&di=760a1964b01400d5f7a9e25bc93e480c&imgtype=0&src=http%3A%2F%2Fpic3.zhimg.com%2F50%2Fv2-ae5a069afcdd54e74fffbd73ca66a538_hd.jpg" alt="">
        </div>
        <p>tank的博客</p>
        <p>更秃更强!</p>

        <ul>
            <li><a href="#">关于我</a></li>
            <li><a href="#">微博</a></li>
            <li><a href="#">微信公众号</a></li>
        </ul>

        <ul>
            <li><a href="#">#Python</a></li>
            <li><a href="#">#Java</a></li>
            <li><a href="#">Golang</a></li>
        </ul>
    </div>

    <div class="blog-right">
        <div class="blog-article">
            <div class="title clearfix">
                <h1>重金求子</h1>
                <b>2019-5-29</b>
            </div>
            <div class="content">重金求子,事成送贤淑老公一枚!</div>
            <div class="bottom-tag">#生活 #八卦</div>
        </div>
        <div class="blog-article">
            <div class="title clearfix">
                <h1>重金求子</h1>
                <b>2019-5-29</b>
            </div>
            <div class="content">重金求子,事成送贤淑老公一枚!</div>
            <div class="bottom-tag">#生活 #八卦</div>
        </div>
        <div class="blog-article">
            <div class="title clearfix">
                <h1>重金求子</h1>
                <b>2019-5-29</b>
            </div>
            <div class="content">重金求子,事成送贤淑老公一枚!</div>
            <div class="bottom-tag">#生活 #八卦</div>
        </div>

    </div>
</body>
</html>

上述代码页面效果

关于自适应(不需要了解)

参考博客:纯CSS3使用vw和vh视口单位实现自适应(仅个人兴趣,把觉得不错的文章放个连接) 你可能没注意的CSS单位

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • jquery

    维护IE678是一件让人头疼的事情,一般我们都会额外加载一个CSS和JS单独处理。值得庆幸的是使用这些浏览器的人也逐步减少,PC端用户已经逐步被移动端用户所取代...

    suwanbin
  • Django-djangorestframework-异常模块-源码及自定义异常

    E:/python3-6-4/Lib/site-packages/rest_framework/views.py 源码

    suwanbin
  • python注释-输入输出-基本数据类型-运算符

          python 2.x 中,input 获取到的数据是什么类型,传给变量的就是什么类型

    suwanbin
  • CSS 基础系列:常见布局方式

    给 header、content、footer 设置相同的 width 或者 max-width(显示的宽度都一样,但是前者内容过长会溢出,后者会换行),再设置...

    Chor
  • 翻译:如何使用CSS实现多行文本的省略号显示

    本文翻译自CSS Ellipsis: How to Manage Multi-Line Ellipsis in Pure CSS,文中某些部分有些许改动,并添...

    欲休
  • Vue 2.x折腾记 - (20) JSX在业务中的具体实践以及跟React书写的差异化

    Vue的jsx,能够支持部分vue独有的特性,比如拿到computed, 指令及自定义事件;

    CRPER
  • javascript当中div在单行(float:left)用法

    div在单行(float:left) 例 1.2.1 divInOneLineIEFF.html <div style="width:100px"> ...

    马克java社区
  • Html和CSS布局技巧(转)

    水平居中的页面布局中最为常见的一种布局形式,多出现于标题,以及内容区域的组织形式,下面介绍四种实现水平居中的方法(注:下面各个实例中实现的是child元素的对齐...

    山河木马
  • CSS布局解决方案(全屏布局)

    原文连接:https://segmentfault.com/a/1190000013565024#articleHeader1

    用户1093975
  • (Demo分享)利用JavaScript(JS)实现一个九宫格拖拽功能

    Demo实现了对任意方格进行拖拽,可以交换位置,其中Demo-1利用了勾股定理判断距离!

    Tz一号

扫码关注云+社区

领取腾讯云代金券