css的秘密

内部盒子相对于外部盒子居中

正方形盒子
内部元素宽高设置100%继承外部元素的宽高
外部元素设置四周内边距

.box{
	width:100px;
	height:100px;
	padding:30px;
	border:1px solid #000;
}
.box .box1{
	width:100%;
	height:100%;
	background-color:orange;
}

box-sizing:border-box

将padding 与border缩进设置的盒子宽高内部
设置为context-box就改回去了

padding

盒子内边距
一个值 上下左右
两个值 1.上下 2.左右
三个值 1.上 2.左右 3.下
四个值 1.上 2.右 3.下 4.左
padding-top
padding-right
padding-bottom
padding-left

margin

盒子相对浏览器居中

.box{
	width:100px;
	height:100px;
	margin:100px auto;
}

浏览器默认的margin 是body的margin 默认是8px
IE8是上下16px 左右8px
IE7是 上下16px 左右11px

position

absolute 绝对定位
重新新建一个层 把自己之前的位置让出来
设置绝对定位之后 可以加以下四个
left 距离左
right 距离右
top 距离上
bottom 距离下

绝对定位：当父级元素没有开启定位时 默认向上找有定位的元素 如果都没有 就相对于html整个文档定位

relative 相对定位
没有新建层 原本的位置还占据
设置相对定位之后 可以加以下四个
left 距离左
right 距离右
top 距离上
bottom 距离下

相对定位 ：相对自身定位

一般子绝父相
注意：
1.非定位元素如果在定位元素下方 设置绝对定位后 不会覆盖未定位元素
2.如果定位元素在非定位元素上方 设置绝对定位后 会覆盖未定位元素
但是 此时给未定位元素设置相对定位后 原来未定位的元素会覆盖原来设置绝对定位元素

z-index

元素的层级
越大越在上

两栏设计

html,body{
	heigth:100%;
	margin:0;
	overflow-y:hidden;
}
.left{
	position:absolute;
	left:0;
	top:0;
	width:300px;
	heigth:100%;
	background-color:green;
}
.rigth{
	height:100%;
	margin-left:300px;
	background-color:orange;	
}

float

浮动没有新建一个层级
float以后块级元素变成内联块
浮动流：块级元素无法识别浮动流元素的位置
内联 内联快 浮动 溢出隐藏 纯文本都可以识别浮动元素的位置 除了块级元素
清除浮动

方式一 在其后添加一个块级元素 加上clearfix

      .clearfix {
        clear: both;
      }
    <div class="box">
      <div class="inner-box box1"></div>
      <div class="inner-box box2"></div>
      <p class="clearfix"></p>
    </div>

方式二

      ul,
      div::after {
        content: '';
        clear: both;
        display: block;
      }
    <div class="box">
      <div class="inner-box box1"></div>
      <div class="inner-box box2"></div>
    </div>
    //或者
      .clearFix::after {
        content: '';
        clear: both;
        display: block;
      }
    <div class="box clearFix">
      <div class="inner-box box1"></div>
      <div class="inner-box box2"></div>
    </div>

方式三

      .box {
        overflow: hidden;
      }
    <div class="box">
      <div class="inner-box box1"></div>
      <div class="inner-box box2"></div>
    </div>

伪类伪元素

伪元素 必须要加上content:“”

