css知识点整理

最新推荐文章于 2024-07-15 11:20:24 发布

qq_35321405

最新推荐文章于 2024-07-15 11:20:24 发布

阅读量156

点赞数 1

CC 4.0 BY-SA版权

分类专栏： css

本文链接：https://blog.youkuaiyun.com/qq_35321405/article/details/87342609

css 专栏收录该内容

2 篇文章

订阅专栏

1. 单位

px（pixel），含义像素，绝对单位。适合场景：pc端
em（the font size of the element），相对单位，相对于父元素的字体大小的单位。适合场景：pc端
rem(the font size of the root element)，相对单位，相对于根元素html的字体大小的单位。适合场景：web app

2.屏幕适配方案

流式布局：通过百分比来定义宽度，高度大部分是用px固定住。缺点：在大屏幕手机上宽度拉伸，高度不变。
固定宽度布局：把页面设置固定宽度页面，超出部分留白，缺点：大屏幕手机看页面会很小，不方便操作。
响应式布局：简单网站可以使用响应式布局，web page 和web app一步到位，节约成本。缺点：复杂网站不适合这个，工作量大，维护性难。
缩放页面：使用viewport进行缩放，缺点：页面元素可能存在糊的情况。

3.html引入css方法

行内式：写在元素上style
内嵌式：写在head标签对->style标签对中
导入式: 写在head标签对->style标签对中->@import
链接式：写在head标签对-> link标签

<html>
    <head>
        <meta charset="utf-8">
        <!-- 内嵌式css，缺点：多个页面，页面样式重复，修改麻烦 -->
        <style type="text/css">
            /*导入式引入css，缺点：整个页面装载完后在装在css文件 ，
            如果网页比较大，会出现无样式网页，闪烁一下，出现正常样式。
            不推荐使用
            */
           @import url(./css/main.css);
        </style>
        <!-- 链接式引入css,优点：网页文件主体装载前装载css文件，显示的网站是带样式的效果 -->
        <link href="./css/main.css" rel="stylesheet" type="text/css">
        <!-- 我们写网站常用写法，写一个总的css文件，通过链接式引入文件，
            在这个总的css文件中，我们在使用导入式方式引用外部css -->
    </head>
    <body>
        <!-- 行内式css，缺点：造成html文件大，不容易维护，不能复用，不推荐使用 -->
        <section style="background-color: #f00;">
            <button class="btn-rem">测试rem</button>
        </section>
    </body>
</html>

4.运行html文件

写好了一个纯html文件，在浏览器中可以查看，想用手机浏览器动态查看pc端html文件效果，如何才能让手机浏览器查看到自己pc端html文件。而不是将html文件发送到手机，使用手机浏览器打开，这样调试很麻烦。

初步预想，手机浏览器输入一个html地址，访问我写好的html。怎样才能把html文件和手机浏览器建立联系，因此我们需要一个中间商服务器，我们把html文件放到那个服务器里，手机浏览器访问那个服务器。手机浏览器和服务器进行通讯。

实施：