css基础

HTML-CSSbase

css基础，包括选择器、文字/边框/段落属性、鼠标/图片/列表/表格/背景样式、盒子模型、浮动和定位等

写在前面：此笔记对应课程

注释方法

/*注释的内容*/

css插入到HTML

外部样式表

<link href="index.css" rel="stylesheet" type="text/css" />

内部样式表

<style type="text/css">		
    p{color:Red;}		
</style>

内联样式表

<p style="color:Red; ">XXX</p>

id和class

在同一个HTML页面中，不允许出现两个相同的id。id属性赋予标识页面元素的唯一身份

<div id="first"></div>
<p id="first"></p> 

是错误的

可以为同一个页面的相同元素或者不同元素设置相同的class

选择器

元素选择器

div{color:red}

表示选中页面中所有的div元素

id选择器

#lvye{color:red;}

表示选中id为lvye的元素

class选择器

.lv{color:red;}

表示选中class为lv的所有元素

子元素选择器

元素>元素

h1>strong{color:red;}

表示选中h1的所有strong子元素

元素元素

#father2 #p1{color:blue;}

表示选择id为father的元素中的所有id为p1的子孙元素

区别在于>只是子元素，而空格是子孙元素，只要p1在father内就会被选中

当使用h1 strong {color: red;}时

<h1>
    This is <strong>very</strong> important.
</h1>
<h1> 
    This is <em>really<strong> very </strong></em> important.
</h1>

子元素选择器区别1

若使用h1>strong {color: red;}，则变成了

子元素选择器区别2

元素:first-child

用于选取属于其父元素的首个子元素的指定选择器

对于E:first-child，只要E元素是它的父级的第一个子元素，就选中；不是指选中E元素的第一个子元素，也不是指选中E元素的父元素的第一个E元素。

如果E元素父级的第一个子元素不是E，就不会选中

<style>
    span:first-child{color: red;}
    p:first-child{color: blue;} 
    i:first-child{color: orange;}
</style>
<div class="demo">
    <div>.demo的第一个子元素是div</div>
    <p>
        <span>第一个span</span>
        第一个段落P
        <span>第二个span</span>
    </p>
    <p>一个链接
        <i>第一个i元素</i>
    </p>
    <p>一个链接
        <i>第二个i元素</i>
    </p>
    <p>一个链接</p>
</div>

first-child选择器

可以看到，第一个span标签是p的第一个子元素，被选中；两个i元素都是p的第一个子元素，被选中；而对于p标签，它的父元素<div class="demo">的第一个子元素是div不是p，因此不被选中。

通常也会以h2 p:first-child形式出现，在前面基础上指定了p标签的所处位置范围，表示对h2下的p，只要p是其父元素的第一个子元素就选中（p的父元素不一定是h2）

元素:nth-child(n)

选取父元素的第N个子元素，与类型无关

<style> 
    p:nth-child(2){background:red;}
</style>
<body>
    <h1>这是一个标题</h1>
    <p>这是第一个段落。</p>
    <p>这是第二个段落。</p>
</body>

nth-child选择器

p元素的父元素是body，body的第2个子元素是<p>这是第一个段落。</p>

其它用法：

nth-child(2n)表示列表中（父元素的所有子元素）的偶数标签，即选择第2、4、6……标签
nth-child(2n-1)表示选择列表中的奇数标签，即选择第1、3、5、7……标签
nth-child(n+3)表示选择列表中的标签从第3个开始到最后（>=3）
nth-child(-n+3)表示选择列表中的标签从0到3，即小于3的标签(<=3)
nth-last-child(3)表示选择列表中的倒数第3个标签

元素:nth-of-type(n)

E:nth-of-type(N)选取E的父元素下第N个E类型的子元素，与类型有关

<style> 
    p:nth-of-type(2){background:red;}
</style>
<body>
    <h1>这是一个标题</h1>
    <p>这是第一个段落。</p>
    <p>这是第二个段落。</p>
</body>

nth-of-type选择器

因为body的第一个子元素是h1类型，跳过，而是选第二个p

注意

