复习CSS

来源：互联网发布：js形参实参如何理解编辑：程序博客网时间：2024/05/23 20:41

层叠就是在html文件中对于同一个元素可以有多个css样式存在，当有相同权重的样式存在时，会根据这些css样式的前后顺序来决定，处于最后面的css样式会被应用。

css样式优先级：

内联样式表（标签内部）> 嵌入样式表（当前文件中）> 外部样式表（外部文件中）。

浏览器默认的样式 <网页制作者样式 < 用户自己设置的样式，但记住!important优先级样式是个例外，权值高于用户自己设置的样式。如：

p{color:red!important;}

特殊CSS样式：

文字排版---删除线：

.oldPirce{text-decoration:line-through;}

文字排版---下划线：

p a{text-decoration:underline;}

段落排版---缩进：

p{text-indent:2em;}

段落排版---中文字间距、字母间距:

h1{letter-spacing:50px;}

段落排版---单词间距:

h1{word-spacing:50px;}

在CSS中，html中的标签元素三种不同的类型：

块状元素、内联元素(又叫行内元素)和内联块状元素。

⑴ 常用的块状元素有：

⑵ 常用的内联元素有：

⑶ 常用的内联块状元素有：

可通过display设置块状、内联

块级元素特点：

1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。

2、元素的高度、宽度、行高以及顶和底边距都可设置。

3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。

内联元素特点：

1、和其他元素都在一行上；

2、元素的高度、宽度及顶部和底部边距不可设置；

3、元素的宽度就是它包含的文字或图片的宽度，不可改变。

内联块状元素（inline-block）就是同时具备内联元素、块状元素的特点。<img>、<input>标签就是这种内联块状标签。

内联块状元素元素特点：

1、和其他元素都在一行上；

2、元素的高度、宽度、行高以及顶和底边距都可设置。

盒模型

1、盒模型—边框

div{

    border-width:2px;

    border-style:solid;

    border-color:red;

简写形式：

div{

    border:2px  solid  red;

注意：

1、border-style（边框样式）常见样式有：

dashed（虚线）| dotted（点线）| solid（实线）。

2、border-color（边框颜色）中的颜色可设置为十六进制颜色，如:

border-color:#888;//前面的井号不要忘掉。

3、border-width（边框宽度）中的宽度也可以设置为：

thin | medium | thick（但不是很常用），最常还是用象素（px）。

2、盒模型—宽度和高度

一个元素实际宽度（盒子的宽度）=左边界+左边框+左填充+内容宽度+右填充+右边框+右边界。

3、盒模型—填充

顺序不要乱，按顺时针顺序：

div{

   padding-top:20px;

   padding-right:10px;

   padding-bottom:15px;

   padding-left:30px;

简写形式：

div{padding:20px 10px 15px 30px;}

如果上下填充一样为10px，左右一样为20px，可以这么写：

div{padding:10px 20px;}

如果上、右、下、左的填充都为10px;可以这么写

div{padding:10px;}

4、盒模型—边界

代码格式如上：

div{margin:20px 10px 15px 30px;}

CSS布局模型：

在网页中，元素有三种布局模型：1、流动模型（Flow）2、浮动模型 (Float)3、层模型（Layer）

流动模型：

流动（Flow）是默认的网页布局模式

流动布局模型具有2个比较典型的特征：

1、块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布，因为在默认状态下，块状元素的宽度都为100%。实际上，块状元素都会以行的形式占据位置。

2、内联元素都会在所处的包含元素内从左到右水平分布显示。（内联元素可不像块状元素这么霸道独占一行）

浮动模型：

两个块状元素并排显示（在同一行显示）

div{

width:200px;

height:200px;

border:2px red solid;

}

#div1{float:left;}

#div2{float:right;}

层模型：

层模型有三种形式：

1、绝对定位(position: absolute)

如下面代码可以实现div元素相对于浏览器窗口向右移动100px，向下移动50px。

div{

width:200px;

height:200px;

border:2px red solid;

position:absolute;

left:100px;

top:50px;

}

2、相对定位(position: relative)

如下代码实现相对于以前位置向下移动50px，向右移动100px;

#div1{

width:200px;

height:200px;

border:2px red solid;

position:relative;

left:100px;

top:50px;

}

3、固定定位(position: fixed)

固定定位，与absolute定位类型类似，但它的相对移动的坐标是视图（屏幕内的网页窗口）本身。

4、Relative和absolute组合使用：

1、参照定位的元素必须是相对定位元素的前辈元素：

2、参照定位的元素必须加入position:relative;

3、定位元素加入position:absolute，便可以使用top、bottom、left、right来进行偏移定位了。

0 0