CSS: (Cascading Style Sheets,层叠样式表),是一种用来为结构化文档(如 HTML 文档或 XML 应用)添加样式(字体、间距和颜色等)的标记型计算机语言,使网页更具吸引力和可读性 作用:将文档的内容与其呈现方式分离,通过将样式应用到HTML元素上,可以改变字体、颜色、大小、间距、边框等各种视觉效果,从而实现对网页的个性化定制 特点 层叠性(Cascading):多个样式规则可以应用于同一个元素,且具有不同的优先级 继承性(Inheritance):某些样式属性会被子元素继承,简化了样式定义的工作 选择器(Selectors):通过选择器来选择要应用样式的元素 盒模型(Box Model):网页中的每个元素都被看作是一个矩形框,包括内容区、内边距、边框和外边距 |
内联样式 ▶
➤ 内联样式将CSS代码直接应用到HTML元素的属性中,不能复用
应用场景:适用于只需在某个具体元素上应用样式,并且不会被其他样式覆盖的情况
<p style="color: red;">这是一个红色的段落。p>
- 1
内部样式 ▶
➤ 内部样式表将CSS代码直接写在HTML文档头部的
标签中,只能当前页面复用
应用场景:适合于只在一个HTML文档中使用的样式,或者在一个小块区域内定义特定的样式
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CSS引入方式title> <style> /* 标签选择器 */ h3 { color: #c4a2a2; } style> head>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
外部样式 ▶
➤ 将CSS代码保存在一个独立的.css文件中,并通过标签将其与HTML文档关联起来,支持多页面复用
应用场景:最常用和推荐的方式,全站样式统一,提高页面加载速度,方便样式维护等场景
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CSS引入方式title> <link rel="stylesheet" href="../css/01-外部css.css"> head>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
css语法的两个主要组成部分 ▶
➤ 选择器,一条或多条声明属性:CSS声明总是以分号
;
结束,声明总以大括号{}
括起来
元素选择器 ▶
➤ 会选取页面中所有匹配元素,所以应该谨慎使用,避免过度通用的选择器
应用场景:对整个页面中某一类型的元素进行样式定义p { color: red; }
- 1
类选择器 ▶
➤ 可以为多个元素设置相同的类名,类名应具有语义化(以反映元素的用途或功能)
应用场景:标记一组具有相同类名的元素进行样式定义.highlight { background-color: yellow; }
- 1
ID选择器 ▶
➤ 每个页面中的ID应该是唯一的,不能重复使用,ID选择器具有高优先级,应避免滥用ID选择器保持简洁
应用场景:标记唯一的元素进行样式定义#header { font-size: 24px; }
- 1
属性选择器 ▶
➤ 根据元素的属性值选择特定的元素,属性选择器支持多种匹配方式,精确匹配、包含匹配、开始匹配、结束匹配等
应用场景:根据元素的属性值进行选择进行样式定义/* 选取所有元素中type属性为"text"的元素,并设置边框样式 */ input[type="text"] { border: 1px solid #ccc; }
- 1
- 2
后代选择器 ▶
➤ 后代选择器可以选择父元素内部的所有符合条件的后代元素,不要使用过于具体的后代选择器,以免影响性能
应用场景:选择元素的后代元素进行样式定义div p { font-weight: bold; }
- 1
子元素选择器 ▶
➤ 子元素选择器只能选择作为父元素直接子元素的元素,并且不会进一步选择嵌套在子元素内部的元素
应用场景:选择元素的直接子元素进行样式定义ul > li { list-style-type: none; }
- 1
伪类选择器 ▶
➤ 伪类选择器的语法以冒号(:)开头,后跟伪类名称;伪类选择器一般用于定义与元素状态相关的样式,例如鼠标悬浮、访问过、选中;不同的伪类选择器可以组合使用,实现更复杂的效果,例如:hover:active
可以同时定义鼠标悬浮和鼠标点击时的样式
应用场景:根据元素的状态或特定条件来选择样式a:hover { color: red; } /* :nth-child伪类选择器用于按序号选择特定子元素 */ ul li:nth-child(odd) { background-color: lightgray; }
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
分组选择器 ▶
➤ 将多种选择器合并为一个规则,在样式定义中更加灵活和高效
应用场景:将相同样式应用于多个选择器,减少代码重复h1, h2, h3 { color: blue; font-weight: bold; } /* 将类选择器和元素选择器结合使用 */ .highlight, p { background-color: yellow; }
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>选择器title>
<style>
/* 标签选择器 */
p {
color: #808000;
}
/* id选择器:选择某一个元素 */
#tow {
background-color: aquamarine;
}
/* 类选择器:选择多个不相关的元素 */
.content {
color: rgb(97, 45, 8);
}
/* 分组选择器:将多个选择器元素分成一组 */
h1,
h2,
h3 {
/* 分组选择器共同设置 */
background-color: rgb(140, 169, 159);
}
/* 属性选择器: */
input[type='text'] {
/* 根据输入框的属性值‘text’设置其背景 */
background-color: rgb(116, 174, 95);
}
/* 后代选择器:层级关系选择子元素 */
body div div {
/* 后代选择器容默认选到后台中所有相同的后代 */
width: 200px;
height: 200px;
background-color: #656060;
}
/* 子元素选择器:层级关系选择子元素(精准选择) */
body>div>div>span>p {
/* 子类选择器选择子代中特定的元素 */
color: #c64343;
}
/* 伪类选择器:选择元素的状态 */
/* 未访问 */
a:link {
color: rgb(18, 251, 255);
}
/* 访问过 */
a:visited {
color: rgb(221, 139, 242);
}
/* 悬停 */
a:hover {
color: rgb(255, 173, 20);
}
/* 点击/激活 */
a:active {
color: rgb(18, 86, 83);
}
style>
head>
<body>
<h1>标题一h1>
<h2>标题二h2>
<h3>标题三h3>
<input type="text" name="user">
<div class="sentence">
<h4>心灵文案h4>
<article>
<p class="content">1、不负光阴,不负自己,不负被爱p>
<p id="tow">2、这个世界上没有人有义务对你好,所以你应该这样想,那些冷漠和刻薄是理所当然,那些温柔相待才更应珍惜p>
<p>3、请你一定要对号入座,我说的所有星光月亮、清泉小溪、蘸着糖的奶油和蜂蜜……这世间所有的美好事物,都只是为了形容你p>
<p>4、森林不残酷吗?有灾病猎杀,但动物仍美好着。宇宙不残酷吗?荒寂无回应,但星辰仍美好着。社会也残酷,有生死离别,会井干路绝,但人仍美好着p>
article>
div>
<div>
<div>
<p>后代选择器p>
div>
<div>
<span>
<p>子代代选择器p>
span>
div>
div>
<a href="https://www.baidu.com" target="_blank">超链接a>
<a href="https://www.baidu.com">超链接a>
<a href="https://www.baidu.com">超链接a>
<a href="https://www.baidu.com">超链接a>
body>
html>
RGB颜色:红、绿、蓝三个分量的数值来表示颜色,数值范围是0到255 十六进制颜色:6位16进制数值来表示颜色,前两位:红色,中间两位:绿色,后两位:蓝色 RGBA颜色:和RGB类似,添加了一个透明度分量,取值范围是0到1,表示不透明到完全透明 |
对同一个元素的同一个属性设置多个颜色,前面的颜色会被覆盖
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>颜色title>
head>
<style>
* {
margin: 0;
}
h1 {
/* 字体颜色 */
/* 颜色名称 */
color: red;
/* 三位十六进制 */
color: #000;
/* 六位十六进制:每两位表示rgb中的一个值 */
color: #00ff00;
/* rgb */
color: rgb(0, 255, 255);
/* rgba */
color: rgba(200, 180, 0, 0);
}
#d1 {
width: 500px;
height: 300px;
/* 背景颜色 */
background-color: #95d49e;
/* 背景图 */
background-image: url(../../html/background3.jpg);
/* 设置图片大小 */
background-size: 500px 280px;
/* 设置禁止重复 */
background-repeat: no-repeat;
/* 图片位置:偏移值(像素/百分比) */
background-position: 0 20px;
}
#d2 {
width: 611px;
height: 376px;
background-color: #e8e8ee;
background-image: url(pc.png);
background-repeat: no-repeat;
background-size: 318px 319px;
background-position: 90% 50%;
}
.font {
font-weight: bold;
font-size: 28px;
color: rgba(216, 28, 28, 0.784);
position: absolute;
bottom: 200px;
left: 100px;
}
style>
<body>
<h1>颜色测试h1>
<div id="d1">背景颜色div>
<div id="d2">div>
<div class="font">售价:4999div>
body>
html>
css字体相关属性 ▶
➤ 设置文本的字体,颜色,样式等属性:
text-align
:控制文本或元素在网页中的水平对齐方式
left:文本左对齐
right:文本右对齐
center:文本居中对齐
justify:文本两端对齐,即两侧呈现完整的直边
text-decoration
:文本装饰效果
none:没有任何装饰效果
underline:给文本添加下划线
overline:给文本添加上划线
line-through:给文本添加中划线/* 在一个段落中同时显示下划线和删除线 */ p { text-decoration: underline line-through; }
- 1
- 2
- 3
- 4
line-height
:设置行高(行间距)的大小(决定了文本行与文本行之间的垂直间距)
数字值:指定行高的倍数(值为1.5表示行高为字体大小的1.5倍)
百分比值:相对于父元素字体大小的百分比(值为150%表示行高为父元素字体大小的1.5倍)
长度值:使用绝对单位(如像素、点)指定具体的行高值
- 行高设置为与容器高度相等,可以实现垂直居中的效果
text-shadow
:在文本周围创建阴影效果text-shadow: h-shadow v-shadow blur-radius color; h1 { text-shadow: 2px 2px 4px #888888; }
- 1
- 2
- 3
- 4
- 5
h-shadow:指定阴影的水平偏移量,可以为正数(向右偏移)或负数(向左偏移)
v-shadow:指定阴影的垂直偏移量,可以为正数(向下偏移)或负数(向上偏移)
blur-radius:指定阴影的模糊半径,值越大,阴影越模糊
color:指定阴影的颜色
font-size
:设置文本的字体大小
绝对长度:指定一个固定的字体大小,如像素(px)、点(pt)、毫米(mm)
相对长度:相对于父元素或根元素的字体大小进行设置,如em(相对于父元素)和rem(相对于根元素)
百分比:相对于父元素的字体大小进行设置,例如:font-size: 120%
font-weight
:设置文本的粗细程度或者字体的粗细属性
normal:默认的字体粗细(相当于400)
bold:较粗的字体(相当于700)
lighter:比父元素更细的字体
bolder:比父元素更粗的字体
数字值:用于指定相对于常规字体粗细的相对值,通常在100到900之间
其他字体样式设置:
指定字体:font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
,
斜体:font-style: italic;
,
字体样式和大小一同设置:font: 50px sans-serif;
display显示方式 ▶
➤ 控制元素在页面中的布局和显示行为属性:
block:将元素显示为块级元素,独占一行,并且默认宽度为父元素的100%;常见的块级元素有
、、
到
inline:将元素显示为内联(行内)元素,不会换行,并且默认宽度由内容决定;常见的内联元素有、
、
、
等
inline-block:将元素显示为内联块级元素,不会换行,并且保留了块级元素的盒模型特性,可以设置宽高、内边距和外边距等;常见的内联块级元素有、
、
等
none:将元素隐藏,不占据空间,并且不会影响其他元素的布局(相当于完全删除该元素)
flex:将元素显示为弹性容器;通过flex-direction
、flex-wrap
等属性来控制子元素的排列方式(常用于响应式布局)
grid:将元素显示为网格容器,通过grid-template-columns
、grid-template-rows
等属性来定义网格布局(常用于复杂的二维布局)
table:将元素显示为表格,类似于HTML中的
元素,使用
table-row
、table-cell
等属性来控制子元素的布局
inline-table:将元素显示为内联表格,类似于HTML中的
元素,但是不会独占一行
list-item:将元素显示为列表项,并添加了项目符号(常用于元素)
- 练习代码
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content=" -width, initial-scale=1.0"> <title>显示方式title> <style> .page { background-color: antiquewhite; border-radius: 10px; /* 将page中的元素居中 */ text-align: center; } p { color: teal; text-align: center; font-weight: bold; } a { background-color: aquamarine; /* 将超链接(行内元素)改为行内块级元素 */ display: inline-block; /* 设置宽高 */ width: 280px; height: 25px; /* 水平居中 */ text-align: center; /* 垂直居中 */ line-height: 25px; /* 字体颜色 */ color: brown; /* 去除下划线 */ text-decoration: none; /* 字体大小 */ font-size: 15px; /* 设置原图 */ border-radius: 10px; } .inline { background-color: cadetblue; width: 200px; /* height: 200px; */ /* 左右居中 */ margin: 10px auto; /* 修改为行内元素 */ display: inline; border-radius: 5px; } .inline-block { display: inline-block; width: 200px; height: 100px; background-color: darkkhaki; border-radius: 10px; margin-left: 10px; } .none { width: 200px; height: 200px; background-color: coral; /* display: none; */ } .flex { width: 200px; height: 200px; background-color: darkmagenta; display: flex; /* 设置文本从右到左 */ direction: rtl; } .grid { width: 200px; height: 200px; background-color: #c64a4a; display: grid; /* */ grid-template-columns: max-content; } style> head> <body> <div class="page"> <p>将行内元素转化为行内块元素p> <a href="#">超链接属于行内元素a> <div class="inline"> 将块级元素转为行内元素,宽度由内容决定, div> <span class="inline-block"> 将行内元素转为行内块级元素,不会换行,能设置宽高 span> <div class="none"> none:将元素隐藏,不占据空间,并且不会影响其他元素的布局(相当于完全删除该元素) div> <div class="grid"> grid:将元素显示为网格容器,可以通过grid-template-columns、grid-template-rows等属性来定义网格布局。常用于复杂的二维布局 div> div> <div class="flex"> flex:将元素显示为弹性容器,可以通过flex-direction、flex-wrap等属性来控制子元素的排列方式,常用于响应式布局 div> 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
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
- 100
- 101
- 102
- 103
- 104
- 105
- 106
- 107
- 108
- 109
- 110
- 111
- 112
- 113
- 114
- 115
- 116
- 117
- 118
- 119
- 120
- 121
- 122
- 123
7. 盒子模型
盒子模型 ▶:一个由指定大小的内容区的自身内边距,边框,外边距所构成的矩形盒子
➤ CSS盒子模型是指在网页布局中,每个HTML元素可以看做一个矩形的盒子(盒子模型是一种设计思想模型)属性:一个盒子模型包括四个部分
内容区(Content):包含元素的实际内容(文本、图像或其他嵌套的元素),内容区的宽度和高度可以通过width和height属性进行设置
内边距区(Padding):内边距是内容区与边框之间的空白区域,内边距的大小可以通过padding属性进行设置,内边距对于元素的背景色和边框不起作用
边框区(Border):边框是围绕内容区和内边距区的线条,边框的样式、宽度和颜色可以通过border属性进行设置
外边距区(Margin):外边距是边框与相邻元素之间的空白区域,外边距可以用于调整元素与其他元素之间的距,。外边距的大小可以通过margin属性进行设置
- 两种盒子模型:(box-sizing属性来指定使用哪种盒子模型)
标准盒子模型box-sizing: content-box;
➤ 盒子的实际宽度 = 内容的宽度 + 左内边距 + 右内边距 + 左边框宽度 + 右边框宽度
➤ 盒子的实际高度 = 内容的高度 + 上内边距 + 下内边距 + 上边框宽度 + 下边框宽度
IE盒子模型box-sizing: border-box;
➤ 盒子的实际宽度 = 内容的宽度 + 左边框宽度 + 右边框宽度 + 左内边距 + 右内边距
➤ 盒子的实际高度 = 内容的高度 + 上边框宽度 + 下边框宽度 + 上内边距 + 下内边距
不同的浏览器渲染后的各个属性值可能不一样,此处使用的为QQ浏览器
- 盒子模型
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>盒子模型title> <style> /* 盒子模型 */ .box { width: 200px; height: 200px; background-color: darkseagreen; margin: 10px; border: 3px solid teal; padding: 5px; /* 标准盒子模型(默认) */ box-sizing: content-box; /* IE盒子模型 */ box-sizing: border-box; } style> head> <body> <div class="box">盒子模型div> 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
7.1 盒子模型 - 外边距塌陷
块级元素外边距塌陷(margin collapsing) ▶
➤ 两个相邻同级块元素的上下外边距会合并(折叠)成单个外边距的现象(即取两个元素中外边距较大的值作为两者的外边距)解决方法:
inline-block:使用display: inline-block;
改为行内块元素
设置为浮动
行内元素上下外边距无效,元素左右不存在塌陷问题(外边距相加) ▶
➤ 两个行内元素不存在上下塌陷问题,但是存在上下外边距失效问题,行内元素的左右外边距为两个元素的外边距值相加
解决方法:
转为块级元素:使用display: block;
padding取代margin
line-height:设置行高,以在行内元素周围创建一定的空间,从视觉上实现上下外边距的效果
父子粘连 ▶
➤ 父元素与其第一个或最后一个子元素之间出现了外边距塌陷(margin collapsing)的情况,导致父元素的外边距与子元素的外边距发生合并,使它们的外边距表现得像是粘在一起一样,称为“父子粘连”
解决方法:
overflow属性:父元素设置为overflow:hidden
或者overflow:auto
padding代替margin:将父元素的外边距改为内边距,以避免外边距的合并
border:给父元素添加边框也可以防止外边距的合并
overflow:hidden
:创建一个新的块级格式化上下文父元素,并将子元素溢出父元素的部分进行隐藏(即子元素超出部分不可见),从而阻止外边距的塌陷
- 塌陷问题
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>盒子模型title> <style> /* 盒子模型 */ .box { width: 200px; height: 200px; background-color: darkseagreen; margin: 10px; border: 3px solid teal; padding: 5px; /* IE盒子模型 */ box-sizing: border-box; /* 标准盒子模型 */ box-sizing: content-box; } .box-1, .box-2 { width: 200px; height: 200px; border: 1px solid rosybrown; } .box-1 { /* 左外边距 */ margin-left: 200px; /* 上外边距 */ margin-top: 200px; /* 下外边距:如果下方没有元素则显示不出效果 */ margin-bottom: 50px; /* 右外边距:如果右边没有元素则显示不出效果 */ margin-right: 50px; /* 四个方向的外边距相等 */ margin: 50px; /* 上下相等,左右相等 */ margin: 20px 40px; /* 设置左右居中 */ /* margin: 0 auto; */ /* margin: 10px 20px 30px 40px; 上右下左顺时针赋值*/ } .box-2 { /* 外边距塌陷:上下相邻添加外边距(取最大值:此处20>10 == 20) */ margin-top: 10px; } .line-1 { border: 3px solid tan; /* 行内元素上下外边距无效 */ margin-top: 50px; margin-bottom: 50px; /* 左右两元素值相加 */ margin-right: 10px; } .line-2 { border: 3px solid rgb(140, 195, 210); /* 行内元素左右不存在塌陷问题 外边距相加 */ margin-left: 80px; } .big { width: 200px; height: 200px; background-color: green; /* 1. 解决父子粘连问题:绿色盒子不动,仅移动红色盒子 */ overflow: hidden; /* 2. 给父元素设置边框:不会隐藏子元素内容 */ /* border: 1px solid darkgoldenrod; */ } .big>.small { width: 50px; height: 50px; background-color: #9f2a2a; /* 上下外边距塌陷(父元素中没有其他同级元素):父子粘连(对子元素设置外边距时会取最大值:0<10,导致父元素向下移动60px) */ margin-left: 20px; /* 超出部分将被隐藏 */ margin-top: 170px; } style> head> <body> <div class="box">盒子模型div> <div class="box-1">盒子-1div> <div class="box-2">盒子-2div> <span class="line-1">行-1(设置了上外边距50px,失效)span> <span class="line-2">行-2(左右距离相加)span> <div class="big"> <div class="small">小盒子div> div> 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
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
- 100
- 101
- 102
- 103
- 104
- 105
- 106
- 107
- 108
- 109
- 110
7.2 盒子模型 - 父元素消失
父元素消失 ▶
➤ 父元素没有指定高度,子元素设置了浮动,父元素会消失(父元素因为内部浮动(float)、外边距折叠(margin collapsing)等原因导致高度塌陷或消失)解决方法:
overflow:使用overflow: hidden;
7.3 盒子模型 - 边框和外边距
border边框样式 ▶
➤border: [border-width] [border-style] [border-color];
边框样式:
none:无边框
hidden:隐藏边框
solid:实线边框
dashed:虚线边框
dotted:点线边框
double:双线边框
groove:凹槽边框
ridge:脊状边框
inset:内嵌边框
outset:外嵌边框border-radius边框圆角 ▶
➤ 设置元素的边框圆角效果特点:当圆角半径大于等于(宽高的最小值时)形状不再改变
/* 设置所有四个角的圆角半径 */ border-radius: 10px; /* 设置水平方向的圆角半径和垂直方向的圆角半径 */ border-radius: 5px 10px; /* 依次设置左上角、右上角、右下角和左下角的圆角半径 */ border-radius: 5px 10px 15px 20px;
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
margin外边距 ▶
➤ margin 是 CSS 中用来设置元素外边距的属性使用特性:1. 块级元素居中:
margin: 0 center;
2. 行内元素/行内块级元素居中:在上级元素中加text-align: center;
/* 设置所有四个方向的外边距 */ margin: 10px; /* 设置上下方向的外边距为 10px,左右方向的外边距为 20px */ margin: 10px 20px; /* 依次设置上、右、下、左方向的外边距 */ margin: 10px 15px 20px 25px;
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- body:自带8px的外边距
- p标签,列表标签,h标签自带上下边距
- 文本框自带边框和内边距
- 列表标签自带外边距和内边距
body{margin: 0;} p,ul,h1{margin: 0;} input{border: 0;} ul{padding: 0;}
- 1
- 2
- 3
- 4
- 边框和外边距
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>边框和外边距title> <style> #d1 { width: 200px; height: 200px; /* none:无边框 hidden:隐藏边框 solid:实线边框 dashed:虚线边框 dotted:点线边框 double:双线边框 groove:凹槽边框 ridge:脊状边框 inset:内嵌边框 outset:外嵌边框 */ /* 边框样式 */ border: 20px inset teal; /* 大于宽高后不再改变 */ border-radius: 100px; } /* body:自带8px的外边距 p标签,列表标签,h标签自带上下边距 文本框自带边框和内边距 列表标签自带外边距和内边距 body{margin: 0;} p,ul,h1{margin: 0;} input{border: 0;} ul{padding: 0;} */ #d2 { width: 200px; height: 200px; border: 5px solid cornflowerblue; /* 给元素添加内边距时,默认影响元素大小 */ padding-left: 50px; padding-top: 50px; /* 需要添加相应元素:去除影响 */ box-sizing: border-box; } /* 练习 */ body { margin: 0; } #id1, #id3 { width: 100px; height: 100px; } #id1 { background-color: red; margin-left: 20px; overflow: hidden; } #id3 { border: 3px solid goldenrod; margin-left: 120px; box-sizing: border-box; padding-left: 60px; padding-top: 50px; border-radius: 5px; } #id2 { width: 50px; height: 50px; background-color: green; margin: 0 auto; } /* 块级元素居中:margin:0 center; 行内元素/行内块级元素:在上级元素中加text-align:center */ style> head> <body> <div id="d1">边框测试div> <div id="d2">内边距div> <p>练习p> <div id="id1">框1 <div id="id2">框2div> div> <div id="id3">框3div> 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
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
- 100
- 101
- 102
- 103
- 104
- 105
- 106
- 107
8. CSS三大特性
层叠性(Cascading) ▶:利用多个选择器对同一元素设置相同属性的不同样式(冲突时会被覆盖)
➤ 多个选择器对同一个元素添加不同的样式,元素样式效果层叠显示(如果样式相同会由优先级决定)层叠性原则:遵循的原则是就近原则,哪个样式离结构近,就执行哪个样式
继承性(Inheritance) ▶:子元素可以继承父元素的某些 CSS 属性值
➤ 如果子元素自身带效果则不受影响(超链接)作用:继承可以简化代码,降低CSS样式的复杂性
优先级(Specificity) ▶多个 CSS 规则应用到同一个元素
➤ !important>内联>ID选择器>类选择器、属性选择器、伪类选择器>标签选择器>继承优先原则:选择器相同,则执行层叠性;选择器不同,则根据选择器权重执行
- CSS三大特性
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CSS三大特性title> <style> /* CSS层叠性 */ p { color: aquamarine; font-size: 18px; } /* 不冲突:层叠 */ .cascading { background-color: bisque; } /* 冲突:覆盖 */ #bg-color { /* ID选择器优先级高于类选择器 */ background-color: rgb(61, 84, 76); } /* 继承 */ div { /* 此时超链接自带颜色:不受继承影响 */ color: blueviolet; } /* 优先级 */ span { /* 覆盖继承的颜色(继承的优先级低) */ color: #000; } #link { /* 去除超链接的下划线 */ text-decoration: none; } /* 产生冲突:ID选择器优先级高于元素选择器优先级 */ a { /* 添加!important最高优先级 */ text-decoration: underline !important; } style> head> <body> <div> div盒子 <p class="cascading" id="bg-color"> p标签 p> <span> span行标签(颜色继承自div标签) span> <a href="" id="link">超链接a> div> 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
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 相关阅读:
对Haddop的认识
Java的Map中的map.keySet()方法
EasyCVR获取大华客流量数据时有一个设备未上传该如何解决?
力扣-1984. 学生分数的最小差值
Kindle倒下,iReader接力
python3基础知识复习 -- web开发入门
Heap (mathematics)
2023最新SSM计算机毕业设计选题大全(附源码+LW)之java高校毕业生信息采集系统05hj2
Tomcat
24、Flink 的table api与sql之Catalogs(java api操作数据库、表)-2
- 原文地址:https://blog.csdn.net/qq_58801558/article/details/134239717