zoukankan      html  css  js  c++  java
  • CSS样式基础总结

    首行缩进:
    text-indent:2em
    行高:
    line-height:1.5em 1.5倍行距 也可以设置像素
    文字修饰:
    text-decoration:underline下划线 line-through 删除线
    字符间隔:
    letter-spacing:3px

    内边距:
    padding:10px;
    上内边距
    padding-top:20px;
    右内边距
    padding-right:50px;
    简写:
    padding:top bottom
    padding:top left-right bottom
    padding:top right bottom left
    全局Reset(设置器)
    *
    {
    padding:
    margin:
    }
    块级元素:
    宽度:如果没有设置 默认宽度:100%
    高度:没有设置,会随着内容改变
    让块级元素居中:
    margin 0 auto 上下0 左右自动
    块元素转为行元素:
    display:inline
    行元素转为块元素:
    display:block

    给a标签设置宽高
    转成块级元素

    块级元素都到一行,又能设置宽高
    float:left

    隐藏元素
    diaplay:none

    溢出盒子的内容:
    overflow:hidden 直接隐藏掉
    overflow:scroll 加滚动条
    overflow:auto 自动加滚动条

    单独设置边框
    border-right:10px solid red

    float:
    从左穿,穿 到最左边往上走。直到左边没有float属性的元素。左边有float的元素,就在它的右边
    如有三个格子,在三行。第一行 的格子没有float属性,第二行有,第二行的元素不会到第一行去。

    有浮动属性的元素,是脱离文档流的。
    非浮动元素会忽略掉它前面的浮动元素

    如果父级元素放不下,会放到下面

    有float属性的元素,默认是撑不开父级元素的

    相对定位:
    相对于原来的位置
    position:relative
    left:100px;
    top:50px;
    跟以前的差距,它原来的位置还保留着

    绝对定位:
    1、相对于离他最近有,有定位属性的 父级元素进行定位
    2、它原来的位置不再保留

    有定位属性的元素默认的层级都是0,但是后来居上。
    控制层级用:z-index,谁大谁就在上面

    注意:只有有定位属性的元素才有层级这个概念

    背景图片:
    background-image:url();
    平铺方式:
    background-repeat:
    位置:
    background-position:50px 30px; 左50px 上30px

    一般在做图标的时候,其实用的是一张图片
    background-position:-X -Y
    用PS量好就行了

    背景图片简写:
    background:#eee url() no-repeat -350px -215px;不要哪个属性,直接不写就行了
    顺序:颜色 背景图 重复方式 背景图的位置

    visibility属性:
    display:none 不显示不保留位置
    visibility:hidden 不显示 保留位置

    透明度:
    opacity: 0.5 0-1取值范围
    filter:alpha(opacity=55) 0 - 100取值范围 低版本IE用
    可以 两个一起写

    取消li标签圆点
    list-style:none

    CSS命名规范:
    对于页面中具有唯一性,结构性的模块,使用ID选择器,其他一般采用class选择器
    选择器命名一律使用小写字母


    CSS HACK 浏览器调兼容性

    哪个效果 有问题,就单独为这个浏览器指定效果
    background:green9; 所有IE浏览器能识别
    background:blue; IE8 IE9能识别
    +background:orange; IE6 IE7能识别
    _background:red; IE6能识别

    能认识CSS3 又是所有IE浏览器, 则IE9以上都可以
    #root #hd{
    background:pink9;
    }

    设置IE7+ 再用_设置IE6回来

  • 相关阅读:
    VueCLI3如何更改安装时的包管理器
    查天气43课-46课
    【Python第31课到42课】
    【Python第16课到30课 】
    Python笔记
    【AC】九度OJ题目1153:括号匹配问题
    【AC】九度OJ题目1436:Repair the Wall
    【WA】九度OJ题目1435:迷瘴
    Matlab图片改颜色通道不改名存储
    [Linux 操作] awk操作の 打印图片路径
  • 原文地址:https://www.cnblogs.com/zhaotianff/p/6002021.html
Copyright © 2011-2022 走看看