py的学习日记HTML第二周（3）

最新推荐文章于 2024-10-16 20:49:18 发布

m0_73633742

最新推荐文章于 2024-10-16 20:49:18 发布

阅读量42

点赞数

文章标签： html 学习前端

本文链接：https://blog.csdn.net/m0_73633742/article/details/129888355

版权

1.元素的显示与隐藏

类似网站广告，当我们点击关闭就不见了，当我们重新刷新页面，就会出现。

本质：让一个元素在页面中隐藏或者显示出来

1.1 display属性

display属性用于设置一个元素应该如何显示

display:none ;隐藏元素
display:block;除了转换为块级元素外，同时还有显示元素的意思
display隐藏元素后，不再占有原有的位置

1.2 visibility 可见性

visibility属性用于指定一个元素应该是可见还是隐藏。

visibility：visible;元素可见
visibility: hidden;元素隐藏

visibility隐藏元素后，继续占有原来的位置

如果隐藏元素想要原来的元素，就用visibility: hidden;

如果隐藏元素不想要原来的位置，就用display:none ;

1.3 overflow溢出

overflow属性指定了如果内容溢出一个元素框（超过指定高度及宽度）会发生什么

属性值	描述
visible	不剪切内容也不添加滚动条
hidden	不显示超过对象尺寸的内容，超出的部分隐藏掉
scroll	不管超出的内容，总是显示滚动条
auto	超出自动显示滚动条，不超出不显示滚动条

一般情况下，我们都不想让溢出的内容显示出来，因为溢出的部分会影响布局。

如果有定位的盒子，请慎用 overflow: hidden,因为它会隐藏多余的部分。

2.精灵图

为了有效的减少服务器接收和发送请求的次数，提高页面的加载速度，出现了css精灵技术。

使用精灵图的核心：

1.精灵图主要针对背景图使用，就是把多个小背景图片整合到一张大图片中

2.这个大图也称为spirtes精灵图或者雪碧图

3.移动背景图片位置，此时可以使用background-position.

4.移动的距离就是这个目标图片的x和y坐标，注意网页的坐标有所不同。

5.因为一般情况下都是向上向左移动，所以数值是负值。

6.使用精灵图的时候要精确测量，每个小背景图片的大小和位置。

3.字体图标的产生

3.1字体图标的产生

字体图标使用的场景：主要用于显示网页通用，常用的一些小图标。

精灵图还是有许多优点，但是缺点也很明显

1.图片文件还是比较大的。

2.图片本身放大和缩小会失真

3.一旦图片制作完毕想要更换非常复杂

单字体图标iconfont可以为前端工程师提供一种高效的图标使用方式，展现的是图标，本质属于字体

3.2字体图标的优点

轻量级：一个图标字体要比一系列的图像要小，一旦字体加载了，图标就会马上渲染出来，减少了服务器的请求
灵活性：本质是文字，可以随意更改颜色，产生阴影，透明效果，旋转。
兼容性：几乎支持所有的浏览器

注意：字体图标不可以替代精灵技术，只是对工作中图标部分技术的提升和优化

总结：如果遇见一些结构和样式比较简单的小图标，就用字体图标

如果遇见一些结构和样式比较复杂一点的小图片，就用精灵图。

3.3字体图标下载

推荐下载网站：

icomoon字库 http://icomoon.io
阿里iconfont字库http://www.iconfont.cn/

3.4字体图标的引入

1.把下载包里面的fonts文件夹放入页面跟目录下

2.在css样式中全局声明字体：简单理解就是把这些文字文件通过css引入到我们页面中，一定要注意文件路径的问题。

3.在html标签内添加小图标

4.给span声明字体，和上面的一样

3.5字体图标的添加

如果原有的字体图标不够用了，需要添加新的字体图标到原来的字体文件中

把压缩包里面的selection.json从新上传，然后选择自己想要的新的图标，从新下载压缩包，并替换原来的问价即可。

