CSS学习笔记
一、CSS 引入方式
- 内部样式表:学习使用
- CSS 代码写在 style 标签里面
- 外部样式表:开发使用
- CSS 代码写在单独的 CSS 文件中(.css)
- 在 HTML 使用 link 标签引入
<link rel="stylesheet" href="./my.css">
- 行内样式:配合 JavaScript 使用
- CSS 写在标签的 style 属性值里
<div style="color: red; font-size:20px;">这是 div 标签</div>
- CSS 写在标签的 style 属性值里
二、选择器
作用:查找标签,设置样式。
基础选择器
1.标签选择器
<style>
p {
color: red;
}
</style>
2. 类选择器
作用:查找标签,差异化设置标签的显示效果。
步骤:
• 定义类选择器 → .类名
• 使用类选择器 → 标签添加 class="类名“
<style>
/* 定义类选择器 */ .red {
color: red;
}
</style>
<!-- 使用类选择器 -->
<div class="red">这是 div 标签</div>
3. id 选择器
作用:查找标签,差异化设置标签的显示效果。
场景:id 选择器一般配合 JavaScript 使用,很少用来设置 CSS 样式
步骤:
• 定义 id 选择器 → #id名
• 使用 id 选择器 → 标签添加 id= “id名”
<style>
/* 定义 id 选择器 */
#red {
color: red;
}
</style>
<!-- 使用 id 选择器 -->
<div id="red">这是 div 标签</div>
规则:
• 同一个 id 选择器在一个页面只能使用一次
4. 通配符选择器
作用:查找页面所有标签,设置相同样式。
通配符选择器: *,不需要调用,浏览器自动查找页面所有标签,设置相同的样式
* {
color: red;
}
5.结构伪类选择器
作用:根据元素的结构关系查找元素。
选择器 | 说明 |
---|---|
E:first-child | 查找第一个E元素 |
E:last-child | 查找最后一个E元素 |
E:nth-child(N) | 查找N个E元素(第一个元素N值为1) |
li:first-child {
background-color : green;
}
:nth-child(公式)
作用:根据元素的结构关系查找多个元素。
提示:公式中的n取值从 0 开始。
6.伪元素选择器
作用:创建虚拟元素 (伪元素) ,用来摆放装饰性的内容。
注意点:
• 必须设置 content : ””属性 ,用来 设置伪元素的内容 ,如果没有内容 ,则引号留空即可
• 伪元素默认是行内显示模式
• 权重和标签选择器相同
div::before {
content: "before 伪元素";
}
div::after {
content: "after 伪元素";
}
三、文字控制属性
描述 | 属性 |
---|---|
字体大小 | font-size |
字体粗细 | font-weight |
字体倾斜 | font-style |
行高 | line-height |
字体族 | font-family |
字体复合属性 | font |
文本缩进 | text-indent |
文本对齐 | text-align |
修饰线 | text-decoration |
四、盒子模型
1.组成
作用:布局网页,摆放盒子和内容。
盒子模型重要组成部分:
• 内容区域 – width & height • 内边距 – padding(出现在内容与盒子边缘之间)
• 边框线 – border
• 外边距 – margin(出现在盒子外面)
div {
margin: 50px;
border: 5px solid brown;
padding: 20px;
width: 200px;
height: 200px;
background-color: pink;
}
2.边框线
属性名:border(bd)
属性值:边框线粗细 线条样式 颜色(不区分顺序)
div {
border: 5px solid brown;
width: 200px;
height: 200px;
background-color: pink;
}
设置单方向边框线
属性名:border-方位名词(bd+方位名词首字母,例如,bdl)
属性值:边框线粗细 线条样式 颜色(不区分顺序)
div {
border-top: 2px solid red;
border-right: 3px dashed green;
border-bottom: 4px dotted blue;
border-left: 5px solid orange;
width: 200px;
height: 200px;
background-color: pink;
}
3.内边距
作用:设置 内容 与 盒子边缘 之间的距离。
属性名:padding / padding-方位名词
div {
/* 四个方向 内边距相同 */
padding: 30px;
/* 单独设置一个方向内边距 */
padding-top: 10px;
padding-right: 20px;
padding-bottom: 40px;
padding-left: 80px;
width: 200px;
height: 200px;
background-color: pink;
}
内边距 – 多值写法
技巧:从上开始顺时针赋值,当前方向没有数值则与对面取值相同。
4.尺寸计算
(1)默认情况
盒子尺寸 = 内容尺寸 + border 尺寸 + 内边距尺寸
结论:给盒子加 border / padding 会撑大盒子
(2)解决
手动做减法,减掉 border / padding 的尺寸
內减模式:box-sizing: border-box
5.外边距
作用:拉开两个盒子之间的距离
属性名:margin
提示:与 padding 属性值写法、含义相同
技巧:版心居中 – 左右 margin 值 为 auto(盒子要有宽度)
div {
margin: 0 auto;
width: 1000px;
height: 200px;
background-color: pink;
}
外边距问题 – 合并现象
场景:垂直排列的兄弟元素,上下 margin 会合并
现象:取两个 margin 中的较大值生效
.one {
margin-bottom: 50px;
}
.two {
margin-top: 20px;
}
外边距问题 – 塌陷问题
场景:父子级的标签,子级的添加 上外边距 会产生塌陷问题
现象:导致父级一起向下移动
.son {
margin-top: 50px;
width: 100px;
height: 100px;
background-color: orange;
}
解决方法:
• 取消子级margin,父级设置padding
• 父级设置 overflow: hidden
• 父级设置 border-top
6.清除默认样式
清除标签默认的样式,比如:默认的内外边距。
/* 清除默认内外边距 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* 清除列表项目符号 */
li {
list-style: none;
}
7.元素溢出
作用:控制溢出元素的内容的显示方式。
属性名:overflow
8.行内元素–内外边距问题
场景:行内元素添加 margin 和 padding,无法改变元素垂直位置
解决方法:给行内元素添加 line-height 可以改变垂直位置
span {
/* margin 和 padding 属性,无法改变垂直位置 /
margin: 50px;
padding: 20px;
/ 行高可以改变垂直位置 */
line-height: 100px;
}
9.圆角
作用:设置元素的外边框为圆角。
属性名:border-radius
属性值:数字+px / 百分比
提示:属性值是圆角半径
技巧:从左上角开始顺时针赋值,当前角没有数值则与对角取值相同。
常见应用 – 正圆形状
给正方形盒子设置圆角属性值为 宽高的一半 / 50%
常见应用 – 胶囊形状
给长方形盒子设置圆角属性值为 盒子高度的一半
10.阴影(拓展)
作用:给元素设置阴影效果
属性名:box-shadow
属性值:X 轴偏移量 Y 轴偏移量 模糊半径 扩散半径 颜色 内外阴影
注意:
• X 轴偏移量 和 Y 轴偏移量 必须书写
• 默认是外阴影,内阴影需要添加 inset
div {
width: 200px;
height: 80px;
background-color: orange;
box-shadow: 2px 5px 10px 0 rgba(0, 0, 0, 0.5) inset;
}
五、浮动
标准流也叫文档流,指的是标签在页面中默认的排布规则,例如:块元素独占一行,行内元素可以一行显示多个。
1.浮动
作用:让块元素水平排列。
属性名:float
属性值
• left:左对齐
• right:右对齐
特点:
• 浮动后的盒子顶对齐
• 浮动后的盒子具备行内块特点
• 浮动后的盒子脱标,不占用标准流的位置
2.清除浮动
(1)场景:浮动元素会脱标,如果父级没有高度,子级无法撑开父级高度(可能导致页面布局错乱)
(2)解决方法:清除浮动(清除浮动带来的影响)
方法一:额外标签法
• 在父元素内容的最后添加一个块级元素,设置 CSS 属性 clear: both
方法二:单伪元素法
.clearfix::after {
content: "";
display: block;
clear: both;
}
方法三:双伪元素法(推荐)
.clearfix::before,
.clearfix::after {
content: "";
display: table;
}
.clearfix::after {
clear: both;
}
方法四:overflow
• 父元素添加 CSS 属性 overflow: hidden
3.总结
浮动属性 float,left 表示左浮动,right 表示右浮动
特点
(1)浮动后的盒子顶对齐
(2)浮动后的盒子具备行内块特点
(3)父级宽度不够,浮动的子级会换行
(4)浮动后的盒子脱标
清除浮动:子级浮动,父级没有高度,子级无法撑开父级高度,影响布局效果
双伪元素法
拓展:浮动本质作用是实现图文混排效果
六、Flex 布局
1.认识
Flex 布局也叫弹性布局,是浏览器提倡的布局模型,非常适合结构化布局,提供了强大的空间分布和对齐能力。
Flex 模型不会产生浮动布局中脱标现象,布局网页更简单、更灵活。
2.组成
设置方式:给父元素设置 display: flex,子元素可以自动挤压或拉伸
组成部分:
(1) 弹性容器
(2)弹性盒子
(3)主轴:默认在水平方向
(4)侧轴 / 交叉轴:默认在垂直方向
3.布局
4.主轴对齐方式
属性名:justify-content
5.侧轴对齐方式
属性名
• align-items:当前弹性容器内所有弹性盒子的侧轴对齐方式(给弹性容器设置)
• align-self:单独控制某个弹性盒子的侧轴对齐方式(给弹性盒子设置)
6.修改主轴方向
主轴默认在水平方向,侧轴默认在垂直方向
属性名:flex-direction
7.弹性伸缩比
作用:控制弹性盒子的主轴方向的尺寸。
属性名:flex
属性值:整数数字,表示占用父级剩余尺寸的份数。
8.弹性盒子换行
弹性盒子可以自动挤压或拉伸,默认情况下,所有弹性盒子都在一行显示。
属性名:flex-wrap
属性值
• wrap:换行
• nowrap:不换行(默认)
9.行对齐方式
属性名:align-content
注意:该属性对单行弹性盒子模型无效。
七、定位
作用:灵活的改变盒子在网页中的位置
实现:
(1) 定位模式:position
(2)边偏移:设置盒子的位置
• left
• right
• top
• bottom
1.相对定位
position: relative
特点:
• 不脱标,占用自己原来位置
• 显示模式特点保持不变
• 设置边偏移则相对自己原来位置移动
拓展:很少单独使用相对定位,一般是与其他定位方式配合使用
2.绝对定位
position: absolute
使用场景:子级绝对定位,父级相对定位(子绝父相)
特点:
• 脱标,不占位
• 显示模式具备行内块特点
• 设置边偏移则相对最近的已经定位的祖先元素改变位置
• 如果祖先元素都未定位,则相对浏览器可视区改变位置
3.定位居中
实现步骤:
(1) 绝对定位
(2)水平、垂直边偏移为 50%
(3) 子级向左、上移动自身尺寸的一半
• 左、上的外边距为 –尺寸的一半
• transform: translate(-50%, -50%)
4.固定定位
position: fixed
场景:元素的位置在网页滚动时不会改变
特点:
• 脱标,不占位
• 显示模式具备行内块特点
• 设置边偏移相对浏览器窗口改变位置