CSS--常用属性

字体属性

font-size : 16px; //设置字体大小
font-family : Arial //设置字体的类型
font-style : italic || normal
font-weight : bold ||100-900 || normal //设置字体的加粗

文本属性

text-indent :10px||10%; //文字缩进10px,10%是相对于块级元素的宽度 ,这个属性只用于块级元素
white-space : nowrap; //让文字单行显示 ,会合并空格
:pre //保留文字的原格式,不合并空格,不能自动换行
letter-spacing : 0.1em ; //字体间的间距 em是字体的font-size大小
text-transform : uppercase || lowercase || capitalize //转为大小或小写或单词首字母大写
text-align:center || left || right
text-decoration : none || underline || linethough
line-height : 10px || normal || 1.2 || 120% // 设置行高 1.2 || 120%是相对文字大小
vertical-align : baseline || middle || top || bottom || text-top || text-bottom
//设置垂直对齐方式,只应用在行内元素。

框属性

width : auto || 10% || 10px
应用于:块级元素和替换元素 无继承性
//对于块级元素auto会自动让元素变得尽量和父级元素的width一样宽。10%是相当于父元素。负margin会拉宽width,因为下面这个等式:
margin-left + border-left +padding-left + width + padding-right + border-right + margin-right = 父元素的width
marign 为auto会让元素在父元素中水平居中(此时width要为定值或者百分比,只对block元素有效)
对于block,width ,margin-left right 都为定值时,margin-right会变为auto
inline-block 的width默认是包裹内容的宽度。

height : auto || 10% || 10px
应用于 : 块级元素和替换元素 无继承性
//auto指高度包裹内容的高度 10%相对于父级元素height
声明为百分值时,如果父级元素没有显示声明height,也就是auto,元素的height会被重置为auto

margin : auto || 10% || 10px
应用于所有元素 无继承性
对于block元素 auto会让元素的框宽度(不是width)等于父元素width,上下外边距为0
对于inline 和inline-block 为auto默认为0.
10%是相对于父元素的宽度(margin-top和bottom也是)
inline的margin-top和bottom不显示,inline-block显示,left right正常显示
inline和inline-block的margin不会自动合并 block的会

padding:10px || 10%
10%是相对于父元素的宽度

背景属性

background-color: red;可继承
background-image : url(xxx.png);
background-repeat:no-repeat || repeat-x || repeat-y 不重复||在水平方向重复||...

background-position:center || left || right || top || bottom ||10px ||50%
position理论上是需要有两个值得,如果只写一个默认另一个为center
center : 图像的中心(水平或垂直)和元素的中心(水平或垂直)重合
left等之图像的边和元素内边框(即恰好包含内边距的边框)对齐
百分数:作用于元素和图像上,即从图像的左上角算百分比得到的点,与从元素左上角算百分比得到的点重合。
有两个值时,第一个是表示水平方向,第二个垂直。
10px 指图像左上角距离元素左上角的距离。

其他

overflow : visible || hidden || scroll || auto
应用于块级元素和替换元素
无继承性
visibility : visible || hidden
应用于所有元素
有继承性 为hidden时,会正常占据位置,只是看不到。
outline : color style width;
outline-style : none;
轮廓,和边框不一样
cursor : pointer 光标类型

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

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,816评论 1 92
  • 一 外部式css样式 (也可称为外联式)就是把css代码写一个单独的外部文件中,这个css样式文件以“.css...
    KunMitnic阅读 974评论 0 1
  • 各种纯css图标 CSS3可以实现很多漂亮的图形,我收集了32种图形,在下面列出。直接用CSS3画出这些图形,要比...
    剑残阅读 9,715评论 0 8
  • 不会用代码框,所以看着有些乱套,,,,html部分 <!DOCTYPE html> 迅雷看看 ...
    这就是个帅气的名字阅读 1,569评论 0 0
  • 身边的朋友都一个个步入结婚殿堂,而我依旧走在不归路。 今儿就分享下我对结婚的看法。 我们翻山越岭寻找那个可以结婚的...
    callme不一阅读 335评论 0 1