最为前端发布的第一篇博客-决定从最基础的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布局/太新了虽然感觉非常好用
