CSS基础重点标签总结

• display：block 块级元素的转换 如：把超链接转换为块级元素，点击一块区域就能进行跳转而不只是点击超链接行级元素

a{
dispiay:block;
}

• display：inlien; 块级元素转换为行级元素

div{
display：inlien
}

• display: bolck-inlien 行内块元素

span{
display: bolck-inlien
}

• 取色小工具

• backgroud-repeat属性
  图片不平铺backgroud-repeat:no-repeat;
  图片平铺：backgroud-repeat:repeat;
  图片沿着X轴平铺：backgroud-repeat:repeat-x;
  图片沿着Y抽平铺：backgroud-repeat:repeat-Y;
• 背景图片的位置
  background-position:x y; x坐标，y坐标

方位名称，顺序无关
 background-position:center top;
 background-position:top right;
  background-position:right;
  background-position:top;
  background-position:-+20 -+39;
  background-position:centen -28

• 网上扒图片方法
  1、f12-打开网站的图片Css样式-右键-点击open in new tap-打开一个新的窗口-点击图片另存为就好了
  

• 背景图片固定
  background-attachment:scroll 图片随着滚动条滚动 | fixed 图片固定

• boder-collapse：collaspe 合并边框

• 清楚内外边距

*{
padding：0px;
margin:0px;
}

属性	解释
padding:10px	内边距上下左右都为10
padding:10px 20px	内边距上下为10px,左右为20px
padding:10px 20px 10px	上 左右 下
padding:10px 20px 10px 10px	上右下左

• float浮动
  1、float属性用于创建浮动框，将其移动到浏览器的最左端或者最右端，比如：两个div都加了右侧浮动，一个div先浮动到浏览器最右侧另外一个也浮动过去紧挨着第一个div 所有起到了一行显示的作用
  2、脱标：脱离标准普通流的控制（浮）移动动到指定位置（动）
  3、浮动盒子不再保留原先的位置
  个人理解：浮动相当于浮起来了，后面的补齐，从上往下看，浮起来的盒子会压住底下的盒子

float:left;
float:right;
float:none;

• 权重
  复合选择器会有权重叠加的问题，权重会叠加不会进位
  那个权重大 运行哪个
  ui：0001

ui li 权重计算： 0,0,0,1+0,0,0,1=0,0,0,2 {}
.nav li 权重计算：0010+0001=0011{}
a:hover 权重计算：0010+0001=0011{}

• 清除浮动
  A、 为什么要清除浮动
  父子盒子有时候不方便给高度，但是 加了浮动的盒子会浮起来，最后父级盒子的高度为0，后排的div会自动填充位置，布局会乱
  1、父级没有高度
  2、子盒子浮动了
  3、影响下面的布局，我们就应该清除浮动了
  B、 清除浮动的方法
  1、额外标签法（闭合浮动/隔墙法）
  必须是块级元素

<style>
.clear{clear:both}
</style>
<div class="box">
<div class="damao">大毛</div>
<div class="damao">二毛</div>
<div class="clear">清除浮动</div>
</div>

2、父级添加overflow属性

.box{
overflow:hidden;
overflow:auto;
overflow:scroll;
}

3、父级添加after伪元素

 .clearfix:after{
 centent:"";
 display:block;
 height:0;
 clear:both;
 visibility:hidden; 
}
.clearfix{
*zoom:1;
}
<div class="clearfix"></div>

4、父级添加双伪元素

 .clearfix:before,.clearfix:after  相当于前面堵了一面墙后面堵了一面墙不然浮动盒子跑位{
 centent:"";
 display:table;
}
.clearfix:after{
clear:both;
}
.clearfix{为了照顾低版本浏览器设定的标签
*zoom:1;
}
<div class="clearfix"></div>

行内块元素：表单、图片 单元格 行内块元素中间会有空隙，导致两个盒子再父级装不下换行显示