深入css布局—定位与浮动

css知识体系中，除了css选择器，样式属性等基础知识外，css布局相关的知识才是css比较核心和重要的点。今天我们来深入学习一下css布局相关的知识。

一、定位与浮动

不同类型元素的特点你们了解嘛？我们可以随意的排列组合他们来达到我们想要的效果。但是他们都是基于一个二维平面的，如果我们想在布局中有遮挡，重叠之类的更丰富效果，我们就需要使用到定位和浮动的相关知识。喜欢小编的伙伴可以从评论区一起讨论学习！

1 文档流

文档流就是按照页面元素书写的顺序，将页面元素按从左到右，从上至下的一般顺序进行排列。那么也就可以理解成我们刚才所说的一个二维平面的概念。

那么如果我想要实现更丰富的效果，就需要脱离文档流，在一个新的平面上去显示，这样我们就可以在屏幕上有多个平面叠加显示的效果了，那么这就是浮动和定位的工作了。

1.2 包含块

包含块就是个专有名词，其实概念很简单，这里了解一下就好。

包含块是一个矩形区域，当元素设置属性的百分比的时候，比如width：50% 或者 top: 10%，其参考系就是他的包含块。

大部分时候对于文档流里的元素，其包含块指的都是其父元素的区域。

对于定位元素来说，相对定位元素包含块也是其父元素区域；

绝对定位元素的包含块是其带有position为非static的祖先元素区域。如果其没有这样的祖先元素的话其包含块为首屏显示区域，这个区域也有个专有名词叫做初级包含块。

固定定位元素的包含块就是当前可视区的区域。

1.3 定位

定位允许你使用 position 属性，将一个元素相对于他自己或者他的祖先元素甚至是浏览器窗口通过 top , left , right , bottom 属性进行偏移。

根据 position 属性的取值，元素可以分为静态定位元素static（默认值）、相对定位元素relative、绝对定位元素absoute和固定定位元素fixed。

首先我们抛开static这个默认值，因为他基本不属于定位的范畴，因为元素默认就是static，他就相当于是依据文档流显示。

当我们使用定位时，需要position属性和top,left,right,bottom这两类属性共同参与来决定一个元素的定位类型和偏移量。

使用方法很简单，这里说下他们之间的区别:

relative相对定位

元素根据其在当前文档流所在位置作为参考系，进行偏移。

定位之后原来元素在文档流中的位置会被空出来，不会被其他元素所占据。

absolute绝对定位

元素会将其带有position为非static的祖先元素作为参考系进行偏移。

如果祖先元素里没有带有position为非static的，则会以首屏作为参考系。

定位后，原来在文档流中占据的位置，会被其他元素所占据。

fixed固定定位

根据当前可视区进行定位，所以当文档流为多屏可滚动时，fixed定位的元素会跟随滚动而滚动。

跟absolute定位一样，定位后，原来在文档流中占据的位置，会被其他元素所占据。

1.4 浮动

浮动允许你将元素浮动起来，脱离文档流向左或者向右移动。直到它的外边缘碰到包含框或另一个浮动框的边框为止。

虽然浮动也脱离文档流显示，但是与定位不同的是 inline 和 inline-block 的元素可以识别这种因浮动而脱离的文档流，从而不发生重叠。

<!DOCTYPE html>

<html>

<head>

<title>Document</title>

<style>

* {

margin: 0;

padding: 0;

}

.float {

width: 40px;

height: 40px;

background: blue;

float: left;

}

display: inline-block;

width: 100px;

height: 100px;

background: red;

}

</style>

</head>

<body>

<p>LearnInPro LearnInPro LearnInPro</p>

</body>

</html>

我们会发现p元素并没有占据掉浮动元素的位置，然后我们将上面的代码稍作修改，将p元素的display改为block我们就会发现

虽然这样p标签占据了float元素的位置，但是标签里面的文本则不会去占据float元素的位置。

