【CSS】Intermediate5:Specificity

1.More Specific=Greater Precedence =>nested selectors 2. the selectors are the same then the last one will always take precedence 3.Calculating Specificity ID Selector =100 class Selector=10 HTML Selector=1…

【css】清除浮动的几种方式

[css]清除浮动的几种方式因为浮动框不在普通的文档流中,所以它不占据空间.如下面的代码: .news { background-color:gray; border:1px solid black; } .news img { float:left; } .news p { float:right; } <divclass="news"> <imgsrc="/img/news-pic.jgp"alt="my pic"/&…

【CSS】隐藏多行文本框Textarea在IE中的垂直滚动栏

在<[CSS]禁止Google浏览器同意定义调整多行文本框>(点击打开链接)中已经提及过怎样使多行文本框Textarea在一些DOM2的浏览器中固定下来. 这不,多行文本框Textarea在IE中也存在一些样式上的缺陷了. 一个普通的,没有加不论什么定义的文本框.例如以下: <textarea cols="30" rows="3"></textarea> 其在IE的效果就如同左側一样.在没有输入不论什么文字,就出现垂直滚动栏非常不…

【css】用css巧妙实现移动端横向滑动展示功能

前言:记得以前处理移动端横向滑动展示都是去用js去解决的,要用js进行蛮多处理,要算li的宽度,然后还要用js设置ul盒子的宽度,又要设置最大滑动距离,最小滑动距离等等.......但是现在发现用css就能很好的解决这功能一.直接上代码. <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Conte…

【CSS】思考和再学习——关于CSS中浮动和定位对元素宽度/外边距/其他元素所占空间的影响

一.width:auto和width:100%的区别 1.width:100%的作用是占满它的参考元素的宽度.(一般情况下参考元素 == 父级元素,这里写成参考元素而不是父级元素,在下面我会再细说) 2.width:auto也是以"占满参考元素宽度"为目标.但不同的地方在于,它能根据margin和padding的值动态地调整width的值.当参考元素的宽度一定时,子元素的margin或者padding多一点,那么子元素的width就会少一点. 说白了width:auto试图…

【CSS】css动画及过渡和变换属性

