Div简介

  • Div是层叠样式表中的定位技术，全称DIVision
  • 有时把div称为2图层，更多的时候称为块

Div样式设置

  • div大小
  • div溢出效果演示、换行、滚动条显示
  • div边框、轮廓设置
  • 盒子模型

Div设置大小，位置，背景

1
2
3
4
5
6
7
8
div{
    background-color: yellow;
    width: 100px;
    height: 100px;
    position:absolute;/*定义绝对位置，方便下面top和left定位，不然会失效*/
    top: 200px;
    left: 200px;
}

Div溢出处理效果

  • 超出div宽度的文字或图片进行隐藏处理
  • 超出div宽度高度的文字或图片增加滚动条

overflow属性设置

image-20220401215821569

CSS轮廓

CSS轮廓的属性值和作用

  • 属性值：outline
  • 作用：绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用

小贴士

  • 轮廓的其他属性还有：dotted（点状轮廓），solid（实线），double（双线）

CSS轮廓属性的调用举例

1
2
3
4
5
6
7
8
9
10
#div1{
    background-color: yellow;
    width: 150px;
    height: 150px;
    top: 150px;
    left: 150px;
    position: absolute;
    overflow: hidden;
    outline: dashed;/*虚线轮廓*/
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!--定义html结构-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<link rel="stylesheet" href="test.css">
<body>
    <div id="div1">
        B站早期是一个ACG(动画、漫画、游戏）内容创作与分享的视频网站。 [5-6]  经过十年多的发展,围绕用户、创作者和内容,构建了一个源源不断产生优质内容的生态系统,B站已经涵盖7000多个兴趣圈层的多元文化社区,曾获得QuestMobile研究院评选的“Z世代偏爱APP”和“Z世代偏爱泛娱乐APP”两项榜单第一名并入选“BrandZ”报告2019最具价值中国品牌100强
    </div>
</body>
</html>

CSS边框

CSS边框的属性

  • border-left
  • border-right
  • border-top
  • border-bottom

CSS边框的作用

  • 设置div边框的边线宽度、颜色、虚线、实线等样式css属性

举例border-bottom：solid；//设置下边框为实线

1
2
3
4
5
6
7
8
9
10
11
#div1{
    background-color: yellow;
    width: 150px;
    height: 150px;
    top: 150px;
    left: 150px;
    position: absolute;
    overflow: hidden;
    outline: dotted;
    border-bottom: solid;/*设置下边框为实线*/
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<link rel="stylesheet" href="test.css">
<body>
    <div id="div1">
        B站早期是一个ACG(动画、漫画、游戏）内容创作与分享的视频网站。 [5-6]  经过十年多的发展,围绕用户、创作者和内容,构建了一个源源不断产生优质内容的生态系统,B站已经涵盖7000多个兴趣圈层的多元文化社区,曾获得QuestMobile研究院评选的“Z世代偏爱APP”和“Z世代偏爱泛娱乐APP”两项榜单第一名并入选“BrandZ”报告2019最具价值中国品牌100强
    </div>
</body>
</html>

image-20220402192347557

小贴士

  • border还有其他的属性：none（无边框），double（双线边框）等

CSS盒子模型

CSS盒子模型简介

  • 在HTML中，所有的标签都可以设置宽度/高度、内边距、边框、外边距，HTML中所有的标签都是盒子

CSS盒子模型的范围

image-20220402194808930

宽度/高度（蓝色）：content 指定可以存放的位置

内边距（绿色）：padding

边框（黄色）：border

外边距（橘色）：margin

盒子模型的宽度和高度

1.内容的宽度和高度

​ 内容的宽度和高度就是通过标签的width/height属性设置的宽度和高度

2.元素的宽度和高度

​ 宽度=左边框+左内边框+内容的宽度+右内边框+右边宽

​ 高度=上边框+上内边框+内容的高度+下内边框+下边宽

3.元素的空间的宽度和高度

​ 宽度=左外边距+左边框+左内边框+内容的宽度+右内边距+右边框+右外边距

​ 高度=上外边距离+上边框+上内边距+内容的高度+下内边框+下边宽+下外边距

盒子box-sizing属性

  • CSS3新增加了一个box-sizing属性，这个属性可以保证我们盒子新增padding和border属性之后，盒子的宽度和高度是不变的
  • 新增padding和border属性之后，要想保证盒子元素的宽度不变，那么就必须减去一部分内容的宽度和高度

CSS元素居中

居中

  • 将文字居中：就是让自己的容器中的~元素居中，常用于文本或图片等内联元素
  • 将对象居中：就是让容器中的~自己居中，常作用于块元素，且需要配合宽度的使用

举例

  • 设置文字居中
  • 设置块状居中
1
2
3
4
5
6
7
8
9
#div1{
    background-color: yellow;
    margin-top: 10px;
    margin-bottom: 10px;
    padding-right: 20px;
    text-align: center;
    line-height: 200px;    /*表示文字垂直水平居中*/
    margin: 20px auto;      /*设置块状水平居中，20px是距离上边框的距离*/
}

image-20220403130959027

CSS浮动

概念

  • 可以使对象与对象的排列方式发生改变，以达到页面布局的效果

CSS浮动的术语

  • 行级元素：行内元素与其他元素都会在一条水平线上排列，都是在同一行
  • 行级相关元素：a标签，label，img，span等
  • 块级元素：在默认情况下，会独占一行
  • 块级相关元素：div，h标签，li，table等

CSS定位机制

定位机制

  • 首先定位机制主要针对的是块级元素
  • (标准)文档流（从上到下依次排列，中间没有改变任何布局和位置）

image-20220403134424721

  • 脱标流：(脱离标准文档流)有两种，分别是float，position:absolute)，被称为浮动，也被称为position的实现效果（让块级元素实现从左到右，从上往下）比如让内容4脱离文档流，出现在内容2的后面