这个设定其实是有些诡异的。另外说一句，在css历史上浮动这个东西一开始被造出来是为了实现文字围绕图片这种效果的而不是用来做布局的，当时只有图片可以设置浮动效果，但是后来慢慢所有元素都可以浮动并且基于浮动有了自己的布局体系，所有由于历史原因相对来说浮动的规则是比较乱的小部分还有些诡异的。有些地方我们记住就好。

我们来具体看下浮动的规则：浮动元素会从最后一行最左侧的空白位置开始浮动，如当前行无法容纳下自己宽度，则垂直下沉到下一行，向左或者向右碰到包含框或另一个浮动框的边框为止。我们这里举两个例子：

<!DOCTYPE html>

<html>

<head>

<title>Document</title>

<style>

.float{

width: 30%;

height: 40px;

border: 1px solid black;

float: left;

}

</style>

</head>

<body>

<div>flaot1</div>

<div style="height: 60px;">flaot2</div>

<div>flaot3</div>

<div>flaot4</div>

</body>

</html>

这里float4在float3右侧空白位置起始，发现当前行无法容纳下自己则垂直向下到下一行，向左移动，在碰到包含块之前，碰到了float2的边框，于是就会在float2的右边框处停止浮动。

之后我们将代码稍作修改，把float5这行注释删掉，我们会发现，一开始float5的起始位置就是在float4这行的右侧空白区域，当前行可容纳下自己，于是就停在了float4的右侧。虽然第一行也就是float3这行右侧空白区域也空着，可以放得下float5，但是float5的起始位置并不会在第一行，所以最终即使第一行有位置可以显示下float5，它也不会在那里显示。

1.4 清除浮动

首先为啥要清除浮动？

由于浮动元素会脱离文档流显示，所以在浮动元素后面的块级元素会默认占据这些元素的位置，就会造成这些块级元素会在浮动元素的下层显示，出现浮动元素盖住后面正常文档流元素的效果，但这往往不是我们想要的结果。

其作用是改变使用清除浮动的这个元素与前一个声明的浮动元素之间的默认布局规则，让使用清除浮动的这个元素在新的一行中显示。

如何清除浮动

clear属性，其值为left | right | both。

浮动元素或者非浮动元素的块级元素都可以使用这个属性来清除浮动（我们之前说inline和inline-block元素可以自动识别浮动，所以他们不需要清除浮动），他们的作用对象是前一个声明的浮动元素。如果使用 clear:left | right 则是清除前一个float为left或者right的元素的浮动，clear：both则是清除前一个浮动元素，无论它是向哪边移动。那么使用clear属性的元素会在浮动元素的下方新开一行显示。

清除浮动的特殊应用

清除浮动可以解决父元素高度塌陷问题。当一个元素包裹了一些float元素的时候，由于float元素脱离文档流显示，所以父元素无法被这些元素撑开高度，导致父元素高度为0。

那么最常用的一种解决方案是：设置父元素的after伪元素的clear属性来让其撑开父元素的高度。

<!DOCTYPE html>

<html>

<head>

<title>Document</title>

<style>

.clearfix {

background: gray;

border: 1px solid black;

}

.float {

width: 200px;

height: 100px;

background: red;

float: left;

}

.clearfix:after,

.clearfix::after{

content: " ";

display: block;

clear: both;

visibility: hidden;

height: 0;

}

</style>

</head>

<body>

<div>

<div>float</div>

</div>

</body>

</html>

当我们没有设置clearfix的after伪元素时，会发现clearfix的高度为0，只有边框会显示出来。我们通过设置clearfix的after伪元素来让我们在不需要新增标签的情况下就可以清除掉浮动，并且clearfix类还可以复用。

注意点：

content和display属性会将after伪元素渲染出来，加上clear: both实现一个真实标签清除浮动的效果。

在一般浏览器中不设置visibility和height是没有问题的，但为了增加代码健壮性和规范性，建议加上。