4.css的三角的做法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1 {
        width:0;
        height:0;
        border: 50px solid transparent;
        border-left-color: pink;
        margin: 100px auto;
    }
    </style>
</head>
<body>
    <div class="box1"></div>
</body>
</html>

5.css用户界面样式

5.1鼠标样式cursor

li {cursor: pointer;}

设置或检索在对象上移动的鼠标指针采用何种系统预定义光标的形状

属性值	描述
default	小白，默认
pointer	小于
move	移动
text	文本
not-allowed	禁止

5.2轮廓线

给表单添加outline:0;或者outline: none;样式之后，就可以去掉默认的蓝色边框

input {outline: none;}

5.3防止拖拽文本域reesize

实际开发中，我们文本域右下角是不可以拖拽的

textarea{ resize: none;}

6.vertical-algin属性应用

css的vertical-align属性使用场景：经常用于设置图片或者表单（行内块元素）和文字垂直对齐

官方解释：用于设置一个元素的垂直对齐方式，但是它只针对于行内元素或者行内块元素有效。

语法：

vertical-align : baseline |top|middle|bottom

值	描述
baseline	默认，元素放在父元素的基线上
top	把顶端元素与行中最高元素的顶端对齐
middle	把此元素放在父元素的中部
bottom	把元素的顶端与行中最低的元素的顶端对齐

6.1图片，表单，文字对齐

图片，表单都属于行内块元素，默认的vertical-align是基线对齐。

此时可以给图片，表单这些行内块元素的vertical-align属性设置为middle就可以让文字和图片实现居中对齐了

6.2解决图片底部默认空白缝隙问题

bug:图片由一个空隙，原因是行内块元素会和文字的基线对齐。

主要解决方法有两种：

1.给图片添加vertical-algin:middle |top|bottom等（提倡使用）

2.把图片转换为块级元素

display:block;

7.溢出的文字省略号显示

7.1单行文本溢出显示省略号

1.先强制一行内显示文本

white-space:nowap;

2.超出的部分隐藏

overflow:hidden;

3.文字用省略号替代超出的部分

text-overflow:ellipsis;

7.2多行文本溢出显示省略号

overflow:hidden;

text-overflow: ellipsis;

弹性伸缩盒子模型显示

display: -webkit-box;

限制在一个块元素显示的文本的行数

-webkit-line-clamp: 2;

设置或检索伸缩盒对象的子元素的排列方式

-webkit-box-orient: vertical;

8.常见布局技巧

8.1 margin负值运用

1.让每个盒子margin往左侧移动 -1px 正好压住相邻盒子的边框

2.鼠标经过某个盒子的时候，提高盒子的等级即可（如果没有有定位，则加相对定位（保留位置），如果有定位，则加z-index)

8.2文字围绕浮动元素

8.3行内块的巧妙运用

8.4css三角强化

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1 {
            width: 0;
            height: 0;
            /*border-top: 100px solid transparent;
            border-right: 50px solid skyblue;
            border-bottom: 0px solid blue;
            border-left: 0px solid green;*/
            border-color: transparent red transparent transparent;
            border-style: solid;
            border-width: 100px 50px 0 0;
        }
        .price {
            width :160px;
            height: 24px;
            border: 1px solid red;
            margin: 0 auto;
        }
        .miaosha {
            float: left;
            width: 90px;
            height: 100%;
            background-color: red;
            text-align: center;
            color: #fff;
            font-weight: 700;
        }
        .miaosha i {
            position:absolute;
            right: 0;
            top: 0;
            width: 0;
            height: 0;
            border-color: transparent #fff transparent transparent;
            border-style: solid;
            border-width: 24px 10px 0 0;
        }
        .orgin {
            font-size: 12px;
            color: gray;
            text-decoration: line-through;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="price">
        <span class="miaosha">
            ￥1650
            <i></i>
        </span>
        <span class="origin">￥5650</span>
    </div>
</body>
</html>