MyException - 我的异常网
当前位置:我的异常网» HTML/CSS » css 的一些知识点的拾掇

css 的一些知识点的拾掇

www.MyException.Cn  网友分享于:2013-10-08  浏览:0次
css 的一些知识点的整理
css的一些标签整理
 
background-attachment: scroll;背景图可滚动
background-attachment: fixed; 固定背景的位置,不随着滚动条移动而移动
背景添加了 fixed 坐标计算就会根据整个可视区来计算
 
font(文本样式)
font (集合样式)
1. 固定顺寻 (font-weight font-style font-size/line-height font-family)
2. 必写项 (font-size font-family)
 
text-indent 首行缩进
正值 从左向右移动首行文字
负值 从右向左移动首行文字
单位 em 1em = 当前元素的1个文字大小
text-align 文本对齐方式(left/center/right)
text-decoration 文本修饰(none/underline下划线/overline上划线/line-through删除线)
word-spacing 单词间距
letter-spacing 字母间距
 
padding
 
padding 内填充(内边距)在元素的边框以里,
内容以外产生一个距离
1. padding区域可以显示元素背景
2. 元素背景位置的 0 0 点在元素padding区域的左上角
可视宽度(元素可以被看到的部分的宽度): ;
3可视宽度 = padding + width + border;
padding的多值写法:
两个值: (上下) (左右);
三个值: (上) (左右) (下);
四个值: (上) (右) (下) (左);
padding-top
padding-right
padding-bottom
padding-left
 
元素和内容之间的距离,用padding控制
 
margin
 
margin 外边距
多值写法:
两个值 (上下) (左右)
三个值 (上) (左右) (下)
四个值 (上) (右) (下) (左)
margin-top
margin-right
margin-bottom
margin-left
 
盒模型:内容(content)、填充(padding)、边框(border)、边界(margin)。
这些属性我们可以用日常生活中的常见事物——盒子作一个比喻来理解,所以叫它盒子模式。;
 
margin和padding的区别 :
1. margin在元素的边框以外,
padding在元素的边框以里
2.margin区域不显示元素的背景
padding显示元素的背景
3. margin通常用来给两个同级元素加距离
padding用来添加元素和它内容之间的距离
4.margin 叠加
两个相邻元素的上下margin是叠加在一起的,两个元素之间的距离,以大的为准
5.margin传递
元素的上下margin,会传递给父级
6.auto 自动
margin-left: auto; (元素在父级中居右显示)
margin-right: auto;(元素在父级中居左显示)
margin: 0 auto; (元素在父级中水平居中显示)
 
 
a标签
 
div 独占一行显示
a 标签可以和其他a标签在一行显示
a 标签默认会有下划线
a 标签不会继承父级的字体颜色,必须加载 他自己上
a 标签中换行会产生一个空格
空格大小会受到字体,字体大小的影响;
a 标签 (超链接)
(herf)作用:
1. 是页面地址的时候,点击之后跳转页面
2. 压缩文件的时候,点击之后下载文件
3. 是id名字,点击之后跳转至ID多在位置 -- 锚点
 
target="_blank" 空白窗口 打开链接
target="_self" 当前窗口打开 如 <a href="http://www.baidu.com" target="_self">百</a>
base 定义页面上所有的链接的默认打开方式 和 默认地址
在页面头部head标签中 写入:<base target="_blank" href="http://miaov.com/">
 
伪类选择器
 
:link 此链接未被访问
:visited 此链接已经被访问过
:hover 鼠标移入
:active 鼠标按下
 
选择器
 
css selector (选择器,选择符)
基础选择器
1. id 选择器 通过查找具有某个id属性的元素来添加样式
id = "idName"
#idName {
样式……
}
** 同一个页面中id不能重名
2. tag selector(类型选择器,标签选择器,元素选择器) 通过标签的名字找到某一类型标签添加样式
tagName {
样式……
}
3. class 选择器(类选择器) 通过查找具有某类class属性的元素来添加样式
class = "className"
.className {
 
}
** 1) class可以重复调用
2) 元素可以具有多个className,每个名字中间以空格隔开,每个名字添加的样式,元素都会识别
 
