<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>双伪元素清除浮动</title> <style type="text/css"> /* 声明清除浮动的样式 */ .clearfix:before, .clearfix:after { content: ""; display: table; } .clearfix:after { clear: both; } /* ie6 7 专门清除浮动的样式*/ .clearfix { *zoom:1; } .one { width: 500px; border: 1px solid red; } .damao { float: left; width: ...
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title>className属性</title><style> body{ font-size:16px;} .one{ border:1px solid #eee; width:230px; height:50px; background:#ccc; color:red; } .two{ border:1px solid #ccc; width:230px; height:50px; background:#9CF; color:b...
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>垂直</title><style type="text/css">#content {position:absolute;top:0;bottom:0;left:0;right:0;margin:auto;height:240px;width:70%;background-color:#ccc;} /*方法1 ie8以下不兼容.main{ width:1000px; margin:0 auto; }.layout{ position:relative; float:left; width:500px; border:1px solid #f00; height:aoto; }.layout .box{ position:absolute;top:0;bottom...
只要设置元素的box-pack和box-align即可，这两个属性当前只有webkit和moz支持，要设置垂直居中的话只需要将这两个属性的值都设置为center即可，需要的朋友可以参考下 以前处理垂直居中用的方法是设置div的height和line-height是一样的值，现在就不用那么麻烦了。只要设置元素的box-pack和box-align即可，这两个属性当前只有webkit和moz支持。其中box-pack控制的是水平的左和右，取值有：start(居左)，center(居中)，end(居右)。box...
一、选择列表中的偶数标签 :nth-child(2n)二、选择列表中的奇数标签 :nth-child(2n-1)三、选择从第6个开始的，直到最后:nth-child(n+6)四、选择第1个到第6个 :nth-child(-n+6)一、两者结合使用，可以限制选择某一个范围，选择第6个到第9个 :nth-child(n+6):nth-child(-n+9) 原文：https://www.cnblogs.com/liweitao/p/13030445.html
display: grid; /* 垂直居中 align-items: center; justify-content: center; */ /* 垂直居中 place-items: center;*/ /* 左上角 place-items: start; */ /* 右上角 place-items: start end;*/ /* 左下角 place-items: end start; */ /* 右下角 place-items: end; */ /* 居中靠上对齐 place-items: start center; */ /* 居中靠下对齐 place-items: end center; */ /* 居中靠左对齐 place-items: cen...
对于一个很好的编辑器VS来说,它对于编程语句的自动提示功能是很强大的,有时,我们根本不需要看相关API,而直接看VS给我们的提示就可以完成一个新技术的学习了.今天我们来说几个CSS中的伪元素,它们在项目开发中用的并不多,但确实很有用,在项目中不用它,是因为大家不能了解它们,下面是一个工作场景,如有四个按钮,分别是建立,编辑,删除和修改,而我们要求这在前台显示的汉字是统一的,如果要改它们,就都要变的,如,我们希望把建立改为"新建...
1、行内元素（内联元素 inlineElement）特点：不占据一行，无法设置宽高及行高，其宽度随着内容增加，高度随字体大小而改变，margin只对左右起作用，上下无效。常见有：a - 锚点，b - 粗体(不推荐)，br - 换行，em - 强调，font - 字体设定(不推荐)，i - 斜体，img - 图片，input - 输入框，label - 表格标签，select - 项目选择，small - 小字体文本，span - 常用内联容器，定义文本内区块，strike - 中划线，strong - 粗体强调2、...
刚接触CSS不是太长时间 对于CSS基本属性也是略懂就在这里做一个总结CSS会更多的延用HTML中的一些基本属性 例如文字属性的改变方式 <span>元素 <p>元素 而CSS更多的优点是体现在对于页面布局 和页面整体美感的设置上 <div>元素就很好的解决了整体页面的布局问题 对于现在所掌握的技术而言 <div>元素更多是用在为整个图形界面定义一个坐标要提到深受喜爱的<div> 当然离不开其中一个重要的元素 <position> 1<head>2<style>3...
<html> <body> <head><style>#menu{width:1000px;overfloat:hidden;} /* width:1000px;overfloat:hidden; 父元素高度随子元素变化而变化 */#menu ul{list-style-type:none;}#menu ul li{float:left;margin-right:10px;} /* float:left; 浮动横布局，让父元素高度变0px */</style> </head> <div id="menu"> <ul> <li><a href="#">C语言</a></li> <li><a href="#">Java语言</a></li> <li><a href="#">Javascript语言</a></l...
原文：http://www.cnblogs.com/htmll/p/7673693.html
display:none元素隐藏,元素所占的空间也消失了,会影响周围元素空间的变化所以会引起回流和重绘visibility:hidden元素隐藏,元素所占空间不会消失,不会影响周围元素空间的变化所以只会引起重绘设置该样式的元素不会再触发事件了<style>.div1{width: 100px;height: 100px;background: red;visibility: hidden;/* opacity: 0; */}.div2{width: 50px;height: 50px;background: blue;}</style></head><body><div class="div1" onclick="c...
hack： 父元素的盒子包含一个子元素盒子，给子元素盒子一个垂直外边距margin-top,父元素盒子也会往下走margin-top的值，而子元素和父元素的边距则没有发生变化。 <!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=utf-8"/><title>无标...
selection[CSS4]应用于文档中被用户高亮的部分（比如使用鼠标或其他选择设备选中的部分）。（IE8及以下不支持）（火狐-moz-selection）first-line选择每个 <p> 元素的首行，并为其设置样式。first-letter选择每个 <p> 元素的首字母，并为其设置样式。before在每个 <p> 元素的内容之前插入新内容。after在每个 <p> 元素的内容之后插入新内容。cue backdrop placeholder marker spelling-error grammar-error 与伪类一样， 伪元素添加...
利用CSS伪元素 ：before 和 ：after 可以在文档前后插入内容而不改变文档原有结构，下面有个不错的示例，大家可以参考下利用CSS伪元素 ：before 和 ：after 可以在文档前后插入内容而不改变文档原有结构，再配合 box-shadow 可以实现很炫的效果, 下面就展示三个例子： 1、利用 :before 和 :after 添加背景，比如给一段文字前后打引号； 2、利用 :before, :after, box-shadow 实现3D阴影效果; 3、利用 :before, :after, box-shadow ...