-块状元素和内联元素
-盒子模型
-CSS控制页面方法
-CSS选择器
-文本流(文档流)
-命名方法及规则
一、块状元素与内联元素
块状元素(block element)一般是其他元素的容器元素,块元素一般都从新行开始(非常霸道的独自占用一行),它可以容纳文本、内联元素和其他元素,通过width和height属性可以设置其大小,常见的块状元素如段落p
有种特殊的情况:from标签只容纳块状元素
常见的块状元素有:div p table h1-h6 ul ol li dt dl dd center form
内联元素(inline element),不会独占一行,width与height不起作用,可以包含内联元素和文本
常见的内联元素有:a span
问题:多个块状元素真的不能在一行吗?内联元素是否真的无法设置高度和宽度?
多个块状元素可以在一行,使用float:left/float:right浮动就可以了
内联元素也可以设置高度和宽度,有两种方法:一是设置浮动,float:left;二是将内联元素设置为块状元素display:block]
二、盒子模型
理解四要素
内容(content)
边框(border)
内边距(padding)
外边距(margin)
问题:盒子模型宽度高度如何计算,有边框的时候如何计算?
<div style="width:200px; height:200px;padding:50px; border:10px #00 solid;">I</div>
<!-- 实际宽度为200+50+50+10+10 高度为200+50+50+10+10-->
内边距的用法:是在不改版盒子的大小,定义盒子内元素的位置
怎么样使的两个盒子平行,一使用margin和浮动float:left(水平相加,垂直设置一个)
三、CSS控制页面的方法
四种页面控制样式
-行内式 写在标签里面
-内联式 写在页面头部的style标签中
-链接式 使用link方式,强烈建议,这里实现了样式与结构的分离
-导入式 可以抛弃了(针对老的浏览器)
优先级
-就近原则
-理论上:行内、内联、链接、导入
-实际上:内联、链接和导入在同一个文件的头部,谁与相应的代码近谁的优先级就高
四、CSS选择器
常用选择器
-标签选择器(div、p)
-ID选择器(#)
-类选择器(.)
-通用选择器(*) 重置所有的标签,主要是重置内外边距(每个浏览器内外边距的设置是不一样的)
-伪类选择器(:link :visited :hover :active)
优先级
-ID->类->标签->通用
需要了解并掌握
-选择器集体声明
-选择器嵌套
这里需要区分指定选择器和嵌套选择器
p.content 指定选择器
边距 margin:顺时针 上右下左
边框 border:颜色 大小 框的类型 border:10px #000 solid
border-width:10px
border-color:#000
border-style:solid
margin:0 auto; auto的意思是让浏览器自己计算左右边距,IE6也是可以执行的
上面是css的五种主要缩写方式的两种
(1)色彩 #RRGGBB=#RGB #336699=369
(2)padding,margin 上右下左 10px 10px 10px 10px => 10px 10px =>10px
10px 20px 10px 20px => 10px 20px
10px 20px 30px => 10px 20px 30px 20px
(3)边框 border:#000 1px solid
边框的宽度 上右下左 border-width:1px 2px =>1px 2px 1px 2px
(4)background缩写
background:背景图片 背景色 平铺类型 水平定位 垂直定位
background: url(test.png) #ccc no-repeat 10px 5px
定义盒子背景色为#ccc,背景图片为test.png 不平铺且距离盒子左侧10像素,距离上侧为5像素
(5)文本(font)的缩写
font:样式 粗体 字体大小/行距 字体
font:italic bold 15px/1.5 Verdana,Geneva, sans-serif.