前端的修行之路-css

最新推荐文章于 2024-05-08 14:18:25 发布

JP-Destiny

最新推荐文章于 2024-05-08 14:18:25 发布

阅读量363

点赞数

分类专栏：前端文章标签： css css3

本文链接：https://blog.csdn.net/javadestiny/article/details/105544404

版权

前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

本文全面解析CSS样式，包括背景、边框、文字、表格、颜色、尺寸、列表、盒子、定位、分栏、过渡、转换、动画、渐变及复合样式。深入探讨flex弹性布局，介绍BFC规范和浏览器前缀，帮助前端开发者掌握CSS精髓。

摘要由CSDN通过智能技术生成

css

css样式

背景样式

background-attachment：背景图片是否固定或者随着页面的其余部分滚动。

值	描述
scroll	默认值。背景图像会随着页面其余部分的滚动而移动
fixed	当页面的其余部分滚动时，背景图像不会移动

background-color：背景颜色。
background-image：背景图片。
background-position：背景图片的开始位置。

值	描述
top left/top center/top right/center left/center cente/center right/bottom left/bottom center/bottom right	默认值：0% 0%。仅规定一个关键词，那么第二个值是“center”
x% y%	第一个值是水平位置，第二个值是垂直位置
xpos ypos	第一个值是水平位置，第二个值是垂直位置

background-repeat：背景图片的重复。

值	描述
repeat	默认。在垂直方向和水平方向重复
repeat-x	在水平方向重复
repeat-y	在垂直方向重复
no-repeat	仅显示一次

background-clip：背景的绘制区域。

值	描述
border-box	背景被裁剪到边框盒
padding-box	背景被裁剪到内边距框
centent-box	背景被裁剪到内容框

background-origin：背景图片的定位区域。

值	描述
padding-box	背景图片相对于内边距框来定位
border-box	背景图片相对于边框盒来定位
centent-box	背景图片相对于内容框来定位

background-size：背景图片的定位区域。

值	描述
length	第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 “auto”
%	第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 “auto”
cover	背景图像完全覆盖背景区域
contain	背景图片完全适应内容区域

边框样式

border-color：边框的颜色。
border-style：边框的样式。

值	描述
dotted	点状
dashed	虚线
solid	实线
double	双线

border-image：边框的图片。
border-radius：边框的圆角。
box-shadow（shadow blur spread color inset）：边框的阴影。

值	描述
h-shadow（必须）	水平阴影的位置
v-shadow（必须）	垂直阴影的位置
blur	模糊距离
spread	阴影的尺寸
color	阴影的颜色
inset	将外部阴影改为内部阴影

outline：轮廓。

文字样式
font-family：文本的字体系列。字体名称有空格需添加双引号。
font-size：文本的字体尺寸。默认值为medium。常用的值为xx-small、x-small、small、large、x-large、xx-large。一般为偶数。
font-style：文本的字体样式。

值	描述
normal	默认值
italic	浏览器会显示一个斜体的字体样式
oblique	浏览器会显示一个倾斜的字体样式

font-weight：文本的字体粗细。

值	描述
normal	默认值
bold	粗体字符
bolder	更粗的字符
lighter	更细的字符
100~900	100_{500等同于normal，600}900等同于bold

文本样式

color：文本的颜色。
direction：文本的方向。

值	描述
ltr	默认。文本方向从左到右
rtl	文本方向从右到左

letter-spacing：字符间距。
line-height：行高。
text-align：文本的水平对齐方式。

值	描述
left	默认。把文本排列到左边
right	把文本排列到右边
center	把文本排列到中间
justify	两端对齐文本

text-decoration：文本的装饰效果。

值	描述
none	默认
underline	文本下的一条线
overline	文本上的一条线
line-through	穿过文本下的一条线
blink	闪烁的文本

text-indent：文本的首行缩进。
text-transform：文本的大小写。

值	描述
none	默认
capitalize	文本中的每个单词以大写字母开头
uppercase	仅有大写字母
lowercase	仅有小写字母

white-space：处理元素中的空白。

