文档流&文字&CSS常用命令

文档流

  • 文档流就是文档内元素流动方向

流动方向

  • 内联元素从左往右流,宽度不够,之字形,且元素会被截断
  • 块元素从上往下流动,一排一排

文档流&文字&CSS常用命令

注意事项

  • 内联元素中有英文单词,流动时宽度不够,英文单词会整体迁移,不会被打断
  • 若想打断上述联结,请使用css属性

    /*想打断的内联元素*/{
        word-break: break-all;
        display: inline-block;
    }

脱离文档流

  • 类似悬浮在页面上一样
  • position: fixed;
  • position: absolute;

关于字体

  • 一般,页面默认字体大小16px
  • 字体一般都分为上部中部下部
    文字(汉字、西文)都相对基线(下部)对齐
  • 不同字体有自己规定的建议行高,可以自行line-height规定

文档流&文字&CSS常用命令

CSS常用命令

字体相关

  • 设定字体样式

    /*各类选择器*/{
        font-family: kai;
    }
  • 字体加粗

    /*各类选择器*/{
        font-weight: bold;
    }
  • 字体大写

    /*各类选择器*/{
        text-transform: uppercase;
    }

背景相关

  • 背景位置与自适应

    /*各类选择器*/{
        background-position: center center;/*水平方向*/ /*垂直方向*/
        background-size: cover;/*背景自适应*/
        background: url(背景图片地址);
    }

设定内外边距padding margin

/*各类选择器*/{
    padding: 10px 20px 30px 40px;/*上 右 下 左*/
    margin: 10px 20px 30px 40px;/*上 右 下 左*/
}

/*各类选择器*/{
    padding: 10px 30px;/*上 右 下 左*/
    margin: 10px 30px;/*上下 左右*/
}
  • margin甚至可以调成负值,往反方向移呗
  • 内联元素左右 padding有用,上下 padding不影响页面布局,位置不变。可以设置css:display: line-block;,使上下左右padding都生效。

position定位

(详细请阅读:https://developer.mozilla.org...)(๑•̀ㅂ•́)و✧

/*各类选择器*/{
    position: relative/absolute/fixed/sticky/static;
}
fixed       元素的宽度会自动缩成最小、最紧凑的宽度
            可以使用 width height 调整大小
            可以使用 top left right bottom 调整位置
            可以使用 left: 0; right: 0; 来使元素充满<body>
absolute    可以设置子元素 position: absolute;
                   父元素position: elative;
            子元素相对父元素绝对定位

子元素居中

  • 水平居中

    /*想要子元素居中的元素*/{
        text-align: center;
    }
  • 垂直居中

    /*使用vertical-align要求父元素必须有行高,如果没有的话,一定要手动添加:line-height: ;*/
    
    /*想要居中的子元素*/{
        verticle-align: center;
    }
  • 使内联元素在页面中居中:用一个块元素包着它,然后加上css:

    <div>
        <span></span>
    </div>
      
    div{
        text-align: center;
    }
  • 设置子元素高度height: 100%;,在父元素上加上上下等量的 padding

    <div>
        <span></span>
    </div>
      
    div{
        padding: 10px;
    }
    
    span{
        height: 100%;
    }
  • 使用flex布局:左右居中,垂直居中。在父元素上加上如下 css:

    /*某父元素*/{
        display:flex;
        align-items:center;
        justify-content:center;
    }

边框

  • 边框圆角

    /*想要圆角边框的元素*/{
        border: 1px solid red;    //设置元素边框
        border-radius: 30px;      //设置边框圆角30px
    }

图标

  • 可以登录网站:http://www.iconfont.cn/,添加网站生成的<svg>到 html 里
  • <svg>添加 css属性改变样式

    svg{
        width:
        height:
        fill:    /*颜色*/
        margin:
        padding:
    }

其它

  • 鼠标悬停

    /*各类选择器*/:hover{
        color: red;
    }
  • 继承父辈属性
    并不是所有属性都能继承的

    /*各类选择器*/{
        color: inherit;
    }

css碎碎念

  • <a>标签去掉列表下划线

    a{
        text-decoration: none;
    }
  • 内联元素不能制定高度(height)和宽度(width
    要转变为块级元素(display: block;)或内联块级元素(display: inline-block;
  • 自己写的属性优先级比浏览器和默认的高
  • 行高line-height可决定内联元素高度
  • html编程中两行代码中间的空格回车都会变成一个空格
  • 同样颜色不同字体上有不同颜色
  • 设置上下 padding 一样就是居中,仅对块元素生效,内联元素无效
  • 行高line-height和字高font-size的差值会自动的填充在字体的上下
  • border 与 浮动

    动画操作(如 :hover)border后,元素会左右浮动,
    这是由于一开始没有 border,操作后多出来了,
    将元素一开始就添加【透明 border】,坑先站好啊,之后动画 border 颜色的显现
  • 内联元素盒模型超过父辈

    一些默认 display: inline; 的元素被包起来的时候,它的 padding 和margin 有时会超过父辈
    需要设定 display: block; 解决
    
    /*内联元素*/{
        display: block;
    }
  • div 高度由其内部文档流元素的高度总和决定
    内联的高度任性,强行准确测量意义不大
  • 设定元素的宽高

    weight       锁定宽度,浏览器窗口变小,用滚动条的方式
    max-weight   设定最大宽度,浏览器窗口变小,自适应窗口,推荐
    当设定了宽度或是最大宽度,使用 margin-left:auto; margin-right:auto; 使元素居中
  • 内联元素不接受设定宽高,设定display: inline-block;
    不过支持paddingmargin,可以用来代替
  • 为防止在不同电脑上效果不一致,可以在css里再表示下元素的大小,用来确认

相关推荐