提示： 本文为移动端开发学习栏目：移动端开发学习01： viewport视口的概念02——1px问题 移动端开发学习01： viewport视口的概念02——1px问题 # 视口的概念 ## 1px的问题 但是我们需要明白一件事：css不支持小数！ 所以UI设计的设计图如果设计了1px的边框，在手机上缩小呈现时，由于
1、利用line-height和vertical-align <div class="box"> <span>测试文字</span> </div> .box{ width: 200px; height: 200px; overflow: hidden; background: #ccc; text-align: center; } .box span{ vertical-align:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .box1{ width: 200px;
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .box1{ width: 200px; height:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .box1{ width: 200px; height:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .box1{ width: 200px; height:
布局管理 1.1盒子布局 首先了解盒子的结构 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> *{ padding: 0; margin: 0; } .box{widt
* 当元素的position属性设置fixed时，则开启了元素的固定定位 * 固定定位也是一种绝对定位，它的大部分特点都和绝对定位一样 * 不同的是： * 固定定位永远都会相对于浏览器窗口进行定位 * 固定定位会固定在浏览器窗口某个位置，不会随滚动条滚动 * * IE6
* 如果定位元素的层级是一样，则下边的元素会盖住上边的 * 通过z-index属性可以用来设置元素的层级 * 可以为z-index指定一个正整数作为值，该值将会作为当前元素的层级 * 层级越高，越优先显示 * * 对于没有开启定位的元素不能使用z-index **** 父元素不管层
小案例，中间实现左右自适应利用flex的特性 <style> *{margin: 0;padding: 0;} #main{display: flex;} #l,#r{width: 200px;height: 200px;background: red;} #center{flex: 1;height: 300px;backgroun
z-index 及透明度 z-index 图层 默认是0，最高无限 .box{ position: relative; } div:nth-of-type(1){ width: 200px; height: 200px; background: #c3d23b; border: 1px solid #c3d23b; border-radius: 30px; z-index: 999; } 透明度 opacity
笔记来源：尚硅谷Web前端HTML5&CSS3初学者零基础入门全套完整版 目录变形：平移、旋转与缩放1、平移浮出效果2、Z轴平移透视效果3、旋转4、缩放5、实战鸭子表复仇者联盟 变形：平移、旋转与缩放 变形就是指通过css来改变元素的形状或位置 变形不会影响到页面的布局 transform用来设置
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } /*方法一、纯margin + overflow:hidden;*/ /* .boss{ width: 5
场景模拟： 现在有一个父容器，里面有俩个div，左边的要给一个固定的200px的宽度，父容器剩下的宽度都归右边的div该怎么完成？ HTML代码： <div class="wrap"> <div class="left"></div> <div class="right">CSDN吴小迪</div> </div> 解决问题的方法： 一：CSS3弹性盒
json&Ajax 1.json规则2.Ajax在jquery里的使用方法2.0.Ajax的本地加载 $("#div1").load实现的方法(如果没有后台程序的时候用这个)2.1通过XHR对象创建（已经过时，不推荐使用）2.2通过Jquery实现Ajax2.3.jquery$.post实现ajax请求2.4.jquery$.getJSON加载本地json2.5.jquery解析后
1table布局 利用表格来布局，可以内容自动居中。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .a{ height: 100px; width: 100px; } .b{ ba
昨天有两个舍友问了我这样一个问题，在盒子字母或数字超出时不会自动换行，但是中文就可以！！！！我说啥玩意？可能没遇到过的也听不懂，大家直接看案例： 代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>溢出问题解决</title> <style> div {
文章目录 盒子塌陷问题1 出现问题2 解决办法3 测试4 总结 盒子塌陷问题 1 出现问题 有两个嵌套DIV盒子，父盒子里面有一个子盒子，想让子盒子与父盒子上边框之间有一段间距，但是给子级元素添加的外边距没有起效果，效果显示在了父级元素的身上。 示例： 设置大小两个DIV盒子，父盒
3 选择器 所谓选择器，指的是选择施加样式目标的方式。 3.1 元素选择器 用标签名作为选择器，选中所有相应的元素 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> div{ font-size:24px;
参考：https://juejin.cn/post/6905539198107942919 1. 常见的CSS布局单位 1.1 常用的布局单位 包括像素（px），百分比（%），em，rem，vw/vh。 （1）像素（px）是页面布局的基础，是固定的像素，一旦设置了就无法因为适应页面大小而改变。一个像素表示终端（电脑、手机、平板等）屏幕所能显示的最小的区域，像
本文转自 你不知道的CSS ，如有侵权，请联系删除。 css常用小技巧 一、定位 1.1 position: sticky 动态固定”效果 (1) 使用 例如，网页的搜索工具栏，初始加载时在自己的默认位置（relative定位）, 页面向下滚动时，工具栏变成固定位置，始终停留在页面头部（fixed定位）. sticky生效的前提是，必须搭
主要用到了CSS3动画以及CSS3 转换。 代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewpo
CSS定位的学习 为什么要学习定位？什么是定位呢？static 静态定位（了解即可）relative 相对定位绝对定位 absolutefixed固定定位 为什么要学习定位？ 在学习之前，我们要思考一下，定位出现的意义是什么，有什么用呢？ 我们学习定位之前学习了浮动，但是我们会发现许多效果难以实现，比如说京
浮动一开始是做文字环绕的 浮动需要添加标准流父级，也就是父盒子。这里要提一下文档流，就是好几个div组成的模块，叫做文档流，然后给其中一个盒子float起来，就代表这个盒子脱离了文档流，下一个div就会填充脱离了文档流div的原本位置。 那最后在html网页中我们看到的就是这个画面 div1就
<html lang="en"> <head> <meta charset="UTF-8"> <title>div居于页面正中间</title> <style type="text/css"> *{ margin: 0; padding: 0; background
