第四课 CSS核心知识点

一、块元素：

特点：

1、默认显示在页面的左上角，内容也是默认在左上角

2、默认单独占满一行（占满整个文档流）

常用的块级元素：

p、h1-h6、ul li、ol li、div、hr、table、

二、行内元素（内联元素）：

特点：

1、大小受到文字区域的影响，height、width在行内元素中不起作用

2、行内元素不会单独占满一行

常用的行内元素：

a、span、img、input

三、块级元素与行内元素的相互转换

1、display:inline;　块级转成行内元素

2、display:block;　行内元素转成块级元素

3、display:inline-block;　具有行内元素和块级元素特点:

（1）width、height会受到影响　　

（2）不会单独占满一行

四、浮动（float)

1、float: left right

2、清除浮动：clear:lift、right、both (清除两边的浮动)

注意要点：块与块之间，浮动的影响，可以用clear来清除

实例：

<html>
<head>
<title>float 浮动</title>
<style type="text/css">
#d1,#d2
{
    height:100px;
    width:100px;
    border:solid 2px #F00;
    float:left;
}
#d3
{
    height:100px;
    width:100px;
    border:solid 2px #F00;
    clear:left;
    float:left;
}
#d4
{
    height:100px;
    width:100px;
    border:solid 2px #F00;
    float:left;
}
</style>
</head>

<body>
<div id="d1">浮动1</div>
<div id="d2">浮动2</div>
<div id="d3">浮动3</div>
<div id="d4">浮动4</div>
</body>
</html>

效果：

通过运用 float 块元素的浮动

用clear 清除块元素浮动之间的影响，从而实现块与块并排。

五、盒子模型

要点：如何做布局？边框、内间距、外间距，需要掌握好，就像拼图。

1）、边框样式的覆盖

例：

#d1
{
    height:100px;
    width:100px;
    border:solid 1px #FOF;
    border-top:dashed 1px #00F;
    border-bottom:dashed 1px #00F;
}

2）、内间距

要点：撑开

padding

padding:10px; 上下左右撑开10px

padding:10px 20px; 上下、左右

padding:10px 10px 20px; 上、左右、下

padding:10px 15px 20px 25px; 上、右、下、左

例：

<html>
<head>
<title>padding 特点</title>
<style type="text/css">
#d1
{
    height:100px;
    width:100px;
    border:solid 2px #F00;
    padding:10px;
}
</style>
</head>

<body>
<div id="d1">特点</div>
</body>
</html>

效果：

如果这时想设置边框高度和宽度为100px的话,代码如下：

<html>
<head>
<title>padding 特点</title>
<style type="text/css">
#d1
{
    height:80px;
    width:80px;
    border:solid 2px #F00;
    padding:10px;
}
</style>
</head>

<body>
<div id="d1">特点</div>
</body>
</html>

效果：

要注意更改后的边框，是从下方和右减少。

3）、外边距

margin

要点：外边距指的是块与外面的边距，

一图看懂内、外边距

留意：padding 对行内元素是支持的，margin只支持左右，不支持上下。

六、定位（绝对定位与相对定位）

1、绝对定位：position:adsolute;

1）、当设置为绝对定位之后，将脱离文档流，不会占满一行，并且不会受到float的影响。

2）、当设置为绝对定位的时候，元素的方位就受到窗体的top,left,right,bottom的影响。

技巧：

元素设置为绝对定位后，可通过top,left,right,bottom来控制元素在窗体中的方位。

2、相对定位：position:relative;

1）、当设置为相对定位时，元素没有脱离文档流。float可以对其影响。

2）、当设置为相对定位时，方位top,left,right,bottom是相对于元素的父元素，由于标签并没有脱离文档流，所以它四周的标签是占着位置的。

绝对定位与相对定位的区别：一个是脱离文档流，一个是没有脱离文档流。

3、固定定位：position:fixed;

1）、通过top,left,right,bottom来控制元素在窗体中的固定的方位

2）、脱离文档流，不受float的影响。

1111