CSS样式重点集锦

来源：互联网发布：男生马丁靴知乎编辑：程序博客网时间：2024/05/17 08:52

CSS

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 - 非排序列表
1. 内联元素(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、页内样式

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）的高度；

div

绝对定位设置div容器内的图片标签准确定位

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 : 　背景图像在纵向平铺

0 0