CSS样式详解-CSDN博客

本文链接：https://blog.csdn.net/Sunny_Future/article/details/109553463

前端基础之css样式属性

上篇文章主要介绍了 css的标签基本用法，本次主要介绍查找到标签的属性操作。

一、css 文本样式属性

1.1 文本颜色

颜色属性被用来设置文字的颜色。颜色是通过CSS最经常的指定：

十六进制值 - 如: ＃FF0000
一个RGB值 - 如: RGB(255,0,0)
RGB(R,G,B) # R 、G 、B 各自取值范围是 0 - 255
颜色的名称 - 如: red

p{color: deepskyblue;}

RGB颜色参考
在这里插入图片描述

1.2 文本样式

在这里插入图片描述

div{

    /*文本字体颜色*/
    /*color: red;*/
    /*color: #3066d3;*/
    /*color: RGB(0,0,0);*/

    /*文本字体大小*/

    font-size: 34px;

    /*文本字体样式*/
    font-family: "Times New Roman";

    /*文本粗细*/
    font-weight:500;

    /*文本倾斜*/
    /*font-style: italic;*/
    font-style: normal;

    width: 50%;
    border: 2px solid yellow;
    color: white;
    background-color: darkred;
    padding: 0.5em 0.5em 0.5em;
}

<div>自古圣贤成大业，未有不由学而成者。</div>

1.3 文本常用属性

font-size: 10px;

line-height: 200px;   文本行高 通俗的讲，文字高度加上文字上下的空白区域的高度 50%:基于字体大小的百分比

vertical-align:－4px  设置元素内容的垂直对齐方式 ,只对行内元素有效，对块级元素无效


text-decoration:none       text-decoration 属性用来设置或删除文本的装饰。主要是用来删除链接的下划线

font-family: 'Lucida Bright'

font-weight: lighter/bold/border/

font-style: oblique

text-indent: 150px;      首行缩进150px

letter-spacing: 10px;  字母间距

word-spacing: 20px;  单词间距

text-transform: capitalize/uppercase/lowercase ; 文本转换，用于所有字句变成大写或小写字母，或每个单词的首字母大写

1.4 text-decoration 标签

常用于对标签的修饰，如去掉 a标签默认的下划线，自定义下划线样式等

none，去掉默认样式，如 a 标签的下划线

.a_no_decor{
            text-decoration: none;
        }
 
<p>
    <a href="#">python开发网址大全</a>
</p>
<p>
    <a href="#" class="a_no_decor">python开发网址大全</a>
</p>

在这里插入图片描述

line-through，文本加中线，常用于价格秒杀等

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

<span>价格秒杀：</span><span class="sell">699</span>

在这里插入图片描述

underline，给文本加下划线突出重点

.imp{
    text-decoration: underline;
    text-decoration-color: crimson;
}

<span class="imp">
    春风得意马蹄疾，一日看尽长安花。
</span>

在这里插入图片描述

1.5 text-align 标签（文本水平对齐方式）

属性规定元素中的文本的水平对齐方式，注意该标签只是水平对齐，而无法做到垂直对齐。

属性值	表示含义
left	把文本排列到左边；默认值就是 left，这个由浏览器决定。
right	把文本排列到右边。
center	把文本排列到中间。
justify	实现两端对齐文本效果，两端对齐

文章标题居中

.title{
    height: 150px;
    background-color: gray;
    text-align: center;
    font-size: 30px;
    border: 2px solid yellow;
}

<div class="title">文章标题</div>

注意该标签只是水平对齐，而无法做到垂直对齐。
在这里插入图片描述

段落两端对齐

.poetry{
    text-align: justify;    /*justify两端对齐*/
    line-height: 35px;
}

<p class="poetry">
    我说道：“爸爸，你走吧。”他望车外看了看，说：“我买几个橘子去。你就在此地，不要走动。”我看那边月台的栅栏外有几个卖东西的等着顾客。走到那边月台，须穿过铁道，须跳下去又爬上去。父亲是一个胖子，走过去自然要费事些。我本来要去的，他不肯，只好让他去。我看见他戴着黑布小帽，穿着黑布大马褂，深青布棉袍，蹒跚地走到铁道边，慢慢探身下去，尚不大难。可是他穿过铁道，要爬上那边月台，就不容易了。他用两手攀着上面，两脚再向上缩；他肥胖的身子向左微倾，显出努力的样子。这时我看见他的背影，我的泪很快地流下来了。我赶紧拭干了泪。怕他看见，也怕别人看见。我再向外看时，他已抱了朱红的橘子往回走了。过铁道时，他先将橘子散放在地上，自己慢慢爬下，再抱起橘子走。到这边时，我赶紧去搀他。他和我走到车上，将橘子一股脑儿放在我的皮大衣上。于是扑扑衣上的泥土，心里很轻松似的。过一会儿说：“我走了，到那边来信！”我望着他走出去。他走了几步，回过头看见我，说：“进去吧，里边没人。”等他的背影混入来来往往的人里，再找不着了，我便进来坐下，我的眼泪又来了。
</p>

在这里插入图片描述

1.6 line-height 标签（文本内容的行高，默认行内垂直居中）

