css中的特殊居中
大图居中：
先看一下普通的居中：
代码为：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style> .img{
display: block;
margin: auto;
}
</style>
</head>
<body>
<div class="center">
<img class="img" src="1.jpg" width="684" height="384">
</div>
</body>
</html>
浏览器100%的时候显示为：
浏览器缩小时：
如图，当浏览器大小小于图片大小的时候，图片会贴靠在左边而不再移动。
我的理解是，当图片设置为居中，浏览器界面小于图片大小的时候，浏览器会挤住图片。因为图片小于浏览器的部分，浏览器不愿意收留图片多余的部分，哎图片这可怜的孩儿。当然这种情况我是看不下去的，所以，我强制让浏览器“收留”它。
代码修改为：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.center {
position: relative;
left: 50%;
} .img {
display: block;
/*margin:0 auto;*/
position: relative;
left: -342px;
}
/*主要的思路就是，图片的中心点为中心，而不是已图片的左上角为中心*/ </style>
</head>
<body>
<div class="center">
<img class="img" src="1.jpg" width="684" height="384">
</div>
</body>
</html>
效果图为：
如图，浏览器缩小的时候，图片依然居中。（浏览器，你敢不收留它，废了你\）。
当然拿这个思路也就引出了淘宝著名的“双飞翼布局”。
简要说明一下双飞翼布局，它是当浏览器缩小的时候，中间栏随浏览器变化而变化。而侧栏不随浏览器变化而变化。
先看下效果图：
开始时候：
浏览器缩小的时候：
这种布局和上面的居中方式使用的方法基本差不多。一个字，悟。当然css3中有个方法可以简单实现这种
当然css3中有个方法可以简单实现这种。display:flex。称为“弹性盒子”这种只能ie9+
先看代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>弹性盒子模型</title>
<style>
body{
margin: 0;
}
#container{
display: flex;
flex-direction: row;
width: 300px;
height: 300px;
}
.a{
flex: 1;
/*width: 100px;*/
height: 100%;
background-color: #0099FF;
}
.b{
flex: 1;
/*width: 100px;*/
height: 100%;
background-color: darkorange;
}
.c{
flex: 1;
/*width: 100px;*/
height: 100%;
background-color: palevioletred;
}
</style>
</head>
<body>
<div id="container">
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
</div>
<script src="main.js"></script>
</body>
</html>
那代码来说，先给父类一个display:flex。然后给子类设置flex:n。
这种方法的实现思想是，如代码，子类有三个，都设置为，flex:1,意思是每个子类占父类三分之一。
用这种方法可以轻松实现双飞翼布局，如代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>弹性盒子模型</title>
<style>
body{
margin: 0;
}
#container{
display: flex;
flex-direction: row;
width: 300px;
height: 300px;
}
.a{
/*flex: 1;*/
width: 100px;
height: 100%;
background-color: #0099FF;
}
.b{
flex: 1;
/*width: 100px;*/
height: 100%;
background-color: darkorange;
}
.c{
/*flex: 1;*/
width: 100px;
height: 100%;
background-color: palevioletred;
}
</style>
</head>
<body>
<div id="container">
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
</div>
<script src="main.js"></script>
</body>
</html>
a,c设置固定宽度，b设置flex：1即可。
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
by9.6
现阶段整理出来最好的：
/**
* Created by Administrator on 2016/9/6.
*/
$(function () { var div=$("<div></div>");
var content=div.clone();
content.css({
width:"960px",
position:"relative",
left:"50%"
});
var bak=div.clone();
bak.css({
position:"relative",
left:"-960px",
width:"1920px",
height:"615px",
background:"url(pic-big-v6.jpg)"
});
content.append(bak);
var con=div.clone();
con.css({
width:"100%",
overflow:"hidden"
});
con.append(content);
$("body").append(con);
});
三步：(说明：div1包围div2,div2包围div3,div3里面是背景图片)
①：div1: width:100% overflow:hidden
②：div2: position：relative left:50%
③：div3: 导入图片，设置图片的固定宽高，width和height。position:relative left:-npx (n为图片的一半大小)
css中的特殊居中的更多相关文章
- 讨论CSS中的各类居中方式
今天主要谈一谈CSS中的各种居中的办法. 首先是水平居中,最简单的办法当然就是 margin:0 auto; 也就是将margin-left和margin-right属性设置为auto,从而达到水平居 ...
- HTML CSS 中DIV内容居中汇总
转载博客(http://www.cnblogs.com/dearxinli/p/3865099.html) (备注:DIV居中情况,网上谈到也比较多,但是这篇文字,相对还是挺全面,现转载,如果冒犯,还 ...
- CSS中的各种居中方法总结
CSS中的居中可分为水平居中和垂直居中.水平居中分为行内元素居中和块状元素居中两种情况,而块状元素又分为定宽块状元素居中和不定宽块状元素居中.下面详细介绍这几种情况. 一.水平居中 1.行内元素居中 ...
- CSS 中的各种居中 (水平、垂直)
导读: CSS 的居中有水平居中和垂直居中,这两种居中又分为行内元素居中和块级元素居中.根据父.子元素的高度是否清楚,又会使得不同的居中用不同方法.本文就其中一些情况做下简单说明,以作笔记之用,仅供大 ...
- css中两种居中方式text-align:center和margin:0 auto 的使用场景
关于使用text-align:center和margin:0 auto 两种居中方式的比较 前言:最近由于要学习后端,需要提前学习一部分前端知识,补了补css知识,发现狂神在讲这一部分讲的不是特别清楚 ...
- CSS中ul li居中的问题
一直以为对ul li居中对齐已经掌握了.但最近做项目时发现之前li的float:left方法显然有一个问题,就是无法居中(水平),只能使用padding-left或margin-right的方法方法来 ...
- CSS中元素各种居中方法（思维导图）
前言 用思维导图的方式简单总结一下各种元素的居中方法,如下图: 补充一下: table自带功能 100% 高度的 afrer before 加上 inline block优化 div 装成 table ...
- css中关于居中的问题
居中是最常用的一种css格式,不同的居中方法适和不同的环境中,下面总结了几种常用的居中方法,你可以不用它,但是无论你是一个资深前端大牛,还是小小初学者,当你见到它的时候不认识它就是你的不对啦!!! h ...
- css中关于居中的那点事儿
css中关于居中的那点事儿 关于居中,无论是水平居中,还是垂直居中都有很多方式,下面我来介绍一些常用的. 第一部分:水平居中 1.实现行内元素的居中.方法:在行内元素外面的块元素的样式中添加:text ...
随机推荐
- Inno Step教程
最近为js页面做了几个activex控件(只能ie内核浏览器使用),最后要完成打包,之前一直使用winrar的自解压包实现,现在改用Inno Step来做. 工具使用还是比较简单的,语法使用Inno ...
- linux c编程：信号(五) sigsuspend
更改进程的信号屏蔽字可以阻塞所选择的信号,或解除对它们的阻塞.使用这种技术可以保护不希望由信号中断的代码临界区.如果希望对一个信号解除阻塞,然后pause等待以前被阻塞的信号发生,则又将如何呢?假定信 ...
- 基于PI的Webservice发布实例
[转自http://blog.csdn.net/yin_chuan_lang/article/details/6706816] 最近的项目中,接口较多,而Webservice技术是主要实现方式之一.下 ...
- parent
<?php class MyObject { function myMethod() { //标准功能 echo "Standard Functionality\n"; } ...
- iOS __weak 和 __block 的使用探讨
在基本的开发中遇到 需要弱引用时候 我一般 用 weak 预防 死锁的时候 我会用 block 的确没出过大错 但是这样处理 的确有点囫囵 现在我想好好理解一下这两个修饰符 "bloc ...
- Gateway
网关在传输层上以实现网络互连,是最复杂的网络互连设备,仅用于两个高层协议不同的网络互连.网关的结构也和路由器类似,不同的是互连层.网关既可以用于广域网互连,也可以用于局域网互连. 网关是一种充当转换重 ...
- poj 3083 Children of the Candy Corn 【条件约束dfs搜索 + bfs搜索】【复习搜索题目一定要看这道题目】
题目地址:http://poj.org/problem?id=3083 Sample Input 2 8 8 ######## #......# #.####.# #.####.# #.####.# ...
- scikit-learn笔记之初次接触
一.加载数据: 然后看一下有多少个特征和类别以及它们的名字: 二.数据可视化:: 由于该套数据集有4个特征,所以只能选取2个特征进行显示. 可见红色和绿色的点混在一起,所以再选择其他特征作为坐标轴: ...
- POJ3614 贪心+优先队列
题意:m头牛每头牛有minspf和maxspf,n种spf为spf[i]的防晒霜每种l[i]瓶,尽可能给数量多的牛涂防晒霜,每头牛最多涂一瓶. 思路:贪心想法,实现是每次取出minspf<=sp ...
- codeforces 676B 模拟 递推
题意:每秒从最高处的杯子倒一杯酒下来,酒流的方式如图,问t秒装满酒的杯子的数目. 思路:把第一杯的值设为t,glass[i][j]=(glass[i-1][j-1]-1)/2+(glass[i-1][ ...