A.今天学到了什么
1.盒子模型的传参
/*1.只传一个参数的时候,四个方向都发生改变*/
margin:100px;
/* 2.传2个参数的时候。第一个参数代表上下,第二个参数代表左右*/
margin:100px 200px;
/* 3.传三个参数的时候,第一个代表上,第二个参数代表左右,第三个参数代表下(按照上右下左的瞬时间顺序改变)*/
margin:100px 200px 300px;
2.html
标签的分类
2.1块标签
/*块标签的特点
1.独占一行
2.能设置宽width 高heigth*/
<div> <p> <h1>~<h6> <ul> <li>
<dl> <dt> <dd>
2.2内联标签
/*内联标签的特点
1.并排显示
2.不能设置宽高
3.不能设置margin top 和bottom*/
<a href=""></a>
<span>span</span>
<strong>strong</strong>
<i>i</i>
<em>em</em>
2.3内联块
/*内联块的特点
1.并排显示
2.可以设置宽高*/
<img> <button> <input>
2.4br
标签
<br>标签是换行
3.水平居中
/*方法1.
不改变属性实现水平居中
给他的父级元素添加text-align center;
*/
/*方法2.
在ssc里面加display:block*/
button{
display: block;
}
4.选择器
4.1 分组选择器
/*用逗号隔开*/
div,h1,p{
color: red;
}
4.2后代选择器
/*
.parent>h1{}
选择parent之后的直接子元素(不包括孙子类元素)
.parent h1{}
选择parent 之后的所有子元素*/
/* .parent>h1{
color: red;
} */
.parent h1{
color: red;
}
<div class="parent ">
<h1>hello world</h1>
<h1>hello world</h1>
</div>
4.3兄弟选择器
/*div+p
+号是选择div之后的第一个p元素
div~p
~号是选择div之后的所有P元素
*/
/* div+p{
color: red;
} */
div~p{
color: red;
}
<div>hello world</div>
<p>ppp</p>
<p>ppp</p
/*focus 鼠标点上去的时候产生效果*/
input:focus{
background: red;
}
5.伪元素
/*是指没有在标签里面命名 ,在css里面命名的元素*/
div:before{
content: "前面";
}
div:after{
content: "后面";
}
<div>hello world</div>
6.属性选择器
6.1属性选择器的用法
/*代表有class=one 的P标签*/
p[class=one]{
width: 100px;
height: 100px;
background: red;
}
<p class="one">hello world</p>
<p>hello world</p>
6.2选择器的优先级别排序
// 优先级别:id>class>p
如果用import修饰了 则为第一优先级别
<p class="one" id="two">hello world </p>
p{
color: red ! important;
}
7.背景
7.1设置背景
/* 设置背景图片 */
background-image: url("images/icon1.png");
/* 没有重复 */
background-repeat: no-repeat;
/* X,Y轴重复 */
/* background-repeat: repeat-x; */
/* background-repeat: repeat-y; */
/* background-repeat: repeat; */
background-position-x: 50px;
background-position-y: 50px;
background-position: center center;
7.2背景吸附
.one{
/*如果子元素不给宽度则会继承父元素的宽度,
这种继承关系只发生在块元素之间*/
height: 400px;
background-color: white;
background-image: url("images/banner.jpg");
background-attachment: fixed;
}
7.3背景大小
div{
width: 800px;
height: 400px;
background-image: url("images/down.jpg");
/*没有重复*/
background-repeat: no-repeat;
/*X轴重复*/
background-repeat: repeat-x;
background-color: red;
/*图片填满*/
background-size: 100% 100%;
}
7.4背景简写
/*简写步骤
颜色 color 图片 img 是否重复 repeat 位置 position*/
background: #eee url("images/down.jpg") no-repeat center center;
8. 雪碧图
div{
width: 18px;
height: 18px;
background-color: #333;
background-repeat: no-repeat;
background-image: url("images/icons_type.png");
background-position-x: -38px;
}
网友评论