值	描述
normal	默认
pre	空白会被浏览器保留
nowrap	文本不会换行，文本会在同一行上继续，直到遇到br标签为止
pre-wrap	保留空白符序列，但是正常地进行换行
pre-line	合并空白符序列，但是保留换行符

word-spacing：单词间距。
text-shadow（shadow blur color）：向文本添加阴影。

值	描述
h-shadow（必须）	水平阴影的位置
v-shadow（必须）	垂直阴影的位置
blur	模糊的距离
color	阴影的颜色

text-wrap：文本的换行。

表格样式
border-collapse：是否合并表格边框。

值	描述
separate	默认值。边框会被分开
collapse	如果可能，边框会合并为一个单一的边框

border-spacing：相邻单元格边框之间的距离。
caption-side：表格标题的位置。
empty-cells：是否显示表格中的空单元格上的边框和背景。

值	描述
hide	不在空单元格周围绘制边框
show	默认。在空单元格周围绘制边框

颜色样式

opacity：元素的不透明。

值	描述
value	不透明度。从 0.0 （完全透明）到 1.0（完全不透明），0.5为半透明

尺寸样式

height：元素高度。
max-height：元素的最大高度。
max-width：元素的最大宽度。
min-height：元素的最小高度。
min-width：元素的最小宽度。
width：元素的宽度。

列表样式

list-style-image：图片设置为列表项标记。
list-style-position：设置列表项标记的放置位置。

值	描述
outside	默认值。保持标记位于文本的左侧
inside	列表项目标记放置在文本以内，且环绕文本根据标记对齐

list-style-type：设置列表项标记的放置位置。

值	描述
none	无标记
disc	默认。实心圆
circle	空心圆
square	实心方块
decimal	数字
decimal-leading-zero	0开头的数字标记
lower-roman	小写罗马数字（i, ii, iii, iv, v, 等）
upper-roman	大写罗马数字（I, II, III, IV, V, 等）
lower-alpha	小写英文字母

盒子样式

margin：外边距属性。
padding：内边距属性。
box-sizing：以确切的方式定义适应某个区域的具体内容。

值	描述
content-box	宽度和高度分别应用到元素的内容框
border-box	宽度和高度决定了元素的边框盒

注意：

margin叠加问题，出现在上下margin同时存在的时候，会取上下中值教大的作为叠加的值。解决办法：BFC规范和给一个元素添加间距。
margin传递问题，出现在嵌套的结构中，只是针对margin-top的问题。
margin左右自适应是可以的，但是上下自适应是不行的。
box-reflect（none| ）：倒影。

值	描述
none	无倒影
direction	above指倒影在对象的上边；below指倒影在对象的下边；left指倒影在对象的左边；right指倒影在对象的右边
offset	用长度或百分比定义倒影与对象之间的间隔。可以为负值
mask-box-image	用指定地址或渐变创建遮罩图片

定位样式

bottom：元素的底部边缘。
clear：清除浮动。嵌套排列时清除浮动，通常使用after伪类 :after{content: '';display: block;clear: both;}。
cursor：显示的光标类型。
display：元素应该生成的框的类型。

值	描述
none	此元素不会被显示
block	此元素将显示为块级元素，此元素前后会带有换行符
inline	默认。此元素会被显示为内联元素，元素前后没有换行符
inline-block	行内块元素

float：浮动。通常的值为left和right。

注意：
- 只会影响后面的元素。
- 内容默认提升半层。
- 默认宽根据内容决定。
- 换行排列。
- 主要给块元素添加，但也可以给内联元素添加。
left：元素的左边缘。
overflow：溢出。

值	描述
visible	默认值
hidden	内容会被修剪，并且其余内容是不可见的
scroll	内容会被修剪，但是浏览器会现实滚动条以便查看其余的内容
auto	如果内容被修剪，则浏览器会现实滚动条以便查看其余的内容

position：元素的定位类型。

