其他分享
首页 > 其他分享> > CSS基础(二)

CSS基础(二)

作者:互联网

溢出(overflow)

- 值解析
    - visible: 溢出的值会在容器之外显示(默认)
    - hidden: 溢出的值会被隐藏
    - scroll: 溢出的内容会被提供滚动条,方便用户显示
    - auto: 有溢出就提供滚动条,没有就不提供滚动条
    - inherit: 继承父容器的overflow属性

    - overflow-x: x轴溢出
    - overflow-y: y轴溢出

- 实例1

    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: yellow;
            overflow: hidden; # 多余的部分剪掉
        }
    </style>
    ......
    <div>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut, quia, tempora. Accusantium ad aperiam cupiditate distinctio dolorum earum error est excepturi nam, possimus quidem temporibus unde ut. Atque, incidunt, molestiae.
    </div>

- 实例2

    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: yellow;
            overflow-y: auto; # y轴方向自动适应
            overflow-x: hidden; # x轴方向隐藏
        }
    </style>
    ......
    <div>很多文字</div>


块级元素(block)/行内元素(inline)


- 依据所占据的空间区分

    - 块级元素:独占一行

    - 行内元素:有多少就占多少


- 宽度和高度区分

    - 块级元素:可以对其设置宽高

    - 行内元素:不可以对其设置宽高

- 行内块元素(inline-block):同时具有块级元素和行内元素的特征

- 常见的块级元素:

    - div/p/ul/ol/li/dl/dt/dd/h1~h6

- 常见的行内元素:

    - a/b/em/i/span/strong

行内块元素


- 常用的两个

    - img

    - input

- 实例: <img> 即可以设置宽高,也可以和 <span>在一块

    <style>
        img {
            width: 100px;
            height: 100px;
        }
    </style>
    ......
    <body>
        <span>111111111111111</span>
        <img src="pretty.png" alt="">
    </body>


- 注意:对于'行内元素',边距只能设置左右,无法设置上下,实例

    <style>
        span {
            background-color:yellow;
            margin:100px;

        }
    </style>
    ......
    <body>
        <span>111111111111111</span> # span效果上,只有左右边距,没有上下
    </body>

- <a>标签与<div>之间样式问题

    - 当<a>标签设置内边距的时候,div的内容会渗透进来
      解决办法: <a>标签变成'行内块'元素即可解决

    - 实例

        <style>
            a {
                background-color:black;
                color:white;
                padding:10px; # 设置内边距
            }
        </style>
        ......
        <body>
            <a href="">链接一</a>
            <a href="">链接二</a>
            <a href="">链接三</a>
            <a href="">链接四</a>
            <div>111111111</div> # 内容会渗透进去
        </body>

    - 解决:加一句即可: display:inline-block;

- display:none 隐藏内容

- 基础示例

    <style>
        .hide {
            display: none; # 隐藏显示,页面上什么都没有
        }
    </style>
    ......
    <body>
        <div class="hide">111111111</div>
    </body>

- 实例:鼠标移动到特定位置,才显示内容;否则就隐藏内容

    <style>
        div {
            width:200px;
            height:200px;
            background-color:yellow;
        }
        p {
            display:none; # 正常状态下,隐藏内容
        }
        div:hover p {
            display: block; # 鼠标移动过来,就显示内容
        }
    </style>
    ......
    <body>
        <div class="container">
            <p>测试内容测试内容测试内容测试内容</p>
        </div>
    </body>


- 选择器之间用'空格',表示"后代选择器"

- 选择器之间用'>',表示"子代选择器"(只有'亲儿子'才会生效)


