HTML---3
2021-04-10 03:32
标签：拖拽 元素 enter asi normal style for order hid 浮动的框可以左右移动，直到遇到另一个浮动框或者遇到它外边缘的包含框。浮动框不属于文档流中的普通流，当元素浮动之后，不会影响块级元素的布局，只会影响内联元素布局。此时文档流中的普通流就会表现得该浮动框不存在一样的布局模式。当包含框的高度小于浮动框的时候，此时就会出现“高度塌陷”。 1）额外标签法 2）overflow清除浮动 3）after伪元素清除浮动 4）双伪元素清除浮动 1）父亲未定位 2）父亲已定位 HTML---3 标签：拖拽 元素 enter asi normal style for order hid 原文地址：https://www.cnblogs.com/lax-17xu/p/12433183.html1.为什么清除浮动？
2.清除浮动的方法
.clear {
clear: both;
/*如果清除了浮动， 父亲去自动检测孩子的高度 以最高的为准*/
}
.father {
border: 1px solid red;
width: 300px;
overflow: hidden; /*别加错位置了，给 父亲加*/
/*不是所有的浮动我们都需要清除 ，谁影响布局，我们清除谁*/
}
.clearfix:after { /*正常浏览器 清除浮动*/
content:"";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
*zoom: 1; /*zoom 1 就是ie6 清除浮动方式 * ie7一下的版本所识别*/
}
.clearfix:before, .clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
3.相对定位
.top {
position: relative;
top: 100px;
left: 100px;
}
4.绝对定位
.top {
position: absolute; /*不占位置 跟浮动一样*/
right: 0;
bottom: 0;
}
5.定位问题
.son {
width: 200px;
height: 200px;
background-color: purple;
position: absolute;
top: 50px;
left: 50px;
/*若所有父元素都没有定位，以浏览器当前屏幕为准对齐(document文档)。*/
}
.yeye {
width: 800px;
height: 800px;
background-color: skyblue;
position: absolute;
}
.father {
width: 500px;
height: 500px;
background-color: pink;
margin: 100px;
/*position: absolute;*/
}
.son {
width: 200px;
height: 200px;
background-color: purple;
position: absolute;
top: 50px;
left: 50px;
/*若所有父元素都没有定位，以浏览器当前屏幕为准对齐(document文档)。*/
}
6.定位盒子居中对齐
{
width: 200px;
height: 200px;
background-color: pink;
/*margin: 100px auto;*/
/*float: left;*/
position: absolute;
/*position: relative;*/
/*加了定位 浮动的的盒子 margin 0 auto 失效了*/
left: 50%;
top: 50%;
margin-left: -100px;
margin-top: -100px;
}
7.固定定位
.ad {
width: 200px;
height: 200px;
background-color: pink;
position: fixed; /*固定定位*/
left: 0;
top: 100px;
}
8.显示和隐藏
div {
width: 200px;
height: 200px;
background-color: pink;
/*display: 显示*/
/*display: none; 隐藏某个元素 == display: block 显示某个元素 不保留位置*/
/*visibility: visible; 显示某个元素*/
visibility: hidden; /*隐藏某个元素 保留位置的 */
}
9.溢出隐藏
div {
width: 200px;
height: 200px;
border: 1px solid red;
/*overflow: hidden; 溢出隐藏*/
overflow: scroll; /*scroll 滚动条 */
overflow: auto; /*auto 自动 */
}
10.鼠标样式
li {
/*cursor: pointer; 让我们的鼠标样式变成小手*/
/*cursor: text; 让我们的鼠标样式变成选择*/
cursor: default; /* 让我们的鼠标样式小白*/
}
11.轮廓线
input {
outline: none; /*取消轮廓线的做法*/
border: 1px solid #ccc;
width: 200px;
height: 25px;
background: url(images/s.png) no-repeat 180px center;
}
textarea {
resize: none; /*防止拖拽*/
outline: none; /*取消蓝色边框*/
}
12.溢出文字省略号
li {
list-style: none;
width: 200px;
height: 30px;
border: 1px solid pink;
white-space: nowrap;
/*1.强制在同一行内显示所有文本，直到文本结束或者遭遇br标签对象才换行*/
overflow: hidden; /* 2. 超出的部分 隐藏*/
text-overflow: ellipsis; /* 3. 溢出的部分用省略号替代*/
line-height: 30px;
}
13. 精灵图
h3 {
background: url(images/index.png) no-repeat -2px -184px;
width: 26px;
height: 26px;
}
div {
width: 236px;
height: 106px;
background: url(images/index.png) no-repeat 0 -350px;
}
14.字体图标的引入
@font-face { /*声明字体 引用字体*/
font-family: "icomoon"; /*我们自己起名字可以*/
src: url(‘fonts/icomoon.eot?7kkyc2‘);
src: url(‘fonts/icomoon.eot?7kkyc2#iefix‘) format(‘embedded-opentype‘),
url(‘fonts/icomoon.ttf?7kkyc2‘) format(‘truetype‘),
url(‘fonts/icomoon.woff?7kkyc2‘) format(‘woff‘),
url(‘fonts/icomoon.svg?7kkyc2#icomoon‘) format(‘svg‘);
font-style: normal; /*倾斜字体正常*/
}
15.HTML5新标签
header>header>
nav>上篮nav>
aside>aside>
article>article>
time> 12:09 time>
16.after和before伪元素
div::before { /*必须带一个属性 content 伪元素 其实这个 before 是个盒子*/
/* 这个盒子是行内的盒子 可以转换*/
content: "我";
/*width: 200px;
height: 200px;
background-color: pink;
display: block;*/
}
div::after {
content: "18岁";
}