Day02 标签和CSS

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.1margin水平居中

/* 仅对块标签有效*/
margin-left: auto;
margin-right: auto;

• 3.2text-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;
    }