- 二级菜单示例

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Title</title>

        <style>
            * {
                padding: 0; # 清除所有的边距
                margin: 0;
            }
            .box {
                width: 300px; 
                margin: 0 auto;
            }
            ul {
                list-style: none;
            }

            .box .item {
                float: left;
                /*width: 150px;*/ 有边框的话,宽度会变大,有一个会被挤下去
                width: 148px;
                text-align: center;
                border: 1px solid blue;
                background-color: blue;
                color: white;
                line-height: 40px;
            }

            .item:hover {
                background-color: lightblue;
            }

            .item ul {
                display: none;
                background-color: white;
                color: black;
            }

            .item:hover ul {
                display: block;
            }
            .item li:hover {
                color: blue;
            }
        </style>
    </head>

    <body>

        <ul class="box">
            <li class="item">视频教程
                <ul>
                    <li>全部视频教程</li>
                    <li>Python教程</li>
                    <li>Java教程</li>
                    <li>Go教程</li>
                </ul>
            </li>
            <li class="item">认证考试
                <ul>
                    <li>英语认证考试</li>
                    <li>C++认证考试</li>
                </ul>
            </li>
        </ul>

        <script>

        </script>
    </body>
</html>


- 二级菜单练习:自己的写法

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="vue2.js"></script>
        <style>

            * {
                margin: 0;
                padding: 0;
            }

            .container {
                width:100%;
                height:50px;
                background-color: #018dd6;
            }

            .list {
                list-style: none;
                width: 300px;
                margin: 0 auto;

            }
            .item {
                float: left;
                width:148px;
                text-align: center;
                line-height:50px;
                border:1px solid white;

            }
            .item:hover {
                background-color:navajowhite;
            }
            .list-son {
                list-style: none;
                background-color:greenyellow;
                display:none;
            }

            .item:hover ul {
                display:block;
            }

            .item ul li:hover {
                color:red;
            }


        </style>
    </head>

    <body>

        <div class="container">
            <ul class="list">
                <li class="item">菜单一
                    <ul class="list-son">
                        <li class="item-son">子菜单一</li>
                        <li class="item-son">子菜单一</li>
                        <li class="item-son">子菜单一</li>
                    </ul>
                </li>
                <li class="item">菜单二
                    <ul class="list-son">
                        <li class="item-son">子菜单二</li>
                        <li class="item-son">子菜单二</li>
                        <li class="item-son">子菜单二</li>
                    </ul>
                </li>
            </ul>
        </div>

        <script>


        </script>
    </body>
</html>

position 位置


- 重要参数

    - static: 默认值

    - absolute: 绝对定位

        - 当没有父元素/父元素没有定位,参照物是浏览器窗口的'第一屏'

        - 有父元素且父元素有定位,参照父元素

    - relative: 相对定位

        - 参照 自己本身的 初始位置

    - fixed: 固定定位

        - 固定在浏览器窗口

    - sticky: 粘性定位

        - 可以做出'吸顶效果'(兼容性不好)


- 四个值:

    - left/right/top/bottom

- 其他值

    - z-index: 值越大,该元素越往上

position 实例


- 实例1:三个色块盒子,static(静态)演示

    <style>
        * {
                margin: 0;
                padding: 0;
            }
        div {
            width: 200px;
            height: 200px;
        }
        .box1 {
            background-color: yellow;
            position: static; <!--默认值-->
            top:100px; <!--无效果-->
        }
        .box2 {
            background-color: red;
        }
        .box3 {
            background-color: blue;
        }
    </style>
    ......
    <body>

        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
    </body>

- 实例2: relative演示,相对于自身
  效果: box2色块位置虽然空出来,但是其他两个色块并没有趁机占空间,还是在原来的位置

    ......
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        div {
            width: 200px;
            height: 200px;
        }
        .box1 {
            background-color: yellow;
        }
        .box2 {
            background-color: red;
            position: relative; <!--相对于自身移动位置-->
            top: 100px; <!--设定要移动的像素-->
            left: 100px;
        }
        .box3 {
            background-color: blue;
        }
    </style>

    - 注意事项: top/left 也可以使用负值,比如写成'-100px'