CSS浮动：float属性

float属性设置

  • left-元素向左浮动
  • right-元素向右浮动
  • none-默认值。元素不浮动
总结：

给谁添加float，就将谁脱标，后面的内容会顶上来显示。

如果顶上去以后，托标的内容没有改变位置，就会出现后者被前者（脱标内容）覆盖的情况。

如果没有改变位置，就会出现该在的地方

float的崩溃

概念

  • 当父元素没有设置高度的情况下，将子元素设置为浮动（float）父一级的块级元素高度发生破坏（又称为破坏，崩塌）
  • 核心的内容为，浮动的子元素不能撑起非浮动的父元素
  • 也就是说浮动的子元素并不能撑起父元素的高度，必须是标准流的子元素（非浮动的）才能撑起父元素的高度
  • 子类中元素的高度和宽度会撑起父级元素的高度和宽度
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
#div1{
    border: 1px solid black;
    
    background-color: red;
}
#div2{
    background-color: yellow;
    height: 300px;
    width: 450px;
    float: left;/*不会撑起父类块级元素中的高度 */
    
}
#div3{
    background-color: blue;
    height: 160px;
    width: 500px;
    float: left;/*不会撑起父类块级元素中的高度 */
}

float的包裹性

包裹性

  • 当div设置浮动后，宽度会自适应其内容的宽度
  • 块级元素默认宽度就是父级元素的宽度，div设置浮动产生包裹特性
  • 如果块级元素为父元素，行级元素为子元素，当块级元素设置float时，产生包裹特性，会多出（基准线）

解决float包裹性产生的基准线

  1. 将img转换为块级元素vertical-align：bottom
  2. 垂直对齐方式：底部对齐；行级元素转块级元素
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<html>
<head>
   <style type="text/css">
    div{
    	background-color: yellow;
    	float: left;
    }
    img{
    	vertical-align: bottom;/*将行级元素更改为块级元素*/
    }
   </style>
</head>
<body>
   <div>
   	<img src="image/3.jpg"/>
   </div>
