2015年11月_cindy_rain

原创响应式布局

随着显示屏幕大小的变化，网页所显示的效果也不一样。如下：当屏幕在980px以上时：当屏幕在980Px和560px之间时：响应式布局可以参考：媒体查询代码奉上：<!DOCTYPE HTML><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=

2015-11-21 10:15:03 314

原创两列固定，中间列宽度自适应

首先，我先举两个例子，一个是圣杯型布局，另外一个是双飞翼型。双飞翼型是某博主由圣杯型参考后自创的一个布局方式。1. 圣杯型布局尝试之路考虑以下DOM结构：div id="page"> div id="hd">div> div id="bd"> div class="main">di

2015-11-20 22:07:29 518

原创左侧固定，右侧宽度自适应

这里用到两种方法实现实现一个两列布局，其中左侧部分宽度固定、右侧部分宽度随浏览器宽度的变化而自适应变化。每个例子我都用两幅图对比效果。黄色部分的宽度就是大框架的宽度，我们可以看到红色区域不发生改变，红色区域随着黄色区域宽度的改变而改变。 html部分<div class="box1"> <div class="divA">DIVA</div> <div class="divB">

2015-11-20 21:34:22 1822

转载不使用border-radius实现圆角框

原文：基本的圆角框实现原理：纯CSS方式实现圆角框的原理在网络上已经有很多人详细解说了，下面这个示意图是我将其中的一个圆角进行放大后的效果。从上面效果图中我们可以看到其实这种圆角框是靠一个个容器堆砌而成的，每一个容器的宽度不同，这个宽度是由margin外边距来实现的，如：margin:0 5px;就是左右两侧的外边距5像素，从上到下有5条线，其外边距分别为5px，3px，2px，1px，依次

2015-11-20 20:49:07 4611

转载关于Block Formatting Context－－BFC和IE的hasLayout

转自：关于Block Formatting Context－－BFC和IE的hasLayout 一、BFC是什么？ BFC（Block Formatting Context）直译为“块级格式化范围”。是 W3C CSS 2.1 规范中的一个概念，它决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用。当涉及到可视化布局的时候，Block Formatting Context提供了一个环

2015-11-20 17:08:08 288

原创闭合浮动

原文：那些年我们一起清除过的浮动一、清除浮动还是闭合浮动（Enclosing float or Clearing float）？清除浮动：就是clear,属性有clear:left/right/none; 闭合浮动：就是是浮动闭合，从而减少浮动带来的影响；两者的区别：通过两个图片的对比，我们可以看出清除浮动和闭合浮动的区别：清除浮动不能解决高度塌陷的问题。二.浮动

2015-11-20 16:39:32 403

原创布局和定位

网页的三种布局流动模型（flow) flow:默认的网页布局模型。浮动模型（flow）可以让块级元素显示在一行，用到 float:left/right;层模型（layer）层模型有三种形式： (a)position:absolute; 这种形式将元素从文档流中拖出，然后用left,right,top,bottom属性相对于最接近的一个具有定位属性的父包含块进行绝

2015-11-17 20:34:19 384

转载关于垂直居中

垂直居中——父元素高度确定设置父元素的height和line-height的值相等垂直居中——父元素高度不确定多行文本，图片，块状元素的垂直居中有：插入table(包括tbody,tr td)标签，同时设置vertical-align:middle;这个vertical-align:middle只在父元素为th、td时才生效。html代码<table><tbody><tr><td cl

2015-11-17 20:09:21 286

原创关于水平居中

水平居中——行内元素对于如文本，图片等行内元素，使用text-align:center;水平居中——定宽块状元素前提条件： 1. 宽度确定 2. 块状元素方法：左右margin设为auto;<div>定宽块状元素</div>div{ width:500px; margin:1

2015-11-17 19:52:25 325

转载 css的某些特殊属性

当我们为同一个元素设置了两个css属性时，这个元素会使用哪一个属性呢？<p class="style">css特殊性</p>p{ color:red;}.style{ color:blue;}p和.style都匹配到这个元素上，这个元素会选择哪个呢？浏览器会选择.style。这是根据一个叫做权值的特性来决定的。哪种权值高就使用哪种样式。权值规则 *标签权值：1

2015-11-17 19:11:08 455

cindy_rain的博客