:after 和 ::after的区别：:after的写法是css2的，可以兼容到IE8，::after的写法是css3中规定的，用以区分伪类(:hover)和伪元素(::before)。

定位与浮动的相关知识点就讲的差不多了，下篇文章会去讲下merge的一些问题和格式化上下文(formatting context) ，继续把css布局篇完成。

最后你觉得我们的文章对你有帮助，欢迎关注我，有问题可以加我们的学习交流群，在文章下方评论处，并且你可以随时在上面向我们提问，把你在学习前端过程中所遇到的问题发给我们。我们每天都会按时回复大家的每一个问题，希望我们可以伴随你从入门到专家。

前面两篇文章，学习了JavaScript中DOM、BOM相关基础知识后，今天我们将结合前面所学内容，利用DOM操作实现常见的网页动画效果；结合知识点有相关案例效果演示，另外本文所设计的源码和配套素材可在文末获取；

JavaScript网页特效

学习目标

offset的属性与作用
client的属性与作用
scroll的属性与作用
封装简单动画函数
网页轮播图

I、元素偏移量

获得元素距离带有定位父元素的位置

获得元素自身的width和height

1.offset常用的属性

2.offset与style的区别

案例：获取鼠标在盒子内的坐标

思路：盒子内的坐标可以通过鼠标事件的e.pageX获取到页面坐标再减去element.offsetLeft来得到；

var box = document.querySelector('.box');
box.addEventListener('click',function(e){
    var x = e.pageX - this.offsetLeft;
    var y = e.pageY - this.offsetTop;
    console.log('x:'+x+',y:'+y);
})

案例：模态框拖拽

需求：

（1）点击弹出层，会淡出模块框，并且显示灰色半透明的遮挡层；

（2）点击关闭按钮，可以关闭模态框，并且同时关闭灰色半透明遮挡层；

（3）鼠标放到模态框最上面一行，可以按住鼠标拖拽模态框在页面中移动；

（4）鼠标松开，可以停止拖动模态框移动；

分析：

（1）拖拽事件，鼠标是按着的状态，故mousemove和mouseup须卸载mousedown事件里面；

（2）在拖拽的过程中，鼠标的位置相对于组件的坐标是不变的，因此为了改变组件的位置，需要将页面坐标减去相对组件坐标来获取；

var link = document.querySelector('#link');
var login_window = document.querySelector('#login');
var close_button = document.querySelector('#closeBtn');
var bg = document.querySelector('#bg');
link.addEventListener('click',function(){
    login_window.style.display = 'block';
    bg.style.display = 'block';
})
close_button.addEventListener('click',function(){
    login_window.style.display = 'none';
    bg.style.display = 'none';
})
// 拖动事件三个过程：mousedown、mousemove、mouseup
var title = document.querySelector('#title');
title.addEventListener('mousedown',function(e){
    var x = e.pageX - login_window.offsetLeft;
    var y = e.pageY - login_window.offsetTop;
    document.addEventListener('mousemove',move);
    function move(e){
        login_window.style.left = e.pageX - x + 'px';
        login_window.style.top = e.pageY -y + 'px';
    }
    document.addEventListener('mouseup',function (e) {
        document.removeEventListener('mousemove',move);
    });
});

案例:仿京东放大镜效果

分析：

（1）mask界面与big界面可以通过鼠标事件设置dispaly属性即可；mouseover显示mask，mouseleave隐藏mask、mousemove移动mask

（2）mask的left与top的值可以通过鼠标在prew_img中的位置来获取；

（3）为了让mask界面中央跟着鼠标指针走，则需要减去mask尺寸一半的偏移量；

（4）防止mask页面跑出prew_img，需要对偏移量进行判断；

（5）大图片移动距离怎么计算？mask移动距离/mask最大移动距离 = 大图片移动距离/大图片最大移动距离；所以大图片移动距离 = mask移动距离 * 大图片移动最大距离 / 遮挡层最大移动距离；

