1、float:对前面的元素不会有影响,无论是块级元素还是行内元素的float,对后面的元素的影响都是:先假设当前元素不存在,后面元素的位置应该是什么样子的,然后再考虑下,float后的元素的大小是其真正的大小(即使是块级元素,大小=内容+padding+border+margin),这个大小会对后一个元素形成挤压。
(备注:float和postion:absolution的主要区别是前者不会后受影响的内容重叠,会形成挤压,后者会重叠,相当于在另一个层上。)
使用float和postion:absolution的元素的宽高都不会影响父元素的宽高,因为已不属于父元素内容的一部分。
2、很多元素有其默认的属性,我们经常需要对其进行格式化(如dd默认右外边距-webkit-margin-start: ),不然会给我们带来不必要的麻烦。
3、父容器(如div),大小固定时,子容器(未设宽度时,默认父容器的宽度)内容超过父容器宽度时就会自动换行,除非子容器显示定义了宽度(可能比父容器宽,但父容器宽度不会随之增大)。
4、元素类型:inline和block,即行内元素和块级元素,这里有个要注意的点:像a、span、strong这些 inline类型的标签无法指定宽(width)和高(height)margin-top和margin-bottom也无效,pading-top和padding-bottom两个属性很奇怪,padding垂直部分会有背景颜色(如果设置了),但不霸占位置。(img行内元素除外 margin和padding都有用)
除了inline和block类型的显示,这里还有一个inline-block的显示方式。它显示的方式类似于inline,但是它相关的属性,例如,宽度,高度还有padding/margin等等遵循于block显示类型的规则。inline-block可以帮助我们实现类似float元素的效果,但是也有自己的问题。
5、使网页内容水平居中:设置块的宽度,并且设置:margin:0 auto; 最后最好再设置下 text-align:center;
6、两种盒子模型:W3C标准盒子模型(现代浏览器基本都是该模型)、传统IE盒子模型(只有IE6以下是这种模型,还有一些表单元素使用的是这种模型)。
7、box-sizing是CSS3的box属性之一(作用,显示声明使用哪种盒子模型):
box-sizing : content-box (标准W3c盒子模型,默认值)|| border-box (传统IE模型)|| inherit
8、一些行内元素 默认上下会留有空白,span标签上下都有,img元素默认底部会有块留白(间隙),去除办法,设置其display属性为block。
9、字重,font-weight,默认正常是 500,加粗,一般设为700。
10.div默认宽度为100%,即父容器的宽度,高度没有设置的话就是实际内容的高度。
11、vertical-align属性:
定义:
vertical-align 属性设置元素的垂直对齐方式。该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。这会使元素降低而不是升高。在表单元格中,这个属性会设置单元格框中的单元格内容的对齐方式。
理解:
第一种用法,先看后面一句“在表单元格中,这个属性会设置单元格框中的单元格内容的对齐方式。”这很容易理解,如果给一个表格的td加一个vertical-align:middle的样式,表格里面的内容会垂直居中,同样的如果给一个vertical-align:bottom就会底部对齐,如果给一个vertical-align:top就会顶部对齐。
第二种用法,看前页一句“该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。
top :把元素的顶端与行中最高元素的顶端对齐
bottom:把元素的底部与行中最低元素底部对齐
middle:把此元素放置在父元素的中部。
总结:vertiacl-align,属性用于块级元素无效,只能用于行内元素,或td(表格的单元格)。
12、像 a span 这些标签是没有layout的,对齐设置宽高是无效的,可以设置器 dispaly为inline-block使之有效。
13、当父元素的木有设置border和padding是,第一个和最后一个子元素的margin是相对于父元素相邻的元素的。
14、background属性的熟悉:
(1)、background-color(背景图片):background-color 不能继承,其默认值是 transparent。transparent 有“透明”之意。也就是说,如果一个元素没有指定背景色,那么背景就是透明的,这样其祖先元素的背景才能可见。 background-color:#bbb;
(2)、 background-image 属性的默认值是 none,表示背景上没有放置任何图像。body {background-image: url(/i/eg_bg_04.gif);}
(3)、background-repeat 属性设置是否及如何重复背景图像。默认地,背景图像在水平和垂直方向上重复。repeat-x,背景图像将在水平方向重复。repeat-y 背景图像将在垂直方向重复。no-repeat 背景图像将仅显示一次。
(4)、background-position 属性设置背景图像的起始位置。(您需要把 background-attachment 属性设置为 "fixed",才能保证该属性在 Firefox 和 Opera 中正常工作。)
默认值:0% 0%。
可能的值:
- top left 上左
- top center 上中
- top right 上右
- center left 中左
- center center 中中
- center right 中右
- bottom left 下左
- bottom center 下中
- bottom right 下右
(以上值位置可以颠倒,top和bottom用于垂直方向 left和right用于水平)
x% y% 第一个值是水平位置 第二个是垂直位置 (如果只设置一个值,则为水平位置上的值 垂直位置的值将为50%)
x y 水平 垂直 单位可以是像素。
(5)background-attachment 属性设置背景图像是否固定或者随着页面的其余部分滚动。
默认值:scroll(随着元素的其余部分移动而移动)
fixed 当页面的其余部分滚动时,背景图像不会移动。
inherit 规定应该从父元素继承 background-attachment 属性的设置。
(6) background-size 属性规定背景图像的尺寸。
默认值:auto
length 设置背景图像的高度和宽度。第一个值设置宽度,第二个值设置高度。如果只设置一个值,则第二个值会被设置为 "auto"。
percentage 以父元素的百分比来设置背景图像的宽度和高度。第一个值设置宽度,第二个值设置高度。如果只设置一个值,则第二个值会被设置为 "auto"。
cover 把背景图像扩展至足够大,以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。
contain 把背景图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域。
15、(1)text-shadow属性:
text-shadow: h-shadow v-shadow blur color; 水平阴影的位置|垂直阴影位置|模糊的距离|阴影的颜色 (前两个值是必须的)
h1 { text-shadow: 5px 5px 5px #FF0000; }
box-shadow: 10px 10px 5px #888888; 盒子(如div ul)阴影,用法和文字阴影差不多
(2)text-transform : none | capitalize| uppercase| lowercase
capitalize 值代表将每个单词的第一个首字母转换成大写,其余无转换发生
(3) text-inedent:用于定义块级元素中第一个内容行的缩进。 text-indent:
:after 元素内容的前面
:before 元素内容的后面