1.盒子模型
margin,padding传参
/*margin:100px
1.只传一个参数，四个方向都发生改变
margin:100px 50px
2.传两个参数，第一个参数是上下(top,bottom)，第二个参数是左右(left,right)
margin: 100px 50px 20px;
3.传三个参数，第一个参数是上(top)，第二个参数是左右(left,right)，第三个参数是下(bottom)
margin: 100px 50px 20px 10px;
4.传四个参数，顺序为上右下左(top,right,bottom,left)顺时针
padding 同理
*/
div{ width: 100px;
height: 100px;
background: red;
/* margin:100px; */
/* margin:100px 50px; */
margin: 100px 50px 20px;
}
2.
HTML标签的分类
-
2.1 块标签
块标签有：div,h1~h6,p,ul,li,dl,dt,dd
/*块标签
特点：
1.独占一行
2.能设置宽高width,height
3.可以设置margin
*/
//CSS
div{
width: 100px;
height: 100px;
background: red;
margin-right: 100px;
padding-top: 20px;
}
//HTML
<div>div</div>
效果：
image.png
-
2.2内联标签
内联标签有：a,span,em,strong
/*
内联标签
特点：
1.并排显示
2.不能设置宽高width,height
3.不能设置margin-top和bottom,但margin-left和right可以设置
*/
//CSS
a{
width: 100px;
height: 100px;
background: green;
padding-top: 20px;
margin: auto;
}
//HTML
<a href="#">a</a>
效果：
image.png
-
2.3内联块标签
内敛块标签有：button,img,input
/*
内联块
特点：
1.并排显示
2.能够设置宽高
*/
//CSS
img{
margin: 20px auto;
width: 100px;
height: 100px;
}
//HTML
<img src="../images/icon1.png" alt="">
效果:
image.png
-
2.4 本质
块，内联，内联块的本质是属性display
/* 块标签*/
display:block;
/* 内联标签*/
display:inline;
/* 内联块标签*/
display:inline-block;
3. 水平居中
-
3.1
margin水平居中
/* 仅对块标签有效*/
margin-left: auto;
margin-right: auto;
-
3.2
text-align:center水平居中
/* 若要使内联标签水平居中则
给他的父级元素加text-align:center*/
/*CSS*/
.parent{
text-align: center;
}
/*HTML*/
<div class="parent">
<img src="../images/icon1.png" alt="">
</div>
4.选择器
-
4.1分组选择器
div,p,h1{
color:red;
}
-
4.2后代选择器
/*后代选择器
.parent>h1{}
选择parent之后的直接h1子元素
.parent h1{}
选择parent之后的所有h1元素
*/
.parent>h1{
color:green;
}
.parent h1{
color:green;
}
-
4.3兄弟选择器
/*兄弟选择器
div+p{}
1.div和p同级
2.选中div后的第一个p元素
*/
div+p{
color: red;
}
/*div~p{}
1.div和p同级
2.选中div后的所有p元素
*/
div~p{
color: red;
}
-
4.4伪类选择器
/*伪类选择器
输入框被选中（获取焦点时）
*/
input:focus{
background: red;
}
-
4.5伪元素
/*伪元素为客户自己定义生成的元素，并不是html预定义好的元素*/
div:after{
content: '后面';
display: block;
margin: 20px;
}
-
4.6属性选择器
/*选择class为one的所有元素*/
p[class=one]{
width: 100px;
height: 100px;
background: red;
}
-
4.7选择器的优先级别排序
/*CSS*/
p{
color: red !important;
}
.one{
color: yellow;
}
#two{
color: green;
}
/*优先级别为
!important> id 选择器 > class选择器> 元素选择器
*/
<!--HTML-->
<p class="one" id="two">hello world</p>
5.CSS背景
-
5.1背景样式
div{
width: 100px;
height: 100px;
/*background-color 设置背景颜色*/
background-color: #eee;
/*background-image 设置背景图片*/
background-image: url("../images/icon1.png");
/*background-repeat 图片重复方式 no-repeat|repeat-x|repeat-y*/
background-repeat: no-repeat;
/*background-position-x 水平方向偏移
background-position-y 竖直方向偏移
background-position 第一个参数水平方向，第二个参数竖直方向*/
background-position: center center;
}
-
5.2背景吸附
.one{
/*子元素不给width，它会继承父元素的宽度
只发生在块元素之间*/
height: 468px;
background-color: #eee;
background-image: url("../images/banner.jpg");
/*背景吸附 默认值为scroll
fixed:背景图片不会随屏幕的滚动而滚动
background-attachment: scroll | fixed*/
background-attachment: scroll;
}
.two{
height: 800px;
background: pink;
}
-
5.3背景大小
/*background-size:100% 100%;
参数1：水平方向大小
参数2：竖直方向大小*/
div{
width: 800px;
height: 400px;
background-image: url("../images/down.jpg");
background-color: red;
background-repeat: no-repeat;
background-size: 100% 100%;
}
-
5.4背景简写
div{
width: 800px;
height: 400px;
/*简写
参数1：颜色
参数2：图片
参数3：是否重复
参数4：位置x
参数5：位置y*/
background: #eeeeee url("../images/down.jpg") no-repeat center center;
}
-
5.5 CSS雪碧图
/*CSS雪碧图就是将多个icon放在同一张图里面
通过对背景图片位置的不同来获得不同的icon
可以使得加载速度变快*/
div{
width: 18px;
height: 18px;
background-color: #333;
background-repeat: no-repeat;
background-image: url("../images/icons_type.png");
background-position-x: -19px;
}
