CSS学习笔记DAY7之对齐

最新推荐文章于 2024-03-17 15:20:20 发布

柠栀12

最新推荐文章于 2024-03-17 15:20:20 发布

阅读量1.1k

点赞数 25

文章标签： css 学习笔记

本文链接：https://blog.csdn.net/qq_59277204/article/details/136617239

版权

text-overflow: ellipsis;

08 css三角形

09 仿京东三角效果

10 内容移除

01 行内块基线对齐的问题

行内块与文本和行内块如果在一行那么默认会按照基线对齐方式排列

           一旦其中一个行内块或者文字上下位置发生改变

           会导致这一排的所有文字和行内块都会跟着改变

           这就是基线问题

    <style>
        span.span2{
            width: 150px;
            height: 150px;
            background-color: blue;
            vertical-align: top; 
            padding-top:100px
        }
    </style>
##################################################
    <div id="box">
        <span class="span1">我是第1个span</span>
        <span class="span2">我是第2个span</span>
    </div>

      使用vertical-align

                    top

                    middle

                    bottom

                    baseline(默认值基线对象)

                    px值

       该属性是改变行内块在一行内按照哪个位置进行垂直堆砌

       行内块一旦设置该属性则再次改变文本的上下位置就不会影响了

02 图文混排的对齐问题

当父元素没有设置高度按照内部的img高度撑开的时候底部有缝隙问题

解决方式：给img设置 vertical-align: 除了baseline其他的任何值都行

使用vertical-align

top

middle

bottom

baseline(默认值基线对象)

px值

    <style>
        #box{
            border: 1px solid #000;
        }
        #box img{
            vertical-align: top;
        }
    </style>
##################################################
    <div id="box">
        <img src="./images/adv.jpg" alt="">
        这是**********<del>原价:32</del>现价:3
    </div>

03 浮动元素自动换行会卡住的问题

 <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        ul{
            list-style: none;
            border:1px solid #000;
            overflow: hidden;
        }
        ul>li{
            width: 200px;
            height: 200px;
            color: #fff;
            font-size: 30px;
            text-align: center;
            line-height: 200px;
            float: left;

        }
        ul>li:nth-child(1){
            background-color: green;
        }
        ul>li:nth-child(2){
            background-color: orange;
        }
        ul>li:nth-child(3){
            background-color: blue;
        }
        ul>li:nth-child(4){
            background-color:aqua;
            height: 201px;
        }
        ul>li:nth-child(5){
            background-color:bisque;
        }
        ul>li:nth-child(6){
            background-color:darkkhaki;
        }
</style>
################################################
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
    </ul>

生成效果：

04 利用浮动制作边框版的九宫格

 <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        ul{
            list-style: none;
            overflow: hidden;
            width: 300px;
            margin: 50px auto;
            /* border-top: 1px solid #000;
            border-left: 1px solid #000; */
        }
        ul>li{
            width: 100px;
            height: 100px;
            color: #fff;
            font-size: 30px;
            text-align: center;
            line-height: 100px;
            float: left;
            /* border-right: 1px solid #000;
            border-bottom: 1px solid #000; */
            border: 1px solid #000;
            box-sizing: border-box;
            margin-left: -1px;
            margin-top: -1px;
        }
        ul>li:nth-child(1){
            background-color: green;
        }
        ul>li:nth-child(2){
            background-color: orange;
        }
        ul>li:nth-child(3){
            background-color: blue;
        }
        ul>li:nth-child(4){
            background-color:aqua;
        }
        ul>li:nth-child(5){
            background-color:bisque;
        }
        ul>li:nth-child(6){
            background-color:darkkhaki;
        }
        ul>li:nth-child(7){
            background-color:fuchsia;
        }
        ul>li:nth-child(8){
            background-color:crimson;
        }
        ul>li:nth-child(9){
            background-color:greenyellow;
        }
</style>
###############################################################
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
    </ul>

生成效果：

05 用户界面-鼠标样式

cursor: default;

默认

cursor: pointer;

小手

cursor: move;

移动

cursor: text;

文本

cursor: not-allowed;

禁止

06 取消轮廓线

  <style>
        /* input{
            /* 取消轮廓线 
            outline: none;
            border: none;
            border-bottom: 1px dashed #000;
        } */

        textarea{
            width: 500px;
            height: 260px;
            outline: none;
            border: 1px solid #036;
            /* 防止用户拖拽文本域 */
            resize:none
        }
</style>
#########################################################
<!-- <input type="text"> -->
<textarea></textarea>

07 溢出文字省略号显示

white-space: nowrap;

文字强制一行内显示排除遇到br

overflow: hidden;

溢出隐藏

text-overflow: ellipsis;

文字溢出用省略号代替

<style>
        div{
            width: 150px;
            height: 25px;
            border: 1px solid red;
            /* 文字强制一行内显示  排除遇到br*/
            white-space: nowrap;
            /* 溢出隐藏 */
            overflow: hidden;
            /* 文字溢出 用省略号代替 */
            text-overflow: ellipsis;
        }
</style>
###############################################
<div>好好学习天天学习好好学习天天学习</div>

08 css三角形

  <style>
        div{
            width: 0;
            height: 0;
            border-top: 10px solid red;
            border-right: 10px solid green;
            border-bottom: 10px solid blue;
            border-left: 10px solid #000;
        }
        p{
            width: 0;
            height: 0;
            border-style: solid;
            border-width: 20px;
            border-color: transparent transparent  red transparent;
        }
</style>
######################################################################
    <div></div>
    <p></p>

生成效果：

09 仿京东三角效果

 <style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            width: 200px;
            height: 100px;
            background-color: red;
            margin: 100px auto;
            position: relative;
        }
        p{
            width: 0;
            height: 0;
            border-style: solid;
            border-width: 20px;
            border-color: transparent transparent red transparent;
            position: absolute;
            left: 50%;
            margin-left: -20px;
            top:-40px
        }
</style>
##############################################################
    <div>
        <p></p>
    </div>

生成效果：

10 内容移除

设置height为0，同时设置overflow:hidden;

  <style>
        div{
            width: 300px;
            height: 0px;
            background-color: red;
            overflow: hidden;
        }
</style>
#####################################################
    <div>web</div>