css样式

1.单位:

颜色单位:英文单词 16进制 rgb

尺寸单位:px %(百分比 高度设置,需要html和body设置高度)  最小min-width min-height 最大max-width max-height  vw  vh(视口单位,相对于浏览器)

min:可以设置默认宽高,当内容小于设置的宽高时,尺寸以设置的宽高为准,当内容大于设置的宽高时,以内容尺寸为准。

max:不可以设置默认宽高,当内容小于max尺寸时,容器尺寸以内容尺寸为准,当内容尺寸大于max尺寸时,超出的部分会溢出。

2.文字设置:

(1)font-size: 文字大小(字号) 可以设置百分比(跟随其父级的百分比)   

         em:父级的倍数     rem:根(html)倍数,可以用来设置尺寸

浏览器不支持12px以下的字体大小(小于12px时以12px为标准显示)

(2)text-indent:首行缩进(中文) 常用单位em

(3)font-weight:字重 bold(500~900) 加粗(bolder更粗 已淘汰)、 lighter(100~300)更细、normal(400)正常

(4)font-style:斜体设置 italic 、正常设置normal 

(5)font-family:字体设置

(6)line-height:行高( CSS深入了解line-height 链接: http://www.imooc.com/learn/403 )常用于单行文字上下居中

(7)vertical-align:top | middle | bottom 竖直对齐方式 (CSS深入理解之vertical-align 链接:http://www.imooc.com/learn/542)

(8)text-align:left | right | center  文字水平对齐

(9)letter-spacing:字符间距设置 字符与字符之间的距离 支持中文和英文

(10)word-spacing:词间距 词与词之间的距离 只支持英文不支持中文

(11)word-wrap:break-word;强制字符换行

(12)white-space:nowrap;强制字符不换行

(13)text-decoration:underline | overline | line-through 下划线 | 上划线 | 中划线 

3.内容超出部分处理:overflow:auto | hidden | scroll

(1)auto:容器自适应内容,内容高度容易超出,会出现竖直滚动条,如果内容宽度超出容器 。会变为水平滚动条

(2)hidden:是把超出容器的内容部分裁减掉

(3)scroll:给容器设置滚动条,如果内容没有超出容器,将无法滚动;

(4)overflow-x:对容器的水平方向处理

(5)overflow-y:对容器的竖直方向处理

注意:overflow:auto hidden 两个属性还可以用于清除浮动

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容