常用的CSS

*复合样式

常用样式汇总

字体类型:
font-size * 字体  /行高
font-family 字体
font -weight 字体的粗细

文本类型  
设置文本的修饰线外观(下划线、上划线、贯穿线/删除线)
复合样式  text-decoration-line ,text-decoration-color,
text-decoration-style
text-decoration :* none
text-decoration: underline; --下划线  
text-align-last 最后一行对齐 
line-height行间距
work-spacing
work-break
text-align: center;
vertical-align:middle; 

{
white-space:nowrap 文字不换行
overflow :hidden; 隐藏部分 
text-overflow:ellipsis 省略号}
处理文字溢出

边框---背景
Border 
Boder:1px soild red 边框粗细,边框类型 颜色
Boder- bottom :none   :浏览器不会渲染
Boder-radius              圆角

Background :url(),路径   NO- repeat 属性,size ,color attachment



盒子 
padding: 7px 0px 0px 100px; 控制元素所有四条边的内边距距离
margin: 7px 0px 0px 100px;      控制属性为给定元素设置所有四个方向的外边距属性
box-sizing:border-box; 怪异盒模型


display 属性 
table-cell           转换为单元格  
display:inline-block  转为行块属性 
vertical-align 用来指定行内元素(inline)或表格单元格(table-cell)元素的垂直对齐方式。

内联元素  span a 发邮件 mailto,打电话 tel:,锚点 #ID,下载 资源地址,链接跳转
   块元素  div
   内联块元素  img

   内联块元素  默认元素底下会有几个像素的留白  代码换行会产生空格

浮动 float
让元素按照指定的方向发生位移,直到遇到浮动元素或者父级的边界才会停下来
Clear 清除浮动
After:清浮动  clear 只对块元素生效  必须要display:block content 可以为空
Position 定位relative  相对定位 提升层级  如果子级有两个相同的层级
后面的层级要高于前面的元素 后者覆盖前者
Z-index 现有定位

 

上一篇:【笔记】理解CSS3之Flexbox布局


下一篇:第5组(65)团队展示