这几个元素:...型的选择器是有全部性的，如果有多个代码块，如<div>下嵌套<p>，此时对p标签执行找父元素操作，则每个<div>都会是父元素，取父元素下指定位置的元素就会得到多个结果。

<body>
    <p>这是第一个段落。</p>
    <div>
        <p>这是第二个段落。</p>
    </div>
</body>
<style> 
    p:nth-of-type(1) {background: red;}
    /* 此时两个p标签都变色(第一个p是<body>子元素，第二个是<div>子元素) */
</style>

使用E F:...形式只能指定F是E的子孙元素，不能指定E是F的父元素

相邻选择器

#lv+div{color:red;}

表示选择所有的id为lv的元素的相邻的下一个兄弟div元素。

注意是该元素的同级元素

兄弟选择器

h2~p{color:blue;}

表示选择h2的后面的所有兄弟p元素

群组选择器

h3,div,p,span{color:red;}

表示选中所有的h3元素、div元素、p元素和span元素

属性选择器

为拥有指定属性的HTML元素设置样式，而不仅限于class和id属性。

[title]{color:red;}选中所有带有title属性的元素

[title="a"]{color:red;}选中所有title=”a”的元素

[title~=hello]{color:red;}选中所有title值中有”hello”的元素，如title="hello world"和title="student hello"

也用于选中没有class或id设置的表单：

input[type="text"]{...}
input[type="button"]{...}

文字属性

文字属性	说明
font-family	字体类型
font-size	字体大小
font-weight	字体粗细
font-style	字体斜体
color	颜色

字体类型font-family

font-family:字体名

如font-family:微软雅黑;

字体大小font-size

font-size:像素值;

如font-size:15px;

字体颜色color

color:关键字/颜色值;

如color:red;或color:#F1F1F1;

字体粗细font-weight

font-weight:取值（bold加粗、normal正常）

如font-weight:bold;

字体斜体font-style

font-style属性	说明
normal	默认值，正常体
italic	斜体
oblique	将字体倾斜（用于没有斜体的特殊字体）

段落属性

段落属性	说明
text-decoration	下划线、删除线、顶划线
text-transform	文本大小写
font-varient	将英文文本转换为“小型”大写字母
text-indent	段落首行缩进
text-align	文本水平对齐方式
line-height	行高
letter-spacing	字距
word-spacing	词距

text-decoration

text-decoration:属性值;

text-decoration属性值	说明
none	默认值，用这个属性值也可以去掉已有下划、删除、顶划线的样式
underline	下划线
line-through	删除线
overline	顶划线

text-transform

text-transform:属性值;

text-transform属性值	说明
none	默认值
uppercase	转换成大写
lowercase	转换成小写
capitalize	将每个英文单词的首字母转换成大写

font-variant

作用：把文本设置成小型大写字母，只针对英文（因为中文无大小写）

font-variant：normal/small-caps;

font-variant属性值	说明
normal	默认值
small-caps	小型大写字母的字体

text-indent

text-indent:像素值;

text-align

text-align:属性值;

只能针对文本文字和<img>标签

text-align属性值	说明
left	默认值，左对齐
center	居中对齐
right	右对齐

line-height

line-height:像素值;

指的是行高，而不是行间距

letter-spacing（一般不用）

letter-spacing:像素值;

控制的是字间距（不是词间距），指中文的一个字和每个英文字母

word-spacing

word-spacing:像素值;

词间距，以空格为基准进行调节

如果多个单词被连在一起，也会被视为一个单词；

如果汉字被空格分隔，则分隔的多个汉字就被视为不同的单词，该属性此时有效。

边框样式

边框属性	说明
border-width	边框的宽度
border-style	边框的外观
border-color	边框的颜色

border-width

border-width:像素值;

border-style

border-style:属性值;

solid–实线

dashed–虚线

border-color

border-color:颜色值;

边框属性简洁写法

border:1px solid gray;

边框局部样式

指定四条边框中的某一条的样式

上边框border-top

下边框border-bottom

左边框border-left

右边框border-right

如border-left:1px solid blue;

背景样式

背景颜色background-color