</body>
</html>

3.使用float进行图文混排

float的设计初衷 –> 实现图文混排（环绕方式），文字和矩形位置，能够进行环绕排列

随着技术进入 –>例如用于商品列表并排表示

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
/*img和div为平级关系*/
<html>
<head>
   <style type="text/css">
    div{
    	background-color: yellow;
    	float: left;
    }
    img{
    	vertical-align: bottom;
    }
    p{
    	text-align: justify;/*设置两端对齐*/
    	line-height: 20px;/*设置行高*/
    }
   </style>
</head>
<body>
   <div>
   	<img src="image/3.jpg"/>
   </div>
   <p>
   	包裹性：当div设置浮动后 宽度会自适应其内容的宽度。
块级元素默认宽度就是父级元素的宽度，div设置为float 产生包裹特性
行级元素都会出现块级元素包裹多出（基准线）
解决：
1）将img转换为块级元素 vertical-align:botom
2）垂直对齐方式：底部对齐；行级元素转块级元素  
   </p>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
/*块级元素和行级元素为父子关系*/
<html>
<head>
   <style type="text/css">
    div{
    	background-color: white;
    	float: left;
    }
    img{
    	vertical-align: bottom;
    	float: left;
    }
    p{
    	text-align: justify;
    	line-height: 20px;
    }
   </style>
</head>
<body>
   <div>
   	<img src="image/3.jpg"/>
   	<p>
   	包裹性：当div设置浮动后 宽度会自适应其内容的宽度。
块级元素默认宽度就是父级元素的宽度，div设置为float 产生包裹特性
行级元素都会出现块级元素包裹多出（基准线）
解决：
1）将img转换为块级元素 vertical-align:botom
2）垂直对齐方式：底部对齐；行级元素转块级元素  
   </p>
   </div>
   
</body>
</html>

CSS的float清除浮动

为什么需要清除浮动

  • 为了父元素不会出现”高度崩塌”
  • 如果强制规定了外层容器的尺寸，则显得就不那么灵活，高度就不能自动适应了（以后的数据，大多都是从后台获取的，这样的内容多少和版本就会不一致）
  • 从某个元素开始我们不再需要浮动效果了

清除float浮动的方法

方法一

清除浮动代码 -> clear:both（right and left）； - > 表示清除元素之前的浮动，如果本元素之后还有浮动，是不受这段清除代码的影响的

clear: left ->清除左浮动

clear:right ->清除右浮动

1
2
3
4
5
6
7
#div4{
    background-color: black;

    width: 240px;
    height: 240px; 
    clear: both;/*清除浮动float，说明从div4的时候就不再浮动了*/
}

方法二

额外添加一个清除浮动的div，防止清除div的代码

#clearDiv{clear：both}

1
2
3
#clearDiv{/*在div3和div4中间设置clear: both来达到div4清除浮动的效果*/
    clear: both;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<link rel="stylesheet" href="test.css">
<body>
    <div id="div1">
        <div id="div2"></div>
        <div id="div3"></div>
        <div id="clearDiv"></div><!--设置一个块级元素来设置css样式做清除浮动的操作-->
        <div id="div4"></div>
    </div>
</body>
</html>

方法三

目前一些大型网站流行的方法，当网站内容很多的时候，可以防止出现一个意料之外的问题

方法二的升级，防止其他的误操作

1
2
3
4
5
6
7
8
9
10
11
12
#clearDiv{/*被下面的伪元素选择器，不在浏览器中显示*/
    background-color: pink;
    width: 1000px;
    height: 1000px;
}
#clearDiv::after{/*在clearDiv内容之后插入新的元素*/
    content: "";/*在clearDiv中间设置内容，但是不在浏览器中显示*/
    visibility: hidden;/*将内容进行隐藏，防止误操作*/    
    height: 0px;/*将行高设置为空*/
    display: block;/*块状显示，将content转换为跨级元素*/
    clear: both;
}