设置 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等于视口高度的...