在布局的时候，很多设计都需要将元素排列在一行，使元素排列在一行的方法有多种，从兼容性和易用性来考虑，先介绍display:inline-block（显示为内联块）和float（浮动）。 float: 浮动，闻其名而知其意：使元素浮起来，脱离文档流，从而达到多个元素排列在一行的目的。浮动元素有哪些特征呢？如下所示： 支持宽高； 在一行显示； 不设置宽度时， 宽度由内容撑开 ； 会按照指定的顺序移动，直到碰到浮动元素，或父级的...
什么是块级元素（Block-level elements）???浏览器通常在元素之前和之后都使用换行符显示块级元素。您可以将其可视化为一堆框。 ??块级元素始终在新行上开始，并占用可用的全宽（尽可能向左和向右扩展）。 用法：块级元素可能只出现在<body>元素内。什么是内联元素（Inline elements）？??在HTML中，内联元素是仅占据由定义元素的标签界定的空格，而不是破坏内容的流。在本文中，我们将检查HTML内联元素以及它们与块级元素的区别。...
作为前端攻城师，在制作Web页面时都有碰到CSS制作水平垂直居中，我想大家都有研究过或者写过，特别的其中的垂直居中，更是让人烦恼，下面这篇文章主要给大家汇总介绍了关于利用css设置元素垂直居中的解决方法，有了这些方法就用再愁啦，需要的朋友可以参考下。前言 元素的垂直居中也是我们日常网页布局中经常会遇到的问题，本文主要给大家介绍了关于利用css设置元素垂直居中的解决方法，文中介绍了多种情况的多种解决方法，相信会对...
css3 outline为div元素添加轮廓线 有时为了样式的更加美观，可适当的为div添加轮廓线。可通过outline属性来实现。outline 包含以下几个属性值；outline-width:轮廓线的粗细。此属性值包含4个参数：thin，medium,thick,lengththin:定义细轮廓；medium:定义中型轮廓；thick:定义粗型轮廓。length:可以指定轮廓线的粗细，注，此值不能为负值；outline-style：轮廓线的样式。此属性常用参数：none:设置为none时，轮廓将不显示.dotted:点...
提问：我们如何使两个块级元素位于同一行？回答：1.设置float属性\(^o^)/~将块级元素的css格式设置为float：left/right，比如，有两个panel，panelA和panelB，想要使其位于同一行，只需要设置A的css格式为float：left/right即可。（注：只是设置A的float属性哦，若设置了B的float属性，则B后面的元素也会与其位于同一行。），若使用该方法，则两个块级元素紧挨着。效果示例：2.设置display为inline-block，即编写css代码为display:...
要设置某一元素的背景为透明，在 chrome 、firefox、opera 下是这样的：background-color: rgba(0, 0, 0, 0.4);rgba 中的最后一个参数 0.4 就是想要的透明度，范围在0～1之间。在 ie 中一般是这样的：background-color: rgb(0, 0, 0); filter: alpha(opacity=40);opacity 表示透明度，它的值范围在 0～100 之间那么如何兼容各浏览器呢？只要把它们写在一起就行了。由于 ie 不支持 rgba，所以会忽略之。其他浏览器对于自己不支持的，...
现在有这么一个实例要求： 1）画五个盒子，分别用红、紫、橙、绿、蓝字体颜色来表示； 2）鼠标点击其中一个盒子时，边框加粗并显示与盒子字体颜色一致的颜色； 效果如下图： （图1）盒子效果图 下面是具体的实现思路： 一、html内容构建 首先利用html内容表达五个盒子内容，代码如下：<ul id=levelGroup><li id=level1 >红</li><li id=level2 >紫</li><li id=level3 >橙</li><li id=level4...
产生这个问题的原因是前一段时间面试的时候，面试官问我margin和padding在内联元素上的使用效果，好像没怎么答上来。这两天正好有空写几个demo看看这个问题，发现了几个坑。先上demo：样式表<style type="text/css">*{padding: 0;margin: 0;}.inline{border: 1px solid red;padding: 20px;} </style>html代码1:<body><span class="inline">span</span><span class="inline">span</span><span class="inline">span</span> </body>ht...
1.关于元素的 width属性无效果 先运行下程序看下: [html] <span style=background-color:#336699;width:300px;>123</span> [/html] 可以看到 span会自动根据包含的内容来变化宽度 这是因为:对于内联元素(可以是默认即为内联的比如 span 元素，也可以是 1.关于元素的 width属性无效果 先运行下程序看下: 提示：您可以先修改部分代码再运行可以看到 span会自动根据包含的内容来变化宽度 这是因为:对于内联元素(可以是默认即为内联...
给子元素盒子一个垂直外边距margin-top,父元素盒子也会往下走margin-top的值，遇到此问题的朋友可以参考下本文或许会有意想不到的收获hack： 父元素的盒子包含一个子元素盒子，给子元素盒子一个垂直外边距margin-top,父元素盒子也会往下走margin-top的值，而子元素和父元素的边距则没有发生变化。 html代码： 代码如下:<p class="box1"> <p class="box2"></p> </p> css样式：代码如下:.box1{height:200px;width:200px;background:...
为什么margin-top不是作用于父元素:建议:尽可能的手写代码，可以有效的提高学习效率和深度。至于margin-top属性的基本用法再简单不过，那就是设置一个对象的上外边距，看下面的代码实例: <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="author" content="http://www.softwhy.com/" /><title>为什么margin-top不是作用于父元素</title><style type="text/css"> * ...
清除浮动这个问题，做前端的应该再熟悉不过了，下面介绍4种方法给大家参考1.使用clear:both清除浮动示例1：使用p html代码css代码<p class="box"> <p class="p"></p> <p class="clear"></p></p>.box{ width:300px;margin:0 auto;border:10px solid #000;}.p{ width:200px;height:200px;background:red;float:left;}.clear{ height:0px;font-size:0;clear:both;overflow: hidden;}示例2:使用<brclear="all"><p class="box"> <p clas...
1 写在前面最近在整理cnblogs上页面的样式，默认右侧【随笔分类】中的标签是每行显示一个，而我想把右侧【随笔分类】中的标签设置为一行显示多个标签，至于显示多少个则随标签的大小而定，并且每个标签在鼠标放上去的时候会有背景颜色的变化。效果如下图。下面我们就来分析一下如何让左边的标签显示方式变为右边这样的吧2 块元素在分析块元素之前我们首先建立html网页，以便后面的分析。html代码如下。<html><head><meta charset="...
当不包含z-index属性和position属性时，所有元素的叠放顺序与其所在HTML文档中出现的先后顺序一致。（使用负margin来重叠内联元素的特例除外。）当元素浮动float时，浮动块元素被放置于非定位块元素与定位块元素之间，换句话讲，浮动元素显示在普通流中的后代块元素之上，常规流中的后代行内元素之下。元素加入position位置属性时，所有具有position属性的元素及其子元素会显示在其他不具有position属性的元素上面。z-index只在设置...
在我们的Web日常开发中， 背景的属性是用来同时定义元素背景的各种显示属性，在实际应用CSS的过程中，通常使用背景的综合属性一次性，比如，背景颜色，背景图片等一系列，那么我们今天就给大家总结下关于CSS中背景属性的使用~CSS中有关背景属性：1.css背景的一些小常识 如何设置标签的背景颜色在css中有一个background-color:属性，就是专门用来设置背景颜色的取值：具体的单词rgbrgba十六进制二.如何设置背景图片？2.css背景有关...