【css实现九宫格图片自适应布局】的更多相关文章

css实现九宫格图片自适应布局

我之前写九宫格自适应布局的时候,每个格子是使用媒体查询器(@media)或者js动态设置css,根据不同的手机屏幕宽度,适配不同手机,但是这样有个很大的缺点,那就是移动端的屏幕尺寸太多了,就得写很多代码,才能实现我们想要的效果. 今天突发奇想,使用了纯css实现了我想要的效果,下面就和大家来分享,上代码; <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>九…

CSS百分比padding实现比例固定图片自适应布局

一.CSS百分比padding都是相对宽度计算的 在默认的水平文档流方向下,CSS margin和padding属性的垂直方向的百分比值都是相对于宽度计算的,这个和top, bottom等属性的百分比值不一样. 这么设计的原因在我的新书(应该不出几个月就要出版了)中会有说明,这里不展开. 对于padding属性而言,任意方向的百分比padding都现对于宽度计算可以让我们轻松实现固定比例的块级容器,举个例子,假设现在有个<div>元素: div { padding: 50%; } 或者: di…

CSS 负边距自适应布局

单列定宽单列自适应布局: <!DOCTYPE HTML> <html> <head>     <meta charset="UTF-8">     <title>单列定宽单列自适应布局</title>     <style type="text/css">         * {margin:0;padding:0;}         .cont, .side {float:left…

CSS负边距自适应布局三例

单列定宽单列自适应布局: <!DOCTYPE HTML> <html> <head> <meta charset=”UTF-8″> <title>单列定宽单列自适应布局</title> <style type=”text/css”> * {margin:0;padding:0;} .cont, .side {float:left;} .cont {width:100%;} .main {margin-right:200px…

css负边距自适应布局

单列定宽单列自适应布局: <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title>单列定宽单列自适应布局</title> <style type="text/css"> * {margin:0;padding:0;} .cont, .side {float:left;} .cont {width:100%;} .main…

使用CSS实现三栏自适应布局（两边宽度固定，中间自适应）

来源:http://blog.csdn.net/cinderella_hou/article/details/52156333 所谓三列自适应布局指的是两边定宽,中间block宽度自适应.这道题在今年网易内推前端工程师面试的时候也被问到. 我这里主要分为两大类,一类是基于position传统的实现,一类是基于css3新特性弹性盒模型布局实现. 1. 基于传统的position和margin等属性进行布局    这里也分为三种方法,分别为绝对定位法,圣杯布局,自身浮动法. 1).绝对定位法    …

关于使用rem单位、css函数calc()进行自适应布局

一.关于css中的单位 大家都知道在css中的单位,一般都包括有px,%,em等单位,另外css3新增加一个单位rem. 其中px,%等单位平时在传统布局当中使用的比较频繁,大家也比较熟悉,不过px单位在进行自适应布局的过程当中则会有些力不从心,大部分的解决方案是使用%为单位配合@media媒介查询来进行自适应布局. 不过还有另外一个css3新添加的单位也同样可以拿来进行自适应布局,在我看来这种方法也更加方便直观. 1.em和rem 首先先介绍一下em,这个单位是根据其父元素的字体大小来进行计算…

CSS——background-size实现图片自适应

在网页端,我们经常想让图片能够自适应拉伸缩放,使之可以完美的嵌入我们给定的容器里,比如div,button,input,下面我将用代码来说明如何实现这个功能! 一.div背景图自适应 如果知道图片都有自身的大小尺寸,那我们如何把一张图片自适应缩放到一个给定大小的div里呢?这里只要用到background-size属性就可以了! 实例一: 代码用的原图大小为:159*113 代码如下: <!DOCTYPE html> <html> <head> <meta cha…

css设置背景图片自适应

  CreateTime--2017年12月25日16:36:07 Author:Marydon 控制背景图片100%自适应填充布局 /* 控制背景图片100%自适应填充布局 */ body{ background-image: url(java八种基本数据类型介绍.png); background-size:100% 100%; /* firefox 浏览器 */ -moz-background-size:100% 100%; /* Safari 浏览器 */ -webkit-backgrou…

css实现三栏自适应布局（两边固定，中间自适应）以及优缺点

方法一:绝对定位(absolute + margin) 原理:给左右两边的元素设置absolute,这样左右两边的元素脱离标准文档流的控制,中间的元素自然会上来,然后给中间的元素设置margin留出左右两边元素的位置,也就是说margin-left = “左边元素的宽度”  margin-right = "右边元素的宽度" 优点:三个div的顺序是任意的 缺点:要对样式进行初始化,否则元素间会出现空隙,因为使用了absolute,如果页面还有其他内容处理时要小心! 注:随着浏览器窗口缩…