样式小知识（css）

最新推荐文章于 2024-05-18 06:08:21 发布

香煎小猪皮

最新推荐文章于 2024-05-18 06:08:21 发布

阅读量100

点赞数

分类专栏： xzp 文章标签： css css3 html

本文链接：https://blog.csdn.net/weixin_41784462/article/details/127984407

版权

xzp 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

样式优先级

关键：important、行内样式、嵌入式样式、外联样式、id选择器、类选择器、复合选择器、通配符、继承样式。
解析
1. 优先级最高，important；
2. 引入样式，内联样式优先级高于外联样式；
3. 类选择器，id选择器>类选择器|伪类选择器|属性选择器>后代选择器|伪元素选择器>子选择器|相邻选择器>通配符选择器；
4. 继承样式，外部优先级最低；
5. 浏览器默认样式，优先级最低。### 浮动
关键：脱离文档流、盒子塌陷、影响其他元素排版、伪元素、overflow:hidden、标签插入
解析
1. 作用：照片浮动可实现文字环绕图片；块级元素浮动可排列在同行；行内元素浮动可设置宽高。
2. 特点：浮动元素不占位置、浮动可以进行模式转换，浮动使盒子脱离文档流，若父级元素未设置高度，父级将存在高度塌陷的问题。
3. 清除浮动：overflow:hidden

css尺寸单位

关键：px、rem、em、vw、vh
解析
1. px - pixel 像素的缩写，绝对长度单位，大小取决于屏幕的分辨率。
2. em - 相对长度单位，在font-size中使用相对于父元素的字体大小，其他属性是相对于自身的字体大小。若当前元素的字体尺寸未设置，由于字体大小可继承的原因，可逐级向上，直到顶级浏览器默认字体大小。（chrome存在字体最小12px，小于12px默认为12px）
3. rem - 相对长度单位，根据根元素的字体大小，根元素字体大小未设置，使用浏览器默认字体大小（根元素html）。
4. vw - 相对长度单位，相当于视窗宽度1%。
5. vh - 相对长度单位，相对于视窗高度1%
注释： rem - 移动端网页开发，页面需要做响应式开发，可使用rem配合媒体查询或者flexible.js实现，可在屏幕尺寸发生改变时，重置html根元素字体大小，页面中的元素都是使用rem为单位设置的尺寸，因此改变根元素字体大小，页面其他元素的尺寸将会自动修改。vw - 被更多浏览器兼容后，移动响应式页面，通常使用vw配合rem。原理：使用vw设置根元素的字体大小，当窗口发生改变，vw代表尺寸随之修改，无需媒体查询与flexible.js，页面中其他元素使用rerm单位。

垂直水平居中

// 第一种：广泛使用，兼容性好
// 父级
position:absolute;
left: 50%;
right: 50%;
// 元素自身
transform: translate(-50%, -50%)
// 第二种：ie11以上支持，对于版本要求高
// 父级
display: flex;
justify-content: center;
align-items: center;
// 第三种：ie10以上支持，对于版本要求高
// 父级
display: grid;
justify-content: center;
align-items: center;
// 第四种：兼容性高
// 父级
display: table-cell;
text-align: center;
certaicl-align: middle;

盒模型

关键：标准盒模型、怪异盒模型、box-sizing:border-box、盒模型大小
注解：盒模型组成 = content（内容） + padding（填充） + border（边框） + margin（外边界）
1. 怪异盒模型（IE盒模型）宽度 = border左右 + padding左右 + content宽度；高度 = border上下 + padding上下 + content高度。
2. 标准盒模型宽度 = content高度；宽度 = content宽度。

box-sizing: border-box; /* IE盒模型 */
box-sizing: content-box; /* 标准盒模型 */

伪类与伪元素

css2 伪类、伪元素都以单冒号表示:。
css2.1 伪类使用单冒号，伪元素使用双冒号。

浏览器怎么解析css选择器

css选择器的解析：从右到左解析（左到右：损耗性能），找到所有的最右节点，对于每个节点，向上查找其父级直到找到根元素或满足条件的匹配规则，结束分支遍历。

未知元素垂直、水平居中

绝对定位 + css3 transform:translate(-50%, -50%)

.wrap{
    position:relative;
}
.child{
    position:absolute;
    top:50%;
    left:50%;
    -webkit-transform:translate(-50%, -50%);
}

css3 flex布局

.wrap{
    display: flex;
    justify-content:center;
}
.child{
    align-self:center;
}

table布局

.wrap{
    display:table;
    text-align:center;
}
.child{
    display:table-cell;
    vertical-align:middle;
}

解决盒子塌陷

.clearfix{*zoom:1;}
.clearfix:before,.clearfix:after{
    display:table;
    line-height:0;
    content:"";
}
.clearfix:after{clear:both;}

多行文本垂直居中

父级元素高度不固定(需要padding-top与padding-bottom相等，padding-left与padding-right相等)

.box{
    padding: 10px 15px;
}

父级元素高度固定

.box{
    width:300px;
    height:300px;
    vertical-align:middle;
    display:table-cell;
}

viewport适配

head标签里面设置 initial-scale = 屏幕宽度 / 设计稿宽度
缺点：边线问题，不同尺寸下，边线粗细是不一样的，全部元素都等比缩放，实际显示效果可能不好。

<meta name="viewport" content="width=750,initial-scale=0.5">
<script>
const WIDTH = 750;
const mobileAdapter = ()=>{
    let scale = screen.width / WIDTH;
    let content = `width=${WIDTH},initial-scale=${scale},minimum-scale=${scale}`;
    let meta = document.querySelector("mate[name=viewport]");
    if(!meta){
        meta = document.createElement("meta");
        meta.setAttribute("name", "viewport");
        document.head.appendChild(meta)
    }
    meta.setAttribute("content", content);
    mobileAdapter();
    window.onrientationchange = mobileAdapter;
}
</script>

vm适配（部分等比缩放）

设计稿尺寸750px，换算32px字体，(100/750)*32vw
对需要缩放的元素使用vw，不需要缩放的元素使用px

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1">
    <script>
        const WIDTH = 750;
        document.documentElement.style.setProperty('--width', (100/WIDTH));
    </script>
    <style>
        .xzp{
            font-size:calc(28vw * var(--width));
        }
    </style>
</head>

rem适配

1rem = 根元素的font-size，例如html设置font-size = 100px，则1rem=100px
缩放具体规则，设计稿750px：屏幕420px，设计稿40px的元素，换算 (420/750)*40 = 22.4px，若根元素字体大小为100px=>22.4rem
更好的换算设计稿40px的元素，屏幕420px，可设置成0.4rem，反向推算 0.4rem * 根字体大小 = 22.4px，根字体大小设置56px

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minmum-scale=1">
    <script>
        const WIDTH = 750;
        const setView = ()=>{
            documnet.documentElement.style.fonSize = (100 * screen.width / WIDTH) + "px";
        }
        window.onorientationchange = setView;
        setView();
    </script>
    <style>
        .xzp{
            font-size:.28rem;
        }
    </style>
</head>