学习笔记——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 的问题:
- 父元素设置
overflow:hidden;
- 添加一个空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
我的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.(代码片段