background-color:颜色值;

背景图像

背景图像属性	说明
background-image	背景图像的路径
background-repeat	背景图像显示方式
background-position	背景图像在元素哪个位置
background-attachment	背景图像是否随内容而滚动

background-image

是控制元素的必选属性，定义了图像的来源，跟HTML的img标签一样，必须定义图像的来源路径

background-image:url("图像地址");

图像地址可以是相对地址，也可以是绝对地址。

给某个元素设置背景图像，元素要有一定的宽度和高度，背景图片才会显示出来。 如果没有给元素设置高度，图片可能显示不全

background-repeat

background-repeat属性	说明
repeat	在水平方向和垂直方向上同时平铺（默认值）
repeat-x	只在水平方向（x轴）上平铺
repeat-y	只在垂直方向（y轴）上平铺
no-repeat	不平铺

background-repeat原图片经过background-repeat处理后：

background-repeat效果

第一部分就是背景图像在纵向和横向两个方向都平铺，第二部分只是在横向平铺，而第三部分只是在纵向平铺

设置有背景图片的元素的宽或高大于背景图片本身的宽或高，才会有平铺效果

实现代码：

div{
    width:200px;    
    height:100px;   
    border: 1px solid silver;   
    background-image: url(img/flower.png);
}
#div2{background-repeat: repeat-x}
#div3{background-repeat: repeat-y}
#div4{background-repeat: no-repeat}

background-position

需要定义背景图像的横向位置和纵向位置

background-position

表示在横向距离元素左边80px，在纵向距离元素顶边40px

也可以使用关键字取值

background-position属性值	说明
top left	左上
top center	靠上居中
top right	右上
left center	靠左居中
center center	正中
right center	靠右居中
bottom left	左下
bottom center	靠下居中
bottom right	右下

background-attachment

scroll–随元素一起滚动（默认值）

fixed–固定不动

有些浏览器在设置background-attachment之后不能设置background-position属性

background-size

background-size: contain等比缩放，按照某一边来覆盖显示区域，若区域大于图片的比例，会有白边，图片不变形（长宽比例不变）

background-size：cover图片保持比例放大或缩小使X轴与Y轴都铺满整个容器，但图片超出容器部分会被裁剪掉，图片不变形

background-size: 100% 100%按容器比例撑满，图片变形（长宽比例变成容器的长宽比例）

background-size：100%将X轴100%铺满整个容器，Y轴等比例变化，可能出现空白填不满部分，图片不变形

简洁写法

background: [background-color]或url(xxx.png) [background-repeat] [background-attachment] [background-position] / [background-size]

如background: url(xxx.png) no-repeat fixed top center / cover;

超链接样式

超链接的默认样式为超链接默认样式

（1）不点击时：字体为蓝色，带有下划线；

（2）鼠标点击时：字体为红色，带有下划线；

（3）鼠标点击后：字体为紫色，带有下划线；

去除超链接下划线

使用text-decoration:none;来去除下划线

用超链接伪类来定义超链接在不同时期的不同样式

伪类属性	说明
a:link	定义a元素未访问时的样式
a:visited	定义a元素访问后的样式
a:hover	定义鼠标经过显示的样式
a:active	定义鼠标单击激活时的样式

link是a没被点时的样式

visited就是点击a的链接后，a元素会变成的样式

定义这四个伪类，必须按照“link、visited、hover、active”的顺序进行，不然浏览器可能无法正常显示这4种样式。它们的首字母可以记忆成 "love hate"

例：

a{text-decoration:none;font-size:18px;}
a:link{color:white}
a:visited{color: purple; }
a:hover{color:yellow;               
        text-decoration:underline;}
a:active{color:red;}

正常状态： link

鼠标经过样式： hover

点击链接时样式： active

点击后样式： visited

不是每个超链接都需定义4种状态

一般情况下，只用到2种状态：未访问状态和鼠标经过状态。而未访问状态可以直接在a标签定义，没必要使用a:link

a{text-decoration:none; color:purple}  /*正常状态*/
a:hover{color:white}  /*鼠标经过时样式*/

