比较杂乱,等学完css一块整理
HTML
<!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">
<link rel="stylesheet" href="demo6.css">
<title>demo6</title>
</head>
<body>
<!-- (1)内容多的时候限制一行(两行、三行)显示,多于内容省略号显示,悬浮显示内容 -->
<!-- <div class="box">
一会给大家发一份考试题,各位抽空不忙的时候做一下,下午2:00收试卷,注意:答题不要都100分,请用红笔填上分数再给我,谢谢大家的配合
</div> -->
<!-- (2)元素可见性:visibility:hidden和display:none区别
display不显示也不占位,visibility不显示但是占位 -->
<div class="box1"></div>
<div class="box2"></div>
<!-- (3)cursor光标属性都有哪些? -->
<!-- (4)flex弹性布局:flex-direction、flex-wrap、justify-content、align-items属性定义 -->
<!-- <div class="box">
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
<div class="box4">4</div>
</div> -->
<!-- (5)px、em、rem的区别
px是css像素大小
em是相对单位,会继承父元素font-size的大小,先看自己是否设置,没有看父元素,一级一级往上找,默认时1em=16px
rem是相对于HTML页面的大小,可以随着页面大小的变化放大缩小,默认时1rem=16px,r->root根目录
在HTML里面写rem是设置大小,在其他元素里面写是应用根的设置
-->
<!-- <div class="per">
一会给大家发一份考试题,各位抽空不忙的时候做一下,下午2:00收试卷,注意:答题不要都100分,请用红笔填上分数再给我,谢谢大家的配合
</div> -->
<!-- (6)矩形盒子四角设置弧度 -->
<div class="bbox"></div>
<!-- (7)transform变换:移动(translate)旋转(rotate)缩放(scale) -->
<!-- 移动(translate) -->
<div class="tf">
<p></p>
</div>
<!-- 旋转(rotate) -->
<div class="rot"></div>
<!-- (8)animation动画:结合@keyframes使用 各属性值含义 -->
<!-- <div class="an"></div> -->
<!-- (9)清除浮动 -->
<!-- <div class="fu">
<div class="fu1"></div>
<div class="fu2"></div>
<div class="clear"></div>
</div>
<div class="down"></div> -->
<!-- 10css伪元素before和after用法 -->
<div class="wei">叫</div>
</body>
</html>
css
* {
margin: 0;
padding: 0;
}
/* body {
/* 使1em=10px */
/* html {
font-size: 10px;
}
*/
/* (1)内容多的时候限制一行(两行、三行)显示,多于内容省略号显示,悬浮显示内容 */
/* .box {
height: 50px;
width: 100px;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.box:hover {
overflow: visible;
}
*/
/* (2)元素可见性:visibility:hidden和display:none区别 */
/* display不显示不占位 */
/* .box1 {
width: 100px;
height: 100px;
background-color: pink;
display: none;
}
.box2 {
width: 100px;
height: 100px;
background-color: greenyellow;
} */
/* visibility不显示但是占位 */
/* .box1{
width: 100px;
height: 100px;
background-color: pink;
visibility: hidden;
}
.box2{
width: 100px;
height: 100px;
background-color: greenyellow;
}
*/
/* (4)flex弹性布局:flex-direction、flex-wrap、justify-content、align-items属性定义 */
/* .box {
width: 700px;
height: 500px;
display: flex;
background-color: darkgray;
// 一行放不下换行,第一行在上
flex-wrap: wrap;
flex-direction: row;
// 在主轴上的对齐方式
justify-content: right;
// 在交叉轴上的对齐方式
align-items: flex-start;
}
.box1 {
width: 200px;
height: 200px;
background-color: pink;
}
.box2 {
width: 200px;
height: 200px;
background-color: orangered;
}
.box3 {
width: 200px;
height: 200px;
background-color: rgb(204, 20, 134);
}
.box4 {
width: 200px;
height: 200px;
background-color: rgb(43, 226, 27);
}
*/
/* (5)px、em、rem的区别 */
/* .per {
font-size: 20px;
font-size: 2em;
font-size: 2rem;
} */
/* (6)矩形盒子四角设置弧度 */
/* .bbox {
width: 300px;
height: 300px;
background-color: lightblue;
border-radius: 10px 20px 30px 40px;
}
*/
/* (7)transform变换:移动(translate)旋转(rotate)缩放(scale) */
/* 用%,移动的距离是用盒子自身的宽度和高度来对比的
这里的50%是100px*/
/* .tf {
position: relative;
width: 600px;
height: 600px;
background-color: lightgreen;
}
p {
position: absolute;
top: 50%;
left: 50%;
width: 200px;
height: 200px;
background-color: purple;
transform: translate(-50%, -50%);
} */
/* 旋转(rotate) */
/* .rot {
width: 200px;
height: 200px;
margin: 50px;
background-color: pink;
}
.rot:hover {
transform: rotate(160deg);
} */
/* 缩放(scale) */
/* .rot {
width: 200px;
height: 200px;
margin: 100px auto;
background-color: pink;
transform-origin: left top;
}
*/
/* transform-origin: left top;变换中心点
*/
/* .rot:hover {
transform: scale(2, 2);
} */
/* (8)animation动画:结合@keyframes使用 各属性值含义 */
/* 定义动画 */
/* @keyframes move {
0% {
transform: translateX(0px);
}
100% {
transform: translateX(500px);
}
}
.an {
width: 200px;
height: 200px;
background-color: lightgreen;
//调用动画
animation-name: move;
// 持续时间
animation-duration: 5s;
}
*/
/* (9)清除浮动 */
/* .fu {
width: 800px;
border: 1px solid red;
margin: 0px auto;
}
.fu1 {
float: left;
width: 300px;
height: 200px;
background-color: purple;
}
.fu2 {
float: left;
width: 300px;
height: 200px;
background-color: palegreen;
}
.down {
height: 200px;
background-color: rgb(30, 33, 210);
}
.clear {
clear: both;
} */
/* css伪元素before和after用法 */
.wei {
width: 200px;
height: 200px;
background-color: pink;
}
.wei::before {
content: '我';
}
.wei::after {
content: '前端程序员';
}