自我记录
块、行内元素、行内块
块元素的可以控制宽和高,独占一行
行内元素不可以控制宽和高,宽度和高度是内容本身
行内块可以设置行高,不独占一行
块元素最大的特点就是,独占一行,宽高可控
常见的块元素有:
<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>