CSS盒子模型各属性层级及基础知识

 

经测试box-shadow应该位于background-image之上并且位于content之下，因此对<img>标签设置内阴影会被其内容（图片）覆盖；
1.设置浮动属性后，会对相邻的元素产生影响，相邻元素特指仅邻后面的元素。 
2.受到影响的元素清除flow影响的方法：clear：both；只适用于紧邻后面的元素的清楚浮动，而当父包含块缩成一条时就不起作用了。 
或者同时设置width：100%；+overflow：hidden;例p受到影响，p{clear:both;或者p{width：100%；overflow：hidden；} 
3.三种定位形式：static（静态）relative（相对）absolute（绝对） 
相对定位：相对于自身原有位置进行偏移；仍处于文档流中；随即拥有偏移属性和Z-index属性； 
绝对定位：建立以包含块为基准的定位；完全脱离了标准文档流；随即拥有偏移属性和Z-index属性； 
未设置偏移量，无定位祖先元素，以为参考基准 
使用absolute实现横向两列布局：relative-父元素相对定位；absolute-自适应宽度元素绝对定位

css： 
1.id选择器（ # myid） 
2.类选择器（.myclassname） 
3.标签选择器（div, h1, p） 
4.相邻选择器（h1 + p） 
5.子选择器（ul < li） 
6.后代选择器（li a） 
7.通配符选择器（ * ） 
8.属性选择器（a[rel = “external”]） 
9.伪类选择器（a: hover, li: nth - child）

• 可继承的样式： font-size font-family color, UL LI DL DD DT;
• 不可继承的样式：border padding margin width height ;
• 优先级就近原则，同权重情况下样式定义最近者为准;
• 载入样式以最后载入的定位为准;

优先级为: 
!important > id > class > tag 
important 比 内联优先级高

css新增的伪类： 
p:first-of-type 选择属于其父元素的首个

元素的每个

元素。 
p:last-of-type 选择属于其父元素的最后

元素的每个

元素。 
p:only-of-type 选择属于其父元素唯一的

元素的每个

元素。 
p:only-child 选择属于其父元素的唯一子元素的每个

元素。 
p:nth-child(2) 选择属于其父元素的第二个子元素的每个

元素。 
:enabled :disabled 控制表单控件的禁用状态。 
:checked 单选框或复选框被选中。

如何居中div？如何居中一个浮动元素？

给div设置一个宽度，然后添加margin:0 auto属性 div{width:200px;margin:0 auto;}  

居中一个浮动元素 
确定容器的宽高 宽500 高 300 的层 
设置层的外边距 
.div { 
Width:500px ; height:300px;//高度可以不设 
Margin: -150px 0 0 -250px; 
position:relative;相对定位 
background-color:pink;//方便看效果 
left:50%; 
top:50%; 
}

列出display的值，说明他们的作用。position的值， relative和absolute定位原点是？ 
1. 
block 象块类型元素一样显示。 
none 缺省值。象行内元素类型一样显示。 
inline-block 象行内元素一样显示，但其内容象块类型元素一样显示。 
list-item 象块类型元素一样显示，并添加样式列表标记。 
2. 
*absolute 
生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。

*fixed （老IE不支持） 
生成绝对定位的元素，相对于浏览器窗口进行定位。 
*relative 
生成相对定位的元素，相对于其正常位置进行定位。 
* static 默认值。没有定位，元素出现在正常的流中 
*（忽略 top, bottom, left, right z-index 声明）。 
* inherit 规定从父元素继承 position 属性的值。

CSS3有哪些新特性？ 
CSS3实现圆角（border-radius:8px），阴影（box-shadow:10px）， 
对文字加特效（text-shadow、），线性渐变（gradient），旋转（transform） 
transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);//旋转,缩放,定位,倾斜 
增加了更多的CSS选择器 多背景 rgba