学习笔记 css样式

折月煮酒 提交于 2019-12-27 11:27:26

大小

  width:宽度  height:高度

背景

  background-color  背景色    background-image  背景图片     background-repeat  背景平铺方式  

  background-size  背景尺寸     background-position  背景位置

字体

   font-family 字体样式    font-size  字体大小  12px 14px   font-style:italic;  italic倾斜    font-weight:粗细  color:字体颜色

  text-decoration:  underline;下划线  overline 上划线     line-through 删除线   none 去掉线   可以用来去掉<a></a>超链接的下划线

对齐方式

  text-align :水平对齐方式    line-height:行高  text-indent:缩进 单位像素

    line-height 与 vertical-align

      line-height   主要作为调节文本的垂直对齐方式,通过设置行高的大小

      vertical-align  主要作为调节行内元素(span/img/input..)的垂直对齐方式  baseline top bottom middle  text-top  text-bottom

边界边框

  外边距margin    上右下左    两个属性时,代表 上下   左右    行内元素只能调整margin-left margin-right。调margin-top和margin-bottom是不管用的

  内边距padding    上右下左  如果加了内边距,该元素会相应的变大

  border 1px solid red;  分别代表粗细 线的样式 颜色;

显示与隐藏

  display:none/block;注意(display:block还可用作把不是块元素变为块元素)

列表方块<ol></ol> <ul></ul>

  list-style:none  将列表前面的序号去掉

  list-style-image  可以将前面的序号变成图片

格式与布局

  位置

    position  fixed 固定  相对于浏览器的边框进行定位

         absolute 绝对定位  相对于父级元素(浏览器、绝对定位的上级)

         relative 相对定位  相对于自身应该出现的位置(注意:定位后原位置保留不会被占用)

    top 距离上边的距离    right 距离右边的距离   left 距离左边的距离   bottom 距离下边的距离

  流

    float  left 向左流  right 向右流

    clear  both 清除所有的流  left 清除左边的流  right 清除右边的流

    z-index分层  需要前面使用position之后才有效果,值越大越靠上

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!