window.addEventListener('load',function(){
    var prew_img = document.querySelector('.preview_img');
    var mask = document.querySelector('.mask');
    var big = document.querySelector('.big');
    prew_img.addEventListener('mouseover',function(){
        mask.style.display = 'block';
        big.style.display = 'block';
    })
    prew_img.addEventListener('mousemove',function(e){
        // 获取鼠标在prew_img元素内的坐标
        var x = e.pageX - this.offsetLeft;
        var y = e.pageY - this.offsetTop;
        // 防止mask页面跑出prew_img盒子
        var maskX = x - mask.offsetWidth / 2;
        // 遮挡层的最大移动距离maskMax
        var maskMax = this.offsetWidth - mask.offsetWidth;
        if(maskX <= 0){
            maskX = 0;
        }else if(maskX >= maskMax){
            maskX = maskMax;
        }
        var maskY = y - mask.offsetHeight / 2;
        if(maskY <= 0){
            maskY = 0;
        }else if(maskY >= maskMax){
            maskY = maskMax;
        }
        // 让mask界面中央跟着鼠标指针走
        mask.style.left = maskX + 'px';
        mask.style.top = maskY + 'px';
        // 让big界面内容跟着mask位置移动，
        // 大图片移动距离 = mask移动距离 * 大图片移动最大距离 / mask最大移动距离
        var big_img = document.querySelector('.bigImg');
        var bigMax = big_img.offsetWidth - big.offsetWidth;
        // 大图片移动距离
        var bigMoveX = maskX * bigMax / maskMax;
        var bigMoveY = maskY * bigMax / maskMax;
        big_img.style.left = -bigMoveX + 'px';
        big_img.style.top = -bigMoveY + 'px';
    });

    prew_img.addEventListener('mouseleave',function(){
        mask.style.display = 'none';
        big.style.display = 'none';
    });
});

II、元素的可视区

立即执行函数

不需要调用，立马能自己执行的函数;

// 写法一：
(function(){})()
// 写法二：
(function(){}())

立即执行函数也可以传递参数：

(function(a,b){
console.log(a+b);
})(1,2)

立即执行函数的作用是独立创建了一个作用域，里面所有的变量都是局部变量，不会有命名冲突的情况；

III、元素滚动scroll

使用scroll系列相关属性可以动态得到元素的大小、滚动距离；

scroll系列属性 作用备注 element.scrollTop 返回被卷去的上侧距离返回的数值不带单位 element.scrollLeft 返回被卷去的左侧距离返回的数值不带单位 element.scrollWidth 返回自身的实际宽度，不含边框返回的数值不带单位 element.scrollHeight 返回自身的实际高度，不含边框返回的数值不带单位

案例：仿淘宝固定侧边栏

1.原先侧边栏是绝对定位
2.当页面滚动到一定的位置，侧边栏改为固定定位
3.页面继续滚动，会让顶部显示出来

页面被卷去的头部可以通过：window.pageYOffset来获得

// 1.获取元素
var sliderBar = document.querySelector('.slider-bar');
var topBar = document.querySelector('.header');
var banner = document.querySelector('.banner');
var main = document.querySelector('.main');
var goBack = document.querySelector('.goBack');

var barHeight = banner.offsetTop;
var sliderBarTop = sliderBar.offsetTop;
var fixTop = sliderBarTop - barHeight;
var mainTop = main.offsetTop;
// 2.页面滚动事件
document.addEventListener('scroll',function(){

    if(window.pageYOffset >= barHeight){
        sliderBar.style.position = 'fixed';
        sliderBar.style.top = fixTop + 'px';
    }else{
        sliderBar.style.position = 'absolute';
        sliderBar.style.top = sliderBarTop + 'px';
    }
    if(window.pageYOffset >= mainTop){
        goBack.style.display = 'block';
    }else{
        goBack.style.display = 'none';
    }
})

IV、鼠标事件

当鼠标移动到元素上时就会触发mouseenter事件，类似mouseenter