在具体的行内，文本是上下居中的，注意区别于标签的高度。当文本行高等于标签的高度，即该标签内就一行内容的话，那么其文本就是上下居中的。

商城的特殊按钮

.button_arrow{
    width: 100px;
    height: 60px;
    background-color: lightgray;
    text-align: center;
    line-height: 60px;
}

<div class="button_arrow"> > </div>

在这里插入图片描述

1.7 vertical-aline 标签（常用于图片和文字的底线对齐）

默认情况下，图片和文本的基线对齐，故而会出现图片略高于文字，解决办法是调整其底线对齐即可

    - 基线 abc   ---> baseline
    - 底线 yhp   ---> bottom
    - 中线       ---> middle

    - 任意位置   ---> 34 px  直接像素就好

行高、顶线、中线、基线及底线示意图
默认图片和文字的基线对齐

<img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3599057366,2990853161&fm=11&gp=0.jpg" alt=""><span>yhp</span>

可以看到图片与 h 对齐，y 和 p 确实没对齐，那是因为默认的基线对齐问题
在这里插入图片描述

调整底线参数，将图片和文字底线对齐

img{
    vertical-align: bottom;
    /*vertical-align: -5px;*/
}

<img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3599057366,2990853161&fm=11&gp=0.jpg" alt=""><span>yhp</span>

在这里插入图片描述

二、css 布局属性

2.1 background 标签背景属性

background用于设置标签背景，关于background的常用功能有：

background-color，设置背景颜色
backgroud-imgage，设置背景图片
background-repeat，背景图片如何重复
background-postion，背景图片位置

background-color: cornflowerblue;
 
background-image: url('1.jpg');   // 默认会重复的充满屏幕
 
background-repeat: no-repeat;(repeat:平铺满) 
/*background-repeat:repeat-x;*/       /*仅水平重复*/
/*background-repeat: repeat-y;*/     /*仅垂直重复*/
 
background-position: right top（20px 20px）;  // 启动获取背景图的范围,偏移有两个值，左边和右边 ，或者 直接center

background:#ffffff url('1.png') no-repeat right top;   // 可简写上边的属性，属性值不分先后
/*background:no-repeat center center url("https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3197842941,3401708652&fm=26&gp=0.jpgd")  ;*/

2.2 background 标签常用场景

面试题：背景属性应用场景有遇到吗，大概描述下？

做一张图片，把几十张图标放上边，只需请求一次即可
- 拉到整张图，移动图，调整到图标框的范围显示即可
- 此时就会显示特指的图标
特点就是减少请求次数，缓解服务器压力，提高网站稳定性

举例：
如图，假如我们的当前整个网页的所有图标组合成整幅背景图，当局部需要引用时，只需移动显示框的宽高范围就能拿到，不需要因小图标而多次请求后台服务，从而缓解服务请求压力。
在这里插入图片描述
这里，以小红心发卡为作为某个图标，引入如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .heart{
            width: 40px;     
            height: 30px;
            border: 1px solid red;
            background-image: url("https://tse1-mm.cn.bing.net/th/id/OIP.WM3mz60gyp_rGqYg5a2k0gHaNK?pid=Api&rs=1");
            background-repeat: no-repeat;
            background-position: -285px -153px;      /* 获取小红心发卡在背景图的位置  */
        }
    </style>
</head>
<body>

<div class="heart"></div>

</body>
</html>

2.2 border 标签边框属性

border属性是一个用于设置各种单独的边界属性的简写属性。border可以用于设置一个或多个以下属性的值： border-width, border-style, border-color。

border-style: solid;
  
border-color: chartreuse;
  
border-width: 20px;

简写：border: 30px rebeccapurple solid;

单独设置各边

border-top-style:dotted;
border-right-style:solid;
border-bottom-style:dotted;
border-left-style:none;

border-width

/* 用法一：明确指定宽度值 */
/* 当给定一个宽度时，该宽度作用于选定元素的所有边框 */
border-width: 5px;
/* 当给定两个宽度时，该宽度分别依次作用于选定元素的横边与纵边 */
border-width: 2px 1.5em;
/* 当给定三个宽度时，该宽度分别依次作用于选定元素的上横边、纵边、下横边 */
border-width: 1px 2em 1.5cm;
/* 当给定四个宽度时，该宽度分别依次作用于选定元素的上横边、右纵边、下横边、左纵边 （即按顺时针依次作用） */
border-width: 1px 2em 0 4rem;

/* 用法二：使用全局关键字 */
/* 可以使用的全局关键字有：inherit(继承),initial（初始值）,unset（不设置） */
border-width: inherit;

/* 用法三：使用作用于 border-width 的关键字 */
border-width: thin;
border-width: medium;
border-width: thick;

在这里插入图片描述

#s_val {
    border: ridge #ccc 6px;
}
#bi_val {
    border: solid red;
    border-width: 2px 10px;
}
#tre_val {
    border: dotted orange;
    border-width: 0.3em 0 9px;
}
#four_val {
    border: solid lightgreen;
    border-width: thin medium thick 1em;
}
p {
    width: auto;
    margin: 0.25em;
    padding: 0.25em;
}

<p id="s_val">
   one value: 6px wide border on all 4 sides</p>
