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 ...
随机推荐
- java.time.ZonedDateTime
Java的日期与时间 ZonedDateTime类是Java 8中日期时间功能里,用于表示带时区的日期与时间信息的类.可以用于表示一个真实事件的开始时间,如某火箭升空时间等等. ZonedDateTi ...
- 3.写一个hello world页面
经过1和2的学习,现在已经可以正常启动Django了,这一节说怎么写一个hello world页面,所有的环境基础就是1和2中搭建的 1.在app模块中添加页面 具体为 hello_django\he ...
- sin6_addr打印:string to sockaddr_in6 and sockaddr_in6 to string
函式原型: #include <arpa/inet.h> const char *inet_ntop(int af, const void *src, char *dst, socklen ...
- Android AbsoluteLayout绝对布局
绝对布局也叫坐标布局,指定元素的绝对位置,因为适应性很差,一般很少用到.可以使用RelativeLayout替代. 常用属性: android:layout_x --------组件x坐标 andro ...
- 动态创建selectjs 操作select和option
1.动态创建select function createSelect(){ var mySelect = document.createElement("select"); myS ...
- curl常用指令
curl 发送GET请求获取标准输出 curl -I 显示http请求头 curl -i 显示请求头及输出内容 curl xxx > xxx 将输出重定向到本地文件(本地文件无需已存在,一般不写 ...
- delphi函数返回多个值的应用
方法1: function test(var a,b,c:integer):integer; begin end; 方法2: type info = record name:string; age : ...
- 【JavaScript学习整理】DOM对象(location history screen navigator)
DOM: 描述网页各个组成部分之间的关系. parentNode: 父节点 childNode: 子节点 firstChild: 第一个子节点 lastChild: 最后一个子节点 nextSibli ...
- 《python基础教程（第二版）》学习笔记 字典（第4章）
<python基础教程(第二版)>学习笔记 字典(第4章)创建字典:d={'key1':'value1','key2':'value2'}lst=[('key1','value1'),(' ...
- SparkRDD内核
Spark内核 RDD是基础,是spark中一个基础的抽象,是不可变的,比如我们加载进的数据RDD,如果想更改其中的内容是不允许的:分区的集合,可以并行来计算:RDD类中包含了很多基础的操作,例如ma ...