1.HTML+CSS
- 阴影:box-shadow:水平 垂直 模糊距离 尺寸 颜色rgba(r,g,b,透明度)
- 行内元素:a, span, label, strong, em, br, img, input, select, textarea, cite等
- 块内元素:div, h1~h6, p, form, ul, li, ol, dl, address, hr, menu, table, fieldset等
行内元素属性
- 行内元素属性标签它和其它标签处在同一行内
- 行内元素属性标签无法设置宽度,高度 行高 距顶部距离 距底部距离
- 行内元素属性标签的宽度是直接由内部的文字或者图片等内容撑开的
- 行内元素属性标签内部不能嵌套行属性标签(a链接内不能嵌套其他链接)
块级元素属性
- 每一个块级元素属性标签都是从新的一行开始,而且之后的元素也都会从新的一行开始(因为每一个块属性标签都会直接占据一整行的内容,导致下面的内容也只能从新的一行开始)
- 块级元素属性标签都是可以设置宽度、高度,行高,距顶部距离,距底部距离
- 块级元素属性标签的宽度假如不做设置,会直接默认为父元素宽度的100%
- 块级元素属性标签是可以直接嵌套的
- p标签中不能嵌套div标签
- 继承:
继承是子节点默认使用父节点的样式属性,可以继承的属性很少,只有颜色,文字,字体,间距,行高,对齐方式和列表样式。
- 所有元素可继承:visibility,cursor(定义了鼠标指针放在一个元素边界范围内时所用的光标形状)
- 内联元素可继承:letter-spacing(字符间距),word-spacing(字间距),white-space(元素间空白符),line-height,color,font(font-family,font-size,font-style,font-variant,font-weight),text-decoration,text-transform(文本大小写),direction(文本书写方向)
- 终端块状元素可继承:text-indent(块级元素第一个字符的缩进),text-align
- 列表元素可继承:list-style,list-style-type,list-style-position,list-style-image
- 优先级:内联样式>id选择器>类选择器=属性选择器=伪类选择器>标!签选择器=伪元素选择器
- !important优先级最高,设权重为10000
- 内联样式,如'style'等设权重为1000
- ID选择器,带#的,设权重为100
- 类,伪类,属性,如.content、:hover等,设权重为10
- 标签,伪元素,如p,div,:before等,设权重为1
- 可以使用矩阵一目了然看出
- 外边距合并:css外边距合并(叠加)是指两个垂直相邻的块级元素,当上下两个边距相遇时,外边距重叠,且合并后等于其中较大者
- 将超出的文字部分变成……:overflow:hidden/white-space:nowrap/text-overflow:ellipsis
- 子元素浮动,解决父类坍塌的问题:
- 直接给父元素设置高度,在子元素改变的情况下比较繁琐
- 给父元素设置overflow:hidden
- 父元素结束标签之前加空div,样式为clear:both
- 伪元素选择器,父元素加上clearfix