简答
1、行级元素块级元素区别
块级元素:能设置宽高,自己一行 display: block
行级元素:不能设置宽高,很多一行 宽度由内容撑的 display: inline
行级块元素:水平分布 可以设置宽高 display: inline-block
行内元素有:meat title lable span br a style em b i strong
块级元素有:body from select textarea h1-h6 html table button hr p ol ul dl cnter div
行内块元素常见的有: img input td
2、HTML语义化
h p img ul ol (具有特殊含义的标签)
机器读取方便
程序员阅读方便
3、css选择器
标签 类 ID 后代 子代 组合(aa,bb) 伪类(:hover :after) 伪元素(::first-letter)
4、定位几种值
static:默认值,不定位
absolute:相对于最近已定位的祖先元素定位
释放空间
relative:相对于自身定位
fixed:相对于视窗定位
释放空间
inherit:继承父元素
5、css盒模型、相互转化
怪异盒模型:(ie6以下不写doctype时)
width=width+border+padding
标准盒模型:
width=width(添加padding和border元素变大)
box-sizing:border-box;//怪异
box-sizing:content-box;//标准 默认
6、外边距合并(合并为大的)
上下外边距合并
:1、定位 2、浮动
父元素子元素外边距合并解决:
1、定位 2、浮动 3、父元素设置border 4、父元素overflow:hidden;
7、清除浮动塌陷的几种方式
1)、
设置父元素 1、overflow:hidden;
2、设置高度
3、伪元素 .clearfix::after{ content:"";
clear:both;
display:block;
}
2)、添加一个子元素div (
额外标签 )设置css clear:both;
编程
8、实现宽度自适应(也可以用css3弹性盒模型实现)
浮动 定位 margin
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>自适应</title>
<style>
*{
padding: 0;
margin: 0;
}
.left{
background: red;
width: 200px;
height: 200px;
/*float: left;*//*浮动*/
position: absolute;/*定位*/
left: 0;
top:0;
}
.right{
background: blue;
height: 200px;
/*margin-top: -200px;*//*margin*/
margin-left: 210px;
}
</style>
</head>
<body>
<div class="left">
定宽
</div>
<div class="right">
自适应
</div>
</body>
</html>
9、实现div水平垂直居中
margin:0 auto;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
.div1{
height: 500px;
background: #ff0000;
overflow: hidden;/*解决外边距合并*/
}
.div2{
width: 200px;
height: 200px;
background: #ffff00;
margin:150px auto;/*设置宽才有用*/
}
</style>
</head>
<body>
<div class="div1">
<div class="div2"></div>
</div>
</body>
</html>
定位再移动(translate(x,y)或margin)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
.div1{
height: 500px;
background: #ff0000;
position: relative;
}
.div2{
width: 200px;
height: 200px;
background: #ffff00;
position: absolute;
left:50%;/**/
top:50%;
/*margin-left:-100px;*//*知道宽高*/
/*margin-top:-100px;*/
transform: translateX(-50%) translateY(-50%) ;
/*不知道宽高时 配合position:absolute;left:50%;top:50%;使用*/
}
</style>
</head>
<body>
<div class="div1">
<div class="div2"></div>
</div>
</body>
</html>