前几天面试时有道css题没做出来，回来好好学习一番后把其记录下来。 题目是这样的：左中右三栏布局，左右两栏宽度固定，左右两栏的宽度为200像素，中间栏宽度自适应。当屏幕小于600px时，3栏会分别占用一行。像这样当屏幕大于600px时，是这样 我做出来用了css3的@media，如果不用这个，好吧，水平有限想不出来。。。下面是代码：<!DOCTYPE> <html> <head> <style> body{margin: 0 ;padding: 0; } @media screen and (min-wi...
滤镜主要是用来实现图像的各种特殊效果。它在PhotoShop中有非常神奇的作用。CSS滤镜的标识符是“filter”，总体上和其他的css语句相同。css滤镜可分为基本滤镜和高级滤镜两种。css滤镜可以直接作用于对象上，并且立即生效的滤镜成为基本滤镜。而要配合JavaScript等脚本语言，能产生更多变幻效果的则成为高级滤镜。 1、常见滤镜（1）透明度滤镜Alpha通道：用于设定透明度。 它的表达式如下：filter：alpha（opacity=opac...
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>圣杯布局</title><style type="text/css">* {margin: 0px;padding: 0px;}.container {padding: 0px 200px;height: 200px;background: #eee;min-width: 400px;}.left ,.right {width: 200px;height: 200px;background: red;float: left;}.main {width: 100%;height: 200px;background: blue;float: left;}.left {margin-left: -100%;position: relative;left:...
伸缩布局（一）;1.创建一个flexbox容器。.flexconfainer{display:-webkit-flex;display:flex; }2.flex项目显示；flex项目是flex容器的子元素，他们沿着主要轴和横轴定位，默认的是沿着水平轴排列一行，可以通过flex-direction来改变主轴方向修改为column,其默认值是row。3.项目列显示;.flexcontainer{display:-webkit-flex;display:flex;-webkit-flex-direction:colmn;flex-direction:column; }4.还有两个属性值:如果是垂直方向的有...
业界越来越关注DIV+CSS的标准化设计，大到各大门户网站，小到不计其数的个人网站，在Div+CSS标准化的影响下，网页设计人员已经把这一要求作为行业标准。那么什么是Div+CSS标准？Div+CSS的标准化设计到底有什么好处？ Div 全称 division 意为“区分”使用 DIV 的方法跟使用其他 tag 的方法一样。 如果单独使用 DIV 而不加任何 CSS, 那么它在网页中的效果和使用 <P></P> 是一样的。 DIV本身就是容器性质的,你不但可以内嵌table还可以...
利用纯CSS创建一个等高多列的布局并不件易事，本教程将着重分析出现在多列布局的多个问题，然后为大家等来一个简单全游览器通吃的解决方法，不使用图片，脚本，CSS hacks并在最严格的XHTML 规范中都能通过验证。 问题的症结所在如上图所示，由于各列的内容不一致导致其背景的高度也不统一。而背景实质上是内容（标准的盒子模型是由内容区，补白区，边框区与边界区组成，背景存在于前三者中；IE为前两者）的自适应的问题。再转化一下...
自适应布局概念自适应布局（Adaptive Layout）是对凡是有自适应特性的一类布局的统称自适应布局使用media query来检测当前浏览器的宽度进而通过CSS样式调整页面大小。自适应布局和静态布局类似也是采用绝对长度单位（px、pt、mm、cm、in），但不同点在于它通过media query为页面指定了多个固定宽度。布局特点自适应布局的特点是分别为不同的屏幕分辨率定义布局，即创建多个静态布局，每个静态布局对应一个屏幕分辨率范围。改变屏幕...
一、浏览器兼容1.1、概要世界上没有任何一个浏览器是一样的，同样的代码在不一样的浏览器上运行就存在兼容性问题。不同浏览器其内核亦不尽相同，相同内核的版本不同，相同版本的内核浏览器品牌不一样，各种运行平台还存在差异、屏幕分辨率不一样，大小不一样，比例不一样。兼容性主要可以分类为：1)、CSS兼容2)、JavaScript兼容3)、HTML兼容这三类也是前端的主要组成部分，都存在一定的兼容性问题，知己知彼，百战百胜，我们先了解...
让CSS布局更加直观：box-sizing 如果你写过CSS或者你接触过CSS，相信你一定对盒子模型一点都不陌生。CSS其中一个让人比较困惑的地方就在于它的盒子模型中关于高度和宽度的计算，别说那些初学者了，就是写过很久CSS的人也一样会有如此的感觉。CSS中的高度和宽度总是不那么直观，让你总是很困惑，不能一眼就能分辨出其高度和宽度。有的时候你希望它的宽度是100px，但实际情况却总不是这样。然而，设置正确的box-sizing的属性，盒子...
<body> <div id="main"> <div id="mainContainer">mainContainer</div> </div> <div id="left"> <div id="leftContainer">leftContainer</div> </div> <div id="right"> <div id="rightContainer">rightContainer</div> </div> </body>#main{width: 100%;float: left;background-color: purple;color: #ffffff;} #mainContainer{height: 200px;margin:0 230px;} ...
代码如下： <html> <head> <style type="text/css"> <!-- body { margin:0px; font-size:13px; font-family:Arial; } #container{ position:relative; width:100%; } #banner{ height:80px; border:1px solid #000000; text-align:center; background-color:#a2d9ff; padding:10px; margin-bottom:2px; } #content{ float:left; text-align:center; padding-right:200px; /* 内容往回挤200px */ } #li...
浮动的清除：clear：left、right、both定位有四种，分别是静态定位、相对定位、绝对定位、固定定位。静态定位：所谓的静态定位就是按照标准流中出现的顺序依次格式化相对定位：就是微调元素位置的。让元素相对自己原来的位置，进行位置调整。相对定位不脱标，真实位置是在老家，只不过影子出去了，可以到处飘。相对定位有坑，所以一般不用于做“压盖”效果。页面中，效果极小。就两个作用：1） 微调元素2） 做绝对定位的参考，子绝...
1 样式表 内联样式表 内嵌样式表 外部样式表2 选择器 标签选择器 <style type="text\css" class 选择器 以.开头 ID选择器 以#开头 复合选择器 1 以，隔开的 表示并列 2 用空格隔开的 表示后代 .class p /*找到使用的.class的标签，在该标签中的p标签使用该样式*/ 3 用.隔开的 表示筛选 p sp /*在标签p中的“class="‘sp” 使用该样式*/ 格式与布局 1 position...
<!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 http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>无标题文档</title><style type="text/css">body,div{margin:0;padding:0;}#main{border:1px solid blue;width:500px;height:500px;margin:100px auto;position:rel...
.bottom-pay__tips {width: 100%; //默认百分百height: 22px;font-size: 14px; font-weight: 400;color: #333333;line-height: 22px; //备注：如果使用flex 的话，默认会 根据内部的font-size默认的 进行自动line-height, 会和UI图产生一点点的差距display: flex;align-items: center;.tip-img {display: flex;justify-content: center;align-items: center;margin-right: 5px;img {width: 100%;height: 100%;}} }解决措施 1....