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等于视口高度的...
今天在做一个水平居中的div内部元素贴边水平均匀布局（有点绕，直接看图吧），一开始使用的都是一些比较常用的css+html方法来实现布局，感觉这样很死板（在多增加一个div，并未div设置相应的一个负的margin-left，此值需要通过计算得到），于是便想到了css3的flex流式布局，于是上网找了一些资料：1、css3 flex一旦一个容器赋予了display:flex属性，将会有以下特点：项目无法设置浮动。列表的样式会被清除。无法使用vertical-align...
原文来源：http://webdesignerwall.com翻译：http://xinyo.org当今银屏分辨率从 320px (iPhone)到 2560px (大屏显示器)或者更大。人们也不再仅仅用台式机来浏览网页，现在有手机，平板电脑等等。所以传统的固定宽度设计形式将不再是个最佳选择，网页设计需要有自适应性。网页的布局需要能够根据不同的分辨率和设备来自动调整，以达到到最佳显示效果。接下来会展示如何运用HTML5和CSS3来设计一个自适应网页。效果预览 代码下载先看看...
1,fill-available表示撑满可用空间（包括高度，宽度），下面一个栗子，表示下<style type="text/css"> .box{ width: 60%; height: 500px; border: 1px solid #f00; margin: 20px auto 0; } .son{ width: -webkit-fill-available; background: #ff0; height:200px;/*高也可以是fill-available*/ } </style><div class="box"> <div class="son"></div></div>2,f...
左侧定宽，右侧自适应有很多种方法可以实现缩小窗口试试看？ 方案一：左边左浮动，右边加个margin-left查看 demo <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>左侧定宽，右侧自适应(1)</title><...
viewpointcss3提供了一些与当前viewpoint相关的元素，vw，vh，vmin, vmax等。“viewpoint” = window sizevw = 1% of viewport width
1vh = 1% of viewport height
1vmin = 1vw or 1vh, 最小
1vmax = 1vw or 1vh, 最大兼容性：chrome 20+/ safari 6+/ IE 10+ / FF 19+ / IOS 6+DEMO地址：http://qianduannotes.sinaapp.com/test/fontResize.html （已经用JS修正重绘bug）<!DOCTYPE HTML>
<html>
<head> <meta charset="UTF-8...
CSS3 多媒体查询CSS2 多媒体类型@media 规则在 CSS2 中有介绍，针对不同媒体类型可以定制不同的样式规则。例如：你可以针对不同的媒体类型(包括显示器、便携设备、电视机，等等)设置不同的样式规则。但是这些多媒体类型在很多设备上支持还不够友好。CSS3 多媒体查询CSS3 的多媒体查询继承了 CSS2 多媒体类型的所有思想： 取代了查找设备的类型，CSS3 根据设置自适应显示。媒体查询可用于检测很多事情，例如：viewport(视窗) 的宽度...
我之前写九宫格自适应布局的时候，每个格子是使用媒体查询器（@media）或者js动态设置css，根据不同的手机屏幕宽度，适配不同手机，但是这样有个很大的缺点，那就是移动端的屏幕尺寸太多了，就得写很多代码，才能实现我们想要的效果。今天突发奇想，使用了纯css实现了我想要的效果，下面就和大家来分享，上代码;<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>九宫格</title><meta name="viewport" content="maximum-s...
tips：css中“>”是: css3特有的选择器，A>B 表示选择A元素的所有子B元素。 与A B的区别在于，A B选择所有后代元素，而A>B只选择一代。 .a，.b｛逗号指相同的css样式｝；.a .b｛空格指后代元素｝；.a>.b｛大于号指子代元素｝； 一、浮动解决方案代码：<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compati...
好久没发了 ，今天刚学了点东东，顺便挖过来，happy一下 第一种：代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>
<style type="text/css">
.div1{width:30%;padding-bottom:32767px;margin-bottom:-32767px;float:left}
.div2{width:40%;paddin...
<div class="ndyqfd_table"> <div class="ndyqfd_table_box"> <ul class="ndyqfd_ul"> <li class="ndyqfd_state">得分率</li> <li class="ndyqfd_state">难易度</li> <li class="ndyqfd_state">区分度</li> <li class="ndyqfd_state">题号</li> </ul> <ul class="ndyqfd_ul" ng-repeat="list in quFenAndDifficultDegreeList"> <li class="ndyqfd...
@media (device-height:480px) and (-webkit-min-device-pixel-ratio:2) {/* 兼容iphone4/4s */}
@media (device-height:568px) and (-webkit-min-device-pixel-ratio:2) {/* 兼容iphone5 */
}
@media (device-width:375px) and (-webkit-min-device-pixel-ratio:2) {/* 兼容iphone 6 */
} 原文：http://www.cnblogs.com/sunbey/p/5251124.html
