第三章：CSS3样式基础 知识点： 1.CSS概念 2.CSS语法格式 3.CSS的使用 4.三类范围 为什么使用CSS 化妆前： 化妆后： HTML语法，在网页上显示数据，第一章p br b font...暂时有这个概念，盒子模型学完就推翻了 如果想要指定对齐，需要设置宽和高 宽：weight 高：hight text-indent 首行缩进 单位可以是px，像素，也可以是em，即缩几个字体，根据全部字体的大小来变化...ne-resize 此光标指示矩形框的边缘可被向上及向右移动（北/东）。 nw-resize 此光标指示矩形框的边缘可被向上及向左移动（北/西）。...n-resize 此光标指示矩形框的边缘可被向上（北）移动。 se-resize 此光标指示矩形框的边缘可被向下及向右移动（南/东）。...sw-resize 此光标指示矩形框的边缘可被向下及向左移动（南/西）。 s-resize 此光标指示矩形框的边缘可被向下移动（南）。
obj.offsetHeight 指 obj 控件自身的绝对高度，不包括因 overflow 而未显示的部分，也就是其实际占据的高度，整型，单位像素。...clientHeight 大家对 clientHeight 都没有什么异议，都认为是内容可视区域的高度，也就是说页面浏览器中可以看到内容的这个区域的高度，一般是最后一个工具条以下到状态栏以上的这个区域...NS、FF 认为 scrollHeight 是网页内容高度，不过最小值是 clientHeight。 简单地说 clientHeight 就是透过浏览器看内容的这个区域高度。...NS、FF 认为 offsetHeight 和 scrollHeight 都是网页内容高度，只不过当网页内容高度小于等于 clientHeight 时，scrollHeight 的值是 clientHeight...scrollHeight 则是网页内容实际高度。 同理 clientWidth、offsetWidth 和 scrollWidth 的解释与上面相同，只是把高度换成宽度即可。
obj.offsetHeight 指 obj 控件自身的绝对高度，不包括因 overflow 而未显示的部分，也就是其实际占据的高度，整型，单位像素。...clientHeight 大家对 clientHeight 都没有什么异议，都认为是内容可视区域的高度，也就是说页面浏览器中可以看到内容的这个区域的高度，一般是最后一个工具条以下到状态栏以上的这个区域...NS、FF 认为 scrollHeight 是网页内容高度，不过最小值是 clientHeight。 简单地说 clientHeight 就是透过浏览器看内容的这个区域高度。...NS、FF 认为 offsetHeight 和 scrollHeight 都是网页内容高度，只不过当网页内容高度小于等于 clientHeight 时，scrollHeight 的值是 clientHeight...top,pixelTop,posTOp这几个类比就行了.
单独制作移动端页面优点 可以充分考虑到平台的优势和局限性 创建良好的用户体验设计 网页在移动设备上加载更快 单独制作移动端页面缺点 移动端网站会产生多个URL（PC端一套URL，移动端一套URL） 维护成本会增加...1.3 移动Web开发基础 1.3.1 视口 视口（Viewport）最早是由苹果公司在推出 iPhone 手机时发明的，其目的是为了让 iPhone 的小屏幕尽可能完整显示整个网页，它是浏览器显示页面内容的屏幕区域...视口能将大分辨率尺寸网页缩小显示在手机浏览器上，这样保证网页在手机上看起来更像在桌面浏览器中的样子。 布局视口 布局视口是指网页的宽度，一般移动端浏览器都默认设置了布局视口的宽度。...当移动端浏览器展示 PC 端网页内容时，由于移动端设备屏幕比较小，布局视口不能像PC端浏览器那样完美地展示网页，网页在手机的浏览器中会出现左右滚动条，用户需要左右滑动才能查看完整的一行内容。...浏览器在显示网页时，需要将 CSS 像素转换为物理像素然后再呈现 一个css像素最终由几个物理像素显示，由浏览器决定：默认 PC 端，一个 CSS 像素 = 一个物理像素 1.3.4 单位 em：相对单位
无论是构建复杂且用户体验较高的网页、强大的 Web 应用程序还是响应式的移动界面，前端开发都需要扎实的基础知识，在前端开发领域，基础知识是构建高效、稳定和可维护代码的基石。...了解盒模型对于精确控制网页元素的布局至关重要。分享几个简单示例。示例一：为一个div标签设置了宽度为 200 像素，高度为 100 像素的内容区。...布局布局是CSS中非常重要的部分，如果前端开发者在这块基础不牢，会很吃力。分享几个常用的布局方式：浮动（float）：向左或向右移动元素，直到其边缘触及包含框或另一个浮动元素的边缘。...视口单位：相对于视口宽度和高度的单位。5. 盒模型的计算方式在标准盒模型中，元素的宽度和高度只包括内容区的宽度和高度，不包括内边距、边框和外边距。...构建工具关于前端打包构建时候用到的工具，也是前端开发中常用的操纵。Webpack：模块打包器，用于将项目中的各种资源打包成浏览器可以识别的格式。
在尺寸较大的设备中，在这些设备上，应用显示区域不一定是全屏的，viewport 是浏览器窗口的大小。 在大多数移动设备中，浏览器是全屏的，viewport 是整个屏幕的大小。...height 一个正整数或者字符串 device-height 以pixels（像素）为单位， 定义viewport（视口）的高度。...这个特性主要被用于移动设备，但是也可以用在支持类似“固定到边缘”等特性的桌面浏览器，如微软的Edge。 按百分比计算尺寸的时候，就是参照的初始视口（viewport）。...初始视口指的是任何用户代理和样式对它进行修改之前的视口。桌面浏览器如果不是全屏模式的话，一般是基于窗口大小。 在移动设备上（或者桌面浏览器的全屏模式），初始视口通常就是应用程序可以使用的屏幕部分。...pageLeft: 0, // 视觉视口边缘的初始化包含原点的X坐标，返回值为CSS像素值。
1.3 移动Web开发基础 1.3.1 视口 视口（Viewport）最早是由苹果公司在推出 iPhone 手机时发明的，其目的是为了让 iPhone 的小屏幕尽可能完整显示整个网页，它是浏览器显示页面内容的屏幕区域...视口能将大分辨率尺寸网页缩小显示在手机浏览器上，这样保证网页在手机上看起来更像在桌面浏览器中的样子。 布局视口 布局视口是指网页的宽度，一般移动端浏览器都默认设置了布局视口的宽度。...PC 端网页内容时，由于移动端设备屏幕比较小，布局视口不能像PC端浏览器那样完美地展示网页，网页在手机的浏览器中会出现左右滚动条，用户需要左右滑动才能查看完整的一行内容。...浏览器在显示网页时，需要将 CSS 像素转换为物理像素然后再呈现 一个css像素最终由几个物理像素显示，由浏览器决定：默认 PC 端，一个 CSS 像素 = 一个物理像素 1.3.4 单位 em...vm/vh：vw(view-width)，vh(view-height) 这两个单位是 CSS 新增的单位，表示视区宽度/高度，视区总宽度为 100vw，总高度为 100vh。
在为桌面浏览器设计的网页中，我们无需对这个津津计较，但在移动设备上，必须弄明白这点。...在移动端浏览器中以及某些桌面浏览器中，window对象有一个devicePixelRatio属性，它的官方的 定义为：设备物理像素和设备独立像素的比例，也就是 devicePixelRatio = 物理像素...在为桌面浏览器设计的网页中，我们无需对这个津津计较，但在移动设备上，必须弄明白这点。... 在移动端浏览器中以及某些桌面浏览器中，window对象有一个devicePixelRatio属性，它的官方的 定义为：设备物理像素和设备独立像素的比例，也就是 devicePixelRatio...在为桌面浏览器设计的网页中，我 们无需对这个津津计较，但在移动设备上，必须弄明白这点。
： (1) moveBy(dx, dy); -- 窗口移动(dx,dy)个像素。...(2) moveTo(x, y); -- 窗口移动到(x,y)像素。...第一个参数：要打开的网页url，可以是相对路径; 第二个参数：打开窗口的名称(还可以包括_self,_parent, _top及_blank几个特殊值)...CPU 等级 5. screen对象： 5.1 screen对象的主要属性： (1) availHeight -- 窗口可以使用的屏幕的高度（以像素计）...(4) height -- 屏幕的高度，以像素计。 (5) width -- 屏幕的高度，以像素计。
所以，布局视口是网页布局的基准窗口，在 PC浏览器上，布局视口就等于当前浏览器的窗口大小（不包括 borders 、 margins、滚动条）。...在移动端，布局视口被赋予一个默认值，大部分为 980px，这保证 PC的网页可以在手机浏览器上呈现，但是非常小，用户可以手动对网页进行放大。...如上图，我们在描述设备独立像素时曾使用过这张图，在浏览器调试移动端时页面上给定的像素大小就是理想视口大小，它的单位正是设备独立像素。...window.outerHeight：获取浏览器窗口外部的高度。表示整个浏览器窗口的高度，包括侧边栏、窗口镶边和调正窗口大小的边框。...window.screen.Height：获取获屏幕取理想视口高度，这个数值是固定的， 设备的分辨率/设备像素比 window.screen.availHeight：浏览器窗口可用的高度。
随着技术的发展，移动设备越来越流行，并且不同设备间屏幕尺寸和屏幕像素的差异，移动端开发面临着多分辨率适配的问题。...基本概念 响应式开发本质时针对多种屏幕做适配，在实际开发中，通常情况下时针对主流的设备进行适配。在开发前，必须掌握几个基本概念： 物理像素：即屏幕的实际像素点。...，在浏览器中，是指能用来显示网页的区域。...当可视视口比布局视口小时，浏览器网页就会出现横向滚动条，以支持用户浏览整个网页的内容。...通常情况下，大多数移动设备的 Viewport（一般指布局视口）的宽度都是 980 像素，而可视视口（即设备独立像素）通常都小于 980 像素。
移动前端中常说的 viewport （视口）就是浏览器显示页面内容的屏幕区域。...其中涉及几个重要概念是 dip （ device-independent pixel 设备逻辑像素 ）和 CSS 像素之间的关系。这里首先了解以下几个概念。...CSS像素与 dip 的比例即为网页的缩放比例，如果网页没有缩放，那么一个CSS像素就对应一个 dip（设备逻辑像素） 。...移动浏览器设置viewport有效，但也能手动缩放。...移动浏览器viewport设置initial-scale缩放。
随着显示器设备越大越宽越密，以及现代web技术的发展。web站点已经开始有了从传统的瀑布式网页向类桌面软件风格站点转变的趋势。...这里有几个关键字，一是企业，二是管理系统。 1. 企业 这里为什么要强调是“企业”呢？因为企业产品的用户一般都是购买了企业QQ产品的企业的员工，有一定IT技能的人。...下图为以前企业QQ账户中心组织结构页面（测试页面）的真容： 看着此页面，立马让我想起了6年前刚毕业那会的青葱岁月，那时候的页面的基本上就是这样的调调，小小的空间里有着小小的世界。...以前我们的滚动条是跟浏览器上边缘是靠在一起的，但是，自从变成了内滚动，滚动条是跟网站公用头部下边缘排排站，这会造成什么问题呢？就是一些offset的计算要发生一些变化。...但是，麻烦的事情是，如果弹框自身高度很高，却又没法滚动呢(浏览器可用高度700像素，弹框有900像素高)？
web站点已经开始有了从传统的瀑布式网页向类桌面软件风格站点转变的趋势。比方说，QQ音乐的首页目前是这样子的： ? 以后可能就会变成这样子： ? “纳尼，这不就是现在的QQ音乐软件界面截图？”...看着此页面，立马让我想起了6年前刚毕业那会的青葱岁月，那时候的页面的基本上就是这样的调调，小小的空间里有着小小的世界。时代发展，再辉煌的过去，如果没有改变，终将会被埋汰。...以前我们的滚动条是跟浏览器上边缘是靠在一起的，但是，自从变成了内滚动，滚动条是跟网站公用头部下边缘排排站，这会造成什么问题呢？就是一些offset的计算要发生一些变化。...对于黑色半透明覆盖层，传统实现是这样的：如果要兼容IE6浏览器，一般是absolute绝对定位，高度由JS计算赋予；如果不需要管IE6, 则可以使用fixed固定定位。...但是，麻烦的事情是，如果弹框自身高度很高，却又没法滚动呢(浏览器可用高度700像素，弹框有900像素高)？
必须说说窗户尺寸 浏览器窗口里面的宽度和高度可以用window.innerWidth/innerHeight描述，单位是CSS像素。...这在台式机上很烦人，但在移动设备上却很致命） 注意：测量的宽度和高度包括滚动条。它们也被视为内部窗口的一部分，这主要是出于历史原因。...视口viewport问题引出 移动设备上的viewport就是设备的屏幕上能用来显示我们的网页的那一块区域，在具体一点，就是浏览器上(也可能是一个app中的webview)用来显示网页的那部分区域，但viewport...若不清楚物理像素和CSS像素可见前篇图文并茂带你弄懂分辨率、物理像素、逻辑像素、dpr、ppi 它将PC页面缩小到一个手机屏幕的可视范围，原理是怎么样的呢？...我们用下面的图来说说 移动设备上的浏览器都会把自己默认的viewport设为980px或1024px（也可能是其它值，这个是由设备自己决定的），这里是980px。这个是CSS像素。
>标签：用来设置行内元素(或几个文字)的样式。...一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。 浮动元素之后的元素将围绕它。 浮动元素之前的元素将不会受到影响。...(4)fixed固定定位 a.特性：直接以浏览器窗口为基准定位，偏移位置不受窗口滚动条滚动的影响。 b.使用场景：窗口边缘的固定广告、返回顶部图标、边缘固定导航栏等。...首先按static(float)方式生成一个元素(元素像层一样浮动了起来)，然后相对于以前的位置移动，移动的方向和幅度由left、right、top、bottom属性确定，偏移前的位置保留。...p{color:#00ffff;} 相对单位长度值： 1、px像素 像素指的是显示器上的小点(CSS规范中假设“90像素=1英寸”)。实际情况是浏览器和使用显示器的实际像素值有关。
(-50%); /* 向左走盒子自身宽度的一半 */ transform: translateX(-50%); 2、设置最大宽度和最小宽度 在移动端网页中 , 一般都要设置一个 最大宽度...和 最小宽度 ; 当浏览器的宽度超过最大宽度 , 则网页布局最大就是该 最大宽度 , 继续放大网页不再随着页面一起放大 ; 当浏览器的宽度小于最小宽度 , 则网页布局最小就是该 最小宽度 , 继续缩小显示布局布局...44x44 像素大小 ; 左侧的搜索栏随着网页布局的宽度变化而变化 ; 此处 使用 Flex 弹性布局管理宽度 , 右侧的按钮直接设置一个固定大小 , 左侧的搜索框设置 flex: 1; 样式 , 也就是...+ 边框高度 + 内边距 ; 如果要设置垂直居中 , 只能设置其中的 行高 = 内容高度 , 要把 2 像素的边框去掉 ; 因此在该 CSS3 样式中 , 高度设置为 26 像素 , 其中包括了 24...像素的内容高度 , 2 像素的边框高度 ( 上下边框各 1 像素 ) ; /* 设置 高度 = 26 行高 = 24 像素 垂直居中 设置行高 = 26 会偏下 上面的设置
主要是跟一个东西有关，DPR(devicePixelRatio) 设备像素比，它是默认缩放为 100%的情况下，设备像素和 CSS 像素的比值。...web网页是有300ms延迟的，往往会造成按钮点击延迟甚至是点击失效。...（Boolean）方法用来将不在浏览器窗口的可见区域内的元素滚动到浏览器窗口的可见区域。...如果该元素已经在浏览器窗口的可见区域内，则不会发生滚动。 true，则元素将在其所在滚动区的可视区域中居中对齐。 false，则元素将与其所在滚动区的可视区域最近的边缘对齐。...根据可见区域最靠近元素的哪个边缘，元素的顶部将与可见区域的顶部边缘对准，或者元素的底部边缘将与可见区域的底部边缘对准。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
腾讯会议
云直播
对象存储
