Web篇_03 CSS：你的网页能有多好看
CSS5.1 CSS初识5.2 CSS选择器5.3 CSS常用属性5.4 CSS盒模型5.5 CSS浮动5.6 CSS定位5.1 CSS初识1.什么是CSSCSS的全称为Cascading Style Sheets，即级联样式表单，或者说层叠样式表单。2.CSS的功能CSS是一种样式表现语言，它是对网页结构语言（HTML）的补充。主要用于对网页样式的定义，例如布局、颜色、文本等设计。3.CSS的作
CSS
CSS初识
什么是CSS
CSS的全称为Cascading Style Sheets，即级联样式表单，或者说层叠样式表单。
CSS的功能
CSS是一种样式表现语言，它是对网页结构语言（HTML）的补充。主要用于对网页样式的定义，例如布局、颜色、文本等设计。
CSS的作用
精确控制页面的各个元素
CSS的引入方式
内联样式： 将CSS样式直接写到HTML元素的style属性中
内部样式： 将CSS样式写到<style>标签中，本文主要用这个举例。
引入外部样式： 精确通过<link>元素引入外部的CSS文件，推荐开发使用这个方式。
导入外部样式： 通过在<style> 元素中，使用@import导入一个外部的CSS文件
<!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>CSS的引入</title>
<!-- <style>
h1{
color: red;
}
</style> -->
<!-- <link rel="stylesheet" href="demo1.css"> -->
<style>
@import 'demo1.css'
</style>
</head>
<body>
<!-- <h1 style="color: red;">华为手机发布会</h1> -->
<h1>华为手机发布会</h1>
</body>
</html>
外链文件：
h1{
color: red;
}
CSS基本语法
CSS的语法格式
selector{ property:value;…}
selector叫做选择器，它决定了后面大括号内的样式对哪些元素生效
property: value 叫做一条CSS样式
每条样式都能够改变selector选中元素的展现
property称为样式名，value是对应的样式值
CSS样式可以有很多条，它们包裹在大括号内部，每条样式之间通过分号分割
CSS的样式对大小写不敏感，我们推荐统一使用小写
具有相同样式的选择器，可以分成一个组，之间用逗号分隔
<!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>css的语法</title>
<style>
h1,h2 {color: red;text-align: center; text-shadow: 5px 4px 4px rgb(221, 185, 22);}
</style>
</head>
<body>
<h1>华为智慧电视</h1>
<h2>HUAVWEI_TV</h2>
<h2>华为路由器</h2>
</body>
</html>
CSS的特性
1.层叠特性
2.继承性
<!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>css特性</title>
<style>
h1{
color: red;
text-align: center;
font-size: 100px;
background-color: yellow;
color: blue;
color: crimson;
}
p{
color: darkgoldenrod;
font-size: 15px;
}
</style>
</head>
<body>
<h1>我是再次出境的h1</h1>
<p>
华为商城 官网（www.vmall.com）是华为公司旗下的自营电商平台，为您提供
<span>华为手机 、 笔记本电脑 、 平板电脑 、 智能手环/手表 、VR设备、路由器、电视盒子、随行wifi、通用配件、专属配件</span>
等系列的产品和服务。官方正品保障、7天无理由退货、15天换货、满48元免运费。
</p>
</body>
</html>
CSS选择器
通配符选择器
css的通配符选择器是一种比较特殊的选择器，用 " * " 表示。
格式：* { property:value;.......}
含义：可以选中页面中所有元素，对所有元素都生效
用途：一般用于设置一些初始化的共有属性
x## 元素选择器
使用某个HTML元素名作为选择器，是一种最简单的选择器。
格式： E{ property: value; ......}
<!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>css选择器</title>
<style>
/*
通配符选择器
*/
*{
margin: 0px;
padding: 0px;
}
/*元素选择器*/
h1{
color: red;
background: blue;
}
p{
align-items: center;
counter-reset:inherit;
background-color: lawngreen;
}
</style>
</head>
<body>
<div style="background: yellow;">华为路由器</div>
<p>使用5G技术</p>
<ul>
<li>5G技术是下一代通信技术</li>
</ul>
<h1>标签</h1>
</body>
</html>
id选择器
id是指我们可以在HTML标签上设置一个id属性值 ；
id 属性的特点是一个HTML文档，只能有唯一的一个，不能重复
格式为：#id {property:value; ......}
含义：可以选中页面中含有id属性值的元素
类选择器
格式：.class{ property:value;.....}
类选择器中的类指的是class属性
有相同class属性的都会被选中
class与id相比不具有唯一性
class属性的值通常以字母开头，中间不能有空格
类选择器可以和元素选择器组合使用
<!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>选择器</title>
<style>
#title1,#title2{ color: red;}
p.word{ font-size: 20px;}
</style>
</head>
<body>
<h1 id = "title1">ID选择器</h1>
<h2>id选择器 可以选中页面中含有id属性的元素</h2>
<div>只能唯一，不能重复，命名不能以数字开头</div>
<h1 id = "title2">类选择器</h1>
<div class="word">类选择器中的类指的是class属性</div>
<div class="word">class与id相比不具备唯一性</div>
<p class="word">类选择器可以和元素选择器组合使用</p>
</body>
</html>
属性选择器
属性选择器是用于对具有某种属性的元素设置CSS样式。
格式为：E[attribute]{property: value;......}
E代表元素，[]表示元素的属性
属性的种类：
[attribute]用于选取指定属性(attribute)的元素；
[attribute=value]用于选取指定属性(attribute)和指定属性值的元素；
[attribute~=value]用于选取属性值中包含指定值的元素
[atttribute|=value]用于选取以指定值开头的属性值的元素
<!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>选择器</title>
<style>
p[title] { color: red;}
p[title="属性2"] {color: blueviolet;}
p[title~="3"] {color: yellow;}
p[title|="属性"] {color: pink;}
a:link {color: blue;}
a:visited {color:purple;}
a:hover {color: cyan;}
a:active {color: salmon;}
/*顺序固定，记忆口诀：LoVe HAte*/
</style>
</head>
<body>
<p title="属性1">属性选择器1</p>
<p title="属性2">属性选择器2</p>
<p title="属性3 3">属性选择器3</p>
<p title="属性-4">属性选择器4</p>
<p title="属性-5">属性选择器5</p>
<a href="https://www.huawei.com">华为</a>
</body>
</html>
伪类选择器
伪类是指那些处于一定状态的元素，伪类以冒号开头；
伪类选择器通过伪类来选中相应的元素进而添加样式的选择器。
伪类名可以单独使用，也可以和其它选择器一起使用；
一般伪类选择器通常和元素名称一起使用，用于选中某一元素的伪类；
元素选择符和冒号之间不能有空格；
伪类选择器最喜欢和超链接（a元素）一起使用。
伪类如下：:link表示未被访问的链接:visited 表示已被访问的元素:hover 鼠标经过链接上面时的状态:active 链接被激活时的状态
这个顺序很重要
派生选择器
1.后代选择器
后代选择器主要是用来选择某个元素的后代元素
格式为：父元素 子元素 {property:value;…}
注意点：父元素与子元素之间至少有一个空格 ，可以有很多空格
2.子元素选择器
格式为：父元素 > 子元素 {property:value;…}
用来选择作为某一个元素子元素的元素
与后代选择器的区别是后代选择器选的是所有子元素，而子元素选择器只选第一级子元素
3.相邻兄弟选择器
格式为：父元素+子元素{property; value;…}
用来选择紧跟在一个元素之后的兄弟元素；
这两个相邻元素一定是同级元素
<!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>选择器</title>、
<style>
span {color: blue;}
p span {color: red;}
p>span {color: orange;}
span + span {color: purple;}
div + p {color: pink;}
</style>
</head>
<body>
<div>后代选择器
<span>儿子</span>
</div>
<p>爷爷
<span>父亲<span>儿子</span></span>
<span>叔叔</span>
</p>
</body>
</html>
选择器权重
什么是选择器权重？选择器的种类很多，对于多种选择器修饰同一个html属性，哪一个应该生效呢？
权重规则：
通配符选择器的权重：0
标签选择器的权重：1
类、伪类、属性选择器的权重：10
id选择器权重：100
内联样式的权重：1000
特殊处理：!important（强制使用）
很明显，定位越详细的权重越大。
<!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>选择器权重</title>
<style>
div {
color: red !important;
}
.title {color: royalblue;}
#title {color: seagreen;}
div#title {color: orange;}
</style>
</head>
<body>
<div id="title" class="title" style="color: purple;" >选择器权重</div>
</body>
</html>
CSS常用属性
字体
1、字体
➢使用font-family属性来定义文字的字体
➢属性值为字体的名称 ,可以设置多个字体名称,浏览器会按照顺序使用它第一个支字体
➢字体优先级列表
2、字体尺寸
➢使用font-size属性来定义文字的尺寸
➢属性值为长度值,例如: 30px ,也可以使用百分比，例如: 50%
3、字体样式
➢使用font-style属性设置文字为斜体
➢默认属性值为normal显示标准效果
➢当属性值为italic时 显示倾斜效果
4、字体粗细
➢使用font-weight属性设置文字的粗细
➢默认值为normal，相当于400 ,显示效果为正常粗细
➢当属性值为bold时, 相当于700 ,显示为粗体
➢当属性值为bolder时 ,显示更粗
➢当属性值为lighter时 ,显示更细
➢也可设置 属性值为一个具体数值100/200/300/400/500/600/700/800/900
5、简写属性
➢使用font属性来定义 所有文字的样式
➢各个属性值用空格分隔
➢font = font-style + font-weight + font-size + font-family ( 注意属性值之间的顺序)
<!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>字体</title>
<style>
.text-1 {font-family: serif;} /*衬线字体*/
.text-2 {font-family: sans-serif;} /*非衬线字体*/
.text-3 {
font-family: monospace;/*等宽字体*/
font-size: 30px;
}
</style>
</head>
<body>
<div class="text-1">沈阳医学院</div>
<div class="text-2">医学信息工程学院 医学信息工程</div>
<div class="text-1">This is an example of English font.</div>
<div class="text-2">Second English font. </div>
<div class="text-3">医学信息工程学院 医学信息工程</div>
<div class="text-3">Second English font. </div>
</body>
</html>
文本
1、颜色
➢使用color属性来设 置文本的颜色
➢属性值可以是颜色名、 十六进制颜色值、RGB颜色值
2、行高
➢使用line-height属性来设置文本行高
➢默认值为 : normal
➢其它属性值为长度值、 百分比
3、对齐方式
➢使用text- align属性来设置文本的对齐方式
➢属性值有:left(左)、right(右)、center(中)
4、方向
➢使用direction属性设 置文本的方向
➢属性值有: ltr(左)、rtl(右)
➢注意与对齐方式属性的区别
5、缩进
➢使用text-indent属性设置段落的首行缩进
➢默认值为0，其它属性值有:长度值、百分比
6、装饰线
➢使用text-decoration属性设置文本的装饰线
➢属性值有: underline (下画线)、overline (上画线)、line-through (中画线)
➢默认值为none，表示没有线
7、间隔
➢使用letter-spacing属性设置文本字符间隔的大小
➢属性值为长度值 ,可为负值
8、阴影
➢使用text-shadow属性来设 置文本的阴影
➢属性值为:X轴偏移量+Y轴偏移量+模糊距离+颜色
➢例如: text-shadow: 10px 10px 5px gray
<!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>文本</title>
<style>
.text1 {
color: red;
}
.text2 {
color: rgb(134, 7, 107);
line-height: 100px;
font-size: 50px;
text-align: left;
/* direction: rtl; */
}
.text3 {
color: royalblue;
line-height: 70px;
font-size: 50px;
text-indent: 2em;
text-decoration: underline;
/* text-decoration: overline; */
letter-spacing: 30px;
/* letter-spacing: -15px; */
text-shadow: 5px 5px 4px yellow;
}
</style>
</head>
<body>
<div class="text1">
</div>
<div class="text2">
</div>
<div class="text3">
</div>
</body>
</html>
尺寸
1、宽度和高度
➢使用width属性定义 宽度
➢使用height属性定 义高度
➢属性值为: auto、 长度、百分比
2、最小宽度和最小高度
➢使用min-width属性定义 最小宽度
➢使用min-height属性定义最小高度
3、最大宽度和最大高度
➢使用max-width属性定义最大宽度
➢使用max-height属性定义最大高度
<!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>尺寸</title>
<style>
.text {
background: yellowgreen;
width: 50px; /*小于最小宽度100px不生效*/
width: 800px;
/* 最小宽度为100px，没有上限 */
min-width: 100px;
height: 800px;
max-height: 600px;
}
</style>
</head>
<body>
<div class="text">沈阳医学院</div>
</body>
</html>
列表
1、list-style-image
➢.用于指定一个图片做为列表项前面的标记
➢默认值为none
➢可以设置一 个图片的urI作为标记图片
2、list-style-position
➢用于设置在什么位置显示列表项前面的标记
➢默认值为outside
➢还可设置为inside
3、list-style-type
➢用于设置列表项前面图标的类型
➢默认值为disc ,其它值: circle、square、 decimal、 none、 lower-alpha、upper-alpha
4、list-style
➢这是一个简写属性
➢list-style = list-style-image + list-style-position + list-style-type
➢其属性值可以省略几项
<!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>列表样式</title>
<style>
.list1 {
list-style-image: url("沈医logo.png");
list-style-position: inside;
list-style-type: square;
}
.list2 {
list-style-type: square;
}
.list3 {
list-style-type: decimal;
}
.list4 {
list-style: inside lower-alpha;
}
</style>
</head>
<body>
<ul class="list">
<li>临床医学</li>
<li>护理学</li>
<li>医学信息工程</li>
</ul>
<ul class="list1">
<li>临床医学</li>
<li>护理学</li>
<li>医学信息工程</li>
</ul>
<ul class="list2">
<li>临床医学</li>
<li>护理学</li>
<li>医学信息工程</li>
</ul>
<ul class="list3">
<li>临床医学</li>
<li>护理学</li>
<li>医学信息工程</li>
</ul>
<ul class="list4">
<li>临床医学</li>
<li>护理学</li>
<li>医学信息工程</li>
</ul>
</body>
</html>
背景
1、background-color
➢用来设置元素的背景颜色
➢默认值为 : transparent
➢3种方法直接设置颜色 :颜色名、十六进制颜色、rgb函数
➢颜色名: red
➢十六进制颜色 : #ff0000
➢rgb函数: rgb(255, 0, 0)
2、background-image
➢通用来设置元素的背景图片
➢默认值为: none
➢还可以设置一 个图片的url地址 ，用来作为背景图片
3、background-repeat
➢主要用来配合background-image属性一 起使用,用来设置背景图片的平铺方式
默认值为: repeat ,表示将背景图片在x轴和y轴方向平铺显示
➢还可设置为沿X轴平铺 ( repeat-x)、沿Y轴平铺( repeat-y )、不平铺( no-repeat )
4、background-position
➢也是用来配合background-image属性一起使用,用来设置背景图片的起始点位置
➢标默认为左 上角零点位置
➢位置参数: X轴方向left、center、 right ; Y轴方向top、center、 bottom
➢百分比: X轴位置x%、Y轴位置y%
➢长度:X轴离原点长度、Y轴离原点长度
5、background-attachment
➢用于设置背景图片固定或者跟随 页面滚动
默认值: scroll
➢还可以设置为fixed
6、background
➢简写属性
➢background = background-color + background-image + background-repeat +background-position + background-attachment
➢可以全部设置,也可以省略其中几项
<!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>背景属性</title>
<style>
.bgc {
height: 1000px;
/* background-color: red; */
background-color: rgb(255, 0, 0);
}
.bgp {
height: 800px;
background-image: url("沈医logo.png");/*平铺*/
/* background-repeat: no-repeat; */
background-repeat: repeat-x;
background-position: right;
background-position: 50% 100px;
background-attachment: fixed;
}
.bgp2 {
height: 1000px;
background:
url("沈医logo.png");
color: red;
}
</style>
</head>
<body>
<div class="bgc"></div>
<div class="bgp"></div>
<div class="bgp2"></div>
</body>
</html>
CSS盒模型
盒模型
1、什么叫盒模型
➢盒模型,英文叫做Box Model
➢所有的HTML元素都可以看作一个盒子模型
➢我们可以把盒模型就想象成为一 个盒子
➢盒模型中主要用来对HTML元素进行布局时使用
2、盒模型的作用
➢浏览器在渲染页面的时候就会 根据CSS盒模型的规则,将所有的HTML元素表示为一个
个的矩形盒子,之后CSS的相关属性就作用在这些盒子上,决定了盒子的大小位置和属
性等,最终显示出来
3、盒模型的构成
➢一个盒模型是由4大部分所组成的
➢元素内容(content)、内边距(padding)、边框(border)、外边距(margin)
<!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>合模型</title>
<style>
.box {
padding: 50px;
border: 10px solid red;
margin: 50px;
}
</style>
</head>
<body>
<div class="box">沈阳医学院</div>
</body>
</html>
内边距
1、什么是内边距
➢内边距是指在HTML元素内容和边框之间的区域
➢使用CSS属性padding来表示
➢属性值为长度值或百分比 ,默认值是0
➢注意取长度值时不能为负值
➢百分比值相当于父元素的长度比例
2、内边距的各个小属性
➢使用padding-top定 义上内边距
➢使用padding-right定 义右内边距
➢使用padding-bottom定义 下内边距
➢使用padding-left定 义左内边距
➢padding为简写 属性
<!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>内边距</title>
<style>
.box {
border: 15px solid blue;
/*
padding-top: 40px;
padding-right: 100px;
padding-bottom: 60px;
padding-left: 50px; */
/* 简写: 注意顺序：上右下左*/
/* padding: 20px 40px 60px 80px; */
/* 只有一个值的时候，内边距都一样 */
/* padding: 50px; */
/* 有两个值的时候，相当于省略后两个（下左） */
/* padding: 40px 80px; */
/* 有三个值的时候，相当于省略最后一个（左） */
padding: 20px 40px 80px;
}
</style>
</head>
<body>
<div class="box">医学信息工程</div>
</body>
</html>
边框
1、边框
➢围绕元素内容和内边距的一 -条边线
➢使用属性border代表边框
➢我们可以使用边框属性精确控制这条线的样式、宽度、颜色
2、边框样式
➢使用border-style设置边框的样式属性
➢还可分别设置 上下左右四条边框的样式属性
➢默认值为none ,表示无边框
➢还可以设置 多种样式，分别为dotted、dashed、 solid、 double、 groove、 ridge、inset、outset等
3、边框宽度
➢使用border-width设 置边框的宽度属性
➢和边框样式一样,还可分别设置上下左右四条边框的宽度
➢使用3种标准边框 : thin、medium、thick
➢使用长度值作为宽度属性的属性值
4、边框颜色
➢使用border color设置边框的颜色
➢还可分别设置 上下左右四条边框的颜色
➢和背景颜色属性一样,可以直接设置颜色名、十六进制颜色值或rgb函数值
5、复合属性
➢复合是指一次使用多种样式定义边框
➢可以使用border-top、border-right、 border-bottom、 border-left分 别定义四条边框的所有属性,属性值是样式、宽度和颜色,其中宽度和颜色可以省略
➢还可以直接使用border属性一 次性对四条边框同时设置 ,属性值同样是样式、宽度和颜
色,其中宽度和颜色可以省略
例如:
.box { border-style: solid; }
.box1 { border-width: 5px; }
.box2 { border-color: red; }
.box3 { border-top: 1px dashed #00ff00; }
.box4 { border: 1px dotted #0000ff; }
<!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>边框</title>
<style>
.box {
/* border-style: solid; */
/* border-width: thick; */
/* border-width: 10px; */
/* border-color: blueviolet; */
/* border-bottom: 40px solid burlywood ; */
border: 10px dashed purple;
}
</style>
</head>
<body>
<div class="box">医学信息工程</div>
</body>
</html>
外边距
1、什么是外边距
➢外边距是指元素边框之外的区域
➢设置外边距会在元素外围创建额外的空白空间
➢外边距的作用是控制元素和元素之 间的距离
➢使用margin属性来设置外边距
➢还可以使用margin-top、 margin-bottom、 margin-left、 margin-right分 别控制元素不同方向的外边距
➢属性值可以是长度值或者百分比,如果为长度值,不能为负值
➢当时使用margin简写 属性时，取值的含义与padding相同
2、居中显示
➢margin有一 个很常用的特殊用法，margin左右属性值设为auto时 ，可以设置元素左右居中显示
<!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>外边距</title>
<style>
.box {
border: 5px solid rgb(0, 0, 0);
/* margin-top: 50px;
margin-right: 100px;
margin-bottom: 60px;
margin-left: 10px; */
/* margin: 20% 50% 40% 10%; */
/* margin: 50px 40px 100px; */
/* 左右居中显示 */
width: 200px;
margin: auto;
margin-left: auto;
}
.box1 {
border: 10px solid red;
margin: 50px;
}
.box2 {
border: 10px solid blue;
margin: 100px;
/* 当同时有两个外边框，两边框的距离（上下距离）取决于最大的那个边距 */
/* 当标签为span时，两边框的距离（左右）为两个边的和 */
}
</style>
</head>
<body>
<div class="box">前端课程</div>
<div class="box1">大厂面试常问</div>
<div class="box2">认证</div>
</body>
</html>
display属性
➢display属性用于控制元素如何显示
➢当属性值为block时，会将元素以块级元素的方式显示
➢当属性值为inline时,会将元素以内联元素的方式显示
➢当属性值为inline-block时，会将元素以内联块级元素的方式显示，会同时具有这两个显示特性
➢当属性值为none时,元素将会被隐藏
<!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>display</title>
<style>
.box1 {
background: yellow;
display: inline;
}
.box2 {
background: orange;
display: block;
}
.box3 {
border: 1px solid black;
display: inline-block;
width: 200px;
height: 400px;
font-size: 14px;
}
.box4 {
border: 1px solid black;
display: inline-block;
/* display: none; */
width: 200px;
height: 400px;
font-size: 14px;
}
body {
/* 大厂常见面试题，解决inline-block边框存在间距
在选择器里再改回来就可以了*/
font-size: 0px;
}
</style>
</head>
<body>
<div class="box1">沈阳医学院1</div>
<span class="box2">沈阳医学院2</span>
<div class="box3">沈阳医学院3</div>
<div class="box4">沈阳医学院4</div>
</body>
</html>
CSS浮动
浮动
1、什么叫浮动
➢浮动是指将元素脱离文档流向左或者向右布局
➢使用float属性来设 置元素的浮动
➢默认值为none ,也就是不浮动
➢还可设置为left ，表示向左浮动;或设置为right ,表示向右浮动
2、浮动的特点
➢一 旦对元素设置浮动后,不论之前元素是内联元素还是块级元素，都会被当作块级元素
处理
➢一旦对元素设置浮动之后,该元素便会脱离标准流,会造成其父元素的内容塌陷
<!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>浮动</title>
<style>
.box {
border: 5px solid black;
}
.swim {
width: 100px;
height: 100px;
background: rgb(0, 180, 255);
float: left;
float: right;
}
</style>
</head>
<body>
<div class="box">一天到晚游泳的鱼
<div class="swim">我就是我</div>
</div>
</body>
</html>
清除浮动
1、为什么要清除浮动
➢元素设置 为浮动时引起的父元素内容塌陷,影响布局效果
2、clear属性
➢clear属性用于设置 元素哪一侧不允许浮动
➢默认值为none ,表示不进行控制
➢当设置为left时 ,表示左侧不允许浮动
➢当设置为right时 ，表示右侧不允许浮动
➢当设 置为both时,表示两侧都不允许浮动
3、overflow属性
➢overflow属性 用于设置元素不够容纳内容时的显示方式
➢默认值为visible
➢当值为auto时 ,自动添加滚动条
➢当值为hidden时 ,会用匿藏掉超出的内容
➢当值为scroll时 ,会一直 显示滚动条
<!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>清除浮动</title>
<style>
.box {
border: 5px solid rgb(0, 180, 255);
width: 500px;
/* height: 200px; */
/* 若不指定宽度和高度，内置元素浮动会导致塌陷 */
/* 若指定宽度和高度，边框就不能随浮动的大小而变化 */
overflow:hidden;
}
.left {
width: 200px;
height: 200px;
background: slateblue;
float: left;
}
.right {
width: 200px;
height: 200px;
background: tomato;
float: right;
}
.clear {
clear: both;
}
.box1 {
border: 5px solid violet;
width: 500px;
height: 50px;
overflow: auto;
}
</style>
</head>
<body>
<div class="box">
<div class="left">我是正在游泳的left</div>
<div class="right">我是正在游泳的right</div>
<!-- <div class="clear">清除浮动需要放在最下面</div> -->
</div>
<div class="box1">
随着近两年开源在国内有所起色，大家对开源和开源文化的认知也开始萌芽、成长。在这背后，离不开开源布道师们的“推波助澜”。作为中国“史无前例”的职业开源布道师，适兕（李建盛）在回忆起自己早年的经历时说到：“原来大家都认为我是个怪胎。我是一路被如此误解过来的。”确实，早年间大家对开源感知不深，都认为它很难理解，因为它不像是个能够解决现实问题的事物。
但是随着近两年开源的兴起，适兕欣喜地说到：“从2020年开始大家不把我当另类看了，发现我是可以沟通的，很多人愿意跟我沟通，这令我很欣喜。”但是，尽管情况在好转，开源在中国土壤上还仅仅只是撒下了种子，还需要更多的布道师站出来告诉大家如何参与开源、如何正确的认识开源、如何为开源付费等等一系列的问题。只有这样，中国开源才能茁壮成长，并在将来的某一天开花结果。
</div>
</body>
</html>
常用技巧
企业级应用中清除浮动的最佳方法
➢clearfix方案
➢使用伪元素after在父元素尾部添加一 个元素
➢对这个添加的伪元素应用清除浮动的样式
➢必备三大样式: content、clear、 display
➢可选三大样式: height、font-size、 visibility
例如:
.clearfix:after { content:“”; clear: both; display: block; }
.clearfix:after { content:“"; clear: both; display: block; height: 0px; font-size: 0px; visibility:
hidden; }
<!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>常用技巧</title>
<style>
.box {
border: 5px solid red;
}
.left {
width: 200px;
height: 200px;
background: purple;
float: left;
}
.right {
width: 200px;
height: 200px;
background: orange;
float: right;
}
.clearfix::after {
content: "";
clear: both;
display: block;
height: 0px;
font-size: 0px;
visibility: hidden ;
}
</style>
</head>
<body>
<div class="box clearfix">
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>
实战案例
1、如何实现一个三列布局
➢实现一个左中右布局
➢左右两侧宽度固定
➢中间内容区 宽度能够自适应
2、双飞翼布局
➢第一步:使用float属性让左中右三列浮动
➢第二步:使用负margin属性让左右两列与中间列处于同一水平线上
➢第三步:在中间列中增加一 个div内容元素 ,设置margin值为左右两列的宽度
➢最后，别忘了清除浮动，让父元素高度正常显示:
3、优点
➢中间内容列宽度自适应
➢中间内容区域先加载
➢使用浮动布局
➢巧妙使用负margin属性保持三列水平
➢方法简单直接
➢浏览器兼容性好
<!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>双飞翼布局</title>
<style>
.container {
border: 5px solid purple;
width: 1200px;
margin: auto;
overflow: hidden;
}
.center {
float: left;
background:orange;
width: 100%;
height: 800px;
}
.left {
float: left;
background: palegreen;
width: 200px;
height: 800px;
margin-left: -100%;
}
.right {
float: left;
background: pink;
width: 200px;
height: 800px;
margin-left: -200px;
}
.context {
margin: 0px 200px;
}
</style>
</head>
<body>
<div class="container">
<div class="center">
<div class="context">center</div>
</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
</body>
</html>
CSS定位
定位
1、定位属性
➢定位属性用于设置元素在页面中的位置
➢使用position属性来表示定位
➢它的值可以设置为: static、 relative、 absolute、 fixed
➢默认值为static ，表示标准流布局
2、定位位置
➢在使用定位属性定位元素 位置的时候，可以指定上下左右四个属性来控制元素的位置
➢top用于设置元素定位时距离 上部的偏移距离
➢bottom用于设置元素定位时距离下部的偏移距离
➢left用于设置元素定位时距离左侧的偏移距离
➢right用于设置元素定位时距离右侧的偏移距离
➢需要注意的是 ,偏移量可以为负值
3、层级
➢可以使用属性z-index设置定位元素的层级 ,值越大，显示时越是覆盖在其它元素的上边
➢z-index属性默认值为auto ，代表层级与父元素相同
➢该属性只在position值 为absolute时有效
例如:
.pos1 { position: fixed; }
<div class=' pos1”>我是一个固定定位的元素</div>
.pos2 { position: relative; }
<div class="pos2">我是一个相对定位的元素</div>
.pos3 { position: absolute; top: 50px; }
<div class="pos3">我是- -一个绝对定位的元素</div>
<!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>position</title>
<style>
.pos1 {
position: fixed;
background: yellow;
height: 100px;
width: 500px;
}
</style>
</head>
<body>
<div>医学院</div>
<span>我是span</span>
<span>我是span</span>
<span>我是span</span>
<span>我是span</span>
<span>我是span</span>
<span>我是span</span>
<div class="pos1">我是一个定位元素</div>
<div>医学院</div>
<div>医学院</div>
<div>医学院</div>
<div>医学院</div>
<div>医学院</div>
<div>医学院</div>
<div>医学院</div>
<div>医学院</div>
<div>医学院</div>
<div>医学院</div>
<div>医学院</div>
<div>医学院</div>
<div>医学院</div>
<div>医学院</div>
<div>医学院</div>
<div>医学院</div>
<div>医学院</div>
<div>医学院</div>
<div>医学院</div>
<div>医学院</div>
</body>
</html>
滚动页面试试
相对定位
1、什么是相对定位
➢相对定位是指元素相对于标准 文档流中的默认位置来进行定位的
➢当position属性值设置为relative时 ,开启相对定位模式
➢相对定位并不会让元素脱离标准流
➢相对定位不会影响到周围其它元素的排布
➢实际使用时相对定位一 -般都是和位置属性一起使用
例如:
.box { position: relative; top: 100px; left: 100px; }
<div class="box">我是一一个相对定位元素</div>
<!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>相对定位</title>
<style>
.box1 {
width: 100px;
height: 100px;
background: red;
}
.box2 {
width: 100px;
height: 100px;
background: green;
position: relative;
left: 100px;
/* right: -100px; */
}
.box3 {
width: 100px;
height: 100px;
background: blue;
}
</style>
</head>
<body>
<div class="box1">临床医学</div>
<div class="box2">护理学</div>
<div class="box3">医学信息工程</div>
</body>
</html>
绝对定位
1、什么是绝对定位
➢相对于除static定位之 外的第一个父元素进行定位 ,如果没有就相对于页面定位
➢把position属性的值设 置为absolute时,代表开启绝对定位模式
➢被设置为绝对定位的元素 会脱离标准流
➢当多个绝对定位元素 出现相互遮盖的情况时，可以使用z-index属性设置层级
2、绝对定位和相对定位搭配使用
情景:当我们想要让子元素相对于父元素进行绝对定位时,可以在父元素上使用相对定位
.parent { height: 300px; background: yellow; position: relative; }
.child { height: 100px; width: 100px; background: pink; position: absolute; left: 50%; }
<div class=' parent">我是父元素，我使用相对定位
<div class="child">我是子元素，我使用绝对定位</div>
</div>
<!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>绝对定位</title>
<style>
.box1{
height: 100px;
background: red;
}
.box2 {
height: 100px;
background: green;
position:absolute;
z-index: 1;
}
.box3 {
height: 100px;
background: blue;
position: absolute;
}
.box {
padding: 50px;
background: pink;
}
.father {
height: 300px;
width: 400px;
background: yellow;
position: relative;
}
.son {
height: 100px;
background: orange;
position: absolute;
left: 40%;
top:0px;
}
</style>
</head>
<body>
<!-- <div class="box1">临床医学</div>
<div class="box2">护理学</div>
<div class="box3">医学信息工程</div> -->
<div class="box">
<div class="father">我是父元素
<div class="son">我是子元素</div>
</div>
</div>
</body>
</html>
欢迎加入 MCP 技术社区！与志同道合者携手前行，一同解锁 MCP 技术的无限可能！
更多推荐
0
0- 0
已为社区贡献1条内容
所有评论(0)