css 使用杂记

news2024/11/24 17:16:09

水平居中
条件：必须有宽度，不能无限宽
- 行内元素：通过设置父元素text-align:center
- 块元素：要设置宽度，然后左右margin值为“auto”
垂直居中
条件：父元素必须有高度，不能无限高
- 行内元素：通过设置父元素height 和 line-height 高度一致
Flex布局可以代替float
box-sizing 解决边框和内边距对宽高的影响
css默认宽高只影响元素内容，最后元素的宽高=内容宽高+边框+内边距，box-sizing可以改变此行为。
- content-box：默认值
- border-box：边框+内边距会算在内容宽高中
自动换行：word-wrap:break-word;
clear
只清除元素的浮动边，不浮动边没有效果
float
元素浮动后会变成block元素，
```
    <div style="float:left;">1</div>
    <div  style="">2</div>
    <div  style="">3</div>
```
结果
12
3
- 3,2的宽度是整个行宽，1的宽度是所需的宽度。2的宽度覆盖了1的宽度，但2被1挤到了右边。
- 如果1,2,3指定了宽度，那么漂浮后，元素的宽度不变，但会增加一个margin长度充满整行。
- 浮动元素会挤开行框，不对挤开块元素。

绝对定位

<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；对绝对定位元素没有效果。

text-align
会让子inline,inline元素以及其内容相对父元素居中。会使子block元素内容居中，元素不居中。
父元素的高宽并不能限制子元素的大小。%大小是相对父元素大小而显示的。
漂浮的元素在容器大小不够的情况下会换到下一行，因此在浏览器窗口大小变小时，会换行，解决方法：固定漂浮元素父元素的大小以容纳下所有需要保持在同一行的漂浮元素，同样的如果需要漂浮元素换行，可以限定其父元素的大小。
line-height对块元素没效果
top bottom等对已定位元素有效
内联标签中的空格会算入宽度和高度
内外边距不会改变控件的宽度，只能压缩控件或控件内容的宽度。
font-size每个浏览器都有最小px，如果小于最小值则为最小值，比如google浏览器最小12px，即使设置1px，有效值也为12px，所以想让1px=1rem是不可能的，所以一般使100px=1rem，即font-size:100px;

去除浏览器默认设置

<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;
}