:hover伪类

:hover伪类可以定义任何一个元素在鼠标经过时的样式，这个元素可以是任意的块元素和行内元素

如#div1:hover{background-color:red;}

或img:hover{border:1px solid red;}

鼠标样式

元素{cursor:属性值;}表示鼠标移到哪个元素上就变成哪种样式

cursor属性值

一般只用到“default”和“pointer”这两个属性值

<head>
    <style type="text/css">
        #div_default{cursor:default;}
        #div_pointer{cursor:pointer;}
    </style>
</head>
<body>
    <div id="div_default">鼠标默认样式</div>
    <div id="div_pointer">鼠标手状样式</div>
</body>

效果： cursor属性值

图片样式

图片大小width和height

img{width:像素值;}
img{height:像素值;}

图片边框border

img
{
    border-width:像素值;
    border-style:属性值;
    border-color:颜色值;
}

或使用简洁写法img{border:1px solid gray;}

<head>
    <style type="text/css">
        img{width:60px;height:60px;}
        img:hover{border:1px solid gray;}
    </style>
</head>
<body>
    <img src="..." alt=""/>
</body>

使用了:hover伪类定义鼠标经过图片时会出现灰色边框

图片水平对齐text-align

text-align只对文本和img标签有效，对其他标签无效

text-align:属性值;

text-align属性值	说明
left	默认值，左对齐
center	居中对齐
right	右对齐

图片是要在父元素中进行水平对齐的

<head>
    <style type="text/css">
        div
        {
            width:300px;
            height:80px;
            border:1px solid gray;
        }
        .div_img{text-align:left;} //在img的父标签内定义对其方式
        img{width:60px;height:60px;}
    </style>
</head>
<body>
    <div class="div_img">//.div_img类的div标签是img的父元素
        <img src="xxx" alt=""/>
    </div>
</body>

在这个例子中，img元素的父元素是div，img元素是相对于div元素进行水平对齐的。

图片垂直对齐vertical-align

img{vertical-align:属性值;}

vertical-align属性定义行内元素相对于该元素的垂直对齐方式，即<img>标签的文字相对图片的垂直对齐方式

vertical-align属性值	说明
top	顶部对齐
middle	中部对齐
baseline	基线对齐
bottom	底部对齐

<head>
    <style type="text/css">
        img{width:80px;height:80px;}
        #img_1{vertical-align:top;}
        #img_2{vertical-align:middle;}
        #img_3{vertical-align:bottom;}
        #img_4{vertical-align:baseline;}
    </style>
</head>
<body>
    绿叶学习网<img id="img_1" src="xxx" alt=""/>绿叶学习网（<strong>top</strong>）
    <hr/>
    绿叶学习网<img id="img_2" src="xxx" alt=""/>绿叶学习网（<strong>middle</strong>）
    <hr/>
    绿叶学习网<img id="img_3" src="xxx" alt=""/>绿叶学习网（<strong>bottom</strong>）
    <hr/>
    绿叶学习网<img id="img_4" src="xxx" alt=""/>绿叶学习网（<strong>baseline</strong>）
</body>

vertical-align效果图

baseline和bottom属性是有区别的。图片的基线在图片底部，文字的基线在文字中间偏下位置；图片和文字的bottom都是指底部

图片的垂直居中

<head>
    <style type="text/css">
        .posdiv
        {
            position: relative; /* 给父元素添加相对定位，让子元素相对父元素进行偏移 */
        }
        .posdiv img
        {/*先让子元素的上边界处于父元素中间线的位置，在让子元素向上偏移自身的50%即可*/
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
        }
    </style>
</head>
<body>
    <div class="posdiv">
        <img src="1.jpg" alt="">
    </div>
</body>

文字环绕效果

float属性

使用浮动属性float可以设置文字在某个元素的周围，它能应用于所有的元素。

float:取值;

left–元素向左浮动

right–元素向右浮动

默认情况下，元素是不浮动的

<head>
    <style type="text/css">
       img{float:left;}
    </style>
</head>
<body>
    <img src="images/ailianshuo.jpg" alt=""/>
    <p>xxx</p>
