HTML基础篇03

第十三讲  CSS3基础

CSS3有哪些新特性？

新增模块：选择器、框模型、背景和边框、文本效果、2D/3D转换、动画、多列布局、用户界面

• 边框属性

border-radius圆角

一个值	设置四个角的圆角大小
二个值	设置左上和右下、右上和左下的圆角大小
三个值	设置左上、右下和左下、右下的圆角大小
四个值	设置左上、右上、右下、左下的圆角大小

box-shadow阴影

box-shadow:h-shadow  v-shadow  blur  spread  color  inset;

参数	说明
h-shadow	必须，水平位移，允许负值
v-shadow	必须，垂直位移，允许负值
blur	模糊距离
spread	阴影的尺寸
color	颜色
inset	将外部阴影转换为内部阴影

 

• 背景属性

多背景

属性	属性值
backgrond-size	cover(等比放大图片，直到盒子完全覆盖，图片可能显示不全)
background-image	url(pic1.png),url(pic2.png);    pic1会覆盖pic2
background-position	center,right  bottom;
background-size	cover  等比放大图片，直到盒子完全覆盖，图片可能显示不全
	contain  等比缩放，直到图片完全显示，盒子不一定完全覆盖
background-orign   规定背景图片的定位区域	padding-box  背景从内边距开始显示（默认）
	border-box  背景从边框开始显示
	content-box背景从内容区开始显示
background-clip  规定背景的裁切	border-box背景从边框以外被裁切（默认）
	padding-box  背景从内边距被裁切
	content-box背景从内容区被裁切

 

• 渐变属性

1)、线性渐变

background（-image）:linear-gradient(direction,color1,color2,...)

to bottom right 从左上到右下

to top left  从右下到左上

30deg  渐变的轴线和x轴的夹角

重复线性渐变：repeating-linear-gradient(10% red,yellow 30%)  当中10%-30%表示红黄渐变区域，10%前面纯红，%30以后纯黄

 

2）、径向渐变

radial-gradient(center,shap size, start-color,......,last-color);

重复径向渐变：repeating-radial-gradient(red 20%,yellow 40%);

 

• 用户界面

调整元素尺寸和框尺寸

resize:设置元素尺寸可改变，元素的overflow属性不为visible,resize才生效

属性	属性值	说明
resize	none	默认
	both	水平和垂直可变
	horizontal	水平可变
	vertical	垂直可变
box-sizing  设置元素盒模型计算规则	content-box	默认，盒子实际宽度=width+padding+border
	border-box	盒子实际宽度=width（padidng和border,不会使盒子变大，压缩内容区）
outline-offset  轮廓框偏移	像素

<input type="button"/>默认为border-box

outline(不占位)：2px solid  blue;轮廓框，默认在border以外

 

CSS3新增选择器有哪些？

1、属性选择器

-css2

[attr]	包含atter属性的元素
[attr = value]	attr属性值等于value元素（若属性值里有特殊字符，必须加引号）
[attr ~= value]	选择attr属性词列表中包含value这个词的元素

-css3

[attr ^= value]	选择attr属性以value开头的元素
[attr $= value]	选择attr属性以value结尾的元素
[attr *= value]	选择attr属性中包含value的元素

2、结构伪类选择器

:first-child	选择同级中的第一个元素
:last-child	选择同级中最后一个元素
:nth-child(n)	选择同级中第n个元素
:nth-last-child(n)	同级中倒数第n个元素
:first-of-type	选择同级同种类型的第一个元素
:last-of-type	选择同级同种类型最后一个元素
:nth-of-type(n)	同级同种类型第n个元素
:nth-last-of-type(n)	同级同种类型倒数第n个元素

3、状态伪类选择器

:checked	选择选中状态的单选、复选
:disabled	选择禁用状态
:enabled	选择可用状态表单元素
:focus	获得焦点的表单元素
::selection	选择用户选中内容

 

 

第十四讲   多列、弹性盒子和预处理

请解释一下css3的flexbox(弹性盒布局模式)，以及适用场景？

弹性盒子（css3中新布局方式），可以规定内部子元素的排列方式，分配多余的空间、对齐方式。

使用场景：移动端、响应式布局，兼容安卓和ios设备

--容器的属性

