css 使用杂记

  1. 水平居中
    条件:必须有宽度,不能无限宽

    • 行内元素:通过设置父元素text-align:center
    • 块元素:要设置宽度,然后 左右margin值为“auto”
  2. 垂直居中
    条件:父元素必须有高度,不能无限高

    • 行内元素:通过设置父元素height 和 line-height 高度一致
  3. Flex布局可以代替float

  4. box-sizing 解决边框和内边距对宽高的影响
    css默认宽高只影响元素内容,最后元素的宽高=内容宽高+边框+内边距,box-sizing可以改变此行为。

    • content-box:默认值
    • border-box:边框+内边距会算在内容宽高中
  5. 自动换行:word-wrap:break-word;

  6. clear
    只清除元素的浮动边,不浮动边没有效果

  7. float
    元素浮动后会变成block元素,

        <div style="float:left;">1div>
        <div  style="">2div>
        <div  style="">3div>
    

    结果
    12
    3

    • 3,2的宽度是整个行宽,1的宽度是所需的宽度。2的宽度覆盖了1的宽度,但2被1挤到了右边。
    • 如果1,2,3指定了宽度,那么漂浮后,元素的宽度不变,但会增加一个margin长度充满整行。
    • 浮动元素会挤开行框,不对挤开块元素。
  8. 绝对定位

    <html>
    <head>
        <style type="text/css">
        h2.pos_abs
        {
        position:absolute;
        left:100px;
        top:150px
        }
        style>
    head>
            <body>
            <p>通过绝对定位,元素可以放置到页面上的任何位置。下面的标题距离页面左侧 100px,距离页面顶部 150px。p>
            <h2 class="pos_abs">这是带有绝对定位的标题h2>
            body>
    html>
    
    • h2虽然是绝对定位,但在没有设定top,left,bottom,right的情况下他的初始位置仍为原文档流中的位置,但是不占用参照元素的空间。(不会改变参照元素的高度或宽度)
    • margin:0 auto;对绝对定位元素没有效果。
  9. text-align
    会让子inline,inline元素以及其内容相对父元素居中。会使子block元素内容居中,元素不居中。

  10. 父元素的高宽并不能限制子元素的大小。%大小 是相对父元素大小而显示的。

  11. 漂浮的元素在容器大小不够的情况下会换到下一行,因此在浏览器窗口大小变小时,会换行,解决方法:固定漂浮元素父元素的大小以容纳下所有需要保持在同一行的漂浮元素,同样的如果需要漂浮元素换行,可以限定其父元素的大小。

  12. line-height对块元素没效果

  13. top bottom等 对已定位元素有效

  14. 内联标签中的空格会算入宽度和高度

  15. 内外边距不会改变控件的宽度,只能压缩控件或控件内容的宽度。

  16. font-size每个浏览器都有最小px,如果小于最小值则为最小值,比如google浏览器最小12px,即使设置1px,有效值也为12px,所以想让1px=1rem是不可能的,所以一般使100px=1rem,即font-size:100px;

  17. 去除浏览器默认设置

    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">//移动端必加
    <meta name="format-detection" content="telephone=no" />
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <meta name="format-detection" content="telephone=no"/>
    <meta name="full-screen" content="yes">
    <meta name="x5-fullscreen" content="true">
    * {
         max-height: 999999px;
         -webkit-text-size-adjust: 100%;
         /*禁止长按屏幕默认选择文字*/
         -webkit-user-select: none;
         margin: 0;
         padding: 0;
    }
    html, body {
         width: 100vw;
         height: 100vh;
         font-family: pay;
         position: relative;
         /*overflow: hidden;*/
         overflow-x: hidden;
    }
    
  18. :after,:before
    是在元素内容的前后插入微元素

  19. padding和margin是在元素位置确定之后才计算渲染的

  20. 内联元素clear:both没有任何意义

  21. clear:both
    该元素左侧不能有浮动元素,如果有,该元素会换到下一行;右侧同理。

  22. 常用清除浮动方式使用:after
    .cc:after {
    clear: both;
    }

  23. margin-top 30%
    是基于父元素宽度的30%

  24. inline-block会失去元素自动伸缩性

  25. flex元素应该设置一个宽或高,这样在窗体大小改变时,浏览器会尽量不让元素小于这个宽或高

  26. vertical-align
    该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐

  27. height:100%;这个只是失业范围内的,一旦出现滚动条,滚动出后的内容并不会自动延伸,如红框部分
    css 使用杂记_第1张图片

  28. overflow:auto如果父子标签都有,则父标签起作用

  29. 防止table溢出table-layout:fixed;

你可能感兴趣的:(css,css,html,css3)