前几天面试时有道css题没做出来，回来好好学习一番后把其记录下来。 题目是这样的：左中右三栏布局，左右两栏宽度固定，左右两栏的宽度为200像素，中间栏宽度自适应。当屏幕小于600px时，3栏会分别占用一行。像这样当屏幕大于600px时，是这样 我做出来用了css3的@media，如果不用这个，好吧，水平有限想不出来。。。下面是代码：<!DOCTYPE> <html> <head> <style> body{margin: 0 ;padding: 0; } @media screen and (min-wi...
自适应布局概念自适应布局（Adaptive Layout）是对凡是有自适应特性的一类布局的统称自适应布局使用media query来检测当前浏览器的宽度进而通过CSS样式调整页面大小。自适应布局和静态布局类似也是采用绝对长度单位（px、pt、mm、cm、in），但不同点在于它通过media query为页面指定了多个固定宽度。布局特点自适应布局的特点是分别为不同的屏幕分辨率定义布局，即创建多个静态布局，每个静态布局对应一个屏幕分辨率范围。改变屏幕...
视口单位(Viewport units)什么是视口？ 在桌面端，视口指的是在桌面端，指的是浏览器的可视区域；而在移动端，它涉及3个视口：Layout Viewport（布局视口），Visual Viewport（视觉视口），Ideal Viewport（理想视口）。视口单位中的“视口”，桌面端指的是浏览器的可视区域；移动端指的就是Viewport中的Layout Viewport。 根据CSS3规范，视口单位主要包括以下4个： 1.vw：1vw等于视口宽度的1%。 2.vh：1vh等于视口高度的...
我之前写九宫格自适应布局的时候，每个格子是使用媒体查询器（@media）或者js动态设置css，根据不同的手机屏幕宽度，适配不同手机，但是这样有个很大的缺点，那就是移动端的屏幕尺寸太多了，就得写很多代码，才能实现我们想要的效果。今天突发奇想，使用了纯css实现了我想要的效果，下面就和大家来分享，上代码;<!DOCTYPE html> <html><head><meta charset="utf-8"><title>九宫格</title><meta name="viewport" content="maximum-s...
以手机、平板等移动设备为平台的浏览行为变得越来越平常，甚至有些人叫嚣PC将死。虽然说的有些夸张，但让你的网站布局能够兼容PC和移动设备这些需求变得越来越重要。这种网页布局就是“自适应布局” (有人喜欢把“Responsive layout”直译成‘响应式布局’，本人觉得‘自适应布局’更本土化) 。这种布局的特点是使用CSS媒体查询语句(@media screen and (...))，能根据页面宽度，让页面布局自动做相应的调整，而不是采用传统的做法，...
css知识点：当padding/margin取形式为百分比的值时，无论是left/right，还是top/bottom，都是以父元素的width为参照物的！一、CSS百分比padding都是相对宽度计算的在默认的水平文档流方向下，CSS margin和padding属性的垂直方向的百分比值都是相对于宽度计算的，这个和top, bottom等属性的百分比值不一样。这么设计的原因在我的新书（应该不出几个月就要出版了）中会有说明，这里不展开。对于padding属性而言，任意方向的百分比pad...
这次给大家带来CSS自适应布局详解，CSS自适应布局的注意事项有哪些，下面就是实战案例，一起来看一下。前言本篇文章将介页面布局中的自适应布局，常见的自适应布局有以下2种：左列固定右列自适应、左右两列固定中间自适应。1. 左列固定右列自适应布局方案说明：左列固定右列自适应，也可以为右列固定左列自适应，常见于中台管理界面、移动端Web的列表展示等等。<p class="container"><p class="left">固定宽度</p><p class="right"...
这次给大家带来css的自适应布局，css自适应布局的注意事项有哪些，下面就是实战案例，一起来看一下。 首先，这个这么扯淡又装逼的名字不知道是谁起的，大意就是说：中间的内容随着浏览器宽度的不同，进行宽度自适应操作，而两边的内容固定宽度。 来，上个代码演示一下： 1 <style> 2 *{ 3 margin: 0; 4 padding: 0; 5 } 6 .wrap { 7 ...
本文主要和大家分享详解CSS百分比padding制作图片自适应布局，css知识点：当padding/margin取形式为百分比的值时，无论是left/right，还是top/bottom，都是以父元素的width为参照物的！一、CSS百分比padding都是相对宽度计算的在默认的水平文档流方向下，CSS margin和padding属性的垂直方向的百分比值都是相对于宽度计算的，这个和top, bottom等属性的百分比值不一样。这么设计的原因在我的新书（应该不出几个月就要出版了）中会有...
近日查看了一些资料自己研究写了一个网站布局，采用高度自适应，css样式表如下： * { margin:0; padding:0; } BODY { font-size: 12px; font-family: "Verdana" , "Arial" , "细明体" , "sans-serif"; text-align: center; background-image: url(../images/bg.gif); } table { FONT-SIZE: 12px; FONT-FAMILY: "Verdana", "Arial", "细明体", "sans-serif"; } /*空行*/ .space10{ height:10px; float:left; width:100%; } /*实现...
就是外div和浏览器宽度一样（这我知道），里面包含一左一右两个div，一个div是固定像素宽度，另一个是剩下来的宽度（要margin一些像素）。float:left这我知道，当时剩下来的那个宽度就不知道怎么样写。 不能用js的。 回复讨论(解决方案) 用table 我看到的 用table 我看到的不是用table的，而且现在一般都用div做布局了。 举例啊 你的左边是 120px。页面 元素 有2个 .left .right 样式这样写 .left{float:l...
经常在工作中或者在面试中会碰到这样的问题，比如我想要个布局 右侧固定宽度 左侧自适应 或者 三列布局 左右固定 中间自适应的问题。 下面我们分别来学习下，当然我也是总结下而已，有如以下网站源码方法： 一： 右侧固定宽度 左侧自适应 第一种方法：左侧用margin-right，右侧float：right 就可以实现。 HTML代码可以如下写: 我是龙恩 我是龙恩 CSS代码可以如下写...
左侧定宽 右侧自适应 /* 两列右侧自适应布局 */.g-bd1{margin:0 0 10px;}.g-sd1{position:relative;float:left;width:190px;margin-right:-190px;}.g-mn1{float:right;width:100%;}.g-mn1c{margin-left:200px;} 左侧定宽 右侧自适应
左侧定宽 中间自适应 右侧定宽 /* 三列中间自适应布局 */.g-bd5{margin:0 0 10px;}.g-sd51,.g-sd52{position:relative;float:left;width:230px;margin:0 -230px 0 0;}.g-sd52{float:right;width:190px;margin:0 0 0 -190px;}.g-mn5{float:left;width:100%;}.g-mn5c{margin:0 200px 0 240px;} 左侧定宽 中间自适应 ...
左右布局，左边固定，右边自适应布局 BFC方法解决 div + css宽度自适应（液态布局） /*左边栏，设定宽度*/ body,#wrap{ width: 100%; border: 1px yellow; } .wrap_l { float: left; height: 150px; width: 150px; border: 1px solid #333; } /*中间栏，宽度auto,*/ .wrap_m ...