html标签

/*选择的是div ，里面有个类box*/
/*div是块级的，宽度自适应父级的宽度*/
div.box{
  background-color: "#eee";
  height: 300px;
  width:auto;
  /*默认自适应，可不写;可设置最小宽度*/
  min-width:500px;
  /*width:5px;*/
  max-width:800px;
  /*min-height  max-height: */

  padding:15px;
  /*padding没有样式*/
  /*padding:上 15px 右 16px 下 17px  左18px;    */
  /*padding: 上下  15px   左右 30px*/

  padding-left:20px;
  /*padding-right padding-top padding-bottom */

  border:2px solid transparent;
  /*border:width style color*/
  /*如果设置为透明transparent，盒子的颜色会扩展到盒子边上。*/
  border-left-width:50px;
  border-left-style:solid;
  /*solid实线*/
  border-left-color:red;

  margin:20px;
  用法同padding 一个是作用在外，一个是作用在内
}

/*div是块级元素
块级元素特点：独占一行
width height margin border padding都是可控制的
width默认为容器的100%（父级的内容区域的 100% 不关心父级的padding)
可以容纳内联元素
margin可以负*/

div.box{
  padding:10px;
  width:100px;
  height:200px;
  background-color: #eee;

  border:1px solid yellow;
}

.box span{
  /*width:100px;无效*/
  padding:20px;
  border:1px solid red;
}

/*行内无素 内部可以加行内元素作为内联元素。不能加块级元素。

高宽设置无效

可设置内边距 左右的  和外边距。*/

/*盒子宽度：content width +padding+border*/

.box{

  width:200px;
  height:200px;

  padding:15px;

  border:20px solid red;

  margin:50px;

  background-color: blue;
}

.box:nth-child(2){
  box-sizing:border-box;
  /*宽度设置的是边框到里面的宽度；*/

  /*box-sizing:content-box;*/
  /*整个盒子的实际宽度为内容的宽度。*/
}



.box{

    box-sizing:border-box;
    /*表示下面设置的width为包含边框内边距和内容宽度的*/
    width:300px;
    height:200px;

    padding:15px;

    background-color: yellow;
    border:2px solid blue;

    /*margin-left:auto;
    margin-right:auto;*/
    /*这样会居中*/

    /*margin:0 auto 0 auto;
    marin:0 auto;*/

}

/*相对定位 对自身的相对移动，在自己原来的位置自左向右left，
  自右向左right  自下向上botton 自上向下 top*/
  positon:relative;
  top:200px;
  left:100px;

/*上层的任何一个为 relative ,会根据最近的一个上级为 relative
 为主的绝对定位。 如果没有会根据浏览器的位置来绝对定位*/
  position:absolute;
  bottom:100px;
  right:200px

/*fixed相对窗体，一般广告会这样设置*/
  position:fixed;
  bottom:100px;
  right:200px;


/*垂直居中*/
  /*position:relative;
  top:50%;
  margin-top:-50px;
  先是定位到中间线下，再上提身身高度一半。
  margin-left:auto;
  margin-right:auto;
  */

越大越靠上。小的会被隐。

  z-index:1;

布局

.box{
  display: inline;
   /*行内*/
}

/*

div的display默认是block 块级

行内元素如a span的display默认为inline 行内，可以改为块级bolck*/

span{
  display: bolck;
  /*块级*/
}

解决原来的大小和float后乱了的问题。

.products:after{
  content:"";
  display:bolck;
  clear:both;
}

  display:inline-bolck;

  /*会自动将行高撑大一点点，解决高度不一致和情况*/

css 背景

background-position: right botom;
100px 50px;

background-repeat:repeat-y;
repeat-x;

repeat;
no-repeat;

background-clip:border-box;

background-size:contain

cover

100% 100%