设置 CSS.container{overflow:auto;
}
img{width:100%;height:auto;overflow:hidden;
}
设置 template<div class="container"><img :src="src">
</div>
设置 scriptimport src from ‘../../../assets/image/login/1.jpg‘
export default{data(){return{src: src}}
}
原文:https://www.cnblogs.com/leslie1943/p/13358178.html
1.伪元素+transform:translateX(-100%); 主要原理是设置文本居中text-align: center;,然后给定两个伪元素,分别绝对定位,那么此时伪元素也是跟随着水平居中的,设置足够的宽度,然后把左边的往左位移100%就可以了,父级记得超出隐藏。具体实现如下html结构为<div class="title">我是分割线</div>css样式为.title{position: relative;text-align: center;overflow: hidden;font-size: 14px;color: #999;
}
.title::before,.tit...
#centerDIV {
height: 550px;
width: 100%;
}
#mainDIV {
height: 100%;
border: 1px solid #F00;
margin-left: 102px;
}
#leftDIV {
float: left;
width: 100px;
height: 100%;
border: 1px solid #F00;
}<div id="centerDIV"><div id="leftDIV"></div><div id="mainDIV"></div>
</div>左侧leftDIV的float:left;width固定,右侧的mainDIV用margin-left原文:http://www.cnblogs.com/yaoqj/p/4167490.html
前几天面试时有道css题没做出来,回来好好学习一番后把其记录下来。 题目是这样的:左中右三栏布局,左右两栏宽度固定,左右两栏的宽度为200像素,中间栏宽度自适应。当屏幕小于600px时,3栏会分别占用一行。像这样当屏幕大于600px时,是这样 我做出来用了css3的@media,如果不用这个,好吧,水平有限想不出来。。。下面是代码:<!DOCTYPE>
<html>
<head>
<style>
body{margin: 0 ;padding: 0;
}
@media screen and (min-wi...
(1)使用float<div class="use-float"><div></div><div></div></div>.use-float>div:first-child{width:100px;float:left;
}
.use-float>div:last-child{overflow:hidden;
}------------------------------------------------------------------------------------------------------------------------------(2)使用table<table class="use-table"><tr><td></td><td></td></tr></table>.use-table{border-collapse:collapse;wi...
自适应布局概念自适应布局(Adaptive Layout)是对凡是有自适应特性的一类布局的统称自适应布局使用media query来检测当前浏览器的宽度进而通过CSS样式调整页面大小。自适应布局和静态布局类似也是采用绝对长度单位(px、pt、mm、cm、in),但不同点在于它通过media query为页面指定了多个固定宽度。布局特点自适应布局的特点是分别为不同的屏幕分辨率定义布局,即创建多个静态布局,每个静态布局对应一个屏幕分辨率范围。改变屏幕...
壹 ? 引实习生在做产品分类页时,遇到了一个她不知道如何解决问题,所以来问我应该怎么做;问题其实不难,由于项目使用了bootstrap来实现响应式与自适应,所以除了宽度有明确的百分比值之外(栅格化系统提供的宽),每个外层容器的高度都是由内容高度来决定的。那么在产品分类页时遇到了一个尴尬的问题,后台返回的产品图片大小不同,导致不同容器被撑起的高度也不同,没法对齐,如下图:所以问题就是,如何让容器中的不同大小的图片...
在初次尝试高度自适应时都会遇到这样的问题: 对象的heith:100%; 并不能直接产生实际效果为什么呢?之所以没有效果,与浏览器的解析方式有一定关系,查看下面代码<!DOCTYPE html><html><head><meta charset="UTF-8"><title>一列布局</title><style>html,body {margin: 0;padding: 0;width: 100%;height: 100%;}/*这里是关键*/#layout {background-color: #cccccc;/*border: 2px solid #333333;*/margin: 0 auto;width: 80%;height: 1...
<html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style type="text/css"> html, body { height: 100%; margin: 0px; padding: 0px; } #main { background-color: #E01313; height: 100%; } #nav { backgr...
用flex实现css里的三大经典布局,不需要额外很多代码。1,垂直居中 :子元素在父元素中,水平垂直居中。justify-content:center设置水平方向居中,align-center设置垂直方向居中。<div id="parent"><div id="child"></div></div>#parent {
/* align-content和align-items必须配合使用 */display: flex;justify-content: center;align-content: center;align-items: center;width: 300px;height: 300px;outline: solid 1px;}#child ...
代码: 1<!-- 1 float --> 2<h3 class="block">第一种方法-float</h3> 3<div class="tips"> 4<h4 class="tips-info">关键点</h4> 5<ol> 6<li>结构顺序:左,中,右</li> 7<li>中间盒模型的margin-left、margin-right分别是左右盒模型的宽度、障眼法:中间盒模型使用margin属性,留出左右元素的宽度,既可以使中间元素自适应屏幕宽度。</li> 8<li>注意,结构上,左边盒模型、右边盒模型、中间盒模型</li> 9</ol> 10</div> 1...
Div即父容器不根据内容自动调节高度,我们看下面的代码: 1<div id="main">23<div id="content"></div>45</div> 当Content内容多时,即使main设置了高度100%或auto。在不同浏览器下还是不能完好的自动伸展。内容的高度比较高了,但容器main的高度还是不能撑开。 我们可以通过三种方法来解决这个问题。 一,增加一个清除浮动,让父容器知道高度。请注意,清除浮动的容器中有一个空格。1 <div id="main">
2
3 <div id="co...
开始采用js,获取屏幕宽度,按宽高比来设置图片大小。var wid = window.screen.width;
wid = wid * 0.85;
$(‘.Img‘).css(‘width‘,wid+‘px‘);
$(‘.Img‘).css(‘height‘,wid/15*26+‘px‘);手机端/电脑测试都没问题,但是用微信电脑版自带浏览器打开时会变形,因为其屏幕宽度为1920。解决:用css.img{width:90%; //不设置高度,让其自适应
} 原文:https://www.cnblogs.com/linjiangxian/p/11464672.html
CSS实现三角形和梯形主要是依靠border是梯形的特性来做的,有点像相框的那种感觉。CSS实现三角形:<div id="test1"></div><style> #test1{ width: 50px; height: 50px; background: purple; border-top: 50px solid red; border-bottom: 50px solid green; border-left: 50px solid blue; border-right: 50px solid yellow; margin:0 auto; }</style> 原文:https:...
视口单位(Viewport units)什么是视口? 在桌面端,视口指的是在桌面端,指的是浏览器的可视区域;而在移动端,它涉及3个视口:Layout Viewport(布局视口),Visual Viewport(视觉视口),Ideal Viewport(理想视口)。视口单位中的“视口”,桌面端指的是浏览器的可视区域;移动端指的就是Viewport中的Layout Viewport。 根据CSS3规范,视口单位主要包括以下4个: 1.vw:1vw等于视口宽度的1%。 2.vh:1vh等于视口高度的...