两者的区别是：mouseover鼠标经过自身盒子会触发、经过子盒子也会触发；而mouseenter只有经过自身盒子才会触发；

原因是mouseenter不会冒泡；跟mouseenter搭配的通常是mouseleave

V、动画函数

1.动画实现的原理：

通过定时器setInterval()不断移动盒子位置；

实现步骤：

获得盒子当前位置
让盒子在当前位置加上一个移动距离
加上一个结束定时器的条件
盒子需要添加定位，才能使用element.style.left

//利用setInterval设置一个box元素从左向右移动400像素的动画
var box = document.querySelector('.box');
var timer = setInterval(function(){
    if(box.offsetLeft > 200){
        // 停止动画，本质上是清除定时器
        clearInterval(timer);
    }
    box.style.left = box.offsetLeft + 5 + 'px';
},50);

2.动画函数的封装

将动画函数封装起来，利用JS是动态语言的特性，通过设置对象的方式，给每个不同的元素指定不同的定时器；

// 简单动画函数的封装,目标对象obj,目标位置target
function animate(obj,target){
    // 如果设置一个按钮启动动画，会存在一个bug,只要不断点击按钮，动画会越走越快；
    // 原因是启动了太多定时器，解决方案是，让元素只有一个定时器执行
    clearInterval(obj.timer);
    obj.timer = setInterval(function(){
    if(obj.offsetLeft > target){
        // 停止动画，本质上是清除定时器
        clearInterval(obj.timer);
    }
    obj.style.left = obj.offsetLeft + 5 + 'px';
},50);
}
//利用setInterval设置动画
var btn = document.querySelector('button');
var box1 = document.querySelector('.box1');
btn.addEventListener('click',function(){
    animate(box1,400);
});

3.缓动动画原理

缓动动画就是让元素运动速度有所变换，最常见的就是让速度慢慢停下来；

思路：让盒子每次移动的距离慢慢变小；

核心算法：每次移动的步长 = (目标值-现在的位置)/10这里的10是份数可以是9也可以是8；

停止的条件是：当前盒子的位置等于目标位置就停止定时器；

// 缓动动画
function animate(obj,target){
    // 清除定时器
    clearInterval(obj.timer);
    obj.timer = setInterval(function() {
        // 每次运行定时器都要重新计算步长值，所以步长值写在定时器里面
        var step = (target - obj.offsetLeft)/10;
        // 如果step是正值则往大取整，如果step是负值则往小取整
        step = step >= 0 ? Math.ceil(step) : Math.floor(step);
        if(obj.offsetLeft == target){
            clearInterval(obj.timer);
        }
        // 缓动动画核心算法：前进步长=（目标-当前）/ 10
        obj.style.left = obj.offsetLeft + step + 'px';
    },50);
}

动画函数添加回调函数

回调函数原理：函数可以作为一个参数，将这个函数作为参数传入到另一个函数里面，当这个函数执行完成后，再执行传进去的这个函数，这个过程叫做回调。

回调函数位置：写到定时器结束的位置

// 缓动动画
function animate(obj,target,callback){
    // 清除定时器
    clearInterval(obj.timer);
    obj.timer = setInterval(function() {
        // 每次运行定时器都要重新计算步长值，所以步长值写在定时器里面
        var step = (target - obj.offsetLeft)/10;
        // 如果step是正值则往大取整，如果step是负值则往小取整
        step = step >= 0 ? Math.ceil(step) : Math.floor(step);
        if(obj.offsetLeft == target){
            clearInterval(obj.timer);
            if(callback){
                // 调用函数
                callback();
            }
        }
        // 缓动动画核心算法：前进步长=（目标-当前）/ 10
        obj.style.left = obj.offsetLeft + step + 'px';
    },50);
}

将动画函数封装到单独的JS文件

在head里引入JS文件

<script src="animate.js"></script>

实际调用过程中可以直接调用JS中定义的函数

