置换元素：1. 一个内容 不受CSS视觉格式化模型控制，CSS渲染模型并不考虑对此内容的渲染，且元素本身一般拥有固有尺寸（宽度，高度，宽高比）的元素，被称之为置换元素。 2. 置换元素就是浏览器根据元素的标签和属性，来决定元素的具体显示内容。 3. 例如浏览器会根据img标签的src属性的值来读取图片信息并显示出来，而如果查看(X)HTML代码，则看不到图片的实际内容；又例如根据input标签的type属性来决定是显示输入框，还是单选按...
CSS3 Flexbox轻松实现元素的水平居中和垂直居中网上有很多关于Flex的教程，对于Flex的叫法也不一，有的叫Flexbox，有的叫Flex，其实这两种叫法都没有错，只是Flexbox旧一点，而Flex是刚出来不久的东西而已，为了方便说明，赶上新技术，下面我就把这种布局叫Flex布局。 元素居中，相信作为前端工程师的你肯定会经常用到，不管是在水平方向居中，还是垂直方向居中，都可在你的职业生涯中徘徊。不过很多时候要实现垂直居中，还是比较麻...
伪类基于当前元素所处的状态或具有的特性，用于设置元素自身的特殊效果。a：link 规定所有未被点击的链接；a：visited 匹配多有已被点击过的链接；a：active 匹配所有鼠标按下未松开的元素；a：hover 匹配所有鼠标移入/悬停在元素上的元素；：focus 被选中的元素；：first-child 元素的第一个子元素；：lang允许创作者来定义指定元素中使用的语言； 伪类的规定：由于css的优先级问题，下面四个伪类需要按顺序书写，否则会出现...
一、方法说明通过IDomObject元素，获取完整的CSS选择器，过滤HTML和BODY元素，自动将class、id添加到选择器上，优先添加class，无class再添加id。如:<html><head></head><body><div id="result"><h3 class="t"><a "="" href="http://www.baidu.com/link?url=PgEyrxusTKZjg64DFOd_qlTy4o7dXLH_26WOy1mg6JUwVE4L_KrH24eG7s49yN8R-iBqQEb80m2gLmAzab8FIK&ck=4276.4.1526360648567.0.0.250.568.0&shh=www.baidu.com&sht=ba...
常见的块级元素和行内元素一、块级元素 1、块级元素的特点：（1）、默认显示在父标签的左上角.（2）、块级元素默认占满一行（沾满整个文档流）。2、常见的块级元素：<p>、<h1-h6>、<ulli>、<olli>、<div>、<tabl>、<hr>二、行内元素（内联元素） 1、行内元素的特点：（1）、大小受到文字区域的影响，不受到width和height的影响。（2）、行内元素不会单独占满一行。2、常见的行内元素：<a>、<pan> 、<img> 、<input>三、块级元素...
CSS 中父级元素的高度一般由子元素撑开，不会特意设置高度，但是以下情况会造成父级元素高度坍塌，也就是高度为零，影响后面元素的排版。子元素使用绝对定位子元素浮动针对第一种情况，即子元素使用绝对定位，可以使用以下方案：子元素的绝对定位改为相对定位，如果可以改的话针对第二种情况，即由子元素浮动造成父元素坍塌，可以使用以下方案：/*父级元素绝对定位*/position: absolute/*父级元素添加*/overflow: hidden;/*伪元素清...
以下先记录一下JS控制CSS所使用的方法.
1.使用javascript更改某个css class的属性...
<style type="text/css">
.orig {
display: none;
}
</style>
你想要改变把他的display属性由none改为inline。
解决的方法： 在IE里：
document.styleSheets[0].rules[0].style.display = "inline";
在firefox里：
document.styleSheets[0].cssRules[0].style.display = "inline";
讨论： 能够做一个函数来搜索特定名字的style对象：...
当最外面的层想要设置一个 overflow: hidden，但子元素又想他们能滚动，像今日头条的滚动导航一样：html：<div id="wrapper"><ul id="scroll"><li>cell 1</li><li>cell 2</li><li>cell 3</li><li>cell 4</li><li>cell 5</li><li>cell 6</li><li>cell 7</li><li>cell 8</li><li>cell 9</li><li>cell 10</li><li>cell 11</li><li>cell 12</li><li>cell 13</li><li>cell 14</li> </ul></div>css：#wrapper{width: 100%;height: 60px;...
document.querySelector(‘div‘).addEventListener(‘transitionEnd‘,function(){console.log(‘过度结束‘)})如果要兼容低版本的浏览器，就添加浏览器的内核前缀 webkitTransitionEnd / mozTransitionEnd / oTransitionEnd.... 清除表单下拉框的默认样式 主要是在移动端的默认样式select::-ms-expand{display:none;}
select{appearance:none;-moz-appearance:none;-webkit-appearance:none;
} 修改表单元素 placeholder ...
1、HTML 元素透明 其实本身，CSS 实现元素透明是件容易事儿。直接上代码：?1opacity:.5opacity 指的是不透明度，取值为
0~1 之间，1 表示完全不透明，0
表示完全透明。A
级浏览器基本都支持 opacity 属性，但碰上 IE，总没好事。不过 IE
有滤镜，可以帮助我们拐弯抹角地搞定不透明度：?1filter:alpha(opacity=50);注：事实上会碰到透明背景层，而
opacity
属性是会继承的，避免这个问题，需要结合定位来实现。在 CSS3 中，...
JavaScript获取DOM节点HTML元素CSS样式技术maybe yes 发表于2015-01-10 18:07原文链接 : http://blog.lmlphp.com/archives/59 来自 : LMLPHP后院如何使用 JavaScript 获取某个 DOM 节点下 HTML 元素的 CSS 样式值？使用过 JQuery 的童鞋一定都非常的熟悉，Jquery 提供了非常强大的 CSS 方法，可以很方便的设置和获取元素的 style 属性。某些情况下，我们不能使用 JQuery 时，就必须使用纯 JavaScript 获取元素的 style 属性值。本...
元素的显示与隐藏类似网站广告，当我们点关闭就不见了，但是我们重新刷新页面，会重新出现！本质：让一个元素在页面中隐藏或者显示出来。有如下三种方式：display 显示隐藏visibility 显示隐藏overflow 溢出显示隐藏1. display 显示隐藏元素display属性用于设置一个元素应如何显示。display: none; 隐藏对象display: block; 除了转换为块级元素之外，同时还有显示元素的意思display 隐藏元素后，不再占有原来的位置。后面应用及其...
元素选择器最常见的 CSS 选择器是元素选择器。换句话说，文档的元素就是最基本的选择器：p { text-indent:10px; color:blue;
} 什么情况下使用元素选择器，一般我们这样认为： 如果你想要让页面中所有的指定元素都有这个CSS效果，可以使用元素选择器。 有这样一段html代码：<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><link rel="stylesheet" type="text/css" href="index.css"><title></title></head><bo...
×目录[1]动态样式[2]CSS类[3]setAttribute()[4]CSSRule对象添加[5]空样式覆盖[6]CSSRule对象删除前面的话 我们可以通过计算样式来读取伪元素的样式信息，但是却无法使用javascript来直接操作伪元素，本文以一个需求解决为例，详细介绍脚本化伪元素的6种方法需求说明 【1】为id=box的div元素添加content="前缀"的:before伪元素 【2】为已经添加:before伪元素的div元素删除伪元素 [注意]由于IE7-浏览器不支持:before伪元...
下面我们来了解一下css选择器里面的几个:only-childp:only-child选择属于其父元素的唯一子元素的每个 <p> 元素。3:nth-child(n)p:nth-child(2)选择属于其父元素的第二个子元素的每个 <p> 元素。3:nth-last-child(n)p:nth-last-child(2)同上，从最后一个子元素开始计数。3:nth-of-type(n)p:nth-of-type(2)选择属于其父元素第二个 <p> 元素的每个 <p> 元素。3:nth-last-of-type(n)p:nth-last-of-type(2)同上，但是从最后一个子元素开...