4. * 通配符 (通配选择器),代表所有的元素 (不推荐使用)
 
继承
 
nherit 继承
父级的这条样式是怎样的元素的这条样式就是怎样的
文本样式,自己没有设置这条样式,就会继承父级,如果子元素设置就显示子元素自 己的样式
*/
 
包含选择器
 
包含选择器 (后代选择器)
父级 子级 {
 
}
#box span {}找到box中包含的所有span标签
1. 层级数目不要过多 一般不超过三层
2. 子级是id话,一般不用包含选择器
包含选择器的优先级是其中用到的所有选择器的累加
id + class 比较 id
 
常用标签结构划分
列表
ul(unOrderList) 无序列表
ol(orderList) 有序列表
li ul或者ol的列表项
dl 定义列表
dt 定义列表的列表项
dd 对dt的展开说明,或描述扩展
 
<div>div</div> <!-- 块标签 -->
<span>span</span> <!-- 内嵌标签 -->
<a href="#">a链接</a> <!-- 内嵌标签 -->
<strong>strong</strong> <!-- 内嵌标签 -->
<em>em</em> <!-- 内嵌标签 -->
<h1>标题</h1><!-- 块标签 -->
<h2>标题</h2><!-- 块标签 -->
<h3>标题</h3><!-- 块标签 -->
<h4>标题</h4><!-- 块标签 -->
<h5>标题</h5><!-- 块标签 -->
<h6>标题</h6><!-- 块标签 -->
<p>段落</p> <!-- 块标签 -->
<ul> <!-- 块标签 -->
<li>无序列表</li> <!-- 块标签 -->
<li>无序列表</li>
</ul>
<ol> <!-- 块标签 -->
<li>有序列表</li>
<li>有序列表</li>
</ol>
<dl><!-- 块标签 -->
<dt>定义列表</dt> <!-- 块标签 -->
<dd>定义列表</dd> <!-- 块标签 -->
<dd>定义列表</dd>
</dl>
<section>板块</section> <!-- 块标签 -->
<header>头部</header> <!-- 块标签 -->
<footer>底部</footer> <!-- 块标签 -->
<article>文章 主体</article> <!-- 块标签 -->
<aside>附属信息</aside> <!-- 块标签 -->
<nav>导航</nav> <!-- 块标签 -->
<time>时间</time> <!-- 内嵌标签 -->
<mark>标记</mark> <!-- 内嵌标签 -->
 
<a href="#" title="我是一个连接呀">连接</a>
<img src="img/img.png" title="我是一张图片哟" alt="妙味课堂">
<!--
img 图片
src 图片地址
alt 替代文字 当图片加载不出来的时候的替代问题
img 只设置宽度或者只设置高度,img会等比缩放
title 提示
默认样式清除
 
body {
margin: 0;
font: 14px "宋体"; /* 初始整个页面的字体 和 字体大小,但是注意每个项目都不一致,要跟着设计走 */
}
h1,
h2,
h3,
h4,
h5,
h6,
p,
dl,
dd {
margin: 0;
/* font-weight: normal; */
}
strong {
/* font-weight: normal; */
}
em {
/* font-style: normal; */
}
ul,
ol {
list-style: none;
margin: 0;
padding: 0;
}
mark {
/* background: none; */
}
a {
text-decoration: none;
}
 
快和内嵌
 
块:(div)
1. 独占一行显示
2. 支持所有的样式
3. 不设置宽度,宽度撑满父级的空间
 
内嵌:(span)
1. 可以在一行显示
2. 不支持宽高,上下的margin,上下padding支持的也有问题
3. 代码换行会解析出一个空格(字体和字体大小,可以控制空格大小)
4. 宽度由内容撑开
 
内嵌块: (img)
1. 可以在一行显示
2. 支持宽高
3. 代码换行会解析出一个空格
4. 不设置宽度的时候,宽度由内容撑开
 
标签嵌套规则
 
