盒子模型： padding为1个值代表上下左右四个值相同； padding为2个值:第一个代表上下内边距，第二个代表左右内边距； padding为3个值:第一个代表上内边距，第二个值代表左右内边距，第三个值代表下内边距； padding为4个值:分别代表上、右、下、左内边距
1.margin:.两个盒子上下排列时，上面盒子margin-bottom，下面盒子margin-top，两个盒子间的距离取最大者。
2.两个盒子互相包含，都有margin-top值时，以大者为主。
3.两个盒子左右排列，左边盒子有margin-right，右边盒子有margin-left。两个盒子间距离为两个之和。
4.border-style:solid（实心） dotted（小圆点状） dashed（虚线）double（双实线） transparent（透明）默认solid
5.上三角形： width:0; border:10px solid transparent; border-top-color:red;
6.行内元素、行内块级元素转化为块级元素: display:block;任何元素转化为行内块级: display:inline-block;任何元素转化为行内元素: display:inline;
7.去掉边框: border:none;解决间距问题: font-size:0或者将margin-left设为负值;任何元素消失不见:display:none;
8.CSS精灵——sprite雪碧图
9.背景图片:background-image;background-repeat:定义背景图片的显示方式（默认水平垂直都平铺）
background-position:定义图片的位置，如center center
background-size:定义背景图片的大小 length | percentage | cover | containcover:等比例扩展至足够大，可能会引起图片的切割（可能图片无法显示完整）contain:等比例扩展至足够大，图片完整（可能会引起局域内空白）
background-origin:定义背景图片的渲染位置，背景图片可以放置于content-box、padding-box、border-box
background-attachment:定义背景图片是否固定或者随着页面的其余部分滚动（标准文档流:浏览器解析HTML）scroll（背景图片会随着正常的文档流滚动）（默认）fixed（背景图片固定不动，不会随着正常的文档流滚动）box-sizing:content-box（默认）、border-box（padding、border不会对盒子大小产生影响）
10.浮动float:left左浮动 float:right右浮动对span元素加一个"float:left"，span元素已经“块”化。浮动只会对后面的布局产生影响
11.清除浮动：1.给父元素加高度 2.给父元素加overflow:hidden 3.在有浮动的元素后面加一个空的块级元素，给此元素加样式"clear:both"
4.给受影响的元素加"clear:both"
5.给父元素家为伪类:after .box:after{ content:""; display:block; clear:both; }
12.图片和下方内容之间有间隙:
1.给图片img加style="valign:middle"
2.给包含图片的div加"font-size:0" 去掉外边框:outline:none(input)
13.CSS使用position属性指定标签的定位方式
1.static（默认值）使用基于“文档流”的定位相对定位
2.relative:相对原来的自己。相对定位结合left和top（left、top、right、bottom只在定位的情况下才起作用）
3.绝对定位absolute:脱离文档流，并基于它的包含框，使用left和top来定位1.有绝对定位的元素的外层没有定位元素包着，此元素相对于浏览器定位2.有绝对定位的元素的外层的父元素（祖父元素）有定位，此元素相对于外层定位元素定位固定定位fixed:相对于浏览器定位
4.z-index值越大，层越靠上（多个定位元素的覆盖次序）
14.list-style-type列表样式类型
disc/circle/square
list-style-image列表样式图片
list-style-position:outside（默认） inside（内容和前面的序列号对齐）
cursor光标 pointer小手 wait加载 help帮助 display:none（元素不见，所占区域消失）
15.visibility:visible（可见，默认）hidden（元素不可见，所在区域还在）opacity:0（元素不可见，区域还在，背景文字透明度均改变）（适用于火狐、谷歌、safari、欧朋）RGBA（只改变背景透明度，不改变文字）
filter:alpha(opacity=40)(opacity取值范围0~100)（适用于ie8及以下版本）overflow属性:（overflow-x、overflow-y）
16.滚动条
1.scroll:使用滚动条，不论内容是否超出；
2.auto:如果内容超出了width，则出现横向滚动条，如果内容超出了height，则出现纵向滚动条。否则不显示滚动条；
3.hidden:超出部分被隐藏；
4.visible 默认值定位元素居中显示:left:0;right:0;top:0;bottom:0;margin:auto;width为100%的后面要加min-width:缩小屏幕时，右边内容不会溢出圆形:width:200px;height:200px;border-radius:100pxdisplay:inline-block和float作用一样，让元素在一行显示
网友评论