学习笔记——CSS进阶

Posted 别呀

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了学习笔记——CSS进阶相关的知识,希望对你有一定的参考价值。

在网页的布局和页面元素的表现方面,要掌握的最重要的概念是css的盒子模型(BoxModel)以及盒子在浏览器中的排列(定位),这此概念用来控制元素在页面上的排列和显示方式,形成CSS的基本布局。

一、盒子模型

盒子模型由内容,内边距,边框和外边距组成,下图是盒子模型的结构图:

盒子模型是CSS的基石之一,它指定元素如何显示以及(在某种程度上)如何相互交互,页面上的每个元素都被浏览器看成是一个矩形的盒子,这个盒子由元素的内容、填充、边框和边界组成。网页就是由许多个盒子通过不同的排列方式(上下排列、左右排列、嵌套排列)堆积而成。


1.1、边框border

1.1.1、边框属性

属性含义
border-color边框颜色
border-width边框宽度
border-style边框样式
border-left左边框
border-right右边框
border-top上边框
border-bottom下边框

复合样式border
格式:

border: 粗细 样式 颜色

如:

border: 1px solid red;

1.1.1、实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>边框border实例</title>
    <style>
        div{
            width: 200px;
            height: 200px;
           /*border-width: 3px;*/
            /*border-style: solid;*/
            /*border-color: #0000FF;*/
            /*border: none;*//*无边框*/

            /* 全部设置边框 */
            /*border: 1px solid red;*/
            /* 设置上边框 */
             border-top: 2px solid red;
            /* 设置左边框 */
             border-left: 3px solid orange;
            /* 设置右边框 */
             border-right: 4px solid yellow;
            /* 设置下边框 */
             border-bottom: 5px solid green;
             
        }

		</style>
</head>
<body>
    <div>

    </div>
</body>
</html>

结果展示:


1.2、内边距padding

padding 属性也称为盒子的内边距。位于盒子的边框和内容之间,和表格的填充属性(cellpadding)相似。如果填充属性为0,则盒子的边框会紧挨着内容,这样通常不美观。简单的理解就是:内边距就是边框到内容的距离。

当对盒子设置了背景颜色或背景图像后,那么背景会覆盖 padding 和内容组成的区域,并且默认情况下背景图像是以 padding 的左上角为基准点在盒子中平铺的。


1.2.1、内边距属性

属性含义
padding-top上内边距
padding-right右内边距
padding-bottom下内边距
padding-left左内边距

复合样式
格式:

padding: 属性值
2个值,第一个值: 上下内边距的宽度; 第二个: 左右内边距的宽度
3个值:第一个: 上内边距宽度; 第二个:左右内边距的宽度; 第三个:下内边距的宽度
4个值:依次表示为上 右 下 左内边距的宽度(顺时针排序)

如:

/* 上下左右全部设置为20px */
padding:20px;
/* 第一个数设置上下内边距,第二个数设置左右内边距 */
padding:10px 20px;
/* 第一个数设置上内边距,第二个数设置左右内边距,,第三个数设置下内边距 */
padding:10px 20px 30px;
/* 第一个数设置上内边距,第二个数设置右内边距,,第三个数设置下内边距,第四个数设置左内边距 */
padding:10px 20px 30px 40px;

注意:①内边距会撑开原本盒子的大小;②位置的改变是相对于原始位置而改变的。


1.2.2、实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内边框实例</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            /* 全部设置边框 */
            border: 5px solid black;
            /* 左内边距 */
             padding-left: 20px;
            /* 上内边距 */
             padding-top: 20px;
        }
        
		</style>
</head>
<body>
    <div>
        使用内边距后
    </div>
</body>
</html>

结果展示:


1.3、外边距margin

边界 margin 位于盒子边框的外侧,也称为外边距。其不会应用背景,因此该区域总是透明的。通过设置 margin,可以使盒子与盒子之间留有一定的间距,而使页面不至于过于拥挤。可以统一设置4个边界的宽度,也可单独设置各边界的宽。简单理解就是:外边距控制盒子和盒子之间的距离

1.3.1、外边距属性

属性含义
margin-top上外边距
margin-right右外边距
margin-bottom下外边距
margin-left左外边距

复合样式(和内边距写法一样)
格式:

margin: 属性值
2个值,第一个值: 上下外边距的宽度; 第二个: 左右外边距的宽度
3个值:第一个: 上外边距宽度; 第二个:左右外边距的宽度; 第三个:下外边距的宽度
4个值:依次表示为上 右 下 左外边距的宽度(顺时针排序)

如:

margin:50px;  /*默认上下左右外边距为50px*/