• display：flex/inline-flex

把元素设置为弹性容器之后，改变的子元素的布局方式，子元素的float、position、clear和vertical-align属性失效

• flex-direction:定义项目排列的方向

row	主轴的正方向
row-reverse	沿主轴的反方向
column	沿交叉轴的正方向
column-reverse	沿交叉轴的反方向

• justify-content:  定义项目在主轴上的对齐方式

flex-start	在主轴的开始（左对齐）
flex-end	在主轴的结束（右对齐）
center	居中
space-around	每个项目两边留出相同的间距
space-between	在两个项目之间留出相同间距（开始和结束没有间距）

• flex-wrap：定义项目超出容器是否拆行

nowrap	不拆行（默认）
wrap	拆行
wrap-reverse	交换行的排列

• align-items：定义项目在交叉轴的对齐方式

flex-start	默认，交叉轴的开始对齐
flex-end	交叉轴的结尾对齐
center	在交叉轴的中间对齐
baseline	基线对齐
stretch	拉伸占满父级（项目无高度才会生效）

• align-content:多轴对齐方式

作用：align-content属性是用来设置自由盒内部各个项目在垂直方向排列方式；它修改了flex-wrap属性的行为。

使用条件：必须对父元素设置自由盒属性display:flex;，并且设置排列方式为横向排列flex-direction:row;然后设置换行，flex-wrap:wrap;这样这个属性的设置才会起作用。

说明：该align-content属性是对其容器内部的项目起作用，对父元素进行设置；容器内必须有多行的项目，才能渲染出效果。

flex-start	取消项目之间的空白，并把项目放在容器顶部，使得元素位于容器的开头。
flex-end	取消项目之间的空白并把项目放在容器底部，使得元素位于容器的结尾。
center	取消项目之间的空白并把所有项目垂直居中，使得元素位于容器的中心。
space-between	使项目在垂直方向两端对齐。即上面的项目对齐容器顶部，最下面一个项目对齐容器底部。留相同间隔在每个项目之间。
space-around	使每个项目上下位置保留相同长度空白，使得项目之间的空白为两倍的单个项目空白。
stretch	默认值，元素被拉伸以适应容器，会拉伸容器内每个项目占用的空间，填充方式为给每个项目下方增加空白。

 

 

--项目的属性

• order：定义项目的排序，默认为0，数字越大越靠后
• flex-grow:定义项目放大比例，默认为0；项目都设置为1，代表增长的宽度相同，若其中有一个设置为2，增长的宽度是其他项目的2倍

---

两者配合可实现双飞翼布局，左右固定，中间自适应效果：

<!-- 彈性盒子實現 -->
    <div class="nav">
        <div class="main"></div>
        <div class="left"></div>
        <div class="right"></div>
    </div>

.nav{
      width: 1200px;
      margin: 20px auto;
      display: flex;
      height: 200px;
      /* flex-direction: row; */
      border: 1px solid black;
}
.main{
      width: 100%;
      flex-grow: 2;
      background-color: green;
}
.left{
      width: 200px;
      background-color: pink;
      flex-grow: 0;
      order: -1;
}
.right{
      width: 300px;
      background-color: orange;
      flex-grow: 0;
}

• flex-shrink：定义项目压缩比例，默认为1，表示等比例缩放，0表示不压缩，2表示压缩两倍
• align-self：单独项目在交叉轴上的对齐方式

flex-start	默认，交叉轴的开始对齐
flex-end	交叉轴的结尾对齐
center	在交叉轴的中间对齐
baseline	基线对齐
stretch	拉伸占满父级（项目无高度才会生效）

 

什么是less？less有什么好处？

Less是CSS的一种预编译语言。包含一套自定义的语法和一个编译器，按照特定语法编译less文件，通过编译器编译成css 文件，在项目中使用（less 文件无法直接被浏览器解析）

方便项目维护、减少冗余代码，方便浏览器私有前缀、代码结构清晰、提高代码复用

 

第15讲  移动端项目-布局方案

常见的移动端布局解决方案有哪些？原理如何？

①固定布局

原理：设置一个固定大小容器，比如320px，按照pc端布局方式实现页面布局，在更大的设备上就居中显示，左右留白

优：简单，容易实现