<p id="bi_val">
    two different values: 2px wide top and bottom border, 10px wide right and left border</p>
<p id="tre_val">
    three different values: 0.3em top, 9px bottom, and zero width right and left</p>
<p id="four_val">
    four different values: "thin" top, "medium" right, "thick" bottom, and 1em right</p>

border-style

border-style 默认值是 none，这意味着如果只修改 border-width 和 border-color 是不会出现边框的。

/* Apply to all four sides */
border-style: dashed;

/* horizontal | vertical */
border-style: dotted solid;

/* top | horizontal | bottom */
border-style: hidden double dashed;

/* top | right | bottom | left */
border-style: none solid dotted dashed; 

/* Global values */
border-style: inherit;
border-style: initial;
border-style: unset;

border-color
设置边框颜色

border demo

在这里插入图片描述

 .c1{
       width: 80px;
       height: 80px;
       border-width: 1px;
       border-color: red;
       /*border-style: solid;*/
       border-right-style: solid;
   }
 
 <div class="c1"></div>

在这里插入图片描述

.test_border{
  border: 0.5rem outset pink;
  outline: 0.5rem solid khaki;
  box-shadow: 0 0 0 2rem skyblue;
  border-radius: 12px;
  font: bold 1rem sans-serif;
  margin: 2rem;
  padding: 1rem;
  outline-offset: 0.5rem;
}

<div class="test_border">I have a border, an outline, AND a box shadow! Amazing, isn't it?</div>

在这里插入图片描述

div {
            height: 40px;
            width: 400px;
            margin-top: 10px;
        }
 
 <div style="border: 2px solid #333333;border-radius: 10px;"></div>
 <div style="border: 1px solid #333333;border-bottom-right-radius: 20px;"></div>
 <div style="border: 1px solid #333333;border-bottom-right-radius: 20px;border-top-left-radius: 20px;"></div>
 <div style="border: 1px solid #333333;width: 100px;height: 100px;border-radius: 30px;"></div>
 <div style="border: 2px solid red;width: 80px;height: 80px;border-radius: 50%;"></div>

2.3 list-style 标签列表属性

list-style-type 设置列表项标志的类型。
list-style-image 将图象设置为列表项标志。
list-style-position 设置列表中列表项标志的位置。
list-style 简写属性。用于把所有用于列表的属性设置于一个声明中

/*list-style-type属性指定列表项标记的类型：*/
ul { list-style-type: square; }

/*使用图像来替换列表项的标记:*/
ul {
     list-style-image: url('');
     }

在这里插入图片描述

ul{
       list-style-type: none ;     /*去掉样式*/
       padding: 0;                /*去掉左边空隙*/
   }

<ul>
    <li>111</li>
    <li>222</li>
    <li>333</li>
</ul>

2.4 dispaly标签显示属性

display 属性有4个常用的值，用于修改属性的展示状态：

display:none，把标签隐藏。（设置display:none隐藏标签，移除之后显示标签）
display:block，变为块级标签。
display:inline;，变为行内标签。
display:inline-block，变为行块内标签（行内和块级特性结合）。

none(隐藏某标签，绝对隐藏，位置消失)

注意display:none与visibility:hidden的区别：

visibility:hidden 可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。
display:none 可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。

 .box{
        width: 200px;
          height: 200px;
      }

     .c1{
         background-color: red;
     }

     .c2{
         background-color: springgreen;
         display: none;          /*隐藏标签，其布局位置也消失*/
     }

     .c3{
         background-color: deepskyblue;
     }

<div class="c1 box"></div>
<div class="c2 box"></div>
<div class="c3 box"></div>

block(内联标签设置为块级标签)
比如说，内联标签 span，其默认是不能被设置宽高，但通过 display:bolck; 可以设置

span{
    width: 200px;
    height: 200px;
    background-color: gray;
    display: block;
    line-height: 200px;  /*垂直居中*/
    text-align: center;  /*水平居中*/
}

<span>display:block</span>

inline(块级标签设置为内联标签)

div {
	display:inline;
	}

inline-block
设置标签兼具块级可设置长宽以及内联不独占一行的特点。块级标签可设置长宽，但是独占一行，即是优点也是缺点。
面试题：现需求是如何在一行内显示多个可设置长宽的元素？
- 方式一：
  - display:inline-block可做列表布局，其中的类似于图片间的间隙小bug可以通过如下设置解决
  - 兼备块级标签可设置长宽，且不会独占一行
- 方式二：
  - float ： float 与长宽连用
```
- height: 300px;
- weight: 200px;
- float: left;
```

如下：一行内显示三个设置长宽的div标签
在这里插入图片描述

.box{
     width: 200px;
     height: 200px;
 }

.c1{
    background-color: red;
    display: inline-block;
}

.c2{
    background-color: springgreen;
    /*display: none;*/
    display: inline-block;
}

.c3{
    background-color: deepskyblue;
    display: inline-block;
}

<div class="c1 box"></div>
<div class="c2 box"></div>
<div class="c3 box"></div>

面试题：块级标签和内联的区别？

块级: 独占一行,可设置长宽
内联: 按内容占,不能设置长宽
原则上:块级标签可以嵌套内联标签,但是反过来不行