</body>

float效果图

有的浏览器显示文本的顶部与图片的顶部是不完全水平对齐的，要使完全对齐可能要修改浏览器默认显示样式

设置图片与文字的间距

给<img>标签添加margin属性，包括margin-top（上外边距）、margin-bottom（下外边距）、margin-left（左外边距）、margin-right（右外边距）

<head>
    <style type="text/css">
        img
        {
        margin-right:20px;
        margin-bottom:20px;
        float:left;
        }
    </style>
</head>
<body>
    <img src="images/ailianshuo.jpg" alt=""/>
    <p>xxx</p>
</body>

float效果图2

实现文本的顶部与图片的顶部水平对齐

一个可能的方法：将<img>和<p>标签放入一个div内，将p标签的css设置为

margin-top: 0px;
margin-bottom: 0px;

列表样式

在HTML中，有序列表和无序列表的列表项符号都是使用type属性来定义的；

而在CSS中，不管是有序列表还是无序列表，都统一使用list-style-type属性来定义列表项符号。

有序列表list-style-type属性值	说明
decimal	默认值，数字1、2、3…
lower-roman	小写罗马数字i、ii、iii…
upper-roman	大写罗马数字I、II、III…
lower-alpha	小写英文字母a、b、c…
upper-alpha	大写英文字母A、B、C…

例如：ol{list-style-type: lower-roman;}

无序列表list-style-type属性值	说明
disc	默认值，实心圆“●”
circle	空心圆“○”
square	实心正方形“■”

例如：ul{list-style-type: circle;}

none–去除列表项符号：ol,ul{list-style-type:none;}

自定义列表项符号list-style-image

有序列表ol{list-style-image:url(图像地址);}

无序列表ul{list-style-image:url(图像地址);}

自定义列表项符号，实际上就是列表项符号改为一张图片

表格样式

设置单元格边框：table,th,td{border:1px solid gray;}

<head>
    <title></title>
    <style type="text/css">
        table,th,td{border:1px solid gray;}
    </style>
</head>
<body>
    <table>
        <caption>表格标题</caption>
        <thead> <!--表头-->
            <tr>
                <th>表头单元格1</th>
                <th>表头单元格2</th>
            </tr>
        </thead>
        <tbody> <!--表身-->
            <tr>
                <td>标准单元格1</td>
                <td>标准单元格2</td>
            </tr>
            <tr>
                <td>标准单元格1</td>
                <td>标准单元格2</td>
            </tr>
        </tbody>
        <tfoot> <!--表脚-->
            <tr>
                <td>标准单元格1</td>
                <td>标准单元格2</td>
            </tr>
        </tfoot>
    </table>
</body>

单元格边框

表格边框合并border-collapse

表格加入边框的默认情况下，单元格与单元格之间有一定的空隙，可以使用border-collapse属性来去除单元格之间的空隙

table{border-collapse:属性值;}

separate–默认值，边框分开，不合并

collapse–边框合并，如果相邻，则共用一个边框

table{border-collapse:collapse;}效果：

只需要在table元素中设置border-collapse属性值就行

表格边框间距border-spacing

table{border-spacing:像素值像素值;}

该属性指定单元格边界之间的距离。当只指定了1个像素值时，这个值将作用于横向和纵向上的间距；当指定了2个length值时，第1个作用于横向间距，第2个作用于纵向间距。

table{border-spacing:5px 10px }效果：

border-spacing效果

该属性只需要在table元素设置就可以生效

表格标题位置caption-side

caption{caption-side:属性值;}

top–默认值，标题在顶部

bottom–标题在底部

caption{caption-side:bottom}效果：

caption-side效果

CSS盒子模型

所有页面中的元素都可以看成一个盒子，并且占据着一定的页面空间。一个页面由很多这样的盒子组成，这些盒子之间会互相影响

盒子模型属性	说明
border	（边框）元素边框
margin	（外边距）用于定义页面中元素与元素之间的距离
padding	（内边距/补白）用于定义内容与边框之间的距离
content	（内容）可以是文字或图片

