html-css7 定位/水平和垂直方向属性/元素层级/图标字体库/字体设置和样式/水平垂直对齐/文本修饰及省略号

木一叶liuyue

已于 2022-09-08 20:55:56 修改

阅读量428

点赞数 1

分类专栏：前段文章标签： html css

于 2021-08-04 17:28:05 首次发布

本文链接：https://blog.csdn.net/Kerryliuyue/article/details/119389192

版权

前段专栏收录该内容

47 篇文章 0 订阅

订阅专栏

定位(position)‘

关于层级：浮动提升半层，只有在浮动的时候才需要考虑元素分两层定位元素提升一层相对定位会有残留

-定位是一种更加高级的布局手段
-通过定位可以将元素摆放到页面的任意位置
-取值:
        static 默认值，元素静止就是没有开启定位
        relative 开启元素的相对定位
        absolute 开启绝对定位
        fixed 开启元素的固定定位
        sticky 开启元素的粘滞定位

相对定位:

需要设置元素的偏移量，否则不会发生任何的变化
一定要先开启定位，再设置偏移量
偏移量(offset):top/bottom/left/right
请添加图片描述

绝对定位:

            当position属为absolute时，开启相对定位
            开启后，元素的位置（有一些性质变化了）没有发生变化，
            元素将从文档流中脱离
            绝对定位会改变元素的性质，行内变成块，块的宽高被内容撑开（没有内容就没有宽高）
            绝对定位会提高元素的层级
          定位位置  绝对定位是相对于其包含块？？进行定位的
            
    包含块 
            包含块是离当前元素最近的祖先块元素
    那开启绝对定位的包含块是哪个 
            就是离他最近的的开启了定位（开启了任意定位）的祖先元素
            如果所有祖先元素都没有开启，那就是根元素

高度塌陷相关问题

当子元素脱离文档流的原因是float，则可以通过开启BFC解决。
但是如果子元素脱离文档流是因为absolute或者fixed，则开启BFC同样不管用。这种情况下，CSS没有办法解决，只能通过JS获取子元素的高度然后赋值给父元素来解决。

固定定位:

将元素的position设置为fixed即开启了元素的固定定位
大部分和绝对定位一样，唯一不同的是参照物
固定定位永远参照于浏览器的视口定位
固定定位的元素不会随网页的滚动条移动，会永远定在那个地方

粘滞定位:

positon设置为sticky，
与相对定位基本一致，不同的是粘滞定位到达某个位置固定在某个位置
position: sticky;
top: 0; 定位在最高处不动
兼容性不好

<!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>
</head>
<style>
    body{
        font-size: 60px;
    }
    
    .box1{
        height: 200px;
        width: 200px;
        background-color: orange;
    }
    .box2{
        height: 200px;
        width: 200px;
        background-color: #bfa;
       /* margin-left:200px;
        margin-top: -200px;*/
        position: relative;
        left:200px;
        top: -200px;
    }
    .box3{
        height: 200px;
        width: 200px;
        background-color: yellow;
       
    }
</style>
<body>
    <div class="box1">1</div>
    <div class="box2">2</div>
    <div class="box3">3</div>
</body>
</html>

水平和垂直方向的属性

请添加图片描述

元素的层级

只要是定位，层级就是一样的
如果元素的层级一样，优先选择靠下的元素
祖先元素的层级再高，也不会超过后代元素
请添加图片描述

图标字体

视频链接

https://www.bilibili.com/video/BV1XJ411X7Ud?p=77&spm_id_from=pageDriver

网站链接

https://fontawesome.com/v5.15/how-to-use/on-the-web/setup/hosting-font-awesome-yourself

阿里巴巴字体库IConfont

font awesome图标字体库
视频链接

https://www.bilibili.com/video/BV1XJ411X7Ud?p=79

网站链接

https://www.iconfont.cn/user/detail?spm=a313x.7781069.1998910419.dfa9d9a29&uid=6658226

新建项目添加到购物车，在个人那下载到桌面上，拉到vscode里面，引入iconfont.css
请添加图片描述

在css.all-css中快捷键Ctrl+F 然后查找@font 查找fas或者 fab中的font-family和font-weight ！！font-weight不对的话，就不显示

<!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>
    <link rel="stylesheet" href="/01/font/css/css/all.css">
</head>
<style>
    li{
        list-style: none;
    }
    li::before{
        /*通过伪元素设置图标字体
        1.找到要设置图标的元素通过before或after选中
        2.在content中设置字体的编码
        3.设置字体的样式
         fab 
         font-family:'Font Awesome 5 Brands';

         fas
         font-family:'Font Awesome 5 Free';
         font-weight:80px;
        */

        content:'\f1b0';
        font-family: 'Font Awesome 5 Free';
        font-weight: 900;
        color:royalblue;
        
        margin-right: 10px;
    }
</style>
<body>
    <ul>
        <i class="fas fa-cat"></i>
        <li>锄禾日当午</li>
        <li>汗滴禾下土</li>
        <li>谁知盘中餐</li>
        <li>粒粒皆辛苦</li>
    </ul>
<!--通过&#x-->
    <span class="fas">&#xf0f3;</span>
</body>
</html>

请添加图片描述

行高

请添加图片描述

水平和垂直对齐

vertical-align 只对行内元素、表格单元格元素生效：不能用它垂直对齐块级元素！
在这里插入图片描述
请添加图片描述

字体样式

请添加图片描述

在这里插入图片描述

木一叶liuyue

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html-css7 定位/水平和垂直方向属性/元素层级/图标字体库/字体设置和样式/水平垂直对齐/文本修饰及省略号

定位(position)-定位是一种更加高级的布局手段-通过定位可以将元素摆放到页面的任意位置-取值: static 默认值，元素静止就是没有开启定位 relative 开启元素的相对定位 absolute 开启绝对定位 fixed 开启元素的固定定位 sticky 开启元素的粘滞定位相对定位:需要设置元素的偏移量，否则不会发生任何的变化一定要先开启定位，再设置偏移量偏移量(offs
复制链接

扫一扫