2.5 外边距(margine)和内边距(padding) 标签

默认是没有内边距的，只是文本区，只有border
加了 padding  后， 文本区不会变，但整个区域会变大

2.5.1 盒子模型

在这里插入图片描述

margin: 用于控制元素与元素之间的距离；margin的最基本用途就是控制元素周围空间的间隔，从视觉角度上达到相互隔开的目的。
padding: 用于控制内容与边框之间的距离(加padding不会影响内容区域大小)；
border(边框): 围绕在内边距和内容外的边框。
content(内容): 盒子的内容，显示文本和图像。

在标准模型中，如果你给盒设置 width 和 height，实际设置的是 content box。 padding 和 border 再加上设置的宽高一起决定整个盒子的大小。见下图。

假设定义了 width, height, margin, border, and padding:

.box {
  width: 350px;
  height: 150px;
  margin: 25px;
  padding: 25px;
  border: 5px solid black;
}

如果使用标准模型宽度 = 410px (350 + 25 + 25 + 5 + 5)，高度 = 210px (150 + 25 + 25 + 5 + 5)，padding 加 border 再加 content box。
在这里插入图片描述

注: margin 不计入实际大小 —— 当然，它会影响盒子在页面所占空间，但是影响的是盒子外部空间。盒子的范围到边框为止 —— 不会延伸到margin。

2.5.2 padding（内边距，内容到边框的距离)

padding内边距作用是为被应用的标签创建一部分内部间距。边距可以设置上、下、左、右方向。

/* 单独设置上下左右内边距 */
padding-left:8px;
padding-right:2px;
padding-top:4px;
padding-bottom:18px;

/* padding:上 右 下 左  （顺时针）; */
padding:10px 0 2px; 4px;

/* padding:上下  右左; */
padding:7px 5px;

/* padding:上下右左; */
padding:8px;

在这里插入图片描述

.c1{
     width: 200px;
     height: 200px;
     border:1px solid red;
     padding: 50px;
}

<div class="c1">第一个盒模型</div>

2.5.3 margine（外边距，盒子与盒子之间的距离)

外边距用于相邻的标签之间增加距离用。边距可以设置上、下、左、右方向。

/* 单独设置上下左右内边距 */
margin-left:8px;
margin-right:2px;
margin-top:4px;
margin-bottom:18px;

/* margin:上 右 下 左; （顺时针） */
margin:10px 0 2px; 4px;

/* margin:上下  右左; */
margin:7px 5px;

/* margin:上下右左; */
margin:8px;

居中应用

全局使用，一般是去除 body 默认的 margin设置

body{
    margin: 0;
}

局部使用，左右自适应居中，一般是局部元素

margin: 0 auto;     /*盒子元素上下为0 ， 左右为自适应居中*/

案例： 在这里插入图片描述

body{
    margin: 0;   /*去掉默认body的margin*/
}
.top_bar{
    width: 100%;
    height: 70px;
    background-color: #333;
    color: #b0b0b0;;
}

.container{
    width:  1226px;
    height: 70px;
    background-color: greenyellow;  /*加以区分*/
    margin: 0 auto;          /*盒子，上下为零，左右自适应居中*/
    text-align: center;      /*文本左右居中*/
    line-height: 70px;       /*文本上下居中*/
}

<div  class="top_bar">
    <div class="container">
        小米商城 | MIUI | IoT | 云服务 | 金融 | 有品
    </div>
</div>

两个盒模型margin属性应用

.c1{
     width: 200px;
     height: 200px;
     border:1px solid red;
     padding: 50px;
     display: inline-block;   /*兼备块级与内联标签，可设置长宽*/
     margin-bottom: 30px;     /*正值远离，负值靠近*/
}

.c2{
     width: 200px;
     height: 200px;
     border:1px solid blue;
     padding:50px;
     display: inline-block;  /*兼备块级与内联标签，可设置长宽*/
     margin-left: 20px;      /*正值远离，负值靠近，设置c2远离c1*/
}

<div class="c1">第一个盒模型</div>
<div class="c2">第二个盒模型</div>
<hr>

注意：当两个毗邻margin相遇时，其外间距是最大的那个：

当两个毗邻margin相遇时，其外间距是最大的那个，因为浏览器会默认满足其间距即可，不会再给更多的间距浪费空间

.c1{
    margin-bottom: 30px;
    }
.c2{
    margin-top: 20px;
}

/*其外间距是 30px*/

思考1:body的外边距

边框在默认情况下会定位于浏览器窗口的左上角，但是并没有紧贴着浏览器的窗口的边框，这是因为body本身也是一个盒子（外层还有html），在默认情况下， body距离html会有若干像素的margin，具体数值因各个浏览器不尽相同，所以body中的盒子不会紧贴浏览器窗口的边框了，为了验证这一点，加上：

 body{
    border: 2px solid;
    background-color: cadetblue;
    }

解决方法：

body{
    margin: 0;
}

思考2：margin collapse（边界塌陷或者说边界重叠）

1、兄弟div：
上面div的margin-bottom和下面div的margin-top会塌陷，也就是会取上下两者margin里最大值作为显示值
2、父子div：
if 父级div中没有border，padding，inlinecontent，子级div的margin会一直向上找，直到找到某个标签包括border，padding，inline content中的其中一个，然后按此div 进行margin；