1.3.2、实例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.one{
				width: 100px;
				height: 100px;
				background-color: #0000FF;
				/* margin-left: 100px;
				margin-top: 100px; */
				margin:30px;
			}
            .two{
				width: 100px;
				height: 100px;
				background-color: yellow;
				margin-left: 30px;
				margin-top: 60px;

			}
		</style>
	</head>
	<body>
		<div class="one"></div>
        <div class="two"></div>
	</body>
</html>

结果展示:


1.4、知识补充

1.4.1、display属性

实际上,标准流中的元素可通过display属性来改变元素是以行内元素显示还是以块级元素显示,或不显示。

display 属性的常用取值如下:

display: block | inline | none | list-item

属性值解释:
block: 以快级元素显示
inline: 以行内元素显示
none: 隐藏元素。被隐藏的元素不会占据文档中的位置
list-item: 列表想元素

示例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>制作导航栏</title>
		<style type="text/css">
			.nav{
				height: 80px;
				border: 1px solid red;
			}
			.nav a{
				height: 80px;
				background-color: wheat;
				/* 拥有块级、行内元素的特点 */
				display: inline-block;  
				padding: 0 20px;;
				line-height: 80px;
				color: black;
				text-decoration: none;
			}
			.nav a:hover{
				color: blue;
			}
		</style>
	</head>
	<body>
		<div class="nav">
			<a href="https://www.shiguangkey.com/">博客</a>
			<a href="https://www.shiguangkey.com/">资源</a>
			<a href="https://www.shiguangkey.com/">论坛</a>
			<a href="https://www.shiguangkey.com/">问答</a>
		</div>
	</body>
</html>

结果展示:


1.4.2、盒子居中

我们在上网时会发现,随着窗口大小的改变,有些网站的内容会一直处于居中状态,让我们来通过例子看看这是如何实现的。

注意: ① 盒子必须要指定宽度;② 左右外边距都设置auto (自动);③ 盒子居中只对左右有用,对上下是无效的。

示例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>盒子居中</title>
		<style>

				div{
					width: 200px;
					height: 200px;
					background-color: #0000FF;
					/* margin-left: auto;
					margin-right: auto; */
					margin: 0 auto;
				}
			</style>
	</head>
	<body>
		<div></div>
	</body>
</html>

结果展示:


1.4.3、高度塌陷问题

当子盒子的顶部外边距设置为 50px 时,父盒子也会跟着子盒子一起往下移动,效果如下图:

对于此问题以下有三种解决方法:
① 可以给父盒子定义一个上边框
② 可以给父盒子指定一个上内边距
③ 可以给父盒子添加 overflow:hidden;

示例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>高度塌陷</title>
		<style>
           .dad{
				width: 120px;
				height: 120px;
				background-color: #0000FF;
				/* border-top: 1px solid red; */ /*解决方法一*/
				/* padding-top: 1px; */   /*解决方法二*/
				overflow:hidden;    /*解决方法三*/
			}
			.son{
				width: 80px;
				height: 40px;
				background-color: #008000;
				margin-top: 60px;
			}
			</style>
	</head>
	<body>
		<div class="dad">
			<div class="son"></div>
		</div>
	</body>
</html>

结果展示:


1.4.4、上下合并问题

上下 margin 合并是指当两个块级元素上下排列时,它们之间的边界(margin)将发生合并,也就是说,两个盒子边框之间的距离等于这两个盒子margin 值的较大者。浏览器中两个块元素将会由于 margin 合并按右下图方式显示:


1.4.5、总结:注意事项

A:margin 调整内部div外边距;

B:padding 调整外部div内边距,它调整的是自身大小,所以如果不希望破坏外观,则尽量使用 margin 布局(padding 有可能撑大外盒子,但如果是 margin 过大,则盒子内容会被挤出,但不会改变盒子本身大小);

C:border 内部div和外部div定位时需要找到边界,外部div如没有设置 border,则内部div的 margin 设置时会一直往上找,直到找到边界位置。

D:内部相邻 div 间的 margin,取值为两个div各自设置 margin 的最大值,而不是相加值。

E:margn 值可以为负,而 padding 不可以


二、Reset CSS(了解)

2.1、什么是Reset CSS?

在HTML标签在浏览器里有默认的样式,例如 p 标签有上下边距,strong标签有字体加粗样式等等,不同浏览器的默认样式之间也会有差别。在切换页面的时候,浏览器的默认样式往往会给我们带来麻烦,影响开发效率。所以解决的方法就是一开始就将浏览器的默认样式全部去掉,更准确说就是通过重新定义标签样式。“覆盖”浏览器的CSS默认属性。最最简单的说法就是把浏览器提供的默认样式覆盖掉!这就是CSS reset。


