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 ...
随机推荐
- HTML-Table-Td固定宽度使内容换行
table style="TABLE-LAYOUT: fixed;" td style="WORD-WRAP: break-word;WIDTH:200px;"
- MySQL登陆数据库
下面是几种登陆到MySql数据库的登陆方式代码 1mysql -u root -ppassword 2.mysql -u root -p Enter password:password3.mysql ...
- PostgreSQL 里面的 BIGSERIAL
@Id@GeneratedValue(strategy = GenerationType.IDENTITY)private Long id; CREATE TABLE article( id BIGS ...
- 树莓派+pythonista实时监控系统
客户端(pythonista) import ui from PIL import Image import socket, time, StringIO global closeFlat close ...
- border --- 透明边框
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- linux 指令（经常更新）
添加一个服务 # sudo update-rc.d 服务名 defaults 99 删除一个服务 # sudo update-rc.d 服务名 remove 临时重启一个服务 # /etc/init. ...
- 分布式数据库对比评测（Es,mongodb,redis）基础知识篇
前言 我建议大家看下这个,否则后面你不知道我在说什么. 1.ES数据库相关概念 啥是Es,说白了就是支持文档搜索的分布式数据库,专门方便搜索的,GITHUB京东现在都在用. 1.ES的数据库存放在哪里 ...
- spring AOP简单实现代码存放
@Before:使用Before增强处理只能在目标方法执行之前织入增强,如果Before增强处理没有特殊处理,目标方法总会自动执行,如果Before处需要阻止目标方法的执行,可通过抛出一个异常来实现. ...
- SiteServer CMS 5.0 源码入门
开发者中心 STL 语言 文 档 博 客 论 坛 Github 二次开发 提示:文档中心正在完善中,我们将不断发布新文档,敬请期待... 新手入门 SiteServer CMS 能做什么 Site ...
- DELPHI-Delphi常用类型及定义单元
DELPHI-Delphi常用类型及定义单元 Type Unit Date SysUtils DeleteFile SysUtils or Windows (different versions) D ...