小米网页写后记录01

自我记录

块、行内元素、行内块

块元素的可以控制宽和高，独占一行
行内元素不可以控制宽和高，宽度和高度是内容本身
行内块可以设置行高，不独占一行

块元素最大的特点就是，独占一行，宽高可控

常见的块元素有:

<h1>~<h6>
<p>
<div>
<ul>
<ol>
<li>
<dd>
<dl>
<dt>
<hr>
<form>
<header>


<table>
<section>
其中<div>标签是最典型的块元素。

行内元素（内联元素）不独占一行，宽度和高度是内容本身的宽度和高度

常见行内元素有:

<a>
<strong>
<b>
<em>
<i>
<del>
<s>
<ins>
<u>
<span>
其中<span>标签最典型的行内元素。

行内块元素和行内元素差不多。最大区别就是行内块元素可以指定宽度高度以及边距

行内块元素主要有：

<img />
<input />
<td>

图标的使用

去iconfont是选择需要使用的图标导出来
有三种方法，第二种比较简单
第一种

@font-face {
    font-family: 'iconfont';
    src: url('../font_3288419_hannbjegqds/iconfont.woff2?t=1680836295208') format('woff2'),
         url('../font_3288419_hannbjegqds/iconfont.woff?t=1680836295208') format('woff'),
         url('../font_3288419_hannbjegqds/iconfont.ttf?t=1680836295208') format('truetype');
  }
  .iconfont {
    font-family: "iconfont" !important;
    font-size: 16px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

第二种

@import url(../font_3288419_hannbjegqds/iconfont.css);

在使用less时，需要引入一个.less文件，之后需要再引入一个编译器，将其编译成css使用

 <!-- 引入一个less文件 -->
    <link rel="stylesheet" type="text/less" href="../less/inder02.less" />
    <!-- 引入编译 -->
    <script src="../lessmin/less.min.js"></script>

浮动

		float:left;
		 
		float:right;
		 /*  具有清除浮动的功能，此overflow：hidden可以消除好多影响*/
        /* overflow: hidden; */

伪类选择器

<style>
        /*选中第一个元素样式 */
        
        ul li:first-child {
            color: red;
        }
        /*选中最后一个元素样式 */
        
        ul li:last-child {
            color: blue;
        }
        /*选中第三个元素样式 */
        
        ul li:nth-child(3) {
            color: pink;
        }
    </style>
    
    

最先想到的less，方便后面使用

.fl{
    float: left;
}
.fr{
    float:right;
}
/*预防坍塌*/ 
body{
    overflow: hidden;
}
/* 去除a标签的下划线*/ 
a{
    text-decoration: none;
}
li{
    list-style: none;
}

相对定位和绝对定位、固定定位

static 自动定位
relative 相对定位
absolute 绝对定位
fixed 固定定位

相对定位

			相对定位
			position: relative;
            /* 写了定位属性才可以写偏移量 */
            top: 50px;
            left: 50px;

绝对定位

需要前提有相对定位，在相对于父容器有定位属性的容器进行定位

 /* 相对于父容器有定位属性的容器进行定位 */
            position: absolute;
            top:20px;
            left:100px;
            width:100px;
            height: 100px;
            background-color: blue;

固定定位

 /* 固定定位，相对浏览器窗口定位 */
            position: fixed;
            bottom:20px;
            right:20px;

水平垂直

<style>
        *{margin: 0;padding: 0;}
        #app{
            width:800px;
            height: 400px;
            background-color: blue;
            //相对定位
            position: relative;
        }
        .adv{
            width:100px;
            height: 100px;
            //水平居中 padding 没有auto
            //auto 默认只会计算左右边距
            margin:0 auto;
            background-color: red;
            //绝对定位
            position: absolute;
            top:50%;
            left:50%;
            /* transform: translate(-50px,-50px); */
            margin-top: -50px;
            margin-left: -50px;
        }
    </style>