div套路
一、 主体：body{margin0 px； padding 0 px}
二、 块级划分<div></div>
三、 再在块级里面具体划分
注意：要分清块元素和行元素
文档流
行级元素：内容大小决定占据的面积大小，没有宽度和高度
块级元素：默认占据一行，有高度和宽度
行级元素转块级元素 display:block
反之：display:inline;
行内元素和块级元素
2013-01-05 11:40 by greenal, 41601 阅读, 2 评论, 收藏, 编辑
1 块级元素：div , p , form, ul, li , ol, dl, form, address, fieldset, hr, menu, table
行内元素：span, strong, em, br, img , input, label, select, textarea, cite,
块元素(block element)
* address - 地址
* blockquote - 块引用
* center - 举中对齐块
* dir - 目录列表
* div - 常用块级容易，也是css layout的主要标签
* dl - 定义列表
* fieldset - form控制组
* form - 交互表单
* h1 - 大标题
* h2 - 副标题
* h3 - 3级标题
* h4 - 4级标题
* h5 - 5级标题
* h6 - 6级标题
* hr - 水平分隔线
* isindex - input prompt
* menu - 菜单列表
* noframes - frames可选内容，（对于不支持frame的浏览器显示此区块内容
* noscript - 可选脚本内容（对于不支持script的浏览器显示此内容）
* ol - 排序表单
* p - 段落
* pre - 格式化文本
* table - 表格
* ul - 非排序列表
内联元素(inline element)
* a - 锚点
* abbr - 缩写
* acronym - 首字
* b - 粗体(不推荐)
* bdo - bidi override
* big - 大字体
* br - 换行
* cite - 引用
* code - 计算机代码(在引用源码的时候需要)
* dfn - 定义字段
* em - 强调
* font - 字体设定(不推荐)
* i - 斜体
* img - 图片
* input - 输入框
* kbd - 定义键盘文本
* label - 表格标签
* q - 短引用
* s - 中划线(不推荐)
* samp - 定义范例计算机代码
* select - 项目选择
* small - 小字体文本
* span - 常用内联容器，定义文本内区块
* strike - 中划线
* strong - 粗体强调
* sub - 下标
* sup - 上标
* textarea - 多行文本输入框
* tt - 电传文本
* u - 下划线
* var - 定义变量
可变元素
可变元素为根据上下文语境决定该元素为块元素或者内联元素。
* applet - java applet
* button - 按钮
* del - 删除文本
* iframe - inline frame
* ins - 插入的文本
* map - 图片区块(map)
* object - object对象
* script - 客户端脚本
2 区别：
1）块级元素会独占一行，其宽度自动填满其父元素宽度
行内元素不会独占一行，相邻的行内元素会排列在同一行里，知道一行排不下，才会换行，其宽度随元素的内容 而变化
2） 块级元素可以设置 width, height属性，行内元素设置width, height无效
【注意：块级元素即使设置了宽度，仍然是独占一行的】
3) 块级元素可以设置margin 和 padding. 行内元素的水平方向的padding-left,padding-right,margin-left,margin-right 都产生边距效果，但是竖直方向的padding-top,padding-bottom,margin-top,margin-bottom都不会产生边距效果。（水平方向有效，竖直方向无效）
一.选择器
优先级（id行内样式>class页内样式>外部样式）
权重（#pdav p有权重优先，否则离标签最近就哪个）
1、标签选择器(优先级最低)
选择器的名字和标签的名字一致，样式会作用于所有同名标签
body{
background: url(../image/5.jpg);
}
2、类选择器(优先级次之)
.选择器名字
<divclass="title"><img src="image/bg_bang.gif"alt="title" /></div>
在html标签中使用class引用类选择名
3、id选择器(优先级最高)
#选择器名字（一般用#hd .choose）
在html标签中使用id引用id选择名
#hd{
font: 14px "MicrosoftYaHei","宋体","Arial";
color: #797979;
min-width: 1200px;
height: 50px;
background-color:#f4f4f4;
}
二、css样式写的位置
1、行内样式
标签的style属性
2、页内样式
<style></style>之间
3、外部样式
独立的后缀名为css的文件中
在html中使用<link href=”css样式文件的位置”>
三、常用样式
1、字体（font颜色，字体，粗细，大小….）
2、文本（text-decoration）
3、背景（background）
4、列表
四、 CSS列表中ul和div（行级元素和块元素转化）
1. Ul和div一样是块级元素无需放到div中
2. 块级元素
特点：1.每个块级元素都是独自占一行，其后的元素也只能另起一行，并不能两个元素共用一行。
2.元素的高度、宽度、行高和顶底边距都是可以设置的。
3.元素的宽度如果不设置的话，默认为父元素的宽度。
常见的块级元素：<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>
3. 行级元素
特点：1.可以和其他元素处于一行，不用必须另起一行。
2.元素的高度、宽度及顶部和底部边距不可设置。
3.元素的宽度就是它包含的文字、图片的宽度，不可改变。
4. 块级元素和行级元素转换
如果想将块级元素与行级元素相互转换，该怎么办呢？
可以在css样式中用display:inline将块级元素设为行级元素
同样，也可以用display:block将行级元素设为块级元素
五、 常见问题：（对齐，表格竖直变水平，垂直居中，绝对定位）
1. 让ul沿着底边对齐29（margin-top）+25（height）+1（border）
2. 让ul中列表竖直变水平：ul（float：right）li（float：left）
3. 让ul li中文字垂直居中，就是在文字所在标签的样式中，设置line-height（行高），它的值就是父容器（div）的高度；
4.
div
绝对定位设置div容器内的图片标签准确定位
ul
li: (先找父容器)
position: absolute;
left: 0px;
top:-15px;
六、 盒子模型
边距：
内边距：padding 内容和边框的距离
外边距：margin 边框与周边元素的距离
边距的设置：上右下左
边框：border属性：粗细，样式，颜色
盒子模型大小的计算：内容大小+内边距+外边距+边框
定位：
1、 浮动
float:左浮动，右浮动
跳出文档流，和父元素的边框对齐。其余的元素上移，占据空白区域
如果要消除之前元素的浮动效果，另起一行：clear:left，right，both
2、 position
static默认，按照文档流的形式进行定位
relative:相对于static的位置进行偏移，left<0向左偏移
absolute：跳出文档流布局，按照具体的坐标，来定位它在父元素中的位置
fixed：和父元素，保持一个固定的边距
平铺（图片，表格，或表单）：
background-repeat : repeat | no-repeat | repeat-x | repeat-y
repeat : 背景图像在纵向和横向上平铺
no-repeat : 背景图像不平铺
repeat-x : 背景图像在横向上平铺
repeat-y : 背景图像在纵向平铺
网友评论