缺：设备越大，左右留白就越大，用户体验不好

②流式布局

原理：把元素的宽度设置为百分比，高度固定

优：轻松实现自适应效果

缺：由于高度固定，所有模块变形比较严重，一般不会用作整体的布局方案，局部可能会用到

③响应式布局

原理：通过媒体查询把设备分成3~4个类，针对不同类别的设置，设计不同的布局

优：不同的设备各有不同的布局，用户体验好

缺：设计和开发的工作量比较大，代码多

④rem布局

原理：rem代表网页的根标签（html）的font-size值，1rem = html的font-size

rem是指相对于根元素的字体大小的单位，即根据html元素的font-size来计算大小

 

简述rem布局原理？

rem代表网页的根标签（html）的font-size的值，1rem=html的font-size

实现步骤：

（1）设置视口

<meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no,minimum-scale=1.0,maximum-scale=1.0">

（2）使用js动态计算html的font-size

// JavaScript Document
(function (doc, win) {
    var docEl = doc.documentElement,
        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
        recalc = function () {
            var clientWidth = docEl.clientWidth; //获取设备尺寸       
            if (!clientWidth) return;
            //如果设备大于设计稿，font-size等于100,不放大
            if (clientWidth >= 720) { //设计稿宽度
                docEl.style.fontSize = '100px';
            } else {
                docEl.style.fontSize = 100 * (clientWidth / 720) + 'px';
            }
        };
    if (!doc.addEventListener) return;
    win.addEventListener(resizeEvt, recalc, false); //绑定事件
    doc.addEventListener('DOMContentLoaded', recalc, false);

})(document, window);

（3）按照PC端正常布局，把单位统换算rem，统一除以100（较小的宽度比如1px的边框不需要换算，直接用px）

 

第16讲  移动端项目-特殊处理

如何显示小于12px的字体？

通过媒体查询，找到字体无法显示的设备，把盒子加宽，保证文字在一行，用CSS3的缩放变形，把盒子整体缩小

缩放后会发现文字偏离，使用  transform-origin: left top;  改变元素的中心点

<body>
    <div class="box">谷歌浏览器最小字体小字体</div>
</body>

    .box {
         width: 2.8rem;
         background-color: red;
         font-size: .22rem;
     }
     @media screen and (max-width:413px) {
         .box {
            width: 3.3rem;
            transform: scale(0.9);
          }
     }

 

单行和多行文本溢出显示省略号，如何实现？

（1）单行文本溢出显示省略号

<div class="box">
        单行文本溢出显示省略号
</div>

.box {
      width: 150px;
      background-color: red;
      /* 单行文本溢出显示省略号 */
      overflow: hidden;
      /*不换行*/
      white-space: nowrap;
      /*文本溢出显示省略号*/
      text-overflow: ellipsis;
}

（2）多行文本溢出显示省略号

方法一：利用webkit的css扩展属性（只有-webkit内核才有作用）   （兼容性不好）

.box1 {
            width: 150px;
            overflow: hidden;
            text-overflow: ellipsis;

            display: -webkit-box;
            /*必须结合的属性：把元素设置为弹性盒子*/
            -webkit-line-clamp: 4;
            /*必须结合的属性：显示多少行*/
            -webkit-box-orient: vertical;
            /*必须结合的属性：弹性盒子元素的排列方式*/
        }

方法二：利用伪元素模拟溢出显示省略号效果（兼容性比较好）

步骤：①盒子高度等于行高乘以行数，溢出隐藏

②通过添加伪元素在末尾添加添加‘...’,然后通过定位把伪元素定位在盒子的右下角，给伪元素设置渐变背景，让文字逐渐消失。

.box2 {
            position: relative;
            width: 150px;
            line-height: 30px;
            height: 90px;
            /*盒子的高度： 行高*行数 */
            overflow: hidden;
        }

        .box2:after {
            content: '...';
            /* 定位在右下角 */
            position: absolute;
            bottom: 0;
            right: 0;
            /* 设置渐变，防止文字突然被截断 */
            background: -webkit-linear-gradient(to right, transparent 40%, #fff 70%);
            background: linear-gradient(to right, transparent 40%, #fff 70%);
            padding: 0 10px 0 50px;
        }