值	描述
absolute	绝对定位。使元素完全脱离文档流；使内联元素支持宽高（让内联具备块特性）；使块元素默认宽根据内容决定（让块具备内联特性）；如果有定位祖先元素相对于定位祖先元素发生偏移，没有定位祖先元素相对于整个文档发生偏移
relative	相对定位。如果没有定位偏移量，对元素本身没有任何影响；不使元素脱离文档流；不影响其他元素布局；left、top、right、bottom是相对于当前元素自身进行偏移的
fixed	固定定位。使元素完全脱离文档流；使内联元素支持宽高（让内联具备块属性）；使块元素默认宽根据内容决定（让块具备内联的特性）；相对于整个浏览器窗口进行过偏移，不受浏览器滚动条的影响
static	默认。没有固定的定位

right：元素的右边缘。
top：元素的顶部边缘。
visibility：元素是否可见。

值	描述
visible	默认值。元素是可见的
hidden	元素是不可见的
collapse	当在表格元素中使用时，此值可删除一行或一列，但是它不会影响表格的布局

z-index：设置元素的堆叠顺序。默认层级为0。

分栏样式

column-count：分栏的个数。
column-gap：分栏的间距。
column-rule：分栏的边线。
column-span：分栏的合并。
column-width：分栏的宽度。

注意：column-width个column-count不要一起去设置。

过渡样式

transition-property：规定设置过渡效果的css属性的名称。
transition-duration：规定完成过渡效果需要多少秒或毫秒。
transition-delay：定义过渡效果何时开始。
transition-time-function：规定速度效果的速度曲线。

转换样式
transform：向元素应用2D或3D转换。

值	描述
none	定义不进行转换
translate(x,y)	定义2D转换
translate3d(x,y,z)	定义3D转换
translateX(x)	定义转换，只是用x轴的值
translateY(y)	定义转换，只是用y轴的值
translateZ(z)	定义3D转换，只是用z轴的值
scale(x,y)	定义2D缩放转换
scale3d(x,y,z)	定义3D缩放转换
scaleX(x)	设置x轴的值来定义缩放转换
scaleY(y)	设置y轴的值来定义缩放转换
scaleZ(z)	设置z轴的值来定义缩放转换
rotate(angle)	定义2D旋转
rotate3d(x,y,z,angle)	定义3D旋转
rotateX(angle)	沿着x轴的3D旋转
rotateY(angle)	沿着y轴的3D旋转
rotateZ(angle)	沿着z轴的3D旋转
skew(x-angle,y-angle)	沿着x和y轴的2D倾斜转换
skewX(angle)	沿着x轴的2D倾斜转换
skewY(angle)	沿着y轴的2D倾斜转换

注意：

变形操作只能添加给块元素，但是不能添加给内联元素。
多个变形操作时，先执行后面的操作，再执行先前的操作。
transform-origin：改变被转换元素的位置。属性值为x-axis y-axis z-axis。
transform-style：被嵌套元素如何在3D空间中显示。不兼容IE浏览器。
perspective：离屏幕多远的距离去观察元素，值越大，幅度越小。
perspective-origin：离屏幕多远的距离去观察元素，值越大，幅度越小。
backface-visibility：定义元素在不面对屏幕时是否可见。

动画样式

@keyframes：规定动画。
animation-name：规定@keyframes动画的名称。
animation-duration：动画的持续时间。
animation-delay：动画的延迟时间。
animation-iteration-count：动画的重复次数。infinite值为无限次播放。
animation-direction：规定动画是否在下一周期逆向地播放。

值	描述
normal	默认值。动画正常播放
alternate	动画轮流反向播放。一次正向，一次反向
reverse	动画反向播放

animation-fill-mode：规定动画播放之前或之后，其动画效果是否可见。

值	描述
none	不改变默认行为
forwards	在运动结束的之后，停到结束位置
backwards	在延迟的情况下，让0%在延迟前生效
both	向前和向后同时生效

渐变样式

linear-gradient（[point|angle] color-start color-stop）：线性渐变。

值	描述
point\|angle	to left为从右到左（270deg）；to right为从左到右（90deg）；to top为从下到上（0deg）；to bottom从上到下（180deg）
color	颜色。可以用长度或百分比指定颜色位置

background-image: linear-gradient(to right, red, blue);
background-image: linear-gradient(red 25%, blue 25%);

radial-gradient（point color-start color-stop）：径向渐变。point为circle圆形的径向渐变。