<!DOCTYPE html>
<html lang="en" style="padding: 0px">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            margin: 0px;
        }
        .div1{
            background-color: rebeccapurple;
            width: 300px;
            height: 300px;
            overflow: hidden;

        }
        .div2{
            background-color: green;
            width: 100px;
            height: 100px;
            margin-bottom: 40px;
            margin-top: 20px;
        }
        .div3{
            background-color:teal;
            width: 100px;
            height: 100px;
            margin-top: 20px;
        }
    </style>
</head>
<body>
<div style="background-color: bisque;width: 300px;height: 300px"></div>
<div class="div1">
   <div class="div2"></div>
   <div class="div3"></div>
</div>
</body>
</html>

解决方法：

overflow: hidden;

2.6 float 浮动标签属性

float浮动用于实现N个标签并排存放（主要针对块级标签，行内标签默认就可以并排存放）。页面布局时，一般都会使用div标签及float属性来实现，float设置时一般有两个值：

float:left，标签并排向左浮动。
float:right，标签并排向右浮动。

如下：一行内显示三个设置长宽的div标签
在这里插入图片描述

.box{
width: 200px;
height: 200px;
}

.c1{
    background-color: red;
    float: left;
    /*display: inline-block;*/
}

.c2{
    background-color: springgreen;
    float: left;
    /*display: inline-block;*/
}

.c3{
    background-color: deepskyblue;
    float: left;
    /*display: inline-block;*/
}

<div class="c1 box"></div>
<div class="c2 box"></div>
<div class="c3 box"></div>

2.6.0 浮动的自围效果

在这里插入图片描述

img{
    width: 300px;
    height: 300px;
    float: left;
}
p{
    font-size: 32px;
    text-align: justify;
    font-family: "Times New Roman";
}

<img src="https://img2.woyaogexing.com/2017/07/13/c5a88cdc5775593e!400x400_big.jpg" alt="">
<p>
    When someone looks into your eyes they should see something alive within you. Having a dream is like owning a lighthouse1 which directs you on your journey. At every turn we come across its mystery. At each new level we become more of the person we were meant to become. In lonely times, when we pass through a storm of disappointment, we find our faith is unshaken, our strength still strong.

Believe in your faith. Set the vision before your eyes. Write down your most sincere dreams and when the opportunity comes, step into your dream. It may take one season or more, but the result is the same. Make big dreams and then go out and make them realities. The highest hopes of the dreamer are revealed with every step taken in their journey to the impossible. For a season we must protect the dream so that it can grow quietly on the inside. But if we tenderly care for our deepest expectations, slowly but surely the dream will become new life.

Dreaming is an act of faith. The light of your expectations will cast off the shadows of a disbelieving world. God has given us the dreamer as a gift to light an unbelieving world.

Find your treasure within and cherish2 it. Tomorrow is waiting for you to take the first step.
</p>

2.6.1 基本浮动规则

先来了解一下block元素和inline元素在文档流中的排列方式。

block元素通常被现实为独立的一块，独占一行，多个block元素会各自新起一行，默认block元素宽度自动填满其父元素宽度。block元素可以设置width、height、margin、padding属性。

inline元素不会独占一行，多个相邻的行内元素会排列在同一行里，直到一行排列不下，才会新换一行，其宽度随元素的内容而变化。inline元素设置width、height属性无效。

常见的块级元素有 div、form、table、p、pre、h1～h5、dl、ol、ul 等。
常见的内联元素有 span、a、strong、em、label、input、select、textarea、img、b r等
所谓的文档流，指的是元素排版布局过程中，元素会自动从左往右，从上往下的流式排列。

脱离文档流，也就是将元素从普通的布局排版中拿走，其他盒子在定位的时候，会当做脱离文档流的元素不存在而进行定位。

假如某个div元素A是浮动的：

如果A元素上一个元素也是浮动的，那么A元素会跟随在上一个元素的后边(如果一行放不下这两个元素，那么A元素会被挤到下一行)；
如果A元素上一个元素是标准流中的元素，那么A的相对垂直位置不会改变，也就是说A的顶部总是和上一个元素的底部对齐。此外，浮动的框之后的block元素元素会认为这个框不存在，但其中的文本依然会为这个元素让出位置。浮动的框之后的inline元素，会为这个框空出位置，然后按顺序排列。

2.6.2 非完全脱离文档流（半脱离文档流）

左右结构div盒子重叠现象，一般是由于相邻两个DIV一个使用浮动一个没有使用浮动。一个使用浮动一个没有导致DIV不是在同个“平面”上，但内容不会造成覆盖现象，只有DIV形成覆盖现象。
在这里插入图片描述

body{
    margin: 0;
}
.r1{
    width: 100px;
    height: 100px;
    background-color: 	#F0FFF0;
    font-size: 15px;
    ont-family: 楷体;
    float: left;
}
.r2{
    width: 400px;
    height: 400px;
    font-size: 54px;
    font-family: 楷体;
    background-color: 	#CDC5BF;
    background-image: url("https://img2.woyaogexing.com/2017/07/13/c5a88cdc5775593e!400x400_big.jpg");
    /*float: left;*/
}

