***********************回顾一下*****************************
---行级布局----
1. div是块级元素,独占一行空间,宽度默认沾满父级元素
2. div的高度由子级元素来决定
---列级布局---
1. 浮动元素与兄弟元素之间的关系
1)a浮动,b不浮动,b钻到a下面
2)a不浮动,b浮动,b的上边界和a的下边界重叠
3)a浮动,b浮动,a,b一行显示,当行内放不下的时候b另起一行
2. 浮动元素的边距
1) a,b不浮动,a设定外边距-下,b设定外边距-上,共用(谁大用谁的)
2) a,b浮动,a设定外边距-右,b设定外边距-左,不共用(两者和是他们的边距)
margin上下值在行布局时共用,浮动后不再共用
3. 浮动元素与父级元素之间的关系
1) 层级关系
<div class="outer">
<div class="inner"></div>
<div class="inner"></div>
</div>
<div class="outer2">
</div>
2) 高度宽度的问题?
1.高度应该由子级元素来指定
当子级浮动的时候,无法撑开父级的高度。只能由父级自己指定(overflow:hidden)
2.宽度应该由父级元素来指定
**********************************************************
CSS
1, 基本布局
布局顺序
由上至下,由左至右,由内至外
块居中
1)不能浮动
2)要居中的块必须小于父级元素
3)利用margin-left margin-right的自动值来居中
布局级别:
1)行布局级(横排)
2)列布局级(浮动布局)
1.设置浮动 float
任何元素都可以浮动,可以改变普通文档流的排列方式,可以使得块元素在同一行中排列,使我们的布局更加方便,浮动是脱离文档流的,也就是其他元素视而不见。
浮动何时停止?
1. 当遇到一个浮动元素后
2. 当遇到父级元素后
多个盒子都浮动后,就产生了块级元素水平排列的效果
多个浮动元素不会相互覆盖
若包含的容器太窄,无法容纳水平排列的多个浮动元素,那么最后的浮动盒子会向下移动,但如果浮动元素的高度不同,那么它们向下移动时可能会被卡住。
float:
left 元素向左浮动。
right 元素向右浮动。
none 默认值。元素不浮动,并会显示在其在文本中出现的位置。
2. 清理浮动
clear
left 在左侧不允许浮动元素
right 在右侧不允许浮动元素
both 在左右两侧均不允许浮动元素
3. 最佳实践:
1) 假如某个div元素A是浮动的,如果A元素上一个元素也是浮动的,那么A元素会跟随在上一个元素的后边(如果一行放不下这两个元素,那么A元素会被挤到下一行);如果A元素上一个元素是标准流中的元素,那么A的相对垂直位置不会改变,也就是说A的顶部总是和上一个元素的底部对齐。div的顺序是HTML代码中div的顺序决定的
2) 高度尽量给子级,父级高度自动
3) 子级浮动,父级未浮动,父级高度无法依赖子级,这时父级需要自己添加高度(overflow:hidden)。
4) margin上下值在行布局时共用,浮动后不再共用
5) clear 清除浮动对象对当前对象的影响
PS切片
裁切工具->切片工具
2,CSS常见的样式属性和值 (dreamweaver)
1)CSS 尺寸属性
height 设置元素高度。
width 设置元素的宽度。
max-height 设置元素的最大高度。
max-width 设置元素的最大宽度。
min-height 设置元素的最小高度。
min-width 设置元素的最小宽度。
2) 字体属性
font-family字体族科
宋体 SimSun 黑体 SimHei
微软雅黑 Microsoft YaHei
微软正黑体 Microsoft JhengHei
新宋体 NSimSun
新细明体 PMingLiU
细明体 MingLiU
标楷体 DFKai-SB
仿宋 FangSong
仿宋_GB2312 FangSong_GB2312
楷体_GB2312 KaiTi_GB2312
font-size 字体大小
font-style 字体风格
normal 正常;italic 斜体;oblique 倾斜
font-weight字体加粗
normal 正常;bold 粗体;bolder 更粗;lighter 更细
text-decoration 规定添加到文本的修饰 :
none 默认。定义标准的文本。
underline 定义文本下的一条线。
overline 定义文本上的一条线。
line-through定义穿过文本下的一条线。
blink 定义闪烁的文本。
3) 颜色
color 设定文本的颜色
opcity 设置透明度
所有浏览器都支持 opacity 属性。
注释:IE8 以及更早的版本支持替代的 filter 属性。
例如:filter:Alpha(opacity=50)。
一般两个属性一起写,保证兼容性
opacity:0.5;
filter:Alpha(opacity=50)
4) 背景
设置元素的背景颜色。background-color:#CCC;
background-image
设置元素的背景图像。
url(bgimage.gif);
background-repeat
设置是否及如何重复背景图像。
repeat 默认。背景图像将在垂直方向和水平方向重复。
repeat-x 背景图像将在水平方向重复。
repeat-y 背景图像将在垂直方向重复。
no-repeat 背景图像将仅显示一次。
inherit 规定应该从父元素继承 background-repeat 属性的设置。
background-attachment
设置背景图像是否固定或者随着页面的其余部分滚动。
fixed 固定
scroll 滚动
background-position
设置背景图像的开始位置。这个属性设置背景原图像(由 background-image 定义)的位置, 背景图像如果要重复,将从这一点开始。您需要把 background-attachment属性设置为 "fixed",才能保证该属性在 Firefox 和 Opera 中正常工作。
横向关键字: left center right
纵向关键字: top center bottom
百分比:
左上角是 0% 0%。右下角是 100% 100%。
background
简写属性在一个声明中设置所有的背景属性。如果不设置其中的某个值,也不会出问题,比如 background:#ff0000 url('smiley.gif'); 也是允许的。
图片精灵技术:
也叫CSS背景图片精灵技术,是将多张背景图片放到一个图片中,通过定位的方式来获取响应位置的图片,使得一个图片一次载入,多次使用,使得页面下载速度加快
5) 边框属性
border-style 设置4个边框的样式
dotted 定义点状边框。在大多数浏览器中呈现为实线。
solid 定义实线。
double 定义双线。
none 定义无边框
...
如果4个值都给定了,分别应用于上,右,下;
左如果给定1个值,应用于各边;
如果给定2个值,第一个值应用于上下边,第二个值应用于左右边
border-width 设置4个边框的宽度
值为关键字或者长度 medium,thin,thick
border-color 设置边框颜色
border 在一个声明设置所有的边框属性。
border:1px solid #ff0000
6) 鼠标光标属性
cursor 属性规定要显示的光标的类型(形状)。
none 无
auto 默认。浏览器设置的光标。
pointer 光标呈现为指示链接的指针(一只手)
wait 此光标指示程序正忙(通常是一只表或沙漏)。
help 此光标指示可用的帮助(通常是一个问号或一个气球)。
7) 列表属性
list-style 在一个声明中设置所有的列表属性。
list-style: square inside url('/i/eg_arrow.gif')
list-style-image 将图象设置为列表项标记。
list-style-image:url("/i/arrow.gif");
list-style-position 设置列表项标记的放置位置。
inside 列表项目标记放置在文本以内,且环绕文本根据标记对齐。
outside 默认值。保持标记位于文本的左侧。列表项目标
记放置在文本以外,且环绕文本不根据标记对齐。
list-style-type 设置列表项标记的类型。
none 无标记。
disc 默认。标记是实心圆。
circle 标记是空心圆。
square 标记是实心方块。
decimal 标记是数字。
ower-roman 小写罗马数字(i, ii, iii, iv, v, 等。)
upper-roman 大写罗马数字(I, II, III, IV, V, 等。)
lower-alpha 小写英文字母The marker is lower-alpha (a, b, c, d, e, 等。)
upper-alpha 大写英文字母The marker is upper-alpha (A, B, C, D, E, 等。)
lower-latin 小写拉丁字母(a, b, c, d, e, 等。)
upper-latin 大写拉丁字母(A, B, C, D, E, 等。)
8)表格
优先级:
td,th-->tr-->tbody,thead,tfoot-->table
color,font-size
text-align 文字对齐
background
border 边框,只能用于table,th,td
margin 间距,只能用于table,caption
padding 内间距,只能用于th,td
width 宽,只能用于table,td,th
height 高,只能用于table,td,th、可以用于tr并且优先级高于td
border-collapse:
separate 默认值,分开
collapse 边框合并
inherit 从父元素中继承该属性
table-layout 宽度类型:
fixed 固定宽度
auto 自动宽度
caption-side 标题位置:
top/left/right/botton
3. div+css
div+css是一种网页的布局方法。
标签div span无特殊含义,配合css才具有特殊的样式
网页就是由许多个盒子通过不同的排列方式堆积而成,网页上每个元素都被浏览器看成是一个矩形的盒子,这个盒子由元素的内容,填充,边框,边界组成。默认盒子边框无,背景色透明,默认看不到盒子
1) 盒子模型
margin 外边距,定义区块外边界与上级元素距离的属性,值为长度
padding 内边距(填充),是设置区块的内边距的属性,是边框和元素内容之间的间隔距离
border 边框,在一个声明设置所有的边框属性。
width 盒子的宽度
height 盒子的高度
内容 盒子里面所包含的元素和内容
属性值:
1个:上下左右都是该值
2个:前者表示上下的值,后者表示左右的值
3个:前者表示上边的值,中间表示左右的值,后者表示下边的值
4个:上右下左,顺时针排序
2) 不同浏览器解析盒子模型的差异:
IE5盒子 width = 内容 + border + padding
盒子占据的宽度 = margin*2+width
盒子占据的高度 = margin*2+height
盒子实际的宽度 = width
盒子实际的高度 = height
W3C盒子 width = 内容
盒子占据的宽度 = margin*2+border*2+padding*2+width
盒子占据的高度 = margin*2+border*2+padding*2+height
盒子实际的宽度 = border*2+padding*2+width
盒子实际的高度 = border*2+padding*2+height
3) 设置浏览器去遵循w3c标准
只需要在网页的顶部加上DOCTYPE声明即可
!important的使用
p{
color:red !important;
color:blue;
}
当不加!important;的时候,后者覆盖前者,当加上之后说明第一个,样式优先级更高,采用前者,但是Ie6不支持!important;
4)其他属性
border-width 边框高度
border-color 边框颜色
border-style 边框样式
none 无样式
dotted 点线
dashed 虚线
solid 实线
double 双线
groove 槽线
ridge 脊线
inset 内凹
outset 外凸
5)关于填充和边框的常见问题
1. 大部分的html元素的盒子属性(margin,padding)默认值为0,有少数html元素的(marigin,padding不为0)例如:body,p,ul,li,form等标签,有时需要将其先设置为0
2. 相邻两个兄弟元素的外边框会发生合并,一般布局会设定他们的外边距
3. 如果没有设置父级元素的内边距或边框,那么它的子元素的边界会和其合并。
4. 设置一个块元素居中: marigin:0 auto;
5. margin可以设置负值,padding不可以设置
6. 行内元素的margin值,只有左右值,没有上下值
6)行内元素与块级元素
行内元素
行内元素不可以设置宽(width)和高(height【但是可以通过line-height设置】),但可以与其他行内元素位于同一行,行内元素内一般不可以包含块级元素。行内元素的高度一般由元素内部的字体大小决定,宽度由内容的长度控制。常见的行内元素有:em,font,b,span,a,strong
块级元素
块状元素排斥其他元素与其位于同一行,可以设定元素的宽(width)和高(height),块级元素一般是其他元素的容器,可容纳块级元素和行内元素。常见的块级元素有div, p ,h1~h6等
IE6/7及IE8混杂模式中,text- align:center可以使块级元素也居中对齐。其他浏览器中,text-align:center仅作用于行内内容上。
改变元素类型:
display
可以将一个行级元素转换为块级元素,但是这种转换并不能改变元素本质,转换的只是CSS的盒子的外观
需要转换盒子类型的情况:
水平的列表菜单,不断行的标题,隐藏元素
none 隐藏元素。不会被显示,不占空间
block 块级元素。独占一行空间
inline 默认。此元素会被显示为内联元素,元素前后没有换行符。
inline-block 兼有块级和行级元素特性,在行内显示但是可以设定宽高
list-item 此元素会作为列表显示。
table 此元素会作为块级表格来显示(类似 <table>),表格前后带有换行符。
inline-table 此元素会作为内联表格来显示(类似 <table>),表格前后没有换行符。
table-row-group 此元素会作为一个或多个行的分组来显示(类似 <tbody>)。
table-header-group 此元素会作为一个或多个行的分组来显示(类似 <thead>)。
table-footer-group 此元素会作为一个或多个行的分组来显示(类似 <tfoot>)。
table-row 此元素会作为一个表格行显示(类似 <tr>)。
table-column 此元素会作为一个单元格列显示(类似 <col>)
table-cell 此元素会作为一个表格单元格显示(类似 <td> 和 <th>)
table-caption 此元素会作为一个表格标题显示(类似 <caption>)
inherit 规定应该从父元素继承 display 属性的值。
float,position
应用了浮动和绝对定位的元素,变成了块级元素,因此display属性一般被忽略
如果元素应用了display:none,该元素(以及子元素)被隐藏起来,对其再使用float,position将不再有意义
4.和页面布局相关的CSS属性
1)定位属性:
绝对定位 absolute:
是元素完全脱离文档流,页面中的其他元素视它不存在,绝对定位元素不会影响到其他元素。绝对定位是参照距离他最近的父级有定位属性的元素,如果父级元素没有定位属性,则会参照文档
相对定位 relative:
是参照元素原来的位置进行移动,元素原来的空间位不变,元素在移动时会覆盖其他元素。
固定定位 fixed:
将元素固定在窗口中的某个位置,绝对定位是相对于元素的,固定定位是相对于窗口的,会随着窗口的一定而移动。在低版本IE中不支持该属性
默认定位 static:
默认属性,指定了元素按照常规的文档流进行定位,静态定位元素不允许使用top,left和类似其他属性定位。position的值为static为非定位元素,为其他值时候为定位元素,因为static元素不能自定义元素的位置,而其他可以
top: 层距离页面顶点纵坐标的距离
left: 层距离页面定点横坐标的距离
text-align: 横向排列 left right center
line-height:行高,内容都在行的中间,可以使用这个属性设置内容垂直居中
z-index : 第三个维度 ,值高的元素会覆盖值低的元素。该属性可以使得元素脱离文档流,可能会覆盖其他元素。
float: 设置区块浮动属性
clear: 指定一个元素是否允许有元素漂浮在它的旁边
4,盒子模型的浮动
5,css规范
1)overflow: 设置层内的内容超出层所能容纳的范围处理方式。
visible :默认值,如果需要,内容可以溢出并绘制在元素的边框的外面
hidden :裁剪掉和隐藏溢出的内容。
scroll :元素一直显示水平和垂直滚动条,如果内容超出元素尺寸,允许用户通过滚动来查看额外的内容。
auto :滚动条只在内容超出元素尺寸时显示,而非一直显示。
2)display : 属性设置元素如何显示。
none 此元素不会被显示【浏览器会认为这个元素不存在】
block 此元素将显示为块级元素,此元素前后会带有换行符。
inline 默认。此元素会被显示为行内元素,元素前后没有换行符。
inline-block 行内块级元素
table 此元素会作为块级表格来显示(类似 <table>),表格前后带有换行符。
table-row 此元素会作为一个表格行显示(类似 <tr>)。
table-cell此元素会作为一个表格单元格显示(类似 <td> 和 <th>)
3)visiblity: 设定元素是否可见
visible 默认。元素框是可见的。
hidden 元素框不可见,但仍然影响布局【浏览器认为该元素存在,但是不显示】
4)具有padding,margin值的元素
1. h1~h6
2. dl,dd
3. ol,ul
4. form
在Chrome,Firefox,Safari,Opera,IE8中没有默认的margin,padding。但是在IE7以及以下版本有默认margin:19px 0px
表单控件一般都有默认的padding和marigin
5. p
6. body
5)IE浏览器需要注意的兼容性问题
1. IE6双倍边距(?)
在一排浮动的元素中,如果一个元素设置了margin-left在ie浏览器中就会显示第一个块有双倍的边距。
解决方案:
1)给第一个子元素设置display:inline
2)利用CSS hack单独设置在ie6下的左边距
2. IE浏览器中会自动给添加了连接的图片加边框
6)页面布局中规范
页面布局中所有的块级元素必须要设置宽高
文字和图片在一行布局时可以统一采用块元素的方式进行布局
标签不能随意嵌套
控制页面样式时,尽量少用标签选择器
图片必须设置宽高属性
7)CSS命名规范
通用基类:
base.css
或者
base.atom.css
base.reset.css
base.layout.css
公共模型
model.css
或者
model.box.css
model.list.css
model.form.css
model.content.css
页面样式
page.ccss
或者
page.index.css
整体结构
头 head/header
内容 content/container
导航 nav
主导航 mainnav
边导航 sidebar
左右导航 leftsidebar.rightsidebar
顶导航 topnav
子菜单 submenu
栏目 column
左右中 left,right,center
页面主体main
尾 footer/foot
侧栏 sidebar
8)属性书写顺序
定位属性(比如:display, position, float, clear, visibility, table-layout等)
自身属性(比如:width, height, margin, padding, border等)
文本属性(比如:font, line-height, text-align, text-indent, vertical-align等)
其他属性(比如:color, background, opacity, cursor,content, list-style, quotes等)
---行级布局----
1. div是块级元素,独占一行空间,宽度默认沾满父级元素
2. div的高度由子级元素来决定
---列级布局---
1. 浮动元素与兄弟元素之间的关系
1)a浮动,b不浮动,b钻到a下面
2)a不浮动,b浮动,b的上边界和a的下边界重叠
3)a浮动,b浮动,a,b一行显示,当行内放不下的时候b另起一行
2. 浮动元素的边距
1) a,b不浮动,a设定外边距-下,b设定外边距-上,共用(谁大用谁的)
2) a,b浮动,a设定外边距-右,b设定外边距-左,不共用(两者和是他们的边距)
margin上下值在行布局时共用,浮动后不再共用
3. 浮动元素与父级元素之间的关系
1) 层级关系
<div class="outer">
<div class="inner"></div>
<div class="inner"></div>
</div>
<div class="outer2">
</div>
2) 高度宽度的问题?
1.高度应该由子级元素来指定
当子级浮动的时候,无法撑开父级的高度。只能由父级自己指定(overflow:hidden)
2.宽度应该由父级元素来指定
**********************************************************
CSS
1, 基本布局
布局顺序
由上至下,由左至右,由内至外
块居中
1)不能浮动
2)要居中的块必须小于父级元素
3)利用margin-left margin-right的自动值来居中
布局级别:
1)行布局级(横排)
2)列布局级(浮动布局)
1.设置浮动 float
任何元素都可以浮动,可以改变普通文档流的排列方式,可以使得块元素在同一行中排列,使我们的布局更加方便,浮动是脱离文档流的,也就是其他元素视而不见。
浮动何时停止?
1. 当遇到一个浮动元素后
2. 当遇到父级元素后
多个盒子都浮动后,就产生了块级元素水平排列的效果
多个浮动元素不会相互覆盖
若包含的容器太窄,无法容纳水平排列的多个浮动元素,那么最后的浮动盒子会向下移动,但如果浮动元素的高度不同,那么它们向下移动时可能会被卡住。
float:
left 元素向左浮动。
right 元素向右浮动。
none 默认值。元素不浮动,并会显示在其在文本中出现的位置。
2. 清理浮动
clear
left 在左侧不允许浮动元素
right 在右侧不允许浮动元素
both 在左右两侧均不允许浮动元素
3. 最佳实践:
1) 假如某个div元素A是浮动的,如果A元素上一个元素也是浮动的,那么A元素会跟随在上一个元素的后边(如果一行放不下这两个元素,那么A元素会被挤到下一行);如果A元素上一个元素是标准流中的元素,那么A的相对垂直位置不会改变,也就是说A的顶部总是和上一个元素的底部对齐。div的顺序是HTML代码中div的顺序决定的
2) 高度尽量给子级,父级高度自动
3) 子级浮动,父级未浮动,父级高度无法依赖子级,这时父级需要自己添加高度(overflow:hidden)。
4) margin上下值在行布局时共用,浮动后不再共用
5) clear 清除浮动对象对当前对象的影响
PS切片
裁切工具->切片工具
2,CSS常见的样式属性和值 (dreamweaver)
1)CSS 尺寸属性
height 设置元素高度。
width 设置元素的宽度。
max-height 设置元素的最大高度。
max-width 设置元素的最大宽度。
min-height 设置元素的最小高度。
min-width 设置元素的最小宽度。
2) 字体属性
font-family字体族科
宋体 SimSun 黑体 SimHei
微软雅黑 Microsoft YaHei
微软正黑体 Microsoft JhengHei
新宋体 NSimSun
新细明体 PMingLiU
细明体 MingLiU
标楷体 DFKai-SB
仿宋 FangSong
仿宋_GB2312 FangSong_GB2312
楷体_GB2312 KaiTi_GB2312
font-size 字体大小
font-style 字体风格
normal 正常;italic 斜体;oblique 倾斜
font-weight字体加粗
normal 正常;bold 粗体;bolder 更粗;lighter 更细
text-decoration 规定添加到文本的修饰 :
none 默认。定义标准的文本。
underline 定义文本下的一条线。
overline 定义文本上的一条线。
line-through定义穿过文本下的一条线。
blink 定义闪烁的文本。
3) 颜色
color 设定文本的颜色
opcity 设置透明度
所有浏览器都支持 opacity 属性。
注释:IE8 以及更早的版本支持替代的 filter 属性。
例如:filter:Alpha(opacity=50)。
一般两个属性一起写,保证兼容性
opacity:0.5;
filter:Alpha(opacity=50)
4) 背景
设置元素的背景颜色。background-color:#CCC;
background-image
设置元素的背景图像。
url(bgimage.gif);
background-repeat
设置是否及如何重复背景图像。
repeat 默认。背景图像将在垂直方向和水平方向重复。
repeat-x 背景图像将在水平方向重复。
repeat-y 背景图像将在垂直方向重复。
no-repeat 背景图像将仅显示一次。
inherit 规定应该从父元素继承 background-repeat 属性的设置。
background-attachment
设置背景图像是否固定或者随着页面的其余部分滚动。
fixed 固定
scroll 滚动
background-position
设置背景图像的开始位置。这个属性设置背景原图像(由 background-image 定义)的位置, 背景图像如果要重复,将从这一点开始。您需要把 background-attachment属性设置为 "fixed",才能保证该属性在 Firefox 和 Opera 中正常工作。
横向关键字: left center right
纵向关键字: top center bottom
百分比:
左上角是 0% 0%。右下角是 100% 100%。
background
简写属性在一个声明中设置所有的背景属性。如果不设置其中的某个值,也不会出问题,比如 background:#ff0000 url('smiley.gif'); 也是允许的。
图片精灵技术:
也叫CSS背景图片精灵技术,是将多张背景图片放到一个图片中,通过定位的方式来获取响应位置的图片,使得一个图片一次载入,多次使用,使得页面下载速度加快
5) 边框属性
border-style 设置4个边框的样式
dotted 定义点状边框。在大多数浏览器中呈现为实线。
solid 定义实线。
double 定义双线。
none 定义无边框
...
如果4个值都给定了,分别应用于上,右,下;
左如果给定1个值,应用于各边;
如果给定2个值,第一个值应用于上下边,第二个值应用于左右边
border-width 设置4个边框的宽度
值为关键字或者长度 medium,thin,thick
border-color 设置边框颜色
border 在一个声明设置所有的边框属性。
border:1px solid #ff0000
6) 鼠标光标属性
cursor 属性规定要显示的光标的类型(形状)。
none 无
auto 默认。浏览器设置的光标。
pointer 光标呈现为指示链接的指针(一只手)
wait 此光标指示程序正忙(通常是一只表或沙漏)。
help 此光标指示可用的帮助(通常是一个问号或一个气球)。
7) 列表属性
list-style 在一个声明中设置所有的列表属性。
list-style: square inside url('/i/eg_arrow.gif')
list-style-image 将图象设置为列表项标记。
list-style-image:url("/i/arrow.gif");
list-style-position 设置列表项标记的放置位置。
inside 列表项目标记放置在文本以内,且环绕文本根据标记对齐。
outside 默认值。保持标记位于文本的左侧。列表项目标
记放置在文本以外,且环绕文本不根据标记对齐。
list-style-type 设置列表项标记的类型。
none 无标记。
disc 默认。标记是实心圆。
circle 标记是空心圆。
square 标记是实心方块。
decimal 标记是数字。
ower-roman 小写罗马数字(i, ii, iii, iv, v, 等。)
upper-roman 大写罗马数字(I, II, III, IV, V, 等。)
lower-alpha 小写英文字母The marker is lower-alpha (a, b, c, d, e, 等。)
upper-alpha 大写英文字母The marker is upper-alpha (A, B, C, D, E, 等。)
lower-latin 小写拉丁字母(a, b, c, d, e, 等。)
upper-latin 大写拉丁字母(A, B, C, D, E, 等。)
8)表格
优先级:
td,th-->tr-->tbody,thead,tfoot-->table
color,font-size
text-align 文字对齐
background
border 边框,只能用于table,th,td
margin 间距,只能用于table,caption
padding 内间距,只能用于th,td
width 宽,只能用于table,td,th
height 高,只能用于table,td,th、可以用于tr并且优先级高于td
border-collapse:
separate 默认值,分开
collapse 边框合并
inherit 从父元素中继承该属性
table-layout 宽度类型:
fixed 固定宽度
auto 自动宽度
caption-side 标题位置:
top/left/right/botton
3. div+css
div+css是一种网页的布局方法。
标签div span无特殊含义,配合css才具有特殊的样式
网页就是由许多个盒子通过不同的排列方式堆积而成,网页上每个元素都被浏览器看成是一个矩形的盒子,这个盒子由元素的内容,填充,边框,边界组成。默认盒子边框无,背景色透明,默认看不到盒子
1) 盒子模型
margin 外边距,定义区块外边界与上级元素距离的属性,值为长度
padding 内边距(填充),是设置区块的内边距的属性,是边框和元素内容之间的间隔距离
border 边框,在一个声明设置所有的边框属性。
width 盒子的宽度
height 盒子的高度
内容 盒子里面所包含的元素和内容
属性值:
1个:上下左右都是该值
2个:前者表示上下的值,后者表示左右的值
3个:前者表示上边的值,中间表示左右的值,后者表示下边的值
4个:上右下左,顺时针排序
2) 不同浏览器解析盒子模型的差异:
IE5盒子 width = 内容 + border + padding
盒子占据的宽度 = margin*2+width
盒子占据的高度 = margin*2+height
盒子实际的宽度 = width
盒子实际的高度 = height
W3C盒子 width = 内容
盒子占据的宽度 = margin*2+border*2+padding*2+width
盒子占据的高度 = margin*2+border*2+padding*2+height
盒子实际的宽度 = border*2+padding*2+width
盒子实际的高度 = border*2+padding*2+height
3) 设置浏览器去遵循w3c标准
只需要在网页的顶部加上DOCTYPE声明即可
!important的使用
p{
color:red !important;
color:blue;
}
当不加!important;的时候,后者覆盖前者,当加上之后说明第一个,样式优先级更高,采用前者,但是Ie6不支持!important;
4)其他属性
border-width 边框高度
border-color 边框颜色
border-style 边框样式
none 无样式
dotted 点线
dashed 虚线
solid 实线
double 双线
groove 槽线
ridge 脊线
inset 内凹
outset 外凸
5)关于填充和边框的常见问题
1. 大部分的html元素的盒子属性(margin,padding)默认值为0,有少数html元素的(marigin,padding不为0)例如:body,p,ul,li,form等标签,有时需要将其先设置为0
2. 相邻两个兄弟元素的外边框会发生合并,一般布局会设定他们的外边距
3. 如果没有设置父级元素的内边距或边框,那么它的子元素的边界会和其合并。
4. 设置一个块元素居中: marigin:0 auto;
5. margin可以设置负值,padding不可以设置
6. 行内元素的margin值,只有左右值,没有上下值
6)行内元素与块级元素
行内元素
行内元素不可以设置宽(width)和高(height【但是可以通过line-height设置】),但可以与其他行内元素位于同一行,行内元素内一般不可以包含块级元素。行内元素的高度一般由元素内部的字体大小决定,宽度由内容的长度控制。常见的行内元素有:em,font,b,span,a,strong
块级元素
块状元素排斥其他元素与其位于同一行,可以设定元素的宽(width)和高(height),块级元素一般是其他元素的容器,可容纳块级元素和行内元素。常见的块级元素有div, p ,h1~h6等
IE6/7及IE8混杂模式中,text- align:center可以使块级元素也居中对齐。其他浏览器中,text-align:center仅作用于行内内容上。
改变元素类型:
display
可以将一个行级元素转换为块级元素,但是这种转换并不能改变元素本质,转换的只是CSS的盒子的外观
需要转换盒子类型的情况:
水平的列表菜单,不断行的标题,隐藏元素
none 隐藏元素。不会被显示,不占空间
block 块级元素。独占一行空间
inline 默认。此元素会被显示为内联元素,元素前后没有换行符。
inline-block 兼有块级和行级元素特性,在行内显示但是可以设定宽高
list-item 此元素会作为列表显示。
table 此元素会作为块级表格来显示(类似 <table>),表格前后带有换行符。
inline-table 此元素会作为内联表格来显示(类似 <table>),表格前后没有换行符。
table-row-group 此元素会作为一个或多个行的分组来显示(类似 <tbody>)。
table-header-group 此元素会作为一个或多个行的分组来显示(类似 <thead>)。
table-footer-group 此元素会作为一个或多个行的分组来显示(类似 <tfoot>)。
table-row 此元素会作为一个表格行显示(类似 <tr>)。
table-column 此元素会作为一个单元格列显示(类似 <col>)
table-cell 此元素会作为一个表格单元格显示(类似 <td> 和 <th>)
table-caption 此元素会作为一个表格标题显示(类似 <caption>)
inherit 规定应该从父元素继承 display 属性的值。
float,position
应用了浮动和绝对定位的元素,变成了块级元素,因此display属性一般被忽略
如果元素应用了display:none,该元素(以及子元素)被隐藏起来,对其再使用float,position将不再有意义
4.和页面布局相关的CSS属性
1)定位属性:
绝对定位 absolute:
是元素完全脱离文档流,页面中的其他元素视它不存在,绝对定位元素不会影响到其他元素。绝对定位是参照距离他最近的父级有定位属性的元素,如果父级元素没有定位属性,则会参照文档
相对定位 relative:
是参照元素原来的位置进行移动,元素原来的空间位不变,元素在移动时会覆盖其他元素。
固定定位 fixed:
将元素固定在窗口中的某个位置,绝对定位是相对于元素的,固定定位是相对于窗口的,会随着窗口的一定而移动。在低版本IE中不支持该属性
默认定位 static:
默认属性,指定了元素按照常规的文档流进行定位,静态定位元素不允许使用top,left和类似其他属性定位。position的值为static为非定位元素,为其他值时候为定位元素,因为static元素不能自定义元素的位置,而其他可以
top: 层距离页面顶点纵坐标的距离
left: 层距离页面定点横坐标的距离
text-align: 横向排列 left right center
line-height:行高,内容都在行的中间,可以使用这个属性设置内容垂直居中
z-index : 第三个维度 ,值高的元素会覆盖值低的元素。该属性可以使得元素脱离文档流,可能会覆盖其他元素。
float: 设置区块浮动属性
clear: 指定一个元素是否允许有元素漂浮在它的旁边
4,盒子模型的浮动
5,css规范
1)overflow: 设置层内的内容超出层所能容纳的范围处理方式。
visible :默认值,如果需要,内容可以溢出并绘制在元素的边框的外面
hidden :裁剪掉和隐藏溢出的内容。
scroll :元素一直显示水平和垂直滚动条,如果内容超出元素尺寸,允许用户通过滚动来查看额外的内容。
auto :滚动条只在内容超出元素尺寸时显示,而非一直显示。
2)display : 属性设置元素如何显示。
none 此元素不会被显示【浏览器会认为这个元素不存在】
block 此元素将显示为块级元素,此元素前后会带有换行符。
inline 默认。此元素会被显示为行内元素,元素前后没有换行符。
inline-block 行内块级元素
table 此元素会作为块级表格来显示(类似 <table>),表格前后带有换行符。
table-row 此元素会作为一个表格行显示(类似 <tr>)。
table-cell此元素会作为一个表格单元格显示(类似 <td> 和 <th>)
3)visiblity: 设定元素是否可见
visible 默认。元素框是可见的。
hidden 元素框不可见,但仍然影响布局【浏览器认为该元素存在,但是不显示】
4)具有padding,margin值的元素
1. h1~h6
2. dl,dd
3. ol,ul
4. form
在Chrome,Firefox,Safari,Opera,IE8中没有默认的margin,padding。但是在IE7以及以下版本有默认margin:19px 0px
表单控件一般都有默认的padding和marigin
5. p
6. body
5)IE浏览器需要注意的兼容性问题
1. IE6双倍边距(?)
在一排浮动的元素中,如果一个元素设置了margin-left在ie浏览器中就会显示第一个块有双倍的边距。
解决方案:
1)给第一个子元素设置display:inline
2)利用CSS hack单独设置在ie6下的左边距
2. IE浏览器中会自动给添加了连接的图片加边框
6)页面布局中规范
页面布局中所有的块级元素必须要设置宽高
文字和图片在一行布局时可以统一采用块元素的方式进行布局
标签不能随意嵌套
控制页面样式时,尽量少用标签选择器
图片必须设置宽高属性
7)CSS命名规范
通用基类:
base.css
或者
base.atom.css
base.reset.css
base.layout.css
公共模型
model.css
或者
model.box.css
model.list.css
model.form.css
model.content.css
页面样式
page.ccss
或者
page.index.css
整体结构
头 head/header
内容 content/container
导航 nav
主导航 mainnav
边导航 sidebar
左右导航 leftsidebar.rightsidebar
顶导航 topnav
子菜单 submenu
栏目 column
左右中 left,right,center
页面主体main
尾 footer/foot
侧栏 sidebar
8)属性书写顺序
定位属性(比如:display, position, float, clear, visibility, table-layout等)
自身属性(比如:width, height, margin, padding, border等)
文本属性(比如:font, line-height, text-align, text-indent, vertical-align等)
其他属性(比如:color, background, opacity, cursor,content, list-style, quotes等)