width属性只是指的内容区的宽度。要计算整个盒子的宽度需要内容区的宽度加上左右内边距的宽度加上左右外边距的宽度和两个边框的宽度(因为有左右边框)。
如果元素没有指定width属性,它默认的为auto,即内容会延展至整个空间。
指定宽度可以用px或百分比,百分比指的是元素占所在容器的百分比。
一般指定宽度而不指定高度(使默认为auto),这样会根据宽度自动调节高度。
text-align会对元素中所有的内联内容对齐。它只能应用于块元素上,对内联元素不起作用。
选择元素子孙的方法: 父元素 子元素{ };
如果只想选择子节点的元素:父元素>子元素{ };
line-height属性可以只写数字不带单位,各个元素相对于本身字体的大小。
元素属性的简写
padding/margin属性四个方向可以简写:
padding: 0px 20px 30px 10px; 顺序是上 右 下 左。
还可以简写成上下和左右:
padding: 0px 20px; 顺序是上和下 左和右。
border-width,border-style,border-color可以简写为border,属性顺序任意。
background-position,background-color,background-image,background-repeat可以合写成background。
font-family,font-style,font-weight,font-size,font-variant,line-height可以简写到font。在font属性中必须制定字体大小,如果要指定line-height可以在font-size后加/,写成font-size/line-height。如果要使用font-family,则放到最后。
使用<span>元素创建内联字符和元素的逻辑分组。
设置内联元素的上下内边距不会有效果,而上下外边距会与其他元素重合。
而图像的宽度、内边距和外边距都表现得与块元素相同。
<a>元素的伪类:
- a:link 链接未被访问过;
- a:visited 链接已被访问过;
- a:hover 悬停在链接上;
- a:focus 链接获得焦点;
- a:active 第一次单击链接。
按先后顺序来确定使用哪个样式。