10.18图标&&盒子模型

最新推荐文章于 2024-08-17 22:24:13 发布
最新推荐文章于 2024-08-17 22:24:13 发布
阅读量20 收藏
点赞数
文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_61886370/article/details/133905713
版权 
单色图标
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入 -->
    <link rel="stylesheet" href="./font_9jsghj9h2i/iconfont.css">
    <style>
        .iconfont{
            font-size: 28px;
            color: pink;
        }
    </style>
</head>
<body>
    <i class="iconfont icon-lipin"></i>
</body>
</html>


多色图标
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://at.alicdn.com/t/c/font_4291319_ps0ppebkr4.js"></script>
    <!-- 本地引入 -->
</head>
<body>
    <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-a-QQMusic"></use>
      </svg>
</body>
</html>


文本修饰
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    div{
        width: 100px;
        height: 100px;
        border: 1px solid red;
        /* text-decoration 给文字设置上划线overline 下划线underline  删除线 line-through none 默认 */
        text-decoration: none;
        /* 设置文本水平对齐方式 text-align  left center right justify */
        text-align: justify;
        /* 垂直对齐方式 line-height 垂直居中 line-height与height一致*/
        line-height: 100px;
    }
    p{
        /* 设置文本缩进 text-indent */
        text-indent: 2em;
        color: yellow;
    }
    section{
        /* 设置文字形变 text-transform  capitalize 首字母大写 uppercase 转为大写  lowercase 转为小写  full-width 等宽字体*/
        text-transform: capitalize;
        /* 设置文字阴影 h-shadow（水平位置）  v-shadow(垂直位置)  blur(模糊距离)  color(颜色) */
        text-shadow: 5px 5px 5px red;
    }
</style>
<body>

    <div>我是块级元素</div>
    <p>
        段落标签段落标签段落标签段落标签段落标签段落标签段落标签<br>
        段落标签段落标签段落标签段落标签段落标签段落标签段落标签<br>
        段落标签段落标签段落标签段落标签段落标签段落标签段落标签
    </p>
    <section>hello css</section>
    <section>HELLO CSS</section>
</body>
</html>



列表样式
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    li{
        /* 设置列表标志项 */
        list-style-type: disc;
        /* 设置列表标志项的文职 */
        list-style-position: inside;
        /* 自定义列表标志项 */
        list-style-image: url(./images/01.png);
        /* 简写属性 list-style(type url position) */
        list-style: circle url(./images/03.png) inside;
    }
</style>
<body>
    <ul>
        <li>列表标签</li>
        <li>列表标签</li>
        <li>列表标签</li>
    </ul>
</body>
</html>
display属性
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            border: 1px solid red;
            /* 将当前元素设置行内元素 inline  行内块元素 inline-block   */
            display: inline-block;
        }
        span{
            border: 1px solid red;
            display: inline-block;
            height: 100px;
            width: 100px;
        }
    </style>
</head>
<body>
    <div>块级元素</div>
    <span>行内元素</span><span>行内元素</span>
    <div>块级元素</div>
</body>
</html>



css隐藏样式
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 
           隐藏元素方式 
           1.display:none 隐藏元素 不占据原先在浏览器的空间,绑定事件不生效 会引起浏览器重排 显示：block
           2.visiblity:hidden 占据在浏览器的空间，绑定js事件不生效 会引起浏览器重绘  visible显示元素
           3.opacity 透明度 0-1 0：完全透明  占据浏览器空间，绑定js事件生效 一般引起重绘（一个图层，一个标签）
        */

        div{
            width: 100px;
            height: 100px;
            background-color: red;
            /* display: none; */
            visibility: hidden;
            /* opacity: 0; */
        }
    </style>
</head>
<body>
    <div></div>
    <script>
        var div=document.querySelector("div");
        //给div绑定单击时间
        div.onclick=function(){
            alert("hello css")
        }
    </script>
</body>
</html>