1. a标签中 不能包含a标签
2. 内嵌标签中不能包含块标签
3. 部分块标签中 也不能再包含块标签: p, h1-h6, dt
4. 注意以下几种嵌套是固定的:
ul li
ul下只能包含li,li的父级也只能是ol或ul,当然li中可以随意放置
ol li
ol下只能包含li,li的父级也只能是ol或ul,当然li中可以随意放置
dl dt dd
dl下只能包含dt和dd,dt,dd的父级也只能是 dl,当然dd中可以随意放置
5. 一般建议,块和块并列,内嵌和内嵌并列
 
浮动和清浮动
 
float: 浮动
left
right
none
 
1. 在一行显示,父级的宽度放不下了,会自己折行
2. 支持宽高等样式
3. 不设置宽度的时候,宽度由内容撑开
4. 会按照我们指定的方向移动,碰到父级的边界或者前边的浮动元素停止
5. 元素浮动之后,上下margin不在叠加
6. 脱离文档流(标准流) -- 元素在页面不在占位置
文档流是文档中可显示对象在排列时所占用的位置。
 
清浮动方法
 
元素浮动之后,撑不开父级的高度,或者说父级包不住浮动了的子元素
 
清浮动:使浮动元素依然可以撑开父级的高度
 
1. 在浮动元素下边添加<div class="clearFix"></div>
.clearFix {
clear: both;
}
2. 在浮动元素下边添加 <br clear= "all"/>
clear: all / left / right;
 
3. 给浮动元素的父级加 class="clearFix"
.clearFix:after { content: ""; display: block;clear: both;}
 
元素浮动之后,如果父级的高度可以固定,就给父级设置高度,如果父级的高度需要内容撑开,就给父级清浮动
 
元素浮动之后,如果父级的高度可以固定,就给父级设置高度,如果父级的高度需要内容撑开,就给父级清浮动
 
元素浮动之后,如果父级的高度可以固定,就给父级设置高度,如果父级的高度需要内容撑开,就给父级清浮动
 
定位
 
 
position: relative;相对定位
1. 元素之间相对定位,不设置位置偏移,元素和之前不会有任何变化.
2. 元素移动之后,原始位置会被保留(不脱离文档流)
3. 根据元素原始的位置,来计算坐标
4. 提升层级
 
top/right/bottom/left 定位之后的 位置设置
不加定位的话,这些样式没有作用
 
position: absolute 绝对定位
1. 脱离文档流
2. 提升层级
3. 根据有定位的父级来计算自己的坐标,如果父级没有定位,就一级级向上找,如果所有的父级都没有定位,就根据document来计算自己的坐标.
4. 触发BFC
5. 使内嵌元素支持宽高
6. 不设置宽度的时候,宽度由内容撑开
 
position: fixed;固定定位
1. 脱离文档流
2. 提升层级
3. 把元素固定在可视区的某个位置上
4. 触发BFC
5. 使内嵌元素支持宽高
6. 不设置宽度的时候,宽度由内容撑开
 
层级:后一个元素的层级高于前一个元素的层级
z-index 层级
1. 只能加给定位元素
2. 数值越大层级越高
3. 在同级元素之间比较层级
 
BFC作用
BFC(block formatting context,中文常译为块级格式化上下文)是 W3C CSS 
2.1 规范中的一个概念,它决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用。 
在进行盒子元素布局的时候,BFC提供了一个环境,在这个环境中按照一定规则进行布局不会影响到其它环境中的布局。比如浮动元素会形成BFC,浮动元素内部子元素的主要受该浮动元素影响,两个浮动元素之间是互不影响的。 
也就是说,如果一个元素符合了成为BFC的条件,该元素内部元素的布局和定位就和外部元素互不影响(除非内部的盒子建立了新的 BFC),是一个隔离了的独立容器。 
在 CSS3 中,BFC 叫做 Flow Root。
 
文档流(标准流):在文档中,元素默认从左上角开始,块元素一个一个向下排列,每个元素的左侧默认 都会和父级的左侧接触,顶部紧靠着父级的顶部或上一个元素的底部。每个元素都需要占有对应的区域大小。
脱离文档流:不在文档中占有位置。
 
BFC:(block formatting context 块级格式化上下文),它决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用
 