<div class="r1">
    来自div1的文本：
    身无彩凤双飞翼，心有灵犀一点通。
</div>
<div class="r2">
    来自div2的文本：
    山有木兮木有枝，心悦君兮君不知。
</div>

>>>>解决方法：要么都不使用浮动；要么都使用float浮动；要么对没有使用float浮动的DIV设置margin样式。

2.6.3 父级坍塌现象

2.6.3.1 父级塌陷的问题引入

现象复盘
当父级内的子元素都没有浮动时，父级的高度是通过子级元素高度撑起来

当父级内的子元素都发生浮动，即飘起来时，则父级元素的高度没了，产生父级塌陷的问题>
在这里插入图片描述

例子说明：.container和box3的布局是上下结构，上图发现box3跑到了上面，与.container产生了重叠，但文本内容没有发生覆盖，只有div发生覆盖现象。这个原因是因为第一个大盒子里的子元素使用了浮动，脱离了文档流，导致.container没有被撑开。box3认为.container没有高度（未被撑开），因此跑上去了。

.container{
    border:1px solid red;
    width:900px;
}
#box1{
    background-image: url("http://www.ghost64.com/qqtupian/zixunImg/local/2017/08/17/15029644517780.jpg");
    width:300px;height:300px;
    float: left;
}
#box2{
    background-image: url('https://img2.woyaogexing.com/2017/07/13/c5a88cdc5775593e!400x400_big.jpg');
    width:300px;height:300px;
    float: left;
}
 #box3{
     background-color:grey;height:40px;width: 900px;
     border: 1px solid yellow;
 }

<div class="container">
        <div id="box1">box1 </div>
        <div id="box2">box2 </div>
</div>
<br>
<div id="box3">box3</div>

2.6.3.2 父级塌陷的解决办法

固定高度
给.container设置固定高度，一般情况下文字内容不确定多少就不能设置固定高度，所以一般不能设置“.container”高度(当然能确定内容多高，这种情况下“.container是可以设置一个高度即可解决覆盖问题。
或者给.container加一个固定高度的子div：
```
<div class="container">
    <div id="box1">box1 </div>
    <div id="box2">box2 </div>
    <div style="height: 300px"></div>
</div>
<br>
<div id="box3">box3</div>
```
但是这样限定固定高度会使页面操作不灵活，不推荐！

清除浮动(推荐)

clear语法：
clear : none | left | right | both

取值：
none : 默认值。允许两边都可以有浮动对象
left : 不允许左边有浮动对象
right : 不允许右边有浮动对象
both : 不允许有浮动对象

但是需要注意的是：clear属性只会对自身起作用，而不会影响其他元素。
实例如下：box1设置浮动，左飘；box2设置左右清除浮动，且自身不浮动；box3设置浮动，左飘。结果如下，box2设置的不允许两边有浮动只是对自己有效而已，不会影响其他元素。
在这里插入图片描述

.box{
    width: 200px;
    height: 200px;
}
.c1{
    background-color: green;
    float: left;
}
.c2{
    background-color: orange;
    width: 300px;
    float: left;
    clear: both;   /* clear属性只会对**自身**起作用，而不会影响其他元素*/
}
.c3{
    background-color: gray;
    float: left;
}

<div class="c1 box">box1</div>
<div class="c2 box">box2</div>
<div class="c3 box">box3</div>

把握住两点：
1、元素是从上到下、从左到右依次加载的。
2、clear: left;对自身起作用，一旦左边有浮动元素，即切换到下一行来保证左边元素不是浮动的，依据这一点解决父级塌陷问题。
解决父级塌陷：

    .clearfix:after {                <----在类名为“clearfix”的元素内最后面加入内容；
    	content: ".";                 <----内容为“.”就是一个英文的句号而已。也可以不写。
  	   display: block;               <----加入的这个元素转换为块级元素。
    	clear: both;                  <----清除左右两边浮动。
    	visibility: hidden;           <----可见度设为隐藏。注意它和display:none;是有区别的。
                                          visibility:hidden;仍然占据空间，只是看不到而已；
        line-height: 0;               <---- 行高为0；
        height: 0;                    <---- 高度为0；
        font-size:0;                  <---- 字体大小为0；
    }
    
    	.clearfix { *zoom:1;}         <----这是针对于IE6的，因为IE6不支持:after伪类，这个神
                                           奇的zoom:1让IE6的元素可以清除浮动来包裹内部元素。

整段代码就相当于在浮动元素后面跟了个宽高为0的空div，然后设定它clear:both来达到清除浮动的效果。
之所以用它，是因为，你不必在html文件中写入大量无意义的空标签，又能清除浮动。
<div class="head clearfix"></div>

通过伪类 after 执行，解决父级塌陷 在这里插入图片描述

.container{
    border:1px solid red;
    width:900px;
}
#box1{
    background-image: url("http://www.ghost64.com/qqtupian/zixunImg/local/2017/08/17/15029644517780.jpg");
    width:300px;height:300px;
    float: left;
}
#box2{
    background-image: url('https://img2.woyaogexing.com/2017/07/13/c5a88cdc5775593e!400x400_big.jpg');
    width:300px;height:300px;
    float: left;
}
 #box3{
     background-color:grey;height:40px;width: 900px;
     border: 1px solid yellow;
 }  
 .clear_fix:after{display: block;clear: both;content: ""}

