最为前端发布的第一篇博客-决定从最基础的css开始

从最基础的html/选择器/布局开始

发表一些在css中踩过的坑

1.文字居中对齐

inline水平和table-cell表格的垂直对齐方式和line-height是一对基友

使用默认值会出现幽灵空白节点是由于字体大小和基线对齐

让元素blok或者行高为0或者字体为0

还可以vertical-align:top;或者bottom;对图片middle时近似垂直居中兼容性很好

两个并排inline-blok里面没有内容或者有overfl属性这时候他的基线是margin底边缘

如果有text那基线就会按照里面的text的基线进行对齐

vertical-align:text-top;或者text-bottom

盒子的顶部和父级的内容区域(content area)的顶部对齐

line-hight对他没有任何作用    内容基线 或者标签一定要对齐

同行内容标签结构一致否则会出现对齐问题

2.不同类型选择器样式冲突遵循选测器优先级

在前端工程化中这就不是问题了使用css-module打包会自动编译classname不存在样式冲突

通配*<标签<类class<id<后代<行间样式style<！impertant

/*子代选择器

div>p

div所有子级里面的p（不包含孙子级）

*/

/*兄弟相邻选择器

.small+p

类名为small元素下面紧跟着的p

*/

/*兄弟选择器

.small~p

类名为small元素之后所有的p标签

*/

/*属性选择器

div[title], .small[title]

有title属性的div

div[title=other]

title属性为other的div

div[title*=te]

title属性包含te字符的div

div[title^=oh]

title属性以oh开头的div

div[title$=st]

title属性以st结尾的div

div[title~=te]

title属包含单词te的div

*/

/*顺序选择器

div:nth-child(1)

同级里面（所有标签的顺序）顺序为1的div

div:first-child

div:last-child

div:nth-of-type(1)

同级里面（只数div的顺序）顺序为1的div

div:first-oftype

div:last-of-type

p:only-child

独生子p,同级里不能有其他任何标签

p:only-of-type

独生子p，同级里只能有一个p标签，可以有其他类型的标签

*/

/*内容相关

p:first-letter p标签的首字母

p:first-line p标签的第一行

*/

::before/::after/可以用来写小的图片类似小三角形。after还能用来清除浮动display：table；clear：both；

inline/行挤标签  span a img b i label br em strong mark time q code cite abbr sub sup ins del

video audio

block/块级标签    div h1-h6 p header footer section nav aside hgroup article address details summary ol ul dl dt dd hr form figure figcaption blockquote pre dialog option

inline-block/行块级标签   input textarea select button

none data-list dialog

list-item/列表 li

table, table-row-group, table-row, table-cell/表单系列

3.几种布局方式

浮动定位

流式布局和响应式布局

flex布局/可以尝试大量使用非常方便特别是移动端

grid布局/太新了虽然感觉非常好用