前言 margin是盒模型几个属性中一个非常特殊的属性.简单举几个例子:只有margin不显示当前元素背景,只有margin可以设置为负值,margin和宽高支持auto,以及margin具有非常奇怪的重叠特性. 重叠 margin重叠又叫margin合并,发生这种情况有两个前提 1.只发生在block元素上(不包括float.absolute.inline-block元素) 2.只发生在垂直方向上(不考虑writing-mode) [相邻的兄弟元素] margin重叠效果展示: item1 和…

很多初学制作网页的朋友,可能会遇到的一个常见问题,就是在CSS中加了margin:0 auto;却没有效果,不能居中的问题,margin:0 auto;的意思就是:上下边界为0,左右根据宽度自适应,其实就是水平居中的意思,在这里说两个典型的错误引起的不能居中的问题: 1.没有设置宽度 <div style="margin:0 auto;"></div> 看看上面的代码,根本没有设置DIV的宽度,如何根据宽度自适应呢?新手比较容易忽略的问题. 2.没声明DOCTY…

设计思路:         首先做一个包括图片和说明文字的简单的页面结构,然后再设置它的变换.将变换的元素,即照片和文字放在一个父容器里面,这就需要四个父容器 ,再将这四个父容器放在最外层的舞台上面进行变换,在每个父容器里面都包括两部分:一个是上面的图片,还有一个是下面的说明文字.最后采用层定位将图片和下面的说明文字让它有一个叠加的效果.先显示这个图片,当鼠标悬停在上面的时候,由于做了3D变换,(即每幅图片翻转的效果是围绕Y轴翻转180度来进行的),那么后面的文字就会被显示出来. ㈠HTML主页…

调css时候,如果设置margin-left没有效果,可能是span不是块元素.设置display:block;即可.…

查看本章节 查看作业目录 需求说明: 使用 jQuery 选择器获取页面元素,然后利用 jQuery 对象的 css() 方法设置其 display 样式属性,从而实现显示和隐藏效果. 具体要求如下: 在页面中显示电影排行榜 当单击"(收起)"链接时,排行榜中后三项的电影名称隐藏而且链接的文本更改为"(展开) " 当单击"(展开)"的链接时,后三项的电影名称重新显示且链接的文本更改为"(收起)" 实现思路: 新建 HTML 页…

前面的话   margin是盒模型几个属性中一个非常特殊的属性.简单举几个例子:只有margin不显示当前元素背景,只有margin可以设置为负值,margin和宽高支持auto,以及margin具有非常奇怪的重叠特性.之前的博文中已经分别详细地介绍了margin的基础知识和负margin的详细用法.本文将详细介绍外边距margin的几个重点部分,包括重叠.auto和无效情况 重叠 [前提]   margin重叠又叫margin合并,发生这种情况有两个前提   1.只发生在block元素上(不包…

深入理解css中的margin属性 之前我一直认为margin属性是一个非常简单的属性,但是最近做项目时遇到了一些问题,才发现margin属性还是有一些“坑”的,下面我会介绍margin的基本知识以及那些“坑”.这篇博文主要分为以下几个部分: margin--基础知识 margin--在同级元素(非父子关系)之间应用 margin--在父元素和子元素之间应用(重点) margin--margin值的单位为%时的几种情况 第一部分:margin--基础知识 要介绍margin的基础知识,我们不可回…

深入css中的margin 第一:margin-top css代码(元素没有任何定位的情况下,并且元素默认为block) <style type="text/css"> /*这里值得注意的一点是: 所以当inner元素设置margin-top的时候 它margin的对象是我们的body 而不是我们的outer元素 要控制我们的inner 只能使用我们的padding: 或则把inner改成是inline-block: */ .inner{ width:100px; heig…

原文 纯CSS实现各类气球泡泡对话框效果 一.关于纯CSS实现气泡对话框 首先,来张大图: 上边这张黄黄的,大大的,圆圆的,有个小尾巴,文字内容有些YY的图片,就是使用纯CSS实现的气泡对话框效果,一点图片都没有哦.看到这里,你是不是跟我一样,有些惊叹CSS的潜力呢.关于这张图片,暂时先放到一边,下面我要讲一些与主旨相关的比较重要的,同时又很实用的一些技术. 我们首先看下面这一张图片(截自人人网): 可能颜色有点淡,在左上角有个90度的尖角,于是整个形成了一个气泡对话框.现在考考你,如果你来实现…

一 盒模型 盒模型 在CSS中,"box model"这一术语是用来设计和布局时使用,然后在网页中基本上都会显示一些方方正正的盒子.我们称为这种盒子叫盒模型. 盒模型有两种:标准模型和IE模型.我们在这里重点讲标准模型. 盒模型示意图 盒模型的属性 width:内容的宽度 height: 内容的高度 padding:内边距,边框到内容的距离 border: 边框,就是指的盒子的宽度 margin:外边距,盒子边框到附近最近盒子的距离 如果让你做一个宽高402*402的盒子,您如何来设计…