2.2、使用Reset CSS

公司里会根据每个公司的业务不同,会自己写一套属于自己公司的RESET CSS。

下面提供一个示例:
(最好建一个css文件保存)

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

三、浮动

3.1、什么是浮动

浮动,其实就是让元素脱离正常的文档流。CSS 的 Float(浮动),会使元素向左或向右移动,其周围的元素也会重新排列。Float(浮动),往往是用于图像,但它在布局时一样非常有用。


3.2、浮动的作用

浮动可以让元素脱离正常的文档流并且移动到指定的位置,类似于转换了inline-block。

我们都知道 div 是块级标签,当有多个 div 时我们都不设置他们的内外边距,这时会出现这些盒子全部排成一列并且它们间的距离为 0px。如果我们想让它们排成一类呢?有两种方法可以设置:1、设置 display: inline-block;2、使用浮动。这两者有何区别?别急看下下面的示例就知道了。

示例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>使用浮动</title>
		<style>
            div{
				width: 100px;
				height: 100px;
				background-color: #0000FF;
				/*display: inline-block;*/
				float: left;
			}
			.box{
				background-color: #008000;
			}
			</style>
	</head>
	<body>
		<div></div>
		<div class="box"></div>
		<div></div>
	</body>
</html>

结果:

可以看出使用 display 属性的话盒子间会出现一小部分间距,而使用浮动会使盒子紧贴在一起。


3.3、浮动特点

浮动除了可以让元素脱离正常的文档流并且移动到指定的位置外,还有一个特点就是:使用了浮动之后,盒子将不会再占据文档中的位置

示例:(未使用浮动前)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>未使用浮动</title>
		<style>
           .one{
				width: 80px;
				height: 80px;
				background-color: #0000FF;
			}
			.two{
				width: 100px;
				height: 100px;
				background-color: #008000;
			}
			</style>
	</head>
	<body>
	<div class="one"></div>
	<div class="two"></div>

	</body>
</html>

结果:

对第一个盒子添加 float: left

.one{
	width: 80px;
	height: 80px;
	background-color: #0000FF;
    float: left;
}

3.4、浮动带来的问题

一个父盒子包着两个子盒子,给两个子盒子设置浮动后,父盒子会包不住子盒子,父盒子因为子盒子浮动引起内部高度为 0 父盒子会看不到。(注意:这是父盒子不设置高度的情况下才会发生,一般来讲不建议给父盒子设置高度,而是让父盒子根据子盒子来自动撑开)

示例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>使用浮动</title>
		<style>
            .dad{
				background-color: #0000FF;
			}
			.son1{
				width: 80px;
				height: 80px;
				background-color: #008000;
				float: left;
			}
			.son2{
				width: 80px;
				height: 80px;
				background-color: #9038E1;
				float: left;
			}
			</style>
	</head>
	<body>
		<div class="dad">
			<div class="son1">儿子1</div>
			<div class="son2">儿子2</div>
		</div>
	</body>
</html>

结果:


3.5、清除浮动

元素浮动之后,周围的元素会重新排列,为了避免这种情况,使用 clear 属性。

语法:

选择器{
	clear:属性值
}

属性值取值:left 清除左侧浮动 right:清除右侧浮动 both:同时清除浮动

什么时候用清除浮动?
① 父盒子没有高度
② 子盒子浮动了
③ 影响布局


有两种方法可以解决父元素因为子元素浮动引起内部高度为 0 的问题:

  1. 父元素设置overflow:hidden;
  2. 添加一个空div,设置清除浮动样式:如果页面浮动布局多,就要增加很多空div,不推荐使用

示例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>子盒子浮动</title>
		<style>
            .dad{
				background-color: #0000FF;
				overflow: hidden;  /*方案一*/
			}
			.son1{
				width: 80px;
				height: 80px;
				background-color: #008000;
				float: left;
			}
			.son2{
				width: 80px;
				height: 80px;
				background-color: #9038E1;
				float: left;
			}
			</style>
	</head>
	<body>
		<div class="dad">
			<div classReactJs学习笔记01

学习笔记:python3,代码片段(2017)

C语言进阶学习笔记二指针的进阶(重点必看+代码演示+练习)

我的C语言学习进阶之旅解决 Visual Studio 2019 报错:错误 C4996 ‘fscanf‘: This function or variable may be unsafe.(代码片段

我的C语言学习进阶之旅解决 Visual Studio 2019 报错:错误 C4996 ‘fscanf‘: This function or variable may be unsafe.(代码片段

千峰HTML5+CSS3学习笔记