<div class="container clear_fix">
        <div id="box1">box1 </div>
        <div id="box2">box2 </div>
        <!--<div style="height: 300px"></div>-->
</div>
<br>
<div id="box3">box3</div>

2.7 position 标签定位属性 static | relative | absolute | fixed

2.7.1 static

<font size=3 color=blue>**static 默认值，无定位，不能当作绝对定位的参照物，并且设置标签对象的left、top等值是不起作用的的。**

2.7.2 relative／absolute

relative: 相对定位

相对定位是相对于该元素在文档流中的原始位置，即以自己原始位置为参照物。有趣的是，即使设定了元素的相对定位以及偏移值，元素还占有着原来的位置，即占据文档流空间。对象遵循正常文档流，但将依据top，right，bottom，left等属性在正常文档流中偏移位置。而其层叠通过z-index属性定义。

注意：position：relative的一个主要用法：方便绝对定位元素找到参照物。
在这里插入图片描述

#box1{
    width:200px;height:200px;
    background-color: #499ef3;
}
#box2{
    width:200px;height:200px;
    background-color: dimgray;
    position: relative;       /*相对位移，相对自己原来位置*/
    left: 200px;              /*注意：是以目标点为起点，以本来位置为方向参考*/
    top: 200px;               /*注意：是以目标点为起点，以本来位置为方向参考*/
}
 #box3{
     width:200px;height:200px;
     background-color: orchid;
 }

<div class="container">
    <div id="box1">box1</div>
    <div id="box2">box2</div>
    <div id="box3">box3</div>
</div>

absolute: 绝对定位

定义：设置为绝对定位的元素框从文档流完全删除，并相对于最近的已定位祖先元素定位，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块（即body元素）。元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。

重点：如果父级设置了position属性，例如position:relative;，那么子元素就会以父级的左上角为原始点进行定位。这样能很好的解决自适应网站的标签偏离问题，即父级为自适应的，那我子元素就设置position:absolute;父元素设置position:relative;，然后Top、Right、Bottom、Left用百分比宽度表示。

另外，对象脱离正常文档流，使用top，right，bottom，left等属性进行绝对定位。而其层叠通过z-index属性定义。
示例：这里box2最近的祖先元素当属body了，所以它相对于body的位移如下，而是脱离了文档流，box3会顶上去
在这里插入图片描述

body{
    margin: 0;
}
#box1{
    width:200px;height:200px;
    background-color: #499ef3;
}
#box2{
    width:200px;height:200px;
    background-color: dimgray;
    /*position: relative;       !*相对位移，相对自己原来位置*!*/
    position: absolute;        /*绝对位移，原来离自己最近的已定位祖先元素定位，并且脱离文档流*/
    left: 200px;              /*注意：是以目标点为起点，以本来位置为方向参考*/
    top: 200px;               /*注意：是以目标点为起点，以本来位置为方向参考*/
}
 #box3{
     width:200px;height:200px;
     background-color: orchid;
 }


<div id="box1">box1</div>
<div id="box2">box2</div>
<div id="box3">box3</div>

相对定位和绝对定位的配合应用 – 轮播图
实现：多张图定位到父级元素框内

.container{
    width: 590px;
    height: 470px;
    border: 1px solid rebeccapurple;

    margin: 100px auto;
    position: relative;      /*设置父级相对定位，使其子元素可以参考进行相对定位*/
}
.container ul{
   list-style-type: none;
   padding: 0;
}
.container ul li img{
position: absolute;     /*以最近的已定位的祖先元素为参考，进行绝对定位，完全脱离文档流*/
top:0;                  /*这里目标就是重合到父级元素内，实现轮播图的效果*/
left:0;
}

<div class="container">

    <ul class="img">
        <li><a href=""><img src="https://img14.360buyimg.com/babel/s1180x940_jfs/t1/127934/27/16010/123158/5f92bbf7E1dcdcd9d/a33bb0f332b8a7dd.png.webp" alt="" width="590" height="470"></a></li>
        <li><a href=""><img src="https://imgcps.jd.com/ling4/100006487373/5Lqs6YCJ5aW96LSn/5L2g5YC85b6X5oul5pyJ/p-5f3a47329785549f6bc7a6ec/407ce59c/cr/s/q.jpg" alt="" width="590" height="470"></a></li>
        <li><a href=""><img src="https://img30.360buyimg.com/pop/s1180x940_jfs/t1/131983/16/13044/71116/5f8ecb72Ed795e147/3ce4f335deced1c0.jpg.webp" alt="" width="590" height="470"></a></li>
        <li><a href=""><img src="https://img10.360buyimg.com/pop/s1180x940_jfs/t1/150312/37/11473/94888/5f901eaaEb1ad389d/8b178ff31b94b85b.jpg.webp" alt="" width="590" height="470"></a></li>
        <li><a href=""><img src="https://img10.360buyimg.com/da/s1180x940_jfs/t1/129036/39/7978/45808/5f1c896eE7a543523/edca1f777ea7b4b6.jpg.webp" alt="" width="590" height="470"></a></li>
    </ul>