值	描述
shape	确定圆的类型。默认为ellipse，可以指定为circle
size	fathest-corner（默认）指定半径长度从圆心到离圆心最远的角；closest-side指定半径长度为从圆心到离圆心最近的边；closest-corner指定半径长度为从圆心到离圆心最近的角；farthest-side指定半径长度为从圆心到离圆心最远的边
position	center（默认）设置中间为圆心的纵坐标；top设置顶部为圆心的纵坐标；bottom设置底部为圆心的纵坐标

background-image: radial-gradient(to right, red, blue);
background-image: radial-gradient(red 25%, blue 25%);

注意：渐变需要添加到background-image属性上。

复合样式

background（background-color background-position background-size background-repeat background-origin background-clip background-attachment background-image）：背景属性。
border（border-width border-style border-color）：边框属性。
font（font-style font-variant font-weight font-size font-family）：字体属性。
list-style（list-style-type list-style-position list-style-image）：列表属性。
transition（transition-property transition-duration <transition-timing-function transition-delay）：过渡属性。
animation（animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction）：动画属性。

flex弹性布局

作用在flex容器上	作用在flex子项上
flex-direction	order
flex-wrap	flex-grow
flex-flow	flex-shrink
jsutify-content	flex-basis
align-items	flex
align-content	align-self

flex-direction

flex-direction用来控制子项整体布局方向，是从左往右还是从右往左，是从上往下还是从下往上。

取值	含义
row	默认值。显示为行。方向为当前文档水平流方向，默认情况下是从左往右
row-reverse	显示为行。但方向和row属性值是反的
column	显示为列
column-reverse	显示为列。但方向和column属性值是反的

flex-wrap

flex-wrap用来控制子项整体单行显示还是换行显示。

取值	含义
nowrap	默认值。表示单行显示，不换行
wrap	宽度不足换行显示
wrap-reverse	宽度不足换行显示，但是从下往上开始，也就是原本换行在下面的子项现在跑到上面

flex-flow

flex-flow属性是flex-direction和flex-wrap的缩写，表示flex布局的flow流动特性。第一个值表示方向，第二个值表示换行，中间用空格隔开。

justify-content

justify-content属性决定了主轴方向上子项的对齐和分布方式。

取值	含义
flex-start	默认值，表现为起始位置对齐
flex-end	表现为结束位置对齐
center	表现为居中对齐
space-between	表现为两端对齐。between是中间的意思，意思是多余的空白间距只在元素中间区域分配
space-around	around是环绕的意思，意思是每个flex子项两侧都环绕互不干扰的等宽的空白间距，最终视觉上边缘两侧的空白只有中间空白宽度一半
space-evenly	evenly是匀称、平等的意思。也就是视觉上，每个flex子项两侧空白间距完全相等

align-items

align-items中的items指的就是flex子项们，因此align-items指的就是flex子项们相对于flex容器在侧轴方向上的对齐方式。

取值	含义
stretch	默认值，flex子项拉伸
flex-start	表现为容器顶部对齐
flex-end	表现为容器底部对齐
center	表现为垂直居中对齐

align-content

align-items中的items指的就是flex子项们，因此align-items指的就是flex子项们相对于flex容器在侧轴方向上的对齐方式。

取值	含义
stretch	默认值。每一行flex子元素都等比例拉伸。
flex-start	表现为起始位置对齐
flex-end	表现为结束位置对齐
center	表现为居中对齐
space-between	表现为两端对齐
space-around	每一行元素上下都享有独立不重叠的空白空间
space-evenly	每一行元素都完全上下等分

作用在flex子项上的css属性

取值	含义
order	可以通过设置order改变某一个flex子项的排序位置。所有flex子项的默认order属性值是0
flex-grow	属性中的grow是扩展的意思，扩展的就是flex子项所占据的宽度，扩展所侵占的空间就是除去元素外的剩余的空白间隙。默认值为0
flex-shrink	属性中的shrink是收缩的意思，flex-shrink主要处理当flex容器空间不足时候，单个元素的收缩比例。默认值是1
flex-basis	flex-basis定义了在分配剩余空间之前元素的默认大小
flex	flex属性是flex-grow，flex-shrink和flex-basis的缩写
align-self	align-self指控制单独某一个flex子项的垂直对齐方式

