盒子模型

css盒子模型

组成: content------>padding------>border----->margin
物品 填充物 包装盒 盒子与盒子之间的间距
content: 内容区域 width和height组成的

		padding:  内边距(内填充)
			只写一个值:30px  (上下左右)
			写两个值: 30px  40px (上下  左右)
			写三个值:30px  40px 30px  40px(上 右 下 左)
		
		单一样式只能写一个值:
				padding-lift:
				padding-right:
				padding-top:
				padding-bottom:
		margin:  外边距(外填充)
			只写一个值:30px  (上下左右)
			写两个值: 30px  40px (上下  左右)
			写三个值:30px  40px 30px  40px(上 右 下 左)
		
		单一样式只能写一个值:
				margin-lift:
				margin-right:
				margin-top:
				margin-bottom:
		注意:
			1.背景色填充到margin以内的区域(不包括margin区域)
			2.文字在content区域添加
			3.padding不能为负数,而margin可以为负数

box-sizing
box-sizing属性允许您以特定的方式定义匹配某个区域的特定元素。取值为content-box（默认值）| border-box。

盒子模型的一些问题:
		1.margin叠加问题,出现在上下margin同时的时候,会取上下中值较大的作为叠加的的值
		解决方案:
			1.BFC规范
			2.想办法只给一个元素添加间距
	    2. margin传递问题,出现在嵌套的结构中,只是针对margin-top的问题
	    	解决方案:
			1.BFC规范
			2.给父容器加边框
			3.margin换成padding

模子模型扩展:
1.margin左右自适应是可以的,但是上下是不可以的
2.width,height不设置时,对盒子模型的影响,会自动计算容器的大小,节省代码

最大最小宽高

min-width ,min-height
max-width ,max-height

%单位:换算------>以父容器的大小进行换算的

css层次选择器

	后代  M  N  { }
	父子  M> N  {  }
	兄弟 M  ~  N {  } 当前M下面的所有兄弟N标签
	相邻 M+N { } 当前M下面相邻的N标签

属性选择器

M[attr]{}
=  : 完全匹配
*=  : 部分匹配
^= : 起始匹配
$= : 结束匹配
[] [] [] : 组合匹配

css伪类

M:伪类 { }
:link   访问前的样式              (只能添加给a标签)
:visited 访问后的样式           (只能添加给a标签)
:hover  鼠标移入时的样式    (可以添加给所有的标签)
:active  鼠标按下时的样式    (可以添加给所有的标签)

伪类选择器

:after  , :before    通过伪类的方式给元素添加一个文本内容,使用content属性
:checked  , disabled  , :focus都是针对表单元素的

结构性伪类选择器:
	nth-of-type()     nth-child()
	角标是从一开始的,1表示第一项,2表示第二项    |    n值    表示从0到我穷大
	first-of-type(第一个)
	last-of-type(最后一个)
	only-of-type(唯一一个)

css的默认样式

没有默认样式的 :div  ,span....
 
有样式的 :
		body:有默认margin--->8px
		h1:有默认margin----->上下21.44px
   `	p:有默认margin----->上下16px
   		ul:有默认margin----->上下16px  padding: 左 40px
   		....................

css样式重置

css reset:

ps的使用

float浮动

文档流
	文档流是文档中可显示的对象排列时所占用的位置
float特性
	加浮动的元素,会脱离文档流 ,会延迟父容器靠左或靠右排列,如果之前已经有浮动的元素,会挨着浮动的元素进行排列
float取值
	left
	right
	none(默认)

如何清除浮动
	上下排列:  
				 clear属性:  表示清除浮动的  left  ,right  ,both
	嵌套排列:
				固定宽高:不推荐，不能把高度固定死，不适合做自适应的效果。
				父元素浮动:不推荐,因为父容器浮动也会影响到后面的元素。

				overflow : hidden (BFC规范)，如果有子元素想溢出，那么会受到影响。
				display : inline-block (BFC规范)，不推荐，父容器会影响到后面的元素。
				设置空标签:不推荐,，会多添加一个标签。
				after伪类:推荐，是空标签的加强版，目前各大公司的做法。(clear属性只会操作块标签,对内联标签不起作用)

.clear:after{ content: ''; clear : both; display: block;}
清除：在...之后{内容：''；清除：两者；显示：块；}

position定位

浮动适用于左右布局,定位适用于叠加的布局
position取值
static: （默认）
relative:相对定位
absolutejued :绝对定位
fixed :固定定位
sticky :粘性定位

relative:相对定位
	如果没有定位偏移量，对元素本身没有任何影响不使元素脱离文档流
	不影响其他元素布局
	left. top、 right、bottom是相对于当前元素自身进行偏移的

absolute :绝对定位
	使元素完全脱离文档流
	使内联元素支持宽高（让内联具备块特性)
	使块元素默认宽根据内容决定(让块具备内联的特性）
	如果有定位祖先元素相对于定位祖先元素发生偏移，没有定位祖先元素相对于整个文档发生偏移（绝对、相对、固定)

css圆角

border-radius
	给标签添加圆角

PC端的布局

通栏 :自适应浏览器的宽度
版心:固定一个宽度,并且让容器居中

CSS cursor 属性

  #banner .banner_btn li{ display: inline-block; width: 12px;
            height: 12px;   
            border: 2px solid blueviolet; 
            border-radius: 50%;/*设置圆角  */
            /* box-sizing: border-box; 为元素设定的宽度和高度决定了元素的边框盒。
就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。
通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。 */
            box-sizing: border-box;
            margin: 0 6px;/* 设置小圆圈之间间距 */
            cursor: pointer;/* 光标呈现为指示链接的指针（一只手） */
        }