京东轮播图小圆点

			.slider {
				position: relative;
				width:590px;
				height:470px;
			}
			.slider .indicator {
				position: absolute;
				left:46px;
				bottom:20px;
				width:152px;
				height:18px;
			}
			.slider .indicator .indicator-dot {
				display: block;
				float:left;
				position: relative;
				width:18px;
				height:18px;
				box-sizing: border-box;
			}
			.slider .indicator .indicator-dot.active::before {
				content:"";
				display: block;
				width:18px;
				height:18px;
				background-color: #fff;
				border-radius: 50%;
				opacity: .2;
			}
			.slider .indicator .indicator-dot::after {
				content:"";
				display: block;
				position: absolute;
				left:4px;
				top:4px;
				width:6px;
				height:6px;
				border:2px solid #fff;
				border-radius: 50%;
				opacity: .4;
			}
			.slider .indicator .indicator-dot.active::after {
				opacity: 1;
				background-color: #fff;
			}

    <div class="slider">
      <div class="indicator">
				<i class="indicator-dot active"></i>
				<i class="indicator-dot"></i>
				<i class="indicator-dot"></i>
				<i class="indicator-dot"></i>
				<i class="indicator-dot"></i>
				<i class="indicator-dot"></i>
				<i class="indicator-dot"></i>
				<i class="indicator-dot"></i>
			</div>
      <img src="./img/q.jpg" alt=""></img>
    </div>

content

添加小图标时使用

      p:before {
        content: url(img/icon.png);
        margin-right: 5px;
        vertical-align: middle;
      }
    <p>点击发送信息</p>

      p:before {
        content: attr(data-username);
      }
    <p data-username="superatc">,欢迎来到本网站</p>

盒子阴影

box-shadow
水平位置（必） 垂直位置（必）模糊距离 阴影的尺寸 阴影的颜色 阴影的种类
阴影尺寸是对偏移量的扩展 当有偏移量的时候 效果相当于 没有偏移量的时候 把阴影尺寸值加到偏移量上 比如下面的box1与box2的效果是一样的
但是当没有偏移量的时候 阴影尺寸会在原基础上向四周扩展

      .box1 {
        width: 300px;
        height: 150px;
        background-color: orange;
        box-shadow: 10px 10px 5px 5px;
      }
      .box2 {
        width: 300px;
        height: 150px;
        background-color: orange;
        box-shadow: 15px 15px 5px;
      .box3 {
        width: 300px;
        height: 150px;
        background-color: orange;
        box-shadow: 0 0 10px 10px;
      }

inset 阴影效果向内 不加就向外

让上面被遮住 其余三个方向有阴影

      body {
        margin: 0;
      }
      .header {
        position: relative;
        z-index: 1;
        width: 100%;
        height: 60px;
        background-color: yellow;
      }
      .box {
        width: 300px;
        height: 200px;
        background-color: orange;
        margin-left: 200px;
        box-shadow: 0 0 10px #666;
      }
    <div class="header"></div>
    <div class="box"></div>

border-radius

纯圆 宽高相同 border-radius设置为50%
半圆角 border-radius设置为height的高度的一半
当盒子中有img图片时 设置圆角会被图片遮住 怎么解决呢

      .box {
        width: 440px;
        height: 248px;
        border: 1px solid #000;
        border-radius: 20px;
        overflow: hidden;
      }
      img {
        width: 100%;
      }
    <div>
      <img src="./img/q.jpg" alt="" />
    </div>

background-repeat

设置背景图片是否重复
默认值是repeat重复
no-repeat 不重复
repeat-x x方向重复
repeat-y y方向重复

background-size

设置背景图片的尺寸
第一个值为宽 第二个值为高
contain 无论页面怎么放大缩小 图片是否被挤压 都要将图片完整的显示出来（图片自身的宽高比不变 必须缩放直到完整的放到容器中 不会剪切 容器该留白留白）
cover 不管图片和盒子多大 只要占满整个盒子 多余切除不要（宽高比例不变 铺满整个容器的宽高 多余的被剪切掉）

background-position

图片在盒子中的位置
center center 居中
50% 50% 居中
10px 30px 距离左侧q10px 距离右侧30px
top right 右上
bottom right 右下
…
先是横坐标 再是纵坐标

background-image

设置背景图片
url() 里面存放图片路径

让背景图片在页面缩放的时候 图片不会被挤压变形

background-size:cover
而且让图片在页面中正确的位置显示
background-position:center center

页面很高 滚动条滚动时让背景图片不滚动

background-attachment:fiexd

background

复合写法
顺序
background-color background-image background-repeat background-arrachment background-position/background-size