码迷,mamicode.com
首页 > Web开发 > 详细

初入web知识点(四)

时间:2016-09-11 18:50:24      阅读:174      评论:0      收藏:0      [点我收藏+]

标签:

◆CSS选择器(补充)
①伪类选择器 格式: 元素:属性{}
允许我们格式化不在文档树中的一些条目。向某些元素添加特殊样式
锚伪类
不同方式格式化超级链接<a>元素的四种不同状态;
* a:link 是用在未访问过的链接的选择器
* a:visited 是用在以访问过的链接的选择器
* a:hover 是用在鼠标光标放在其上的链接选择器
* a:active 是用在获得焦点(比如被点击)的链接上的选择器
TIP:在CSS定义中,a:hover必须置于a:link和a:visited之后才有效;a:active必须置于a:hover之后才有效。伪类名称对大小写不敏感。
因为伪类选择器的具体性,使用时有冲突则使用在样式表中最后出现的选择器。记忆 a love or hate
②伪元素选择器 格式: 选择器:属性{}
允许我们格式化文档树中没有的一些信息。
在伪元素选择器中被所有浏览器支持的有两种:
* :first-line 用于一个元素的第一行的选择器
用于first-line的属性: font color background word-spacing letter-decoration vertilal-align text-transform line-height clear
* :first-letter 用于一个元素的第一个字母的选择器
用于first-letter的属性: font color background margin padding border word-spacing text-decoration vertilal-align(仅限float为none时) text-transform line-height float clear
* :before/after 在元素之前/后添加内容

◆CSS盒模型
包含:element元素 padding内边距 border边框 margin外边距
* 内边距padding
padding是简写属性 设置值时不能为负值 值的顺序是top上→right右→bottom下→left左
设置时如不全部定义则 top的值影响right和bottom right的值影响left
* 边框border
属性:style width color(默认值为透明色transparent,可以利用这一点来做三角形)
border足够粗 div足够小 并且其他三遍为透明色时transparent即可做出三角形
*外边距margin
margin也是简写属性 除了设置值时可以为负值外,其余的与padding一样
外边距合并时,只显示值最大的值
我们可以利用margin{0 auto}来实现元素的水平居中
◆CSS定位positioning
在CSS中一切皆为框
* display属性:none(相当于元素完全不存在,不占用文档的空间) block(显示为块级元素,自动带有换行符) inline(显示为内联元素,没有换行符) inline-block(行内块级元素,建议少用)
* CSS定位机制;普通流(标准流) 浮动 绝对定位
* CSS定位属性: 有四种不同的定位类型
①static 静态定位 也就是没有定位
②relative 相对定位(偏移) 相对于元素原来的位置进行偏移,其位置不会被占用{position:relative;top:50px;left:50px}
③absolute 绝对定位(脱离文档流)
《1》元素框从文档流中完全删除,原位置被占据
《2》相对于包含块进行定位,可以是文档中的另一个元素或初始包含块。绝对定位的元素是相对于最近的祖先元素,没有时才是相对于最初的包含块
《3》生成一个块级框,不论原来是块级元素还是行内元素
④fixed固定定位 (脱离文档流) {float:left;position:fixed;top:300px;left:0}多用于来实现侧边栏导航
* CSS浮动float:浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样。它的属性:left right none
* CSS clear 实现图像的左右不出现浮动 属性:left right both

 

初入web知识点(四)

标签:

原文地址:http://www.cnblogs.com/plainsailing/p/5862274.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!