css 基线对齐图文混排

♡静

已于 2024-07-04 18:17:59 修改

阅读量783

点赞数 9

文章标签： css 笔记前端

于 2024-03-17 15:20:20 首次发布

本文链接：https://blog.csdn.net/m0_47045804/article/details/136637010

版权

01 行内块基线对齐问题

行内块与文本和行内块如果在一行那么默认会按照基线对齐方式排列，一旦其中一个行内块或者文字上下位置发生改变，会导致这一排的所有文字和行内块都会跟着改变，这就是基线问题。

解决方法：

使用vertical-align

top middle bottom baseline(默认值基线对象) 单位px

该属性是改变行内块在一行内按照那个位置进行垂直对齐

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

02 图文混排的对齐方式

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

解决方式：

给img设置 vertical-align: 除了baseline其他的任何值都行

使用vertical-align

top middle bottom baseline(默认值基线对象) 单位px

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

方法一：给li标签加右下边框,给ul标签加左上边框

        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;
            box-sizing: border-box;
        }
        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;
        }

方法二：先给li标签加四个边的边框，添加完四个边的边框后会出现相邻的两条边边框线是设置的边框的2倍，所以要先给左上的两个边去除1倍的边框，再给ul 标签设置左上两个边的边框。

        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;
            box-sizing: border-box;
            border: 1px solid #000;
            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;
        }

04 用户界面鼠标样式

cursor: default;（默认）

cursor: pointer;（小手）

cursor: move;（移动）

cursor: text;（文本）

cursor: not-allowed;（禁止）

05 input取消轮廓线

outline:none;

border:none;

06 多行文本框固定宽高

resize:none;(防止有用户拖拽文本域)

07 溢出文字省略号显示

white-space: nowrap; 文字强制一行内显示排除遇到br

overflow: hidden; 溢出隐藏

text-overflow: ellipsis; 文字溢出用省略号代替

(以上三个属性需要一起使用)

08 css三角形

/* 将div分成四个三角形 */
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;
        }

根据边框颜色来做成一个三角形的效果

在border-color属性中选择一个边设置上想要的颜色,剩余三个边则使用transparent 透明色来表示.

/* 如下代码表示的是一个红色的尖朝上方的三角形 */
p{
            width: 0;
            height: 0;
            border-style: solid;
            border-width: 20px;
            border-color: transparent transparent  red transparent;
        }

09 仿京东三角形效果

p标签是div的子标签其中div是一个宽200px高100px的大盒子, p是div标签上的一个小三角形,

需要使用定位来将p标签固定的div的合适的位置,最终完成效果。

        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
        }

        <div>
            <p></p>
        </div>