练习时用到的一些tip总结

最新推荐文章于 2024-10-13 21:18:37 发布

致可乐

最新推荐文章于 2024-10-13 21:18:37 发布

阅读量234

点赞数

文章标签： html css

本文链接：https://blog.csdn.net/ling_xy/article/details/109490684

版权

文章目录

1.网页布局——两列自适应布局

左边浮动 float :left; (固定大小
右边不浮动，设置overflow:hidden; （自适应）

代码如下（示例）：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .parent{
            width: auto;
            height: auto;
            border: 1px solid pink;
        }
        .left{
            width: 500px;
            height: 100px;
            background-color: palegoldenrod;
            float: left;
            margin-right: 10px;
        }
        .right{
            width: auto;
            height: 100px;
            overflow: hidden;
        }
    </style>
</head>
<body>
<div class="parent">
    <div class="left">我是内容</div>
    <div class="right">我是内容</div>
</div>
</body>
</html>

效果图：
在这里插入图片描述

2.绝对定位居中tip

top:50%;
margin-top: -自身高的一半;

3.按钮

页面会常用到左右滑动按钮，用<button>来实现

border-style: none; 去默认边框样式
outline: none; 去点击时默认蓝色边框
设置圆角：例如
border-radius: 50% 0 0 50%;
对应顺序为：左上右上右下左下
呈现效果：

4.超出部分省略

单行

overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;

在这里插入图片描述

多行

overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;           /*设置几行*/
-webkit-box-orient: vertical;

5.斜边样式

用<border>完成

.lazy_price_miaosha:after {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    right: 0;
    top: 0;
    border-width: 22px 8px 0 0;
    border-style: solid;
    border-color: transparent #fff transparent transparent;
}

在这里插入图片描述

6.浮动问题

当给两个子块都设置了浮动，且保证宽度可以并排容纳，也可能是样式设计中的优先级出了问题

7.块元素水平垂直居中

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .box{
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            width: 200px;
			height: 200px;
			border: 1px solid pink;
			margin: auto;
			}
	</style>
</head>
<body>
	<div class="box"></div>
</body>
</html>