- 实例3: absolute演示,当没有父元素/父元素没有定位的时候,参考窗口

    .....
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            width: 200px;
            height: 200px;
            background-color: blue;
            position: absolute; <!--相对与浏览器窗口,左/上各移动了100px-->
            left: 100px;
            top:100px
        }
    </style>
    ......
    <body>
        <div class="box"></div>
    </body>

    - 此时若再来一个div块,里面填充很多文本,box颜色块依然会'浮动'在文本上面,脱离文档流..


    - 当有父元素,但是父元素没有定位的时候,依旧是参考浏览器

        <style>
            * {
                margin: 0;
                padding: 0;
            }

            .parent {
                width: 500px;
                height: 500px;
                background-color: blue;
                margin: 0 auto; <!--父元素没有定位-->
            }
            .child {
                width: 200px;
                height: 200px;
                background-color: red;
                position: absolute; <!--依旧参考浏览器-->
                left: 100px;
                top: 100px;
            }
        </style>
        ......
        <div class="parent">
            <div class="child"></div>
        </div>


    - 当父元素也有定位的时候(一般设置成 relative,但是不设置left/top),子元素就会参考父元素的位置

        <style>
            * {
                margin: 0;
                padding: 0;
            }

            .parent {
                width: 500px;
                height: 500px;
                background-color: blue;
                margin: 0 auto; 
                position: relative; <!--父元素有定位,一般不设置 left/top -->
            }
            .child {
                width: 200px;
                height: 200px;
                background-color: red;
                position: absolute; <!--依旧参考浏览器-->
                left: 100px;
                top: 100px;
            }
        </style>
        ......
        <div class="parent">
            <div class="child"></div>
        </div>

        - 注意事项:若此时 父元素 position 修改为: absolute,margin居中的效果会消失
        容器移动到浏览器的左上角(默认效果),子容器依然会距离父元素100px
        即父元素变了,但子元素不会变


fixed 永远固定在指定的位置


    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .box {
            width:100%;
            height:1500px;
            background-color: yellow;
        }
        .ad {
            width:200px;
            height: 100px;
            background-color:red;
            position: fixed; /*位置固定,且必须指定固定的位置,这里如果修改成 absolute,那么当滚动到下方的时候,'广告位'就消失了*/
            right: 0; /*永远固定在右上角*/
            top: 0;
        }

    </style>
    ......
    <body>

        <div class="box"></div>
        <div class="ad"></div>

    </body>

sticky 粘性定位


- 三个色块(菜单栏,小块的导航条,大块内容部分)
  当鼠标滚动下来时,固定住'导航条'(需指示固定的位置)


  <style>
        * {
            padding: 0;
            margin: 0;
        }

        .header {
            height: 100px;
            background-color:yellow;
        }

        .nav {
            width: 500px;
            height: 50px;
            background-color:red;
            margin: 0 auto;
            position: sticky; /*粘性定位*/
            top:0; /*与顶部没有边距*/
        }

        .body {
            height: 1000px;
            background-color:green;
        }

    </style>
    ......
    <body>

        <div class="header"></div>
        <div class="nav"></div>
        <div class="body"></div>

    </body>



- 是否脱离文档流

    - fixed/absolute 会脱离文档流,其他均不会脱离

案例:容器里面,图片的定位


    ......
    <style>
       .container { /*外层容器设置宽,高度,居中背景色显示*/
           width:500px;
           height:500px;
           margin:0 auto;
           background-color: yellow;
       }
       .box { /*里层容器设置宽,高度,边框,并设置'相对定位',用来定位图片*/
           width:275px;
           height:275px;
           border:6px solid red;
           position:relative;
       }
       .box .pic { /*大图片占满整个'里层容器'*/
           width:100%;
           height:100%;
       }
       .box .icon { /*小图片设置'绝对定位',并设置图片的'不透明度'*/
           position:absolute;
           left:7px;
           bottom:7px;
           opacity:0.5;
       }
       .box .greenicon { /*鼠标移动到'里层容器',小图片的'显示'和'不显示'*/
           display:none;
       }
       .box:hover .greenicon {
           display:block;
       }
    </style>
    ......
    <div class="container">
       <div class="box">
           <img src="bg.jpg" alt="" class="pic">
           <img src="1.png" alt="" class="icon greenicon">
       </div>
    </div>

标签:color,元素,基础,height,width,background,CSS,200px
来源: https://www.cnblogs.com/qinganning/p/16693857.html