1 box-sizing:设置元素盒子大小的计算方式的
content-box;表示width中不包含border padding;默认盒模型的计算方式
border-box:表示width中包含border padding;盒模型的计算方式是IE6中的计算方式-->.2./*具有最小高度并且高度自适应*/
div{width:100px;background:#F00;min-height:200px;height:100px;}生效的是min-height3.位移 旋转 放大缩小 倾斜(默认以元素的中心点为基点,)
transform:translate(x,y)位移 x-水平 y-垂直,可出父元素的位置,而不影响父元素的宽高
- x,y如果为负就反方向移动
translateX(<translation-value>) 通过给x方向上的指定参数值,实现x轴方向上的移动。
translateY(<translation-value>) 通过给y方向上的指定参数值,实现x轴方向上的移动。
当translate(-30%,-50%)的参数值是百分比时,参照的是自身的大小
transform:scale(宽度,高度)放大缩小(n. 规模;比例;鳞;刻度;天平;数值范围): 放大>1 0<y<1缩小
transform:rotate(n deg) 旋转 +顺时针旋转 -逆时针旋转(vt. 使旋转;使转动;使轮流)
*/
body:hover div{transform:rotate(-130deg)}这个属性允许你将元素旋转,缩放,移动,倾斜等3.
4.div:after{content:""; display:block;clear:both;color:#fff;}
div:before{content:"新添加的文本"; display:inline-block;width:100px;height:100px;background:#6FC}
效果是在div内部的后面加上一张图片
div:after{content:attr(class)}/*获取哪个属的属性值作为添加的内容*/
div:first-line{background:#CF6;font-size:40px;}
div:first-letter{font-size:100px;}
div::selection{background:#F30;}
5./*万能清除法*/
div:after{content:"."; display:block; clear:both;height:0;overflow:hidden;visibility:hidden}
div:after{content:""; display:block; clear:both}
div:after{content:""; display:table; clear:both}
2.
3.
伪类是元素处于莫种状态下的要执行的代码(才能执行):hover
伪元素是元素,当作标签处理;
div:after{}表示在div的文本内容后面添加的内容,对div里面操作
其他没覆盖的,代码依然有效
X是属性名,可以将div的某个属性的属性值作为内容添加到div的前后
例:会将class的属性值作为元素添加到div的后面和前面
3.div:first-line{}对div里面的内容的第一行设置样式
div::selection{}给文本选中时设置样式,由于兼容性问题,目前只能设置背景background和color
例:
div:after{}必须有content元素,表示添加了元素
当你清除浮动时,在div:after{}的content中添加了内容,如content:".",点会占据空间,必须height:0;overflow:hidden,使‘.’不占内容,再加上visibility:hidden,表示让这个元素不可见,而不能用display:none,相当于这段代码白写
保证添加的内容是块状元素,并清了浮动就可以
1. 了解说出什么是宽度和高度自适应
如何写是宽高自适应
(width:100%,不写 height:auto,不写}
2. min-height max-height min-width max-width(ie6不识别)
3. !important:表示所附加的声明具有最高的优先级
4. * _
5. :before :after :first-line :first-letter ::selection
6. visibility:hidden/visible;隐藏/可见
visibility:hidden;属性会使对象不可见,但该对象在网页所占的空间没有改变,等于留出了一块空白区域,而 display:none属性会使这个对象彻底消失。
7. 浮动元素父元素高度自适应(父元素不写高度时,子元素写了浮动后,父元素会发生高度塌陷)***********
hack1:给父元素添加声明overflow:hidden;
hack2: 在浮动元素下方添加空div,并给该元素添加声明:clear:both;height:0;overflow:hidden;
hack3:万能清除浮动法
选择符 :after{content:".";clear:both;display:block;height:0;
overflow:hidden;visibility:hidden;}(推荐使用)
8. 元素{height:100%}
html,body{height:100%}
9.box-sizing:设置元素盒子大小的计算方式的
content-box:表示width中不包含border padding;默认盒模型的计算方式
border-box:表示width中包含border padding;盒模型的计算方式是IE6中的计算方式
10. transform:translate(x,y)位移 x-水平 y-垂直
transform:translateX()
transform:translateY();
当translate(-30%,-50%)的参数值是百分比时,参照的是自身的大小
transform:scale(宽度,高度) 放大>1 0<y<1缩小
transform:rotate(deg) 旋转 +顺时针旋转 -逆时针旋转
11./*
在高版本中:没有给div设置高度,会被图片撑大,但图片大小不会随着变,可能会溢出;
div:font-size:0
img:display:block
在低版本中:给div设置高度,会被图片撑大
div:font-size:0
img:display:block
*/
12./*
双倍浮动:给元素设置浮动,并且设置了左右的margin值,会被双倍解释(低版本中可能会出现)
*/
div{background:#309;height:250px;width:100px;float:left;margin-left:200px; display:inline}
13.
/*
当li里面有a和span两个标签,并给span设置了浮动
*/
li{list-style:none;border:1px solid #C93;width:500px;overflow:hidden; }
a{float:left}
span{float:right}
14./*
描述:在IE6及以下版本中,部分块元素拥有默认高度(低于18px高度)。
给元素添加overflow:hidden(推荐)/font-size:0(height:2px;)
*/
15./*map如果某个 area 标签中的坐标和其他区域发生了重叠,会优先采用最先出现的 area 标签;浏览器会忽略超过图像边界范围之外的坐标。*/
16. Trident ie
gecko ff
webkit c safari
presto o
blink c ff
2. 图片间隙
默认高度(div块状元素有默认的18px的高度)
双倍边距
cursor:pointer
ie6只支持png8位的背景透明
3. 热点链接
此时div才自适应浏览器高度
background:center表示将背静的中心放到块的中心
设置了高度相同的两个input,明显左面的比右面的高;原因:文本框的边框不算在高度范围内的,而button按钮的边框是算在高度范围内的。button按钮和文本框按钮边框高度都是2像素,解决办法:
去点边框后,高度并未对齐,原因:input标签是个行内块元素,文本底部有一个对齐效果;解决方法:加一个浮动;
设置鼠标放在上面时,变成手型
可以看到这两张图片并不头部对齐,图图对齐,用vertical-align:middle;
当要使一个块中的图片居中显示,可以设置 <span style="vertical-align: middle;display: inline-block;height: 100%"></span>
2个input总是对不齐,在input标签上加上float:left;
left:100%,在包含块的右边;
定位后width:100%与height:100%,表示与包含块同宽同高