流式布局

流式布局

1.ppi 像素密度(越高画质越好,相反)-----没用[设备像素]

2.dpr物理像素比(具体不能改变的比例关系–作用–适配) [硬件]

视口(viewport)

1.禁止------水平滚动—页面缩放

2.视口-----pc[浏览器的大小]----移动[移动设备的大小]

视口的设置

1

<meta name="viewport" content="width=device-width, initial-scale=1.0">                      移动设备宽 ←↑         ↑→ 忘了

注: 左右固定—中自适应 **注:**精灵图----向上向左

**注:**转元素转块元素、行内元素

​ ♦行内块元素是一个非标准的元素

​ ♦ 行内块元素默认都会找基线对齐—(底部多3像素空白)

​ ♦’‘图片是行内块元素转化为块元素 (加浮动=转化块=)----[清除浮动]’ ’

             ∮  盒子之间用padding值撑开,切记不要用margin值

多行文字显示省略号

1
2
3
4
5
6
7
8
9
10

 /* 实现多行文字溢出显示省略号 */
 overflow: hidden;
/* 文字溢出显示省略号：单行文字 */
 text-overflow: ellipsis;
/* 辅助属性：兼容性 */
-webkit-line-clamp: 2;
/* 文字就要垂直显示 */
-webkit-box-orient: vertical;
/* 还需要设置一个弹性盒子 */
display: -webkit-box;

防止汉字自动换行(默认)

1
2

/*解决让文字不在特殊符号(空格,特殊符号)位置处换行*/
  word-break:break-all;

​

网页的步骤

1. 页面样式初始化

2. 任何的一个项目都要单独的在一个文件夹中

3. 任何文件的命名都不能出现汉字

   html的步骤

   1.一般情况下,在网页中先设置一个大盒子

   ​ ▶如果是一个最外层的大盒子,设置宽度100%( 重要)

   ​ ▶如果盒子的高度可以直接测量出来,可以设置高度,反之让内容撑开

   2.在最外层大盒子中划分其它盒子

   ​ ▶搜索盒子(宽度与设备一宽,要设置高度,设置背景颜色,固定定位盒子,以及内[三个盒子])

   ​ ▶搜索盒子中要实现 [两端固定大小,中间[设置padding值]自适应效果]

   {为了防止padding撑大盒子设置! !初始化(最好用一个写一个,以防…以防…[ps：想不起来用什么词了…])'}

   注: [初始化]

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36

   /*实际开发不写*/ *{ padding:0; margin:0; } /*真确写法*/ body,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,dd{ margin:0; padding:0; list-style:none; font-size:14px; font-familt:'宋体'; } a{ /*清除下划线*/ text-decoration:none; } img,input{ vertical-align:middle; /*去掉边框*/ border:0; /*轮廓线*/ outline:none; padding:0; } /*清除浮动*/ .clearfix::after{ content:""; display:block; height:0; visibility:hidden; clear:both; } .clearfix{ *zoom:1; }

   例外 问题:

   ♣背景图片:当页面中的标签某个图标效果,或者图片只是一个衬托效果(给高宽)

   ♣img图片:图片角色很重要[广告,商品]

   重要:

   选择器层级不要太高,类选择器不要超过3个[权限会很高]

   扩展知识点:

   ♠定位 ------♪当一个元素加了定位有层级关系(后来居上原则)[z-index:*;]

   ​ ♪定位脱标元素盒子居中

   1	transform:translate(-50%);[后期会讲,先记住]

   ♠盒子模型 ------

   1	♪max-width---最大宽度 ♪min-width-----最小宽度

   ♠其它内部属性

   1 2 3 4 5 6 7 8 9 10 11

   div{ position:absolute; left:0; top:0; width:**px; height:**px; font-size:**px; /*字的大小颜色(背景)对齐方式*/ text-align:****; }

   底部的固定定位:需要加padding-bottom撑开

   名:没有固定的宽或高