发布于 

流式布局

流式布局

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撑开

    名:没有固定的宽或高


本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议,转载请注明出处。