overflow
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .parent{
            width: 100px;
            height: 100px;
            background-color: red;
            /* 
               对溢出父元素的处理 overflow
               hidden：对超出内容进行隐藏
               auto：自适应
               scroll：滚动条
            */
            overflow: auto;
            /* 
              游标 cursor
            */
            cursor: alias;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div>块级元素</div>
        <div>块级元素</div>
        <div>块级元素</div>
        <div>块级元素</div>
        <div>块级元素</div>
        <div>块级元素</div>
        <div>块级元素</div>
        <div>块级元素</div>
        <div>块级元素</div>
        <div>块级元素</div>
        <div>块级元素</div>
        <div>块级元素</div>
        <div>块级元素</div>
        <div>块级元素</div>
        <div>块级元素</div>
        <div>块级元素</div>
        <div>块级元素</div>
        <div>块级元素</div>
        <div>块级元素</div>
        <div>块级元素</div>
        <div>块级元素</div>
        <div>块级元素</div>
        <div>块级元素</div>
        <div>块级元素</div>
        <div>块级元素</div>
        <div>块级元素</div>
        <div>块级元素</div>
        <div>块级元素</div>
        <div>块级元素</div>
        <div>块级元素</div>
        <div>块级元素</div>
        <div>块级元素</div>
        <div>块级元素</div>
        <div>块级元素</div>
        <div>块级元素</div>
        <div>块级元素</div>
        <div>块级元素</div>
        <div>块级元素</div>
        <div>块级元素</div>
        <div>块级元素</div>
        <div>块级元素</div>
        <div>块级元素</div>
        <div>块级元素</div>
        <div>块级元素</div>
        <div>块级元素</div>
        <div>块级元素</div>
        <div>块级元素</div>
        <div>块级元素</div>
        <div>块级元素</div>
        <div>块级元素</div>
    </div>
</body>
</html>




盒子属性
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            /* 最大宽度 */
            max-width: 500px;
            /* 最小宽度 */
            min-width: 100px;
            width: 100px;
            height: 100px;
            border: 1px solid red;
            /* 外边距 盒子和盒子之间的距离 */
            /* 上下左右都为10px */
            margin: 10px;
            /* 上下外边距10px 左右20px */
            margin: 10px 20px;
            /* 上边距30px  左右20px 下边距50px */
            margin: 30px 20px 50px;
            /* 上右下左外边距  顺时针 */
            margin: 20px 50px 30px 40px;

            /* paddind 内边距 元素内容到边框的距离 */
            padding: 10px;
        }
    </style>
</head>
<body>
    <div>块级元素</div>
</body>
</html>



盒子模型
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .contentDiv{
            width: 100px;
            height: 100px;
            margin: 10px 20px 30px;
            padding: 13px 27px 32px;
            border: 5px solid red;
        }
        /* 
           内容盒子计算公式（标准盒子）
           宽：内容宽+左右内边距+左右边框  100+27+27+10=164
           高：内容高+上下内边距+上下边框  155
           所占页面宽：内容宽+左右内边距+左右边框+左右外边距  204
           所占页面高：内容高+上下内边距+上下边框+上下外边距  195
        */
        .borderDiv{
            /* 设置盒模型 box-sizing  content-box(内容盒子默认) border-box(边框盒子) */
            box-sizing: border-box;
            width: 100px;
            height: 100px;
            border: 3px solid blue;
            margin: 17px 28px 39px;
            padding: 12px 19px 27px;
        }
        /* 
           边框盒子计算公式
           宽：内容宽+左右内边距+左右边框  100px
           高：内容高+上下内边距+上下边框  100px
           所占页面宽：内容宽+左右内边距+左右边框+左右外边距  100px+28px+28px
           所占页面高：内容高+上下内边距+上下边框+上下外边距  100px+17px+39px
        */
    </style>
</head>
<body>
    <div class="contentDiv">内容盒子</div>
    <div class="borderDiv">边框盒子</div>
</body>
</html>

CSS选择器 ****
  1.标签 id class 后代 子代
  2.交集和并集选择器（组合选择器）
  3.通用兄弟选择器 相邻兄弟选择器
  4.序选择器 伪类选择器 :first-child last-child nth-child 
  5.动态伪类选择器 link visited hover active
  6.属性选择器 p[id='one'] 
    css2以某一个属性开头 [name|='user'] 只能选择以-分割
    css2以某一个属性开头 [name^='user']
    以某一个属性结尾 [name$='name']
    css2 [name~='username'] css3 [name*='u']
  7.通配符选择器 普遍选择器 选取所有标签 *