</div>

fixed 完全脱离文档流
生成绝对定位的元素，相对于浏览器窗口进行定位。例如最常见的广告位和返回顶部，都是基于它来实现。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS学习</title>
    <style>
    body{
        margin: 0;
    }
    .back-top{
        width: 45px;
        height: 45px;
        border: 1px solid #dddddd;
        background-color: white;
        position: fixed;     /*固定定位*/
        right: 2px;          /*距离右边 2px*/
        bottom: 50px;        /*距离下边50px*/
        font-size: 12px;
        text-align: center;
        color: #757575;
    }
    .back-top img{
        display: block;
        width: 20px;
        margin: 3px auto;
    }
    </style>
</head>
<body>
    <div style="height: 48px;background-color: black"></div>
    <div style="height: 500px;background-color: #f5f5f5;"></div>
    <div style="height: 500px;background-color: white;"></div>
    <div style="height: 500px;background-color: #f5f5f5;"></div>
    <div class="back-top">
        <img src="http://i1.mifile.cn/f/i/2018/home/totop.png" alt="">
        回顶部
    </div>
</body>
</html>

2.8 cursor 光标标签

cursor指鼠标放在标签上之后显示的形状。
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS学习</title>
    <style>
        a{
            text-decoration: none;
        }
        div{
            font-family: 楷体;
            font-size: larger;
        }
    </style>
</head>
<body>
    <a href="#">长恨春归无觅处，不知转入此中来。 --a标签 </a>
    <div>春花秋月何时了，往事知多少。   --文本</div>
    <div style='cursor: pointer;'>人面不知何处去，桃花依旧笑春风。--pointer 小手</div>
    <div style='cursor: help;'>人生若只如初见，何事秋风悲画扇。--help 小问号</div>
    <div style='cursor: move;'>云中谁寄锦书来，雁字回时，月满西楼。--move 移动符号</div>
</body>
</html>

2.9 opacity 透明度标签

给标签设置透明度，例如：常见的加载、登录框等显示都是基于它实现。
在这里插入图片描述
实现思路：

基于z-index属性把页面分为三层：最底层是文章、中间层是黑色遮罩、最上层是登录框。
为中间的黑色遮罩设置透明度，否则无法看到最底层，透明度值范围：0~1，越大越不透明，例如：

filter:alpha(opacity=50); /* IE */
-moz-opacity:0.5;        /* 老版Mozilla */
-khtml-opacity:0.5;    /* 老版Safari */
opacity: 0.5;          /* 支持opacity的浏览器*/

案例：对话框示例代码

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            margin: 0;
        }
        .container{
            width: 980px;
            margin: 0 auto;
        }
        .header{
            height: 48px;
            background-color: #499ef3;
        }
        .shade{
            position: fixed;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            background-color: black;
            opacity: 0.7;
        }
        .login{
            width: 400px;
            height: 300px;
            background-color: white;
            border: 1px solid #dddddd;
            position: fixed;
            top: 60px;
            left: 50%;
            margin-left: -200px;
        }
        .container img{
            width: auto;
            height: auto;
        }
    </style>
</head>
<body>
    <div class="header"></div>
    <div class="body">
        <div class="container" style="text-align: center">
            <img src="http://d.hiphotos.baidu.com/zhidao/pic/item/a1ec08fa513d269792a2583857fbb2fb4316d866.jpg" alt="">
        </div>
    </div>
    <!--遮罩层-->
    <div class="shade"></div>
    <!--登录框-->
    <div class="login">
        <h2 style="text-align: center">用户登录</h2>
    </div>
</body>
</html>

2.6.4 demo：小米商城导航栏

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>小米商城</title>
    <link rel="shortcut icon" href="img/favicon.ico">
    <style>
        body {
            margin: 0;
            font: 14px/1.5 Helvetica Neue, Helvetica, Arial, Microsoft Yahei, Hiragino Sans GB, Heiti SC, WenQuanYi Micro Hei, sans-serif;
        }
        .container {
            width: 1190px;
            margin: 0 auto;
        }
        .left {
            float: left;
        }
        .right {
            float: right;
        }
        .header {
            height: 40px;
            line-height: 40px;
            background-color: #333;
            color: #b0b0b0;
            font-size: 12px;
        }
        .header .menus a, .header .account a, .header .car a {
            text-decoration: none;
            display: inline-block;
            padding: 0 5px;
        }
        .header .car a {
            display: inline-block;
            height: 40px;
            padding: 0 15px;
            margin-left: 20px;
            background-color: #424242;
        }
    </style>
</head>
<body>
<div class="header">
    <div class="container">
        <div class="menus left">
            <a>小米商城</a>
            <a>MIUI</a>
            <a>IoT</a>
            <a>云服务</a>
        </div>
        <div class="car right"><a>购物车（0）</a></div>
        <div class="account right">
            <a>登录</a>
            <a>注册</a>
            <a>消息通知</a>
        </div>
        <div style="clear: both;"></div>
    </div>
</div>
</body>
</html>