BFC作用:
1. 包含浮动元素
2. 阻止margin向外传递
3. 不被浮动元素覆盖
 
BFC触发条件:
1) float的值不为none; 
2) overflow的值不为visible; 
3) display的值为 table-cell、table-caption和inline-block之一; 
4) position的值不为 static或 relative中的任何一个;

文章评论

代码女神横空出世
代码女神横空出世
Web开发者需具备的8个好习惯
Web开发者需具备的8个好习惯
程序员应该关注的一些事儿
程序员应该关注的一些事儿
不懂技术不要对懂技术的人说这很容易实现
不懂技术不要对懂技术的人说这很容易实现
每天工作4小时的程序员
每天工作4小时的程序员
老程序员的下场
老程序员的下场
Java程序员必看电影
Java程序员必看电影
那些争议最大的编程观点
那些争议最大的编程观点
亲爱的项目经理,我恨你
亲爱的项目经理,我恨你
编程语言是女人
编程语言是女人
Google伦敦新总部 犹如星级庄园
Google伦敦新总部 犹如星级庄园
为什么程序员都是夜猫子
为什么程序员都是夜猫子
总结2014中国互联网十大段子
总结2014中国互联网十大段子
我是如何打败拖延症的
我是如何打败拖延症的
当下全球最炙手可热的八位少年创业者
当下全球最炙手可热的八位少年创业者
老美怎么看待阿里赴美上市
老美怎么看待阿里赴美上市
60个开发者不容错过的免费资源库
60个开发者不容错过的免费资源库
一个程序员的时间管理
一个程序员的时间管理
我的丈夫是个程序员
我的丈夫是个程序员
程序员的鄙视链
程序员的鄙视链
 程序员的样子
程序员的样子
旅行,写作,编程
旅行,写作,编程
聊聊HTTPS和SSL/TLS协议
聊聊HTTPS和SSL/TLS协议
鲜为人知的编程真相
鲜为人知的编程真相
做程序猿的老婆应该注意的一些事情
做程序猿的老婆应该注意的一些事情
什么才是优秀的用户界面设计
什么才是优秀的用户界面设计
程序猿的崛起——Growth Hacker
程序猿的崛起——Growth Hacker
我跳槽是因为他们的显示器更大
我跳槽是因为他们的显示器更大
看13位CEO、创始人和高管如何提高工作效率
看13位CEO、创始人和高管如何提高工作效率
“肮脏的”IT工作排行榜
“肮脏的”IT工作排行榜
初级 vs 高级开发者 哪个性价比更高?
初级 vs 高级开发者 哪个性价比更高?
2013年中国软件开发者薪资调查报告
2013年中国软件开发者薪资调查报告
Java 与 .NET 的平台发展之争
Java 与 .NET 的平台发展之争
程序员眼里IE浏览器是什么样的
程序员眼里IE浏览器是什么样的
10个调试和排错的小建议
10个调试和排错的小建议
Web开发人员为什么越来越懒了?
Web开发人员为什么越来越懒了?
10个帮程序员减压放松的网站
10个帮程序员减压放松的网站
为啥Android手机总会越用越慢?
为啥Android手机总会越用越慢?
写给自己也写给你 自己到底该何去何从
写给自己也写给你 自己到底该何去何从
程序员必看的十大电影
程序员必看的十大电影
如何区分一个程序员是“老手“还是“新手“?
如何区分一个程序员是“老手“还是“新手“?
2013年美国开发者薪资调查报告
2013年美国开发者薪资调查报告
如何成为一名黑客
如何成为一名黑客
要嫁就嫁程序猿—钱多话少死的早
要嫁就嫁程序猿—钱多话少死的早
程序员和编码员之间的区别
程序员和编码员之间的区别
中美印日四国程序员比较
中美印日四国程序员比较
程序员都该阅读的书
程序员都该阅读的书
“懒”出效率是程序员的美德
“懒”出效率是程序员的美德
那些性感的让人尖叫的程序员
那些性感的让人尖叫的程序员
软件开发程序错误异常ExceptionCopyright © 2009-2015 MyException 版权所有