1.css动画创建一个动画: @keyframes name{ //动画名字 0% { //动画开始 transform: translateY(0); } 100% { //动画结束 transform: translateY(-700px) rotate(600deg); } } 为元素绑定动画: animation: donghua 25s infinite linear;//参数分别为:动画名字,执行时间25秒,重复播放,匀速播放设置动画延迟播放: animation-delay:…

【CSS】元素样式

1.使用CSS的三种方式: 方式一.通过元素的style属性来设置元素的样式方式二.在HTML头部标签<head>中通过<link>标签引入一个外部的CSS资源,通常是一个CSS文件. 方式三.在HTML头部标签<head>中通过一对标签<style></style>来定义元素的样式 <!DOCTYPE html> <html lang="en"> <head> <meta char…

【CSS】iconfont的使用

说到浏览器对@font-face的兼容问题,这里涉及到一个字体format的问题,因为不同的浏览器对字体格式支持是不一致的,这样大家有必要了解一下,各种版本的浏览器支持什么样的字体,前面也简单带到了有关字体的几种格式,下面我就分别说一下这个问题,让大家心里有一个概念: 一.TureTpe(.ttf)格式: .ttf字体是Windows和Mac的最常见的字体,是一种RAW格式,因此他不为网站优化,支持这种字体的浏览器有[IE9+,Firefox3.5+,Chrome4+,Safari3+,Oper…

【CSS】318- CSS实现宽高等比自适应容器

点击上方"前端自习课"关注,学习起来~ 在最近开发移动端页面,遇到这么一个情况:当页面宽度 100% 时,高度为宽度一半,并随手机宽度变化依然是一半. 于是我们就需要实现一个宽度自适应,高度为宽度一半的容器. 这里先以高度为宽度一半为例,也可以是其他任意比例. 一.思考如何实现这个问题类似于:我们在移动端页面,上面有一张宽度 100% 的图片,如果我们没设置高度,则图片会根据原有尺寸,等比缩放. 我们可以借助这个想法,根据元素高度,来为元素设置一个相应比例的高度即可. 二.实现方法1…

【CSS】知识笔记

一.CSS文件 1.引用css文件,放在Head里面,可以减少repaint和reflow. 浏览器渲染页面大概是这样的,当浏览器从上到下一边下载html生成DOM tree一边根据浏览器默认及现有CSS生成render tree来渲染页面,当遇到新的CSS的时候下载并结合现有CSS重新生成render tree,刚才的渲染工作就白费了,如果我们把所有CSS都放到页面顶部,这样就没有重新渲染的过程了. 2.一般只使用一个文件,这无关于网站的大小,网站越大,某种意义上这种做法的优势与潜力就会体现的…

【CSS】定义元素的对齐方式

1.文本内容居中对齐:text-align.扩展用法:父元素嵌套子元素时,且子元素的宽度小于父元素宽度,使用text-align:center,可以实现子元素的居中对齐. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>文本内容水平居中</title> <style> .text-center…

【CSS】其他CSS属性和特性

1. 设置元素的颜色和透明度前面有介绍CSS颜色的各种用法,如 background-color属性.boder-color属性等.还有另外两个与颜色有关的属性. 1.1 设置前景色 color属性设置元素的前景色.一般而言,元素对color属性之于它的意义可以有不同的解读,不过实际上,color属性一般用来设置文本的颜色. <!DOCTYPE html> <html lang="en"> <head> <meta charset="…

【CSS】过渡、动画和变换

1. 使用过渡过渡效果一般是由浏览器直接改变元素的CSS属性实现的.例如,如果使用:hover选择器,一旦用户将鼠标悬停在元素之上,浏览器就会应用跟选择器关联的属性. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Example</title> <style type="text/cs…

【CSS】创建布局

随着对分离HTML元素的语义重要性与其表现的影响的不断强调,CSS在HTML5元素布局方面的作用越来越重要. 1. 定位内容控制内容最简单的方式就是通过定位,这允许你使用浏览器改变元素的布局方式. 1.1 设置定位类型 position 属性设置了元素的定位方法. position 属性的不同值指定了元素定位所针对的不同元素.使用 top.bottom.left 和 right 属性设置元素的偏移量的时候,指的是相对与 position 属性指定的元素的偏移量. <!DOCTYPE html>…

【CSS】使用盒模型

盒子是CSS中的基础概念,我们需要使用它来配置元素的外观以及文档的整体布局. 1. 为元素应用内边距应用内边距会在元素内容和边距之间添加空白.我们可以为内容盒的每个边界单独设置内边距,或者使用 padding 简写属性在一条声明中设置所有的值. 如果使用百分数值指定内边距,百分数总是根包含块的宽度相关,高度不考虑在内.下面代码展示了如何为元素应用内边距. <!DOCTYPE html> <html lang="en"> <head> <met…

【css】a标签的用法

<a>标签属性display的不同设置达到目的 display:block和display:inline; display:block 可以使得<a>标签设置宽高.边线.margin和padding,因为这样设置后<a>标签拥有的块元素的性质. 还可以通过设置<a>标签display:inline代替一般采用的<ul><li>组成的列表,省却了诸如list-style:none,float:left等设置来获得水平或垂直排列. 注意:…

【CSS】使用边框和背景

1. 应用边框样式先从控制边框样式的属性开始.简单边框有三个关键属性:border-width.border-style 和 border-color . <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Example</title> <style type="text/css"…

【CSS】使用CSS选择器（第二部分）

1. 使用结构性伪类选择器使用结构性伪类选择器能够根据元素在文档中的位置选择元素.这类选择器都有一个冒号字符前缀(:),例如 :empty .它们可以单独使用,也可以跟其他选择器组合使用,如: p:empty . 1.1 使用根元素选择器 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS</title&…

【CSS】使用CSS选择器

CCS选择器的作用是找出某类元素.以便使我们使用style元素或者外部样式表对这类元素设置样式. 1.使用CSS基本选择器有些选择器使用起来非常简单,我们把这部分选择器称为基本选择器(basic selector).开发人员可使用这类选择器在文档中进行比较宽泛的选择,也可以将其看作结合多种选择器进行特殊选择的基础. 1.1 选择所有元素通用选择器匹配文档中的所有元素.它是最基本的选择器,不过使用很少,因为匹配过于广泛. 下面代码是一个使用通用选择器的样式示例: <!DOCTYPE html>…

【CSS】理解CSS

CSS(Cascading Style Sheet,层叠样式表),及其精巧且富有表达力,开发者可以用最为高效的方式高度掌控网页内容的表示. 1. 盒模型 CSS中的一个基本概念是盒模型(box model).可见元素会在页面中占据一个矩形区域,该区域会在页面中占据一个矩形区域,该区域就是元素的盒子,由四部分组成,如下图所示: 元素盒子有两部分是可见的:内容和边框.内边距是内容和边框之间的空间,外边距是边框和页面上其他元素之间的空间. 元素还可以包含其他元素.这种情况下,父元素的内容盒子称为子元素…

【CSS】css网页背景图片设置

刚学CSS,了解了下网页背景图设置,顺便记录下. 下面主要是实现背景图位置保持不变,即不随滚动条动而动的功能. body { background-image:url(images/bck.png); background-repeat:no-repeat; background-attachment:fixed; background-position:0px 0px; background-size:cover; -moz-background-size:60px 100px; /* 老版本…