css默认和重置样式

默认样式

body{margin: 8px;}
h1{margin: 21.44px 0px;font-weight: bold;}
p{margin: 16px 0px;}
ul{margin: 16px 0px;padding-left: 40px;list-style: disc;}
a{text-decoration: underline;}

重置样式

*{margin: 0px;padding: 0px;}
ul{list-style: none;}
a{text-decoration: none;color: #666;}
img{display: block;}

css优先级

相同样式优先级

当设置相同样式时，后面的优先级较高，但不建议出现重复设置样式的情况。

内部样式与外部样式

内部样式与外部样式优先级相同，如果都设置了相同样式，那么后写的引入方式优先级高。

单一样式优先级

style行间 > id > class > tag > * > inherit。

css选择器

层次选择器

后代：M N。
父子：M > N。
兄弟：M ~ N。
相邻：M + N。

属性选择器

选择器	说明
M[attr]	M元素选择指定为attr属性的集合
M[atr=value]	M元素选择指定为attr属性和value值的集合
M[attr*=value]	M元素选择指定为attr属性并且包含值为value的集合
M[attr^=value]	M元素选择指定为attr属性并且包含起始值为value的集合
M[attr$=value]	M元素选择指定为attr属性并且包含结束值为value的集合
M[attr1]…	M元素选择满足多个属性的集合

伪类选择器

:link：访问前的样式。只能添加到a标签。
:visited：访问后的样式。只能添加到a标签。
:hover：鼠标移入时的样式。可以添加给所有的标签。
:active：鼠标按下时的样式。可以添加给所有标签。
::before：给元素的内容之前插入内容。
::after：给元素的内容之后插入内容。
:nth-of-type(n)和该元素相同的第n个元素。
:first-of-type该元素的第一个元素。
:last-of-type该元素的最后一个元素。
:only-of-type该元素的唯一一个元素。
:nth-child(n)从该元素起的第n个元素，如果相同则响应样式。
:first-child该元素的第一个元素。
:last-child该元素的最后一个元素。
:only-child该元素的唯一一个元素。

css继承

文字相关的样式可以被继承。
布局相关的样式不能被继承（默认是不能被继承的，但是可以设置继承属性inherit值）。

BFC规范

BFC即Block Formatting Contexts（块级格式化上下文），它属于上述中的其中一种规范。具有BFC特性的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上英雄到外面的元素，并且BFC具有普通容器所没有的一些特性。

触发BFC

浮动元素：float除none以外的值。
绝对定位元素：position（absolute、fixed）。
display为inline-block、table-cells、flex。
overflow除了visible以外的值（hidden、auto、scroll）。

BFC特性及应用

解决margin叠加问题。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>hello</title>
        <style>
            .div1{width: 100px;height: 100px;background: red;margin-bottom: 30px;}
            .div2{width: 100px;height: 100px;background: blue;margin-top: 30px;} 
            .box{overflow: hidden;}
        </style>
    </head>
    <body>
        <div class="box">
            <div class="div1"></div>
        </div>
        <div class="box">
            <div class="div2"></div>
        </div>        
    </body>
</html>

解决margin传递问题。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>hello</title>
        <style>
            .div1{width: 200px;height: 200px;background: red;overflow: hidden;}
            .div2{width: 100px;height: 100px;background: blue;margin-top: 30px;} 
        </style>
    </head>
    <body>
        <div class="div1">
            <div class="div2"></div>
        </div>        
    </body>
</html>

解决浮动问题。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>hello</title>
        <style>
            .div1{width: 200px;border: 1px black solid;display: inline-block;}
            .div2{width: 100px;height: 100px;background: blue;float: left;} 
        </style>
    </head>
    <body>
        <div class="div1">
            <div class="div2"></div>
        </div>        
    </body>
</html>

解决覆盖问题。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>hello</title>
        <style>
            .div1{width: 200px;height: 100px;background: red;float: left;}
            .div2{height: 400px;background: blue;overflow: hidden;} 
        </style>
    </head>
    <body>
        <div class="div1"></div> 
        <div class="div2">hello world</div>
    </body>
</html>