本文详细介绍了CSS的基础知识，包括其目的、语法、不同类型的选择器（如全局、元素、类、ID和组合选择器），以及字体、背景、文本、表格、布局（如盒模型和弹性盒模型）等关键特性。还探讨了文档流、浮动、定位和Z-index在页面布局中的作用。
css 层叠样式表又叫级联样式表，简称样式表
css 文件后缀名为.css
css 用于HTML文档中元素样式的定义
1.css 目的： 让网页具有美观一致的页面
语法：css规则有两个主要的部分构成：选择器，以及一条或多条声明（）
h1{color:blue;font-size;12px;}
选择器是需要改变样式的html元素，每条声明由一个属性和一个字值组成
属性 是自己设置的样式属性。每个属性都有一个值，属性和值被冒号分开
放在<style>框架内，head前 统一标签样式
2.内联样式（行内样式）
缺乏整体性和规划性，不利于维护，维护成本高
<p style="background: orange;font-size；24px"> <p>
内部样式：单个文档需要特殊的样式，单个css页面具有统一性和规划性，便于维护，但多个页面之间易混乱
<head>
<style>
p{
color: aqua;
font-size: 20px;
}
</style>
</head>
外部样式：当样式用于很多页面，改变一个文件改变整个站点的外观，每个页面用<link>在头部
<link rel="stylesheet" href="./product.css">
3.选择器
3.1 全局选择器
优先级最低，一般做样式初始化
*{
margin:0;
padding:0;
}
3.2 元素选择器
html中的元素，p b div a img body
标签选择器，页面上所有这种类型的标签，所以经常描述共性
p{
font-size:13px;
}
3.3 类选择器
可以被多标签使用，不能以数字开头,同一个标签可以使用多个类选择器用空格隔开
优点：灵活
.content{
color: aqua;
}
<p class="content">哎呀呀呀</p> <p class="content size">哎呀呀呀</p>
3.4 ID选择器
ID是惟一的，不能以数字开头
针对某一个特定的标签使用，只能用一次，css中的ID选择器以#来定义
#text{
color: aqua;
font-size: 20px;
}
3.5合并选择器
合取共同样式，减少重复代码
p,h1{
color: aqua;
font-size: 50px;
}
3.6 选择器的优先级
行内>ID>类>元素 同级相同标签生效最后面的代码
4.字体属性
4.1 color
规定文本颜色
div{color:red;}
div{color:#ff0000;} 16进制0-f
div{color:rgb(255,255,255);} 000黑 全255白
div{color:rgba(255,0,0,1)}末位0到1 字体透明度
4.2 文本粗细
font-weight
~:bold 粗体
bolder 更粗
lighter 定义更细
100-900 定义由细到粗 400默认，700等同bold
4.3 字体样式
font-style
normal默认值
italic定义斜体字
属性指定元素字体 font-family：“某种文本”；
5.背景图像设置
background-image: url("1.jpg")
background-repeat设置如何平铺背景图像
repeat 默认值都平铺
repeat-x 水平方向平铺
repeat-y 垂直方向平铺
no-repeat 不平铺
background-repeat: repeat-y;
background-size:length 50px 20px 设置宽度和高度
percentage 10% 10% 计算相对位置区域百分比第一个宽第二个高
cover 保持图片纵横比并将图片缩放成完全覆盖背景区域的最大大小
contain 保持图片纵横比并将图像缩放成适合背景定位区域的最大大小
background-position:left top(左中 左下 右上 右中 右下 中上 中中 中下)
x% y% 第一个值水平 第二个值垂直，左上角0% 0% 右下角100% 100%，只定一个值，其他默认值为50%，默认%0 %0
xpos ypos 单位是像素
6.文本属性
text-align 指定元素文本的水平对齐方式
left 文本左排列，默认值
h1{text-align:center}
h2{text-align:left}
text-decoration 属性规定添加到文本的修饰，下划线，上划线，删除线等
underline 定义下划线
overline 定义上划线
line-through 定义删除线
h1{text-decoration:overline}
text-transform
text-transform 属性控制文本的大小写
captialize 定义每个单词开头大写
uppercase 定义全部大写字母
lowercase 定义全部小写字母
h1{text-transform:captialize;}
text-indent 属性规定文本块中首行文本的缩进
p{
text-indent：30px；（代表缩进两个单词）
}
7.表格属性
7.1 表格边框
指定表格边框，使用border属性
table，td{
border: 1px solid black;
}
7.2 折叠边框
border-collapse属性设置表格的边框是否被折叠成一个单一的边框或隔开
table{border-collapse:collapse;}
table,td{border: 1px solid black;}
7.3 表格宽度和高度
table{width：100%；}
td{height:50px;}
7.4 表格文字对齐
表格中的文本对齐和垂直对齐属性，向左右中心
td{text-align:right;}
垂直对齐属性设置垂直对齐
td{height:50px;vertical-align:bottom;}
7.5 表格填充
td{padding:15px;}
7.6 表格颜色
table,td,th{border:1px solid green;}
td{blackground-color:green:color:white}
8.关系选择器分类
后代选择器
子代选择器
相邻兄弟选择器
通用兄弟选择器
后代选择器 选择所有被E元素包含的F元素，中间用空格隔开
E F{};
子代选择器 选择所有作为E元素的直接子元素F，对更深一层的元素不起作用
E>F{}
相邻兄弟选择器 选择紧跟E元素后的F元素，用加号表示，选择相邻的第一个兄弟元素，只能向下选择
E+F{}
通用兄弟选择器 选择E元素之后的所有兄弟元素F
E~F{}
9.盒子模型 设计与布局
概念：所有HTML元素可看作盒子，css盒模型本质上是一个盒子，封装周围的HTML元素，
它包括：外边距（margin），边框(border)，内边距(padding)和实际内容(content)
外边距（margin）:清楚边框外的区域，外边距是透明的
边框(border)：围绕在内边距和内容外的边框
内边距(padding)：清除内容周围的区域，两个字的时候第一个代表上下，第二个代表左右
实际内容(content)：盒子的内容，显示文本和图像
padding也可以分开设置为
padding-left：
padding-right：
padding-top：
padding-bottom：
margin同理
10.弹性盒模型 css3的一种新的布局模式
css3弹性盒是一种当页面需要适应不同的屏幕大小以及设备类型时
确保元素具有恰当的行为的布局方式，导入弹性盒布局模型的目的是
提供一种更加有效的方式来对一个容器中的子元素进行排列对齐和分配空间
10.1弹性盒子内容
弹性容器（Flex container）和弹性子元素（Flex item）
弹性容器通过设置display属性的值为flex将其定义为弹性容器
弹性容器内包括一个或多个弹性子元素
弹性容器外及弹性子元素内正常渲染，弹性盒子只定义了弹性子元素如何在弹性容器内布局
10.2父元素上的属性
display属性
display:flex：开启弹性盒
默认弹性盒里内容横向摆放
10.3 flex-dirrection属性
指定了弹性子元素在父容器中的位置
flex-direction:row(默认 从左到右左对齐)
flex-direction:row-reverse（从右到左 右对齐）
flex-direction:column（从上到下）
flex-direction:column-reverse
justify-content属性 垂直方向
内容对齐属性应用在弹性容器上，把弹性沿着弹性容器的主轴线对齐
语法：
justify-content：flex-start(默认值)
justify-content：flex-end
justify-content：center
align-items属性
align-items设置或检索弹性盒子元素在纵轴方向上的对齐方式
align-items：flex-start
align-items：flex-end
align-items：center
10.4 子元素上的属性
flex:权重（数字）
根据弹性盒子元素所设置的扩展因子作为比率来分配剩余空间
默认值为0，即如果存在剩余空间，也不放大
如果只有一个子元素设置，那么按扩展因子的百分比对其分配剩余空间，0.1即10%，1 1100%
设置后宽（或长）不再生效
11.文档流
文档流是文档中可显示对象在排列时所占用的位置空间
例如：块元素自上而下摆放，内联元素从左到右
标准流里面限制非常多，导致很多页面效果无法实现
11.1文档流产生的问题
1.高矮不齐，底边对齐
2.空白折叠现象
无论多少个空格、换行、tab,都会折叠为一个空格
如果想让img标签之间没有空隙，必须紧密连接
解决方法：脱离文档流
浮动
绝对定位
固定定位
11.2 浮动
增加一个浮层来放置内容
float属性定义元素在哪个方向浮动，任何元素都可以浮动
left 元素左浮,使元素横向摆放
right 元素右浮
浮动的原理
1.浮动后使元素脱离文档流
2.浮动只有左右，没有上下
容器不足时
当容器不足以横向摆放内容的时候，会在下一行摆放
11.3 清除浮动
浮动元素会造成父元素高度塌陷，后续元素也会受到影响
浮动副作用
当元素设置float浮动后，该元素就会脱离文档流并向左向右浮动
1.浮动元素会造成父元素高度塌陷
2.后续元素会受到影响
清除浮动
当父元素出现塌陷，对布局不利，清楚副作用
解决方案
父元素设置高度
受影响的元素增加clear属性 clear:both
overflow清除浮动 overflow: hidden; clear:both;
伪对象方式
.container::after{
content: "";
display: block;
clear:both;
}
11.4 定位 position 属性指定元素的定位类型
relative 相对定位
absolute 绝对定位
fixed 固定定位 随这页面滚动固定在某一位置
绝对定位和固定定位会脱离文档流
设置定位之后：可以使用四个方向值进行调整位置：left、top、right、、bottom(距离哪边)
设置定位后，相对定位和绝对定位他是相对于具有定位的父级元素进行位置调整，
如果父级元素不存在定位，这继续向上逐级寻找，直到顶层文档。
11.5 Z-index 元素的堆叠顺序
z-index属性设置元素的堆叠顺序，拥有更高堆叠顺序的元素总是处于堆叠顺序较低的元素的前面
<div class="box1"></div>
<div class="box2"></div>
.box1{
z-index:2
}
.box2{
z-index:1
}
扫一扫
3698
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
