css常用样式总结一

1。字体、文本

字体大小 font-size 默认为16px  浏览器默认显示最小值12px

字体风格 font-style

字体粗细 font-weight

文本居中 text-align:center    也可以居左(默认值:left),也可以居右(right)

缩进字符 text-indent

行高        line-height    想实现纵轴文字居中需要设置行高与本元素高度一直(没有换行的情况)

文本超出内容设为省略号   text-overflow:ellipsis;前提是文本不换行,元素内容为超出隐藏

2.选择器

通配符选择器   *  表示给所有元素增添某些属性,一般用来统一页面初加载样式

元素名选择器   使用元素名进行选中

类名选择器       class选择器  使用“.+class名进行选择”

id选择器           使用“#+id名”进行选择,区别于class选择,同一个id在一个页面只能有一个,同一个类名可以有多个

伪类选择器     :nth-child  :nth-type-of   nth-child区别于nth-type-of前者不判断类型,后者判断类型

nth-child(odd) 、nth-child(even)奇数、偶数选择

nth-child(n+随便一个数字)   表示从这个数字+1开始选择

子元素选择器      父元素  加上  >   子元素   表示选择父元素的子元素(不要理解为后代,这个是儿子)

兄弟选择器    " +" 相邻兄弟选择器   "~" 选取~后面的兄弟元素(不一定是相邻的)

后代选择器  直接 父元素 加上  “ ” 子元素  表示选取所有的后代元素

3.盒模型

盒模型有  内容、内、外边距、边框组成

盒模型分为正常盒模型(box-sizing:content-box)这种盒模型并没有把内外边距、边框算入内容区域

怪异盒模型(box-sizing:boredr-box)这种盒模型将内外边距、边框也算入内容区域

猜你喜欢

转载自blog.csdn.net/tjq11111/article/details/121616926