2.CSS三大特性:************
  1.继承性 给父元素设置样式 后代元素可以继承 
    可继承属性:color text- line- font- letter-spacing word-spacing
    注意：h1作为子元素时候无法继承font-size 参考自身font-size
    a标签作为子元素无法继承color 和 取消下划线 
  2.层叠性 使用多个选择器给同一个标签设置样式
  3.优先级 层叠性冲突问题 
    内联样式>内部样式/外部样式(就近原则)
    !important 不计入权重 优先级最高
    style 属性 1000
    id选择器 100
    类选择器 伪类选择器 属性选择器 10
    标签选择器 伪元素选择器 1
    input[name='user'] 11
3.文本字体属性
  font-size 设置字体大小
  font-style 设置字体是否开启斜体 italic normal
  font-weight 设置字体是否加粗 lighter/normal bold(700) bolder(900)
  font-fmaily 设置字体类型 
  webfont 
    @font-face 
  简写:font:style weight size family; size和family不可以省略
4.字体图标库使用
  单色图标库 
    将选中图标下载到本地
    1.使用link标签引入iconfont.css 
    2.使用i标签设置类名 class='iconfont 图标类名'
5.重排(回流)和重绘 *******************
  重排：当一个dom元素几何位置发生改变，引起浏览器重新排列，
  将其正确显示在页面的过程就叫重排，也叫回流。
  重绘：当一个dom元素的外观发生改变,并不影响排列布局，引起浏览器重新绘制的过程就叫重绘。
  重排和重绘会影响浏览器性能（占据cpu）造成页面卡顿，ui迟缓。
  重排一定会触发重绘，重绘不一定会触发重排！
  造成重排场景：dom元素增加 删除 插入
  重绘：visiblity

6.css隐藏元素方式 ****** 
  1.display:none 不占据原先在浏览器空间 绑定js事件不生效 会引起浏览器重排
  2.visiblity:hidden 占据原先在浏览器空间 绑定js事件不生效 会引起浏览器重绘
  3.opacity:0 占据原先在浏览器空间 绑定js事件生效 一般会引起浏览器重绘(一个图层)
7.CSS盒模型 *******
  1.盒子种类:{
    1.内容盒子 w3c盒子 标准盒子
    2.边框盒子 IE盒子 怪异盒子
  }
  2.盒子区别:
    内容盒子width height是设置给内容区宽高
    边框盒子width height是设置给盒子本身的
  计算公式:
    {
      1.内容盒子 w3c盒子 标准盒子 
        盒子宽:width+左右内边距+左右边框
        盒子高:height+上下内边距+上下边框
        所占页面空间宽:盒子宽+左右外边距
        所占页面空间高:盒子高+上下外边距
    }
    {
      2.边框盒子 IE盒子 怪异盒子 通过box-sizing设置为border-box 
        盒子宽:width 
        盒子高:height
        所占页面空间宽:盒子宽+左右外边距
        所占页面空间高:盒子高+上下外边距
    }

