CSS查漏补缺
本文主要是对自己经常使用到的css的部分基础知识进行了查漏补缺,css3动画部分在实战中用得使用比较少,暂不作整理。
结构(位置)伪类选择器
- :first-child:选取属于其父元素的首个元素的指定选择器。
- :last-chiild:选取属于其父元素的最后一个元素的指定选择器。
- :nth-child(n):匹配其父元素的第n个子元素;
- :nth-child(2n):匹配其父元素的偶数元素;
- :nth-child(2n-1):匹配其父元素的奇数元素。
- :nth-last-child(n)〉:从最后一个子元素开始计数,选择器匹配属于其元素的第N个子元素的每个元素。n可以是数字、关键词或公式。
属性选择器
选取标签带有某些特殊属性的选择器。
选择器 | 含义 |
---|---|
E[attr]*** | 存在attr属性即可。 |
E[attr = val]*** | 属性值完全等于val。 |
E[attr *= val ] | 属性值里包含val字符并且在"任意"位置。 |
E[attr ∧= val ]*** | 属性值里包含val字符并且在"开始"位置。 |
E[attr $= val ]*** | 属性值里包含val字符并且在"结束"位置。 |
文字阴影shadow
text-shadow:水平位置 垂直位置 模糊距离 阴影颜色
值 | 描述 |
---|---|
h-shadow | 必需。水平阴影的位置。 |
v-shadow | 必需。垂直阴影的位置。 |
blur | 可选。模糊的距离。 |
color | 可选,阴影的颜色。 |
块级元素(block)
块级元素独自占据一行或者一整行,可以对其设置宽度(width)、高度(height)和对齐(padding、margin)等属性。
常见的块级元素:h1·h6、div、p、ol、ul、li等;
块级元素的特点:
- 总是从新行开始;
- 高度、宽度、内边距和外边距都可以控制;
- 宽度默认是容器的100%;
- 可以容纳内联元素和其他块元素。
行内元素(inline)
行内(内联)元素,仅仅**靠自身的字体大小和图片尺寸**来支撑结构,一般不可以对其设置宽度(width)、高度(height)和对齐(padding、margin)等属性。
常见的行内元素:text、a、b、strong、span等。
行内元素的特点:
- 和相邻行内元素在一行上;
- 高度和宽度无效,当水平方向的padding和margin可以设置,垂直方向无效;
- 宽度默认是本身内容的宽度;
- 只能容纳文本或行内元素(a除外);
注意:1. 只有文字才能组成段落,因此p里面不能放块级元素,同理还有这些标签h1.h2.h3,h4,h5.h6,dt,他们都是文字类块级标签,里面不能放其他块级元素。
2.链接里面不能再放链接。
行内块元素(inline-block)
行内块元素兼有行内和块元素的特点。
常见的行内块元素:img,input和td等。
行内块元素的特点:
- 和相邻行内元素(行内块)在一行上,但是之间会有空白缝隙;
- 默认宽度就是它本身内容的宽度;
- 高度,行高、外边距以及内边距都可以控制。
表格边框合并
border-collapse:collapse
相邻块元素垂直外边距的合并(也称外边距塌陷)
当上下相邻的两个块元素相遇时,如果上面的元素有下外边距margin-bottom,下面的元素有上外边距margin-top,则他们之间的垂直间距不是margin-bottom与margin-top之和,而是两者中的较大者。
多背景图片
叠放次序(z-index)
用于调整重叠定位元素的叠放次序。
- 只有定位(相对、绝对和固定定位)才有此属性;
- z-index默认值是0,取值越大,定位元素在层叠元素中越居上;
- 如果取值相同,则根据书写顺序,后来居上。
三种定位模式总结
定位模式 | 是否脱标占位置 | 移动位置基准 |
---|---|---|
相对定位relative | 不脱标,占有位置 | 相对自身位置移动 |
绝对定位absolute | 完全脱标,不占有位置 | 相对于定位父级移动位置 |
固定定位fixed | 完全脱标,不占有位置 | 相对于浏览器移动位置 |
定位模式转换
元素添加了绝对定位和固定定位之后,元素模式会发生转换,都转换为行内块模式。
因此,比如行内元素如果添加了绝对定位或者固定定位后,可以不用转换模式,直接给高度和宽度就可以了。
防止拖拽文本域(textarea)
textarea默认是可以让用户拖拽文本框让其放大和缩小的,为避免这种情况, 可以使用resize属性,resize:none
vertical-align垂直对齐
它只针对于行内元素或者行内块元素的垂直对齐。
去除图片底部测缝隙
图片或者表单等行内缺元素,他的底线会和父级盒子的基线对齐。这样会造成一个问题,就是图片底侧会有一个空白缝隙。
解决方法:
- 给img vertical-align:middle | top等等。让图片不要和基线对齐;
- 给img添加display: block;转换为块级元素就不会存在问题了。
文字溢出时省略号标记
text-overflow : ellipsis
注意:一定要首先强制一行内显示(white-space:nowrap),再次和overflow属性搭配使用。