css样式

2017-08-28  本文已影响0人  没_有_人

单位:

颜色的单位:px, 百分比,(高度者设置百分比时要注意,父级没有宽度的时候要给父级设置宽度,也可以用HTML和body设置百分比,这样高度下面的元素就有东西继承),最小宽度,高度min-width min-height,最大宽度高度,,max-width,max-height ,vw vh;

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

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

还有就是要注意同时设置max 和min 不要设置宽高;

vw和vh 视窗宽度,1vw或1vh等于视窗宽度的1%;很适合做自适应的布局;

font-size:文字字号,可以设置px 可以设置百分比 em(倍数)rem(根的倍数);

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

font-style  斜体设置 italic 斜体设置 noraml正常设置

font-family 字体设置

首行缩进设置 中文 text-indent

如果英文单词没有空格的话,是不会换行的,中文没有这个问题。

line-height:行高,常用于文本水平居中;

text-align:文字水平对齐(left center right justify(两端对齐,文本必须不止一行));

字符间距:letter-spacing:可以设置px em

词间距:word-spacing:(英文的字符间距);

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

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

text-decoration:underline(设置文本下划线),overline(设置上划线),line-through(设置中划线);

vertical-align:竖直对齐方式 在table里面比较适用;

内容超出处理:overflow:auto hidden scroll;

auto:容器内自适应,内容高度超出容器,会出现竖直滚动条;如果内容宽度超出容器,会出现水平滚动条;

hidden:是把超出的容器的内容裁剪掉;

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

overflow-x: 对容器的水平方向处理;

overflow-y: 对容器的垂直方向处理

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

文字超出容器的部分以...的形式出现:

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

over-flow:hidden;(超出部分隐藏)

text-overflow:ellispsis;

上一篇 下一篇

猜你喜欢

热点阅读