var sliderbar = document.querySelector('.sliderbar');
var con = document.querySelector('.con');
sliderbar.addEventListener('mouseenter',function(){
    animate(con,-160,function () {
        // 动画执行完毕，将左箭头转为右箭头
        sliderbar.children[1].innerHTML = '→';
    });
})
sliderbar.addEventListener('mouseleave',function(){
    animate(con,0,function () {
        sliderbar.children[1].innerHTML = '←';
    });
})

案例：网页轮播图

功能需求：

鼠标经过轮播图模块，左右按钮显示，离开隐藏左右按钮；
鼠标点击右侧按钮一次，图片往左播放一张，以此内推，左侧按钮同理；
图标播放的同时，下面小圆圈模块跟随一起变化；
点击小圆圈，可以播放相应图片；
鼠标不经过轮播图，轮播图也会自动播放图片；
鼠标经过，轮播图模块，自动播放停止

window.addEventListener('load', function () {
    // === 0.定义变量，获取元素
    var focus = document.querySelector('.focus');
    var arrowL = document.querySelector('.arrow-l');
    var arrowR = document.querySelector('.arrow-r');

    // === 1.鼠标经过轮播图模块，左右按钮显示，离开隐藏左右按钮；=====
    focus.addEventListener('mouseenter', function () {
        arrowL.style.display = 'block';
        arrowR.style.display = 'block';
        clearInterval(timer);
        timer = null;
    });
    focus.addEventListener('mouseleave', function () {
        arrowL.style.display = 'none';
        arrowR.style.display = 'none';
        timer = window.setInterval(function () {
            arrowR.click();
        }, 3000);
    });
    // === 2.根据轮播图的数量自动生成小圆圈
    var ul = focus.querySelector('ul');
    var ol = focus.querySelector('.circle');
    var pictureWidth = focus.offsetWidth;
    // 获取到轮播图图片的数量length
    var length = ul.children.length;
    // 显示当前图片的索引
    var circle = 0;
    // 显示当前图片的索引
    var num = 0;
    // 创建元素插入到ol中
    for (var i = 0; i < length; i++) {
        var li = document.createElement('li');
        // 给没一个小圆圈添加一个index属性，方便点击事件的ul移动长度的确定
        li.setAttribute('index', i);
        // 给每一个小圆圈添加点击事件
        li.addEventListener('click', function () {
            // 移除其他小圆圈的选中属性
            for (var i = 0; i < length; i++) {
                ol.children[i].className = '';
            }
            // 设置当前选中小圆圈的选中属性
            this.className = 'current';
            // 定义选中的小圆圈的索引
            var index = this.getAttribute('index');
            num = index;
            circle = index;
            animate(ul, -pictureWidth * index);
        });
        ol.appendChild(li);
    }
    ol.children[0].className = 'current';

    // === 3.鼠标点击右侧按钮一次，图片往左播放一张，以此内推，左侧按钮同理；==
    // 为了实现无缝滚动，需要将第一张图添加到最后一张图中
    var lastLi = ul.children[0].cloneNode(true);
    ul.appendChild(lastLi);
    // 设置一个节流阀，防止按钮在短时间内点击过多
    var flag = true;
    arrowR.addEventListener('click', function () {
        if (flag) {
            flag = false;
            if (num == ul.children.length - 1) {
                ul.style.left = 0;
                num = 0;
            }
            num++;
            animate(ul, -pictureWidth * num, function () {
                flag = true;
            });
            circle++;
            if (circle == ol.children.length) {
                circle = 0;
            }
            activateCircle(circle);
        }
    });

    arrowL.addEventListener('click', function () {
        if (flag) {
            flag = false;
            if (num == 0) {
                num = ul.children.length - 1;
                ul.style.left = -num * pictureWidth + 'px';
            }
            num--;
            animate(ul, -num * pictureWidth, function () {
                flag = true;
            });
            if (circle == 0) {
                circle = ol.children.length;
            }
            circle--;
            activateCircle(circle);
        }
    });

    // 排他法思想点亮小圆圈
    function activateCircle(index) {
        for (var i = 0; i < ol.children.length; i++) {
            ol.children[i].className = '';
        }
        ol.children[index].className = 'current';
    }

    // 实现轮播图自动播放
    var timer = window.setInterval(function () {
        arrowR.click();
    }, 3000);
});

