一,三种元素的概括
块级元素:<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>;
行内元素:<a>、<strong>、<b>、<em>、<i>、<del>、<S>、<ins>、<u>、<span>;
空元素:<input>,<img>,<link>,<meta>,<br>,<hr>;
二,定位的种类及其特性
一,静态定位
1.按照标准流摆放,没有边偏移。
二,绝对定位
1.如果没有父级及以上元素或祖先元素没有定位,以浏览器为定位标准
2.如果祖先元素有定位,则以最近的有定位的祖先元素为参考点
3.绝对定位不占有原先位置
三,相对定位
1.相对于原来的位置移动
2.原来的位置继续占有,后面的元素以标准流对待(不脱标)
四,固定定位
1.以浏览器的可视窗口为参照点移动元素
2.跟父元素没有关系
3.不随滚动条滚动而移动
4.投标(特殊的绝对定位)
三,取消浮动的几种方法
1. 父级元素添加overflow,将其属性设置为hidden(常用),auto,scroll
2.:after 伪元素法
.clearfix:after{
content:"";
display: block;
height:0;
clear: both;
visibility: hidden;
}
.clearfix{
*zoom:1;
}
/..照顾低版本浏览器../
3.:双伪元素清除浮动
.clearfix:before,.clearfix:after{
content:"";
display:table;
}
.clearfix:after{
clear:both;
}
四,选择器的种类及其优先级
选择器 | 选择器权重 |
---|---|
继承或* | 0 0 0 0 |
元素选择器,属性选择器 | 0 0 0 1 |
类,伪类选择器 | 0 0 1 0 |
id选择器 | 0 1 0 0 |
行内样式style=“” | 1 0 0 0 |
!important | 无穷 |
优先级注意点:
1.权重是有4组数字组成,但是不会有进位。
2.可以理解为类选择器永远大于元素选择器,id选择器永远大于类选择器,以此类推.
3.等级判断从左向右,如果某一位数值相同,则判断下一位数值。
4.可以简单记忆法:通配符和继承权重为0,标签选择器为1,类(伪类)选择器为10,id选择器 100,行内样式表为
1000,!important无穷大.
5.继承的权重是0,如果该元素没有直接选中,不管父元素权重多高,子元素得到的权重都是0.
五,使网页中的标签消失的方法(js笼罩层,需要时再让他出现)
1.display:none;(将整个元素隐藏,并且不会占据任何的空间)
2.visibility:hidden;(元素的内容不可见,但是元素仍然保持原来的位置和大小)
4.overflow:hidden将要隐藏的元素移除父元素的范围。
5.设置元素为透明:即opacity:0;
六,BFC是什么及其作用
即块级格式化上下文。它是W3C CSS2.1规范中的一个概念,用于布局块级盒子的独立渲染区域。
可以把BFC理解为一个封闭的大箱子,这个箱子内部的元素无论如何翻江倒海都不会影响到外部。同时,BFC具有普通容器所没有的一些特性,如可以包含浮动元素等。在网页中创建BFC可以实现一些特殊的布局效果或解决某些布局问题。例如,可以防止垂直外边距叠加、自适应两栏布局、清除浮动等。触发BFC的方式有多种,包括根元素或其它包含它的元素、浮动元素(元素的float不是none)、绝对定位的元素(元素具有position为absolute或fixed)以及overflow值不为visible的块元素等。
七,盒子居中的方式
1 margin-left:auto; margin-right:auto;
2 margin:auto;
3 margin:0 auto;(最常用)
4.left:50%;
top:50%;
transform:(-50%,-50%);
八,如何建立倒三角
一,实体三角
div{
width:0;
height:0;
line-height:0;
font-size:0;
border:50px solid transparent;
border-left-color:#xxx;
}
二,使用字体图标并进行引用
三,使用旋转制作
div::after{
content:"";
position:absolute;
top:xxpx;
right:xxpx;
width:xxpx;
height:10px;
border-right:1px solid #xxx;
border-bottom:1px solid #xxx;
transform:rotate(45deg);
transition:all 0.6s;
}
九,用css画一条0.5px的线
1.一条水平的直线
div{
height:1px;
width:100px;
background-colour:black;
transform:scaleY(0.5);
transform-origin:50% 100%;
}
2.一条竖直的短线(用来分隔网页图标)
div{
width: 1px;
height: 12px;
background-color: #666;
margin: 9px 15px 0;
}
十,常见网页布局模型
一
top |
banner |
mian |
footer |
二
top | |
banner | |
left | right |
footer |
三
top | ||||
banner | ||||
footer |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>京东</title>
<style>
li {
list-style: none;
}
* {
margin: 0;
padding: 0;
}
.top {
height: 50px;
background-color: beige;
}
.banner {
width: 980px;
height: 150px;
margin: 0 auto;
margin-top: 15px;
background-color: blue;
}
.box {
width: 980px;
height: 300px;
margin: 0 auto;
margin-top: 15px;
background-color: pink;
}
.box li:nth-child(-n+4) {
width: 237px;
height: 300px;
float: left;
background-color: chartreuse;
}
.box li:nth-child(-n+3) {
margin-right: 10px;
}
.footer {
height: 300px;
background-color: blueviolet;
margin: 0 auto;
margin-top: 15px;
}
</style>
</head>
<body>
<div class="top">
top
</div>
<div class="banner">
banner
</div>
<div class="box">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
<div class="footer">
footer
</div>
</body>
</html>