-
【0基础前端】CSS-C3总结详细笔记包含代码块从入门到高阶通俗易懂
目录
样式：
1、行内样式
<div style="width:100px; height:100px; background:red;">123div>2、内嵌样式
- <head>
- <style>
- h1{
- width:100px;
- height:100px;
- background:red;
- }
- style>
- head>
3、外链样式
- <head>
- <link rel="stylesheet" href="css路径">
- head>
样式有哪些？
width 表示宽 height 表示高 background-color 表示背景颜色 border 表示边框 border: 1px (边框粗细) solid(边框线类型) red(边框线颜色) solid 表示边框线(实线) dashed 表示边框线(虚线) double 表示边框线(双划线) dotted 表示边框线(点画线) color 表示字体颜色 颜色分类：
red 表示英文红色 #f00 表示十六进制红色 rgb(255,255,255) 表示rgb 0 - 25 行内样式优先级最高
内嵌样式 和 外联样式优先级条件是：谁在下面谁优先级高
去掉浏览器的默认样式：
- *{
- margin:0px;
- padding:0px;
- }
去掉列表的默认样式：
- li{
- list-style:none;
- }
去掉a超链接的下划线
- a{
- text-decoration:none;
- }
去掉图片的缝隙
- img{
- vertical-align:top / middle / bottom
- }
关于font的样式：
font-size:20px; 表示字体大小为20像素 font-weight:bolder / bold / 100-700 表示字体加粗 font-family: '黑体/宋体/微软雅黑' 表示字体类型 font-style:normal; 表示斜体变正体 font-style:oblique; 表示正体变斜体 选择器
id选择器 #id名(id名有且只有一个) class选择器 .class名 *选择器(通配符) * 标签选择器 标签名 群组选择器 div,h1,p,..... 子代选择器 div>p 后代选择器 div p 属性选择器 [name="user"] 过滤选择器 ::after / :after、::before / :before 伪类选择器 link 表示访问前
hover 表示鼠标移入时
active 表示访问中..
visited 表示访问后
选择器的优先级：
id 的优先级 高于 class
class 的优先级 高于 标签
水平居 左(默认)/中/右
text-align:left/center/right
垂直居中(行高)
line-height:和高度保持一致
例如：
- height:100px;
- line-height:100px;
溢出隐藏并且强制在一行
white-space:nowrap; 表示强制在一行 text-overflow:ellipsis; 出现省略号 overflow:hidden; 溢出隐藏 背景图片：
背景图片分写：
background-image:url(图片路径) 表示引入背景图片 background-repeat:no-repeat / repeat-x / repeat-y; 表示背景图片平铺方式(不平铺 / 水平平铺 / 垂直平铺) background-position:left / top 表示背景图片的位置 background-size:10% 20%; 表示背景图片的大小 background-clip:border-box / padding-box / content-box; 表示背景图片的绘制区域 background-origin:border-box / padding-box / content-box; 表示背景图片的定位位置 background-attachment:scroll(默认) / fixed / inherit 表示背景图片是否联动 background:url(图片路径) no-repeat center; 背景图片的合写 透明度
1） opcity:0.1 - 0.9;
2） background:rgba(0,0,0,0.5);
opcity 和 background:rgba() 区别
opcity把背景颜色和文本都变透明
background:rgba() 只把背景颜色变透明
外边距:margin
外边距的分写：
- margin-top:10px;
- margin-bottom:10px;
- margin-left:10px;
- margin-right:10px;
外边距的合写：
margin:10px; 表示上下左右都为10像素 margin:10px 20px; 表示上下为10，左右为20 margin:10px 20px 30px; 表示上为10，左右为20，下为30 margin:10px 20px 30px 40px; 表示上为10, 右为20,下为30,左为40(顺时针) 内边距:padding
内边距的分写：
- padding-top:10px;
- padding-bottom:10px;
- padding-left:10px;
- padding-right:10px;
内边距的合写：
padding:10px; 表示上下左右都为10像素 padding:10px 20px; 表示上下为10，左右为20 padding:10px 20px 30px; 表示上为10，左右为20，下为30 padding:10px 20px 30px 40px; 表示上为10, 右为20,下为30,左为40(顺时针) 注意：在使用内边距padding时，要减去宽/高
盒子模型组成部分：
内容(content) + 内边距(padding) + 边框(border) + 外边距(margin)
盒子模型分为两种：
1）标准盒子模型
2）怪异盒子模型
标准盒子模型 和 怪异盒子模型的相同点和不同点
相同点：
组成部分都是由内容+内边距+边框+外边距
不同点：
标准盒子模型的内容宽高，不包含其他成分
怪异盒子模型的内容宽高由(内容+内边距+边框)
margin-top值的特征：
谁的值大，用谁的值
margin塌陷 和 margin拖拽
1）margin塌陷：父级的margin-top值 大于 子级的margin-top值
2）margin拖拽： 父级的margin-top值 小于 子级的margin-top值
margin塌陷和margin拖拽解决方法：
1）position:absolute;
2）display: inline-block;
3）float: left;
4）overflow:hidden;
5）border:1px solid #000;
margin上下取最大值
margin左右取之和
浮动：
float:left / right;清浮动(给父级添加)
- overflow:hidden;
- .clearfix:after{
- content:'';
- clear:both;
- display:block;
- }
- .clearfix{
- zoom:1;
- }
谁需要清浮动就加 .clearfix
什么时候用浮动：
一般情况下 -> 上下局部 转为 左右布局时用浮动
浮动的注意事项：
1）子级浮动，父级要清浮动
2）同级的元素，一个浮动，其他兄弟元素都要浮动
解决小图标 和 文本左右布局问题
1）使用浮动 -> float:left / right;
2）给img标签添加 -> vertical-align:top / middle / bottom;
给标签添加上划线、中划线、下划线
text-decoration:overline; 表示上划线 text-decoration:line-through; 表示中划线 text-decoration:underline; 表示下划线 定位分几种？
1）相对定位 -> position:relative;
2）绝对定位 -> position:absolute;
3）固定定位 -> position:fixed;
3种定位依据谁定位的介绍：
1）相对定位是依据自己本身定位的
2）绝对定位是依据有定位的父级定位
3）固定定位是依据body(网页)定位
关于父级和子级的定位关系
1）子级是绝对定位(position:absolute;)父级只要有定位(无论是相对定位、绝对定位还是固定定位)，绝对定位的子级就会依据父级定位。
2）子级是绝对定位，但父级没定位，子级依据body定位
层级： z-index: 2;(数字越大，层级越高)
层级的使用条件：
必须有定位(无论是相对定位、绝对定位还是固定定位)
定位中父级和定位中子级的关系
1）父级的层级永远比相对定位/绝对定位的子级低
2）相同定位的子级，谁的z-index数值越大，谁的层级越高
圆角：
border-radius:20px / 20%;圆角的分写：
表示左上角
border-top-left-radius:20px;表示右上角
border-top-right-radius:30px;表示左下角
border-bottom-left-radius:40px;表示右下角
border-bottom-right-radius:50px;圆角的合写：
border-radius:10px 20px 30px 40px;表示左上角、右上角、右下角、左下角(顺时针方向)
盒子阴影：
box-shadow: 1px(阴影水平位置) 1px(阴影垂直位置) 10px(模糊度) #000(阴影颜色)
边框图片：
border-image:url(图片路径) 左右拉伸 上下拉伸 围绕方式round(平铺填充) / stretch(拉伸填充)
渐变：
- 线性渐变：linear-gradient
background-image: Linear-gradient(方向, 颜色1, 颜色2)
- 径向渐变：radial-gradient
background-image: radial-gradient(circle/ellipse, 颜色1, 颜色2)
文本效果：
文本阴影：
text-shadow: 5px(水平阴影位置) 5px(垂直阴影位置) 10px(模糊度) #f00(阴影颜色);
盒子阴影：
box-shadow:5px(水平阴影位置) 5px(垂直阴影位置) 10px(模糊度) #f00(阴影颜色);
text-overflow:
A: text-overflow:clip; (默认值)
B: text-overflow:ellipsis; (出现省略号)
注意：溢出隐藏出现省略号
white-space:nowrap; //表示强制在一行 overflow:hidden; //溢出隐藏 text-overflow:ellipsis; //出现省略号 word-wrap:break-word; 表示换行(如果有空格自动换行,没有空格分裂中间的部分) word-break:keep-all; 表示换行(只能在半角空格或连字符处换行) word-break:normal; 表示默认(使用浏览器默认的换行规则) word-break:break-all; 表示换行(允许在单词内换行) 关于overflow问题
overflow:hidden; //表示溢出隐藏 overflow:scroll; //表示出现上下左右滚动条 overflow:auto; //表示出现上下滚动条 2D转换(transform):
transform:translate(10px(X轴), 30px(Y轴)); //表示平移 transform:rotate(30deg / -30deg); //表示旋转正数顺时针,负数逆时针 transform:scale(1.5, 2) / (1.5); // 表示缩放原来的倍数 transform:skew(30deg, 20deg) / skewX(20deg) / skewY(30deg); //表示倾斜 transformorigin:left/right/center/20%top
/center/bottom/30%;
//表示改变元素的基点位置 3D转换：
transform-rotateX(30deg); // 表示3D旋转(围绕x轴) transform-rotateY(20deg); // 表示3D旋转(围绕Y轴) transform-style:preserve-3d; //表示保留子元素的3D空间效果 perspective:100px; // 表示景深(透视效果) perspective-origin:left/right/center/20% top/center/bottom/20%; //表示改变景深(透视)底部基点位置 backface-visibility:hidden / visible; //表示当元素背面向屏幕时是否可见 Css3中的过渡
transition:css属性名称 过渡时间(s) 运动方式(ease/linear) 延迟时间(s)
例如：
transition:width 2s ease 2s
transition:all 1s linear 2s (推荐使用这种)
注意事项：使用过渡一定要给元素的原样式上面添加
Css3中的动画效果
- 创建动画
- @keyframes name名称{
- from / 0%{
- 原样式
- }
- to/100%{
- 改变后的样式
- }
- }
- 绑定动画
animation: name名称 动画时长(s) 运动方式(linear/ease) 延迟时间(s) 是否停在当动画位置(forwards/normal) 运动次数(3/ infinite无限循环) 是否反方向运动(normal/reverse/alternate/alternate-reverse)
例如：
animation:move 2s linear 1s forwards infinite alternateanimation-play-state:paused; 表示动画停止
Css3中的多列：
column-count 指定元素应该被分割的列数。 column-gap 指定列与列之间的间隙 column-rule 所有 column-rule-* 属性的简写 column-rule-color 指定两列间边框的颜色 column-rule-style 指定两列间边框的样式 column-rule-width 指定两列间边框的厚度 column-span 指定元素要跨越多少列 column-width 指定列的宽度 columns 指的是column-width 与 column-count 的简写属性 Css3中的box-sizing属性
box-sizing:border-box; 表示边框包含在容宽度和高度内 box-sizing:content-box; 表示边框未包含在内容宽度和高度内 box-sizing:inherit; 表示边框的属性继承父级中的box-sizing属性 CSS3 弹性盒子内容
- 弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。
- 弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。
- 弹性容器内包含了一个或多个弹性子元素。
- 注意： 弹性容器外及弹性子元素内是正常渲染的。弹性盒子只定义了弹性子元素如何在弹性容器内布局。
- 弹性子元素通常在弹性盒子内一行显示。默认情况每个容器只有一行。
flex-direction 属性指定了弹性子元素在父容器中的位置
语法
flex-direction: row | row-reverse | column | column-reverse
flex-direction的值有:
row 横向从左到右排列（左对齐），默认的排列方式。 row-reverse 反转横向排列（右对齐，从后往前排，最后一项排在最前面。 column 纵向排列。 column-reverse 反转纵向排列，从后往前排，最后一项排在最上面。 justify-content 属性
语法：
justify-content: flex-start | flex-end | center | space-between | space-around
justify-content的值有：
flex-start：
弹性项目向行头紧挨着填充。这个是默认值。第一个弹性项的main-start外边距边线被放置在该行的main-start边线，而后续弹性项依次平齐摆放。
flex-end：
弹性项目向行尾紧挨着填充。第一个弹性项的main-end外边距边线被放置在该行的main-end边线，而后续弹性项依次平齐摆放。
center：
弹性项目居中紧挨着填充。（如果剩余的自由空间是负的，则弹性项目将在两个方向上同时溢出）。
space-between：
弹性项目平均分布在该行上。如果剩余空间为负或者只有一个弹性项，则该值等同于flex-start。否则，第1个弹性项的外边距和行的main-start边线对齐，而最后1个弹性项的外边距和行的main-end边线对齐，然后剩余的弹性项分布在该行上，相邻项目的间隔相等。
space-around：
弹性项目平均分布在该行上，两边留有一半的间隔空间。如果剩余空间为负或者只有一个弹性项，则该值等同于center。否则，弹性项目沿该行分布，且彼此间隔相等（比如是20px），同时首尾两边和弹性容器之间留有一半的间隔（1/2*20px=10px）。
align-items 属性
表示：设置或检索弹性盒子元素在侧轴（纵轴）方向上的对齐方式。
align-items 语法
align-items: flex-start | flex-end | center | baseline | stretch
各个值解析:
flex-start 弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。 flex-end 弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。 center 弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。 baseline 如弹性盒子元素的行内轴与侧轴为同一条，则该值与'flex-start'等效。其它情况下，该值将参与基线对齐。 stretch 如果指定侧轴大小的属性值为'auto'，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照'min/max-width/height'属性的限制。 flex-wrap 属性
表示：用于指定弹性盒子的子元素换行方式。
flex-wrap 语法
flex-wrap: nowrap|wrap|wrap-reverse;
各个值解析:
nowrap - 默认， 弹性容器为单行。该情况下弹性子项可能会溢出容器。 wrap - 弹性容器为多行。该情况下弹性子项溢出的部分会被放置到新行，子项内部会发生断行 wrap-reverse -反转 wrap 排列。 align-content 属性
表示用于修改 flex-wrap 属性的行为。类似于 align-items, 但它不是设置弹性子元素的对齐，而是设置各个行的对齐。
align-content 语法
align-content: flex-start | flex-end | center | space-between | space-around | stretch
各个值解析:
stretch - 各行向弹性盒容器的起始位置堆叠。 flex-end - 各行向弹性盒容器的结束位置堆叠。 center -各行向弹性盒容器的中间位置堆叠。 space-between -各行在弹性盒容器中平均分布。 space-around - 各行在弹性盒容器中平均分布，两端保留子元素与子元素之间间距大小的一半。 order弹性子元素属性
表示：排序
语法
order:
各个值解析:
order:数字 表示用整数值来定义排列顺序，数值小的排在前面。可以为负值。
order 属性设置弹性容器内弹性子元素的属性:
align-self
属性用于设置弹性元素自身在侧轴（纵轴）方向上的对齐方式。
语法
align-self: auto | flex-start | flex-end | center | baseline | stretch
各个值解析:
auto 如果'align-self'的值为'auto'，则其计算值为元素的父元素的'align-items'值，如果其没有父元素，则计算值为'stretch'。 flex-start 弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。 flex-end 弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。 center 弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。 baseline 如弹性盒子元素的行内轴与侧轴为同一条，则该值与'flex-start'等效。其它情况下，该值将参与基线对齐。 stretch 如果指定侧轴大小的属性值为'auto'，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照'min/max-width/height'属性的限制。 flex
属性用于指定弹性子元素如何分配空间。
例如：flex:1
-
相关阅读:
C语言详解系列——指针与结构体
stm32和电机开发（上位系统）
C++的extern关键字在HotSpot VM中的重要应用
初识compileflow工作流
专访中欧财富伍春兰：财富管理行业数字化转型升级，数据库如何选型？
CompletableFuture原理与实践-外卖商家端API的异步化
WebSocket实战之五JSR356
Leetcode（81）——搜索旋转排序数组 II
Java IDEA maven 配置
跨桌面端Web容器演进
- 原文地址：https://blog.csdn.net/qq_55629923/article/details/126249930
