序言：应朋友要求随手写了一下移动端 css实现自适应正圆 ( 宽高随着手机屏幕宽度自适应 ) ，以备后用 LESS代码： .adaptive-circle { margin: 50px auto 0; width: 80%; height: 0; padding-top: 80%; border-radius: 100%; border: 1px solid #000; box-sizing: border-box; // for .layout { height: 100%; } position: relative; .layout { position: absolute; ...
让导航栏的宽度随着浏览器的宽度变化而变化达到自适应 回复讨论(解决方案) 是不是加个width=100%就可以了，你想要达到响应式布局吗？ 是不是加个width=100%就可以了，你想要达到响应式布局吗？ 就是加了width=100%还不行 是不是加个width=100%就可以了，你想要达到响应式布局吗？ 对的，响应式布局 代码贴出来啊 是不是加个width=100%就可以了...
说到自适应布局，我们曾在“抛砖引玉之宽度自适应布局”一文中学习过。当时的核心思想主要是利用float+margin的形式。利用块状元素的流体特性，然后计算出float元素的宽度，并赋予到块状元素的相应margin中。但是这么做是有个缺点的，就是我们每次都得知道float元素的宽度，然后赋予到块状元素的margin。 然而，我们在”BFC之浅析篇”中学习到BFC有一特性：BFC的区域不会与外部浮动元素重叠。并且利用了这一特性，实现了两栏自适...
前提：我们可以改动两个域下面的页面代码。...域A域B...比如我们想实现，域A上通过iframe显示域B的页面内容，同时让域A的页面自适应域B的页面高度。...1、在域A的页面，iframe域B的页面 ...2、域B的页面B.html写一个窗口加载事件： window.onload = function(){}... -1、创建一个iframe，设置其高宽为0px（这是为了不占空间）； -2、获取本页面的完整高度， -3、设置iframe.src为：域A/set_DomainA_Height.html#接“完整高度”...
css两列布局，一边固定宽度，另一边自适应 a, body, center, cite, code, dd, del, div, dl, dt, em, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hr, html, img, input, label, legend, li, mark, ol, p, section, span, strong, textarea, time, ul, var input{ margin: 0; border: 0; padding: 0; font-style: normal; ...
前几天面试时有道css题没做出来，回来好好学习一番后把其记录下来。 题目是这样的：左中右三栏布局，左右两栏宽度固定，左右两栏的宽度为200像素，中间栏宽度自适应。当屏幕小于600px时，3栏会分别占用一行。像这样 当屏幕大于600px时，是这样 我做出来用了css3的@media，如果不用这个，好吧，水平有限想不出来。。。 下面是代码： body{ margin: 0 ; padding: 0;}@media screen...
一个基础却又容易混淆的css知识点 本文依赖于一个基础却又容易混淆的css知识点：当margin/padding取形式为百分比的值时，无论是left/right，还是top/bottom，都是以父元素的width为参照物的！ 也许你会说，left/right以父元素的width为参照物好理解，但是top/bottom为什么也是以父元素的width为参照物的呢？ 1、高度自适应占位 假设有这么个场景： 如上图所示，有这么一种用来放图片的容器，图片都是正方形（为了...
最近学到了几种关于左右固定宽度，中间自适应的三列布局的方法，整理了一下，在这里跟大家一起分享分享，其中有什么不足的还望各位给指导指导哈。 首先我想到的是float——浮动布局 使用浮动，先渲染左右两个元素，分别让他们左右浮动，然后再渲染中间元素，设置它的margin左右边距分别为左右两个元素的宽度。例如以下代码就可以实现我们想要的三列效果啦。 Document 左侧的内容 固定宽度 右侧的内容 固...
之前在公司做项目的时候，有这么一个需求，要我写一个评论框，可以随着评论的行数增加而自动扩大，最开始我想用textarea实现，但是后来尝试后发现textarea并不适合，textarea的高度不会随着输入行数的增多而增大，于是我上网寻求了下帮助，发现大神张鑫旭的这篇文章《div模拟textarea文本域轻松实现高度自适应》,成功解决我的问题 代码如下： 1 1 2 2 3 3 4 4 5 5 div模拟textarea自适应高度le> ...
上次简要的说了一些css3中flex的相关概念（详细： css学习16：css3 flex流动自适应响应式布局设计 ），这次继续说下css3的flex，简单的举几个实例。 一、图片自适应居中 实例图： 实例HTML： 实例CSS： .demo{ width: 100px; height: 100px; border: 2px solid #ddd; background: #f5f5f5; padding: 6px; float: left; margin-left: 20px; /*flex布局（作用于容器）*/ display: flex; /*水平居中...
第一次做移动端的页面，遇到的第一个问题就是移动端的轮播图。其实轮播图的插件有很多，但是完全满足需求的并不容易找。 需求： 1.实现基本的触屏轮播图效果 2.传入非标准比例的图片，可以自动平铺（有时候图片可能比例略有偏差，当然例子里的图是随便找的，平铺之后不能看呀） 3.轮播图模块能实现自适应，按照固定高宽比显示，比如3：10的高宽比 一、初识rem 那么这个需求的难点在哪里呢？其实就是...
html代码(第一二种方法): 左侧固定区右侧固定区中间自适应区 css代码： 第一种方法（定位）： .left { position: absolute; top: 0; left: 0; width: 100px; height: 200px; background-color: red; } .mid { margin-left: 100px; margin-right: 200px; height: 200px; background-color: blue; } .right { position: absolute; top: 0; right: 0; width: 200px; height: 2...
1、简介 calc()看其外表像个函数。平时在制作页面的时候，总会碰到有的元素是100%的宽度（例如body元素）。如果元素宽度为100%时，其自身不带其他盒模型属性设置还好，要是有别的，那将导致盒子撑破。比如说，有一个边框，或者说有margin和padding，这些都会让你的盒子撑破。我们换句话来说，如果你的元素宽度是100%时，只要你在元素中添加了border,padding,margin任何一值，都将会把元素盒子撑破（标准模式下，除IE怪异模式...
标题严格遵守了新广告法，你再不爽，我也没犯法呀！屁话不多说，直入！ 所谓布局，其实包含两个含义：尺寸与定位。也就是说，所有与尺寸和定位相关的属性，都可以用来布局。 大体上，布局中会用到的有：尺寸相关的盒子模型，普通流、浮动、绝对定位三种定位机制，CSS3中的transform、弹性盒子模块、试验中的grid模块。逛园子的时候经常可以看到浮动布局，inline-block布局，弹性盒布局这几个名词。现在对布局也算有一点了解...
× 目录 [1]float [2]table [3]flex 前面的话 前面已经介绍过单列定宽单列自适应的两列布局，而两列自适应布局是指一列由内容撑开，另一列撑满剩余宽度的布局方式。本文将从float、table和flex来介绍两列自适应布局的3种思路。 思路一: float 在单列定宽单列自适应的两列布局中，经常用float和负margin配合实现布局效果。但由于margin取值只能是固定值，所以在两列都是自适应的布...