靳jyy
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
scp&ftp&sftp的区别
11-05
例如，连接到远程服务器`10.18.34.115`： ``` ftp 10.18.34.115 ``` 连接成功后，可以通过一系列FTP命令进行文件的上传、下载等操作，如`put`用于上传文件，`get`用于下载文件。 #### 三、SFTP（SSH File Transfer ...
ContextCapture 10.18 简体中文联机帮助.pdf
08-13
该工具能够自动根据大量的影像数据集重建物体、建筑、人造地标或自然地标，适合无人机操作员生成高分辨率的三维模型、数字表面模型（DSM）和真正射影像。 - **三维建模**： 三维建模是一个核心功能，可以生成三维...
10.18
jvrmz的博客
10-18 96
作业
10.18C语言
wave_thriving的博客
10-18 91
10.18作业
zhuyu0828的博客
10-18 82
1.2.3.思维导图。
10.18 作业
2301_79915752的博客
10-18 71
一、二、
Day10.18
tkpudding的博客
10-18 73
有名管道 互相传递信息。
作业10.18
qq_71273830的博客
10-18 62
1. 5个学生按年龄排序。
创新工场（10.18）宣讲会&笔试
10-18 321
<br />10.18，同济嘉定，创新工场宣讲会&笔试，全过程听得感觉他们要的是技术类大牛，最后我连笔试都没想去参加，嘿，都不想写了啊。
10.18初识C语言入门练习
shijinghe的博客
10-18 82
初识C语言自认为已经学会了printf函数，但看到这道题时把自己打回原形，我知道怎么计算它们的size，确不知道怎么输出成目标格式。当我做错几遍后看到答案方感觉自己完全没有理解什么是printf。 ""中即为打印出的内容，而我确不知道，也算又多学会了一点 ...
FreeFileSync_10.18.rar
11-29
注意：是安装包，不是绿色版 FreeFileSync_10.18版：下载解压后有3个安装包，分别是Windows版、Linux版、macOS版，选择对应版本安装使用即可，使用前建议先练练手，避免弄丢文件
CyberChef 10.18.6
06-29
开源的web工具. 功能强大，适用于各种需要数据分析和处理的场景，包括网络安全分析、数据解密、文件压缩和解压缩等。： ... 加密和解密：支持AES、DES、Blowfish等多种复杂加密算法，可用于解密加密的文本或文件，也...
10.18汇报1
08-08
引入UTXO交易模型，可以将凭证资产化，以凭证为中心进行凭证管理，实现双离线验证和凭证撤销的功能。离线验证是UTXO相对于Account交易模型的优势，双离线验
13.体验CSS,CSS的引入方式,标签选择器
Little_Green1的博客
08-13 467
为了看清楚我把整个骨架写进来了,CSS书写在<title>标签下,写了一个<style>双标签,然后在<style>标签内添加选择器,p就是个选择器,这个选择器名字跟HTML代码中<p>标签同名,这种选择器叫标签选择器(<p>标签是段落标签,前面好像忘记讲了),然后在标签后加大括号,在大括号里面写CSS代码.写完然后通过<link>标签引入,<link>标签是什么,以后会学到的,现在知道就行,后面学习我们都是用内部样式表。还有就是行内样式,就是直接在标签里加style属性,属性值写CSS代码,比如。
深入探索CSS的:unresolved伪类：选择未解析元素的神秘面纱
2401_85702623的博客
08-17 559
伪类是CSS的一个选择器，用于选择那些尚未解析的元素。在Web开发中，我们可能会遇到一些元素，它们依赖于外部资源或异步加载的内容，这些元素在加载过程中可能还没有完全解析。使用伪类，我们可以为这些元素定义特定的样式，直到它们完全解析并显示在页面上。
CSS的:placeholder-shown伪类：精确控制输入框占位符样式
最新发布
2402_85758349的博客
08-17 456
伪类代表的是一个输入字段（或元素）在其内显示占位符文本的状态。当输入框为空且占位符可见时，这个伪类就生效。这对于创建更丰富的表单样式和交互效果非常有用。
CSS 的 position 属性
于坤
08-16 236
CSS 的position属性用于指定一个元素在文档中的定位方式。static（默认值）toprightbottomleftrelativetoprightbottomleftabsolutestaticfixedstickytoprightbottomleft。
html+css+js网页设计 电商戴欧妮珠宝网3个页面 有轮播图，折叠面板，一键置顶等功能
qq_42431718的博客
08-13 321
html+css+js网页设计 电商戴欧妮珠宝网3个页面 有轮播图，折叠面板，一键置顶等功能 网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。
ContextCapture 10.18：三维建模与自动化工具
本文档详细介绍了ContextCapture 10.18版本的使用指南，这是一款强大的三维建模软件，由Bentley Systems开发，专为生成高精度的三维模型而设计。软件支持从大规模的影像数据集中重建各种物体、建筑、人造和自然地标...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值