CSS的学习记录(二)

作者: 花___ | 来源:发表于2020-02-02 21:07 被阅读0次

CSS的学习记录(二)
css常用属性初解密
CSS学习记录
css学习记录
CSS基础知识
css概要
CSS的学习记录(一)
CSS动画学习第一篇
web前端笔记2：CSS入门
自学JavaScript之路前记

本文包括以下CSS内容:

overflow
简易导航栏
border-radius
position
others

Overflow

对于文本超出指定范围溢出的内容, 可以在其css属性值中添加overflow:auto;来实现自动隐藏.

导航栏

导航栏可以使用列表开制作, 列表可分为有序列表(ol)和无序列表(ul). 针对于列表前的标记(例如1.2.3. 或者 ..*.), 可以通过使用css属性list-style-type:none;去除.

通过使用*{margin: 0;padding: 0;}使所有的边距和填充都被清除.

margin简写属性在一个声明中设置所有外边距属性。该属性可以有1到4个值。

margin:10px 5px 15px 20px;
上边距是 10px
右边距是 5px
下边距是 15px
左边距是 20px

margin:10px 5px 15px;
上边距是 10px
右边距和左边距是 5px
下边距是 15px

margin:10px 5px;
上边距和下边距是 10px
右边距和左边距是 5px

margin:10px;
所有四个边距都是 10px

横向导航栏实例:

代码如下:

...
<style>
        *{
            margin: 0;
            padding: 0;
        }
        #list1{
            width: 750px;
            font-size: 30px;
            list-style-type: none; /*去除列表符号*/
            margin: 50px auto 0; /*通过margin居中, 对应为上 左右 下*/
            overflow: hidden; /*消除float带来的影响*/
        }
        #list1 li{
            width: 149px;
            float: left;
            border-right: white solid 1px; /*右侧边框*/
            text-align: center; /*文本居中*/
            background-color: lightskyblue;
        }
        #list1 li a{
            text-decoration: none; /*去除a标签底部横线*/
            display: block;  /*以块为显示*/
        }
        #list1 li a:hover{
            background-color: red; /*鼠标放上去时块显示为红色*/
        }
</style>
...
<ul id="list1">
    <li><a href="#">Hi</a></li>
    <li><a href="#">This</a></li>
    <li><a href="#">Is</a></li>
    <li><a href="#">Test</a></li>
    <li><a href="#">Done</a></li>
</ul>

使用类似的方法可以快速的实现图片的拼版.

圆角

使用border-radius: 50%(20px)参数可以进行标签的圆角弧度设置.

实例: 仿微信头像样式的img标签

通过不同角度的圆角切割可以实现标签的各种形状. border-radius: * * * *;的具体用法可以参考下面所填入的参数.

div:nth-of-type(3)代码解读:
代码中出现的div:nth-of-type(3)用意为"寻找第3个类型为div的标签", nth可以看作是 第n个, th为平常的上标, 例如 3^th.

定位

定位的种类:

absolute 绝对
relative 相对
fixed 固定
static 静态(default)

1. absolute 绝对定位

以页面的左上角为原点, 并且不保留原始位置. "后来者居之", 即后执行的语句覆盖在前面的内容上.

实例如下:

代码如下:

<style>
        #aa,#bb,#cc{
            width: 200px;
            height: 200px;
            background-color: red;
        }
        #aa{
            position: absolute;
            top: 100px;
            left: 100px;
            /*z-index: 2;*/
        }
        #bb{
            background-color: lightgreen;
            position: absolute;
            top: 200px;
            left: 200px;
            /*z-index: 3;*/
        }
        #cc{
            background-color: lightskyblue;
        }
</style>

z-index可以调整图层的顺序, 但是在实际的代码测试中, 不知道为什么z-index的值都无法使用, 而我将z-index: value;中的value 改为1,2,3的时候图层的顺序可以随之调整. 具体原因暂不深入研究. (下图为取消上面代码的注释所得.)