显示效果：

轮播图自动播放的原理是：设置一个定时器使用click（）函数模拟按钮点击事件；

轮播图实现无缝滚动的原理是：将第一个图动态加在最后一张图上，当切到最后一张图时，重新设置元素布局距离，再执行滑动动画。

防止同一个按钮在短时间内点击次数过多，可以设置一个节流阀，将启动节流阀的操作写在动画回调函数里，这样只有当动画执行完毕后才才可以重新恢复按钮的点击功能；

页面滚动动画可以使用函数：window.scroll(x,y)可以滚动至页面的指定坐标位置；

最后：

本文配套源码与素材获取：https://gitee.com/yushengtan/jscode
关于JavaScript在网页动画中的使用就介绍到这里，下一节我们将继续深入介绍JavaScript的异步调用相关知识的学习~

、什么是 CSS 盒模型，它是如何工作的？

CSS 盒模型定义了元素在网页上的呈现方式。它由内容、内边距、边框和边距组成。内容代表实际的元素内容，而填充则在内容和边框之间添加空间。边框提供可见的边界，边距在元素周围创建空间。

这是一个例子：

.box {  width: 200px;  padding: 20px;  border: 1px solid black;  margin: 10px;}

2、解释 CSS 特异性的概念以及它如何影响样式应用。

CSS 特异性决定了当多个规则针对某个元素时，将哪些样式应用于该元素。特异性是根据选择器的组合计算的，例如，元素类型、类、ID 和内联样式。特异性越高，规则的优先级越高。

这是一个例子：

/* ID selector - high specificity */#myElement {  color: red;}
/* Class selector - medium specificity */.myClass {  color: blue;}/* Element selector - low specificity */div {  color: green;}

3、使元素水平和垂直居中的不同方法有哪些？

有多种方法可以使元素水平和垂直居中。以下是三种流行的技术：

1).弹性盒方法：

.container {  display: flex;  justify-content: center;  align-items: center;}

2).CSS网格方法：

.container {  display: grid;  place-items: center;}

3).变换方法：

.container {  position: relative;}
.centered-element {  position: absolute;  top: 50%;  left: 50%;  transform: translate(-50%, -50%);}

4、如何创建在滚动时保持固定的粘性标题？

您可以通过使用position:sticky;来实现粘性标题。此属性允许元素在滚动时在其容器或视口中保持固定。

这是一个例子：

.header {  position: sticky;  top: 0;  background-color: #ffffff;}

5、什么是CSS浮动属性，它是如何工作的？

CSS float 属性用于在其容器内定位元素。浮动元素向左或向右移动，允许其他元素环绕它们。此属性通常用于创建多列布局或定位图像。

在线咨询

上一篇：nodejs篇html批量转pdf
下一篇：HTML 列表

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

深入css布局—定位与浮动

css知识体系中，除了css选择器，样式属性等基础知识外，css布局相关的知识才是css比较核心和重要的点。今天我们来深入学习一下css布局相关的知识。

JavaScript网页特效

学习目标

I、元素偏移量

1.offset常用的属性

2.offset与style的区别

案例：获取鼠标在盒子内的坐标

案例：模态框拖拽

案例:仿京东放大镜效果

II、元素的可视区

立即执行函数

III、元素滚动scroll

案例：仿淘宝固定侧边栏

IV、鼠标事件

V、动画函数

1.动画实现的原理：

2.动画函数的封装

3.缓动动画原理

动画函数添加回调函数

将动画函数封装到单独的JS文件

案例：网页轮播图

您的项目需求