【前端知识点总结】CSS 基础八

最新推荐文章于 2024-09-09 16:04:17 发布

疆子

最新推荐文章于 2024-09-09 16:04:17 发布

阅读量418

点赞数 2

分类专栏：前端知识点总结文章标签：前端 css css3

本文链接：https://blog.csdn.net/jiang_ziY/article/details/123011144

版权

前端知识点总结专栏收录该内容

31 篇文章 11 订阅

订阅专栏

移动 web

手机屏幕一般用英寸测量是屏幕对角线的长度
<meta name="viewport(视口)" content="width=devile-width(视口宽度等于设备宽度),initial-scale=1(页面原始缩放比例)">

二倍图

移动端开发时应把UI的图片缩小一倍(除以二)

百分比布局

又叫流式布局，宽度自适应，高度固定

移动端适配

rem:目前多数企业在用的解决方案
vw/hw :未来解决适配的趋势

rem : 长度单位 ( 相对单位 )

rem 和 em 的区别

1个 em 等于当前盒子文字大小
1个 rem = 1 个根标签文字大小 (PC端 html默认文字大小16px)

媒体查询

设置差异化css样式

@media (width:320px) {html {font-size:32px;}} 当视口宽度为320px时,执行html文字大小为32px
通常将网页视口分为 10 等份,字体大小设置为视口的十分之一

rem和媒体查询适配

媒体查询设置根标签, 文字大小为视口宽度的十分之一, 宽高内外边距等单位设置为 rem 值
rem 值 = 设计稿尺寸 / 根标签文字大小

 @media (width:320px) {
     html {
         font-size: 32px;
     }
 }

 @media (width:375px) {
     html {
         font-size: 37.5px;
     }
 }

 @media (width:414px) {
     html {
         font-size: 41.4px;
     }
 }

 .box {
     width: 1.8133rem;
     height: 0.7733rem;
     background-color: #f00;
 }

配置 rem 适配快捷方法

前置知识点

flexible.js 的作用 : 将跟标签文字大小设置为当前视口的十分之一
使用方法 : (链入body标签的最下面) <script>标签链入 flexible.js 文件

rem 和 flexible.js 适配

在 body 的最下面用 <script>标签链入 flexible.js 文件
erm 值 = 设计稿尺寸 / 1rem

<head>
    <style>
        /* rem适配步骤
        1.链入flexible.js, 将根标签文字大小设置为视口宽度的1/10 
        2.将px单位转换为rem尺寸,  测量的尺寸/(设计稿/10)
        */
        .box {
            width: 52/37.5;
            height: 0.7733rem;
            background-color: #f00;
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <!-- flexible.js的作用是将根标签文字大小设置为视口宽度的1/10 -->
    <script src="./js/flexible.js"></script>
</body>

vw / vh 适配, 相对视口尺寸的计算单位

1vw = 视口宽度的百分之一
1vh = 视口高度的百分之一
盒子的 vw 尺寸 = 盒子 px值尺寸 / 1vw 的值

.box {
    /* 1vw=设计稿/100 */
    /* 68px=多少个vw */
    /* 盒子的vw尺寸=测量的px值/1vw的值 */
    /* 68/3.75 */
    width: 18.1333vw;
    height: 7.7333vw;
    background: green;
}

rem 适配和 vw 的区别

rem 是跟随跟标签的文字大小变化而变化
vw 是根据视口宽度而变化

响应式布局

响应式布局的核心技术： 媒体查询

媒体查询不同的条件 ( 屏幕宽度 )，执行不同的 css 样式

    <style>
        body {
            background-color: #ccc;
        }

        /* 媒体查询：不同的条件(屏幕宽度)，执行不同的css样式
        当屏幕宽度大于等于768px的时候，执行的样式
        min-width 大于等于 max-width 小于等于
        */
        @media (min-width:768px) {
            body {
                background-color: pink;
            }
        }

        /* 当屏幕尺寸大于等于992px像素执行的样式 */
        @media (min-width:992px) {
            body {
                background-color: skyblue;
            }
        }

        /* 当屏幕尺寸大于等于1201px像素执行的样式 */
        @media (min-width: 1201px) {
            body {
                background-color: green;
            }
        }
    </style>

外链式 css 样式引入媒体查询

red.css
```
body {
  background-color: red;
}
```
blue.css
```
body {
  background-color: blue;
}
```

html 中

  <!-- 当媒体查询满足条件(屏幕尺寸)，才执行外链css样式 -->
  <link rel="stylesheet" href="./red.css" media="(min-width:1200px)">
  <!-- 当页面小于等于768px的时候，执行外链blue.css -->
  <link rel="stylesheet" href="./blue.css" media="(max-width:768px)">

less : css预处理器文件后缀.less

自动生成一个css文件能在css里写的less里都能写
less可以做运算等一些超css文件不能做的
注释 shift+alt+A

less 语法

支持加减乘除运算,加减乘直接运算,除加括号(67/37.5rem)或加点67./37.5rem
less嵌套后代选择器 &代表当前选择器
less变量设置属性值,
- 声明变量 @名字:值; 例: @root:37.5rem;
- 调用变量 @名字 例: width:75./@root;
less 导入其他less文件 @import空格"文件路径";
less 手动导出css文件第一行 //out:./common/
less禁止导出css文件第一行 //out:false

scss : css预处理器文件后缀.scss

同 less

scss 语法

同 less 声明调用变量有所不同

less变量设置属性值,
- 声明变量 $名字:值; 例:$root:37.5rem;
- 调用变量 $名字 例: width:75./$root;

业务中常用 css 属性5

清除移动端高亮度显示 ( 缩写 tap )
- -webkit-tap-highlight-color : ragb(0,0,0,0);
下载网络字体图标
- eot文件 woff文件 ttf文件 svg文件四种格式必须下载
导航拖拽滑动效果
1. 将 ul 里的 li 转为行内块 display:line-block; 强制一行显示 white-space:nowrap;
2. 给 ul 设置 overflow-x:auto; 生成水平滚动条
3. 把 ul 设置的高一点,超过父元素的高度,给父元素设置 overflow:hidden;
多行文字省略号
- overflow:hidden;溢出隐藏
- text-overflow:ellipsis;文字溢出省略号
- display:-webkit-box; 弹性伸缩盒子模型显示
- -webkit-line-clamp:2; 显示的行数
- -webkit-box-orient:vertical; 上到下垂直排列子元素（设置伸缩盒子的子元素排列方式）