码迷,mamicode.com
首页 > Web开发 > 详细

css 样式

时间:2018-10-11 20:06:09      阅读:161      评论:0      收藏:0      [点我收藏+]

标签:clear   居中   border   格式   abs   直接   content   dex   模型   

高度和宽度

块级标签才可以设置宽度和高度
内联标签的宽度是由内容的长度决定
1. height
2. width
    1. 字体相关
      1. font-size
      2. font-family
      3. font-weight
    2. 文本相关
      1. color
        1. 直接颜色名
        2. 十六进制 --> #00FF00
        3. rgb格式 --> rgb(0,255,0)
      2. 对齐方式
        1. text-align:center --> 居中
      3. 文本装饰
        text-decoration
        none --> 去掉a标签默认的下划线
        under-line
        over-line
        line-through
      4. 首行缩进
        text-indent
    3. 背景
      background: url(‘xx.png‘ no-repeat center center)
    4. 边框
      border: 1px solid red
    5. display
      1. none
      2. inline
      3. block
      4. inline-block
        display: none和visibility: hidden的区别?
        都是隐藏页面上的标签
        display: none隐藏标签并且不占位置
        visibility: hidden 隐藏标签的同时会占住位置
    6. 盒子模型
      内容>内填充(padding)>边框(border)>外边距(margin)
    7. 浮动
      1. 浮动多用于页面大范围布局
      2. 浮动
        • left 往左浮动
        • right 往右浮动
      3. 清除浮动的副作用
        1. clear
          • left 左边不能有浮动元素
          • right 右边不能有浮动元素
          • both 两边都不能有浮动元素
        2. 常用class
          .clearfix:after {
          content: ‘‘;
          display: block;
          clear:both
          }
    8. 溢出
      overflow
      - hidden
      - scroll
      - auto
    9. 定位
      1. 相对定位:相对 标签原来的位置 做的定位
        position: relative
        left:
        top:
        bottom:
        right:
      2. 绝对定位:相对 已经定位过的祖先标签 做的定位
        多用于页面局部的布局,注意要和定位过的祖先标签配合使用
        绝对定位和浮动一样,标签都会脱离文档,别的标签可以占用它的位置
      3. 固定定位
        固定定位相对于 屏幕 固定显示在某个位置
        固定定位的元素也是脱离文档的
    10. z-index
      属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
      Z-index 仅能在定位元素上奏效(例如 position:absolute;)!

css 样式

标签:clear   居中   border   格式   abs   直接   content   dex   模型   

原文地址:https://www.cnblogs.com/echo-up/p/9774625.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!