内容区是盒子模型的中心，它呈现了盒子的主要信息内容，这些内容可以是文本、图片等多种类型。内容区也是盒子模型必备的组成部分，其他的3部分都是可选的

有3个属性：width、height和overflow。

width和height属性可以指定盒子内容区的高度和宽度；当内容信息太多时，超出内容区所占范围时，可以使用overflow溢出属性来指定处理方法

内边距指的是内容区和边框之间的空间，可以被看做是内容区的背景区域

有5种属性：padding-top、padding-bottom、padding-left、padding-right以及综合了以上4个方向的简洁内边距属性padding

边框有3种属性：border-width、border-style、border-color以及综合了3类属性的快捷边框属性border

border-width指定边框的宽度，border-style指定边框类型，border-color指定边框的颜色

外边距指的是两个盒子之间的距离，它可能是子元素与父元素之间的距离，也可能是兄弟元素之间的距离

有5种属性：margin-top、margin-bottom、margin-left、margin-right以及综合了以上4个方向的简洁内边距属性margin

允许给外边距属性指定负数值，当指定负外边距值时，整个盒子将向指定负值的相反方向移动，以此可以产生盒子的重叠效果

直观展示

<head>
    <style type="text/css">
        #main {
            display: inline-block;/*将块元素转换为inline-block元素*/
            border: 1px solid gray;
        }
        .lvye {
            display: inline-block;/*将块元素转换为inline-block元素*/
            padding: 20px;
            margin: 40px;
            border: 1px solid red;
            background-color: orange;
        }
        span {
            border: 1px solid blue;
            background-color: cyan;
        }
    </style>
</head>
<body>
    <div id="main">
        <div class="lvye">
            <span>绿叶学习网</span>
        </div>
    </div>
</body>

把class为lvye的div层看做一个盒子，则蓝色边框部分（<span>标签）为“内容区”，红色边框部分（与内层<span>标签之间的空间）为“内边距区”，红色边框与灰色边框（与外层的<div>元素）之间的空白为“外边距区”，红色的边框为该盒子的边框

盒子模型举例

一个更具体的展示：

盒子模型具体展示

宽度width和高度height

只有块元素能设置width和height，行内元素无法设置，在上例中，div元素是块元素，span是行内元素。因此div元素可以设置宽度width和高度height，而span元素无法设置。

想为span元素（行内元素）也设置高度和宽度：使用display属性来将行内元素转换为块元素

边框border

元素{border:像素值边框类型颜色值;}

两个属性值之间一定要用空格隔开

内边距padding

接上例
.lvye {
    padding-top: 20px;
    padding-right: 40px;
    padding-bottom: 60px;
    padding-left: 80px;
}

内边距padding

padding写法有3种：

padding:20px;表示四个方向的内边距都是20px
padding:20px 40px;表示top和bottom为20px，right和left为40px
padding:20px 40px 60px 80px;表示top为20px，right为40px，bottom为60px，left为80px。（即从top开始按顺时针进行标识）

外边距margin

外边距分为四个方向，这一点跟内边距相同；同时也有3种写法，规律与内边距完全相同

/*接上例*/
.lvye {
    margin:20px 40px 60px 80px;
}

外边距margin

浮动布局

正常文档流：将窗体自上而下分成一行一行，块元素独占一行，相邻行内元素在每行中按从左到右地依次排列元素；是我们没有用CSS样式去控制的HTML结构，写的标签顺序就是网页展示的顺序。

在CSS布局中，我们可以使用浮动或者定位这两种技术来实现“脱离正常文档流”，自行控制页面的布局

CSS的float属性使元素向左或向右浮动，即让盒子及其中的内容浮动到文档的右边或者左边。任何元素都可以浮动

浮动元素会生成一个块级框，而不论它本身是何种元素。它的取值有2种：

left–元素向左浮动

right–元素向右浮动

浮动布局实例

<head>
    <style type="text/css">   
        #father/*定义父元素样式*/
        {
            width:400px;
            background-color:blue;
            border:1px solid silver;
        }
        #father div/*定义子元素样式*/
        {
            padding:10px;
            margin:15px;
            border:2px dashed red;
            background-color:orange;
        }
        #father p/*定义文本样式*/
        {
            margin:15px;
            border:2px dashed red;
            background-color:orange;
        }
        #son1
        {
            /*这里设置son1的浮动方式*/
        }
        #son2
        {
            /*这里设置son2的浮动方式*/
        }
        #son3
        {
            /*这里设置son3的浮动方式*/
        }
    </style>
</head>
<body>
    <div id="father">
        <div id="son1">box1</div>
        <div id="son2">box2</div>
        <div id="son3">box3</div>
        <p>这里是浮动框外围的文字</p>
    </div>
</body>

上面代码定义了4个div块，一个是父块，另外3个是它的子块。

如果3个子块都没有设置浮动方式，在父盒子中，由于div元素是块元素，因此4个盒子各自向右伸展，并且自上而下排列，如图：

无浮动方式

现在设置第一个浮动方式：
```
#son1{float:left;}
```
将box1设置为左浮动，box1变成了浮动元素，它的宽度不再延伸，变为容纳内容的最小宽度；而相邻的下一个div元素（box2）就会紧贴着box1。效果如图
设置第二个浮动
```
#son2{float:left;}
```
box2变成了浮动元素，因此box2也跟box1一样，宽度不再延伸，而是由内容确定宽度，且相邻的下一个div元素（box3）变成紧贴着浮动的box2。

为什么box1和box2之间有一定的距离：在CSS中设置了box1、box2和box3都有一定的外边距，如果box1为浮动元素，而相邻的box2不是浮动元素，则box2就会紧贴着box1；但是如果box1和box2同时为浮动元素，外边距就会生效。
设置第三个浮动
```
#son3{float:left;}
```
由于box1、box2和box3都是浮动元素，box1、box2和box3之间的margin属性生效

若将将box3浮动方式改为float:right：

清除浮动

清除浮动在设置左浮动或者右浮动之后的元素内设置

元素{clear:取值;}

clear属性值	说明
left	清除左浮动
right	清除右浮动
both	左右浮动一起清除

通常直接使用clear:both;来把所有浮动清除

#son1{float:left;}
#son2{float:left;}
#son3{float:right;}
p{clear:both;}/*p是设置完浮动样式的3个div的下一个元素*/

清除浮动

p元素清除浮动后，前一个元素div3产生的浮动就不会对它产生影响，因此p元素的文本不会环绕在div3的周围。注意p元素设置清除只会改变它自己的样式，已经设置浮动的div3元素不会改变

定位布局

浮动布局比较灵活，但是不容易控制；而使用定位布局，可以精准定位页面中的任意元素，但是缺乏灵活性，难以设计空间大小和位置不确定的版面布局

定位的方法：固定定位（fixed）、相对定位（relative）、绝对定位（absolute）和静态定位（static）

固定定位fixed

当元素的position属性设置为fixed时，这个元素就被固定了，被固定的元素不会随着滚动条的拖动而改变位置。在视野中，固定定位的元素的位置是不会改变的。

该属性需结合top、bottom、left和right这4个属性一起使用；这4个属性设置元素相对浏览器的位置，参考对象是浏览器的4条边，且不一定全部都用到（设置left后right就是页面宽度-元素宽度-left，top和bottom同理）

一般用于“回顶部”特效和固定栏目的设置

position:fixed;
top:像素值;
bottom;像素值;
left:像素值;
right:像素值;

一个实例：

<head>
    <style type="text/css">
        #first
        {
            width:120px;
            height:600px;
            border:1px solid gray;
            line-height:600px;
            background-color:lightblue;
        }
        #second
        {
            position:fixed;/*设置元素为固定定位*/
            top:30px;/*距离浏览器顶部30px*/
            left:160px;/*距离浏览器左部160px*/
            width:60px;
            height:60px;
            border:1px solid silver;
            background-color:plum;
        }
    </style>
</head>
<body>
    <div id="first">无定位的div元素</div>
    <div id="second">固定定位的div元素</div>
</body>

固定定位fixed

相对定位relative

相对定位是通过将元素从原来的位置向上、向下、向左或者向右移动来定位的。

position:relative;需结合top、bottom、left和right这4个属性一起使用（语法同上），这4个属性设置元素相对原始位置的距离，也不需要同时设定

相对定位的容器浮上来后，其所占的位置仍然留有空位，后面的无定位元素仍然不会“挤上来”

一个实例：

<head>
    <style type="text/css">
        #father 
        {
            margin-top: 30px;
            margin-left: 30px;
            border: 1px solid silver;
            background-color: lightblue;
        }
        #father div 
        {
            width: 100px;
            height: 60px;
            margin: 10px;
            border: 1px solid silver;
            background-color: plum;
        }
        #son2 
        {
            position: relative; 
            top: 20px;
            left: 40px;
        }
    </style>
</head>
<body>
    <div id="father">
        <div id="son1">第1个无定位的div元素</div>
        <div id="son2">相对定位的div元素</div>
        <div id="son3">第2个无定位的div元素</div>
    </div>
</body>

相对定位relative

可以看到第2个无定位的div元素位置不发生改变，即相对定位只会改变指定的元素，不会影响之后的其它元素

绝对定位absolute

一个元素变成绝对定位元素后，这个元素就完全脱离正常文档流了，它前后的元素会认为这个元素并不存在，即这个元素浮于其他元素上面，是独立出来的。

绝对定位在几种定位方法中使用最广泛，这种方法能够很精确地把元素移动到任意你想要的位置。

position:absolute;需结合top、bottom、left和right这4个属性一起使用（语法同上），这4个属性设置元素相对父元素的位置，也不需要同时设定

一个实例：

<head>
    <style type="text/css">
        #father 
        {
            padding: 15px;
            background-color: blue;
            border: 1px solid silver;
        }
        #father div 
        {
            padding: 10px;
            background-color: orange;
            border: 1px dashed red;
        }
        #son2 
        {
            position: absolute;
            top: 0;
            right: 0;/*与页面右边和上边的距离为0，即位于页面右上角*/
        }
    </style>
</head>
<body>
    <div id="father">
        <div id="son1">box1</div>
        <div id="son2">box2</div>
        <div id="son3">box3</div>
    </div>
</body>

绝对定位absolute

而如果不设置第2个div元素的绝对定位，就变成了：

绝对定位absolute原

可以看到绝对定位不仅改变设置它的元素位置，也会改变它之后的元素位置，相当于后续元素会忽略它的存在并进行递补

静态定位static

static是元素默认的position属性值，表示块保留在原本应该在的位置，不会重新定位。

css基础

注释方法

css插入到HTML

外部样式表

内部样式表

内联样式表

id和class

选择器

元素选择器

id选择器

class选择器

子元素选择器

元素>元素

元素 元素

元素:first-child

元素:nth-child(n)

元素:nth-of-type(n)

注意

相邻选择器

兄弟选择器

群组选择器

属性选择器

文字属性

字体类型font-family

字体大小font-size

字体颜色color

字体粗细font-weight

字体斜体font-style

段落属性

text-decoration

text-transform

font-variant

text-indent

text-align

line-height

letter-spacing（一般不用）

word-spacing

边框样式

border-width

border-style

border-color

边框属性简洁写法

边框局部样式

背景样式

背景颜色background-color

背景图像

background-image

background-repeat

background-position

background-attachment

background-size

简洁写法

超链接样式

去除超链接下划线

用超链接伪类来定义超链接在不同时期的不同样式

不是每个超链接都需定义4种状态

:hover伪类

鼠标样式

图片样式

图片大小width和height

图片边框border

图片水平对齐text-align

图片垂直对齐vertical-align

图片的垂直居中

文字环绕效果

float属性

设置图片与文字的间距

实现文本的顶部与图片的顶部水平对齐

列表样式

自定义列表项符号list-style-image

表格样式

表格边框合并border-collapse

表格边框间距border-spacing

表格标题位置caption-side

CSS盒子模型

直观展示

宽度width和高度height

边框border

内边距padding

外边距margin

元素元素