css基础篇（margin、padding、border、box、字体图标、css精灵、css滤镜filter、继承关系、direction、鼠标指针、怪异盒子模型）

嘿起屁儿整

已于 2023-05-30 18:15:22 修改

阅读量480

点赞数

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

于 2020-10-20 19:41:32 首次发布

本文链接：https://blog.csdn.net/weixin_43847807/article/details/109185475

版权

前端专栏收录该内容

42 篇文章 0 订阅

订阅专栏

css基础篇

margin

当两个div并行，中间都有margin时，值取较大的
当两个div嵌套，随便设置哪个哪个div的margin，会一起移动，并且值取较大值
解决一起移动方法：1、给父元素加上边框，2、给父元素加上padding
margin:auto：只会左右居中
margin-left:auto：会跑右边去，margin-right:auto：不变

box

box-sizing:content-box ：默认的，可视宽度为border+padding+content，width仅为content宽度
box-sizing:border-box ：怪异盒子模型，可视宽度为border+padding+content，width为border内所有宽度
box-shadow：五个值，依次是x轴偏移量，y轴偏移量，模糊半径，扩散半径，颜色。inset：可加在最前面表示阴影向内。可用逗号分割：数量任意的阴影

border

不同颜色的border，会有斜角：处理斜角，去掉一个斜角改变两边边框宽度重新写
border：复合属性，分别为像素，边框形状，颜色（dashed：杠虚线、dotted：点虚线）
border-radius：边框弧度。可以用百分比，当弧度特别小时，直接设置为具体像素
border-image：css3新增border属性：导入图片处理边框
3.1、border-image-source:url() 引入边框图片
3.2、border-image-slice 图片裁剪位置（默认单位px不用写，也可用百分比）
3.3、border-image-repeat 重复
3.4、border-image-width 图片边框宽度
3.5、border-image-outset 向外扩散

padding

padding 会撑大边框，所以可以配合怪异盒子模型使用

background

background-image:url()------------------------------------背景图片。
background-repeat:no-repeat/repeat-x/repeat-y----背景图片是否重复。不重复/沿x轴重复/沿y轴重复
background-position-----背景图片位置。两个值分别为x轴，y轴位移( -50px 0/left top/right 30px bottom 30px)
background-size-----------------------------------背景图大小。(50%/200px 150px/contain优先填满/cover等比缩放)
background-attachment------是否随滚动条移动。fixed：固定悬浮，不随滚动条移动，scroll：跟着滚动条滚动
background-------复合属性。背景图位置/背景图大小（需要以/分割，且背景图位置在前），其他属性随意顺序
css3新增background-origin：背景图的起源（border-box：背景从border开始；padding-box：背景从padding开始，content-box：背景从content开始。以上三种：重复时，边框及其中都要重复，只是起点变了）
css3新增background-clip：背景图的切割（content-box：背景图以content切割，padding-box：背景图以padding切割，border-box：背景图以border切割。以上三种：以外不显示，只显示切割中的）

font

font-size 字体大小
font-family 字体类型
line-height 字体行高
font-weight 字体粗细（500/600…）
font-style 字体倾斜（italic）
color 字体颜色
text-align 字体对齐方式
text-align-last：justify。用于调整最后一行文字对齐方式
text-indent 首行缩进
text-decoration 各种辅助线（line-through:删除线； underline:下划线；overline:上划线）
text-shadow 文字阴影（四个值，分别是x轴偏移，y轴偏移，阴影模糊程度，阴影颜色）
overflow 超出部分（hidden:隐藏；scroll:滚动；visible:显示）
word-break 强制换行(break-all)
white-space 强制不换行(nowrap)
letter-spacing 字间距
word-spacing 词间距

单行：字体超出部分用...替代
 width: px;
 text-overflow: ellipsis;
 overflow: hidden;
 white-space: nowrap;
注意：如果用flex:0 0 25%; 等平均布局，需要在此层加上overflow:hidden，不然会撑开，然后后面依旧原样些。
多行： 字体超出部分用...替代
 width: px;
 line-height: px;
 overflow: hidden;
 text-overflow: ellipsis;
 display: -webkit-box;
 -webkit-line-clamp: 2; //2代表两行
 -webkit-box-orient: vertical;

字体图标

到字体图标官网www.iconfont.cn，选择想要的图标加入购物车，添加到我的项目
下载至本地并解压，解压文件中的iconfont.css文件引入到代码，css引入iconfont.css文件
根据需要修改，使用：引入双重类名：.confont加上具体图标类名

css精灵

把多个小图片整理到一张图片上
使用时通过移动位置获取想要的具体图片
优点：减少请求，节省资源

css滤镜（即filter属性）

注意：一般都是配合 img 图片标签使用

模糊滤镜 -------------filter: blur(px)
透明滤镜 -------------filter: opacity(%) 加一个白色半透明遮罩
曝光滤镜 ------------ filter:brightness(%) 范围0到+&，0是黑色，越大越曝光
各种颜色色调 -------其他颜色的半透明的遮罩（通过定位与透明度结合：父级设为相对定位，两个字集都设置为绝对定位，宽高都为100%，遮罩层z-index高点。）

img{
	filter: blur(10px)   	   模糊程度（效果就是变模糊） 
	filter: opacity(30%)       透明度（效果就是白色半透明遮罩。跟opcity属性效果一样）
	filter:brightness(1000%)   曝光程度（效果就是变亮）
	filter:drop-shadow 		   图片阴影，浪费不推荐。推荐用box-shadow
}

<img src="./img/photo.png" alt="" height="738" class="photo">

继承关系

只有文字默认有继承关系，其他属性都没有

direction

direction：设置文字方向，rtl：右到左，ltr：左到右 ------- rtl：符号会由右向左，文字依旧从左向右
unicode-bidi: bidi-override 强制要求按照direction属性排序（此时direction右到左正常了）

鼠标指针样式

cursor:pointer 小手、default 默认指针、text 文本指针、none 没有指针

怪异盒子模型(box-sizing为border-box)

可视宽度：width值
因为box-sizing默认是content-box，width只包括content宽度
box-sizing值为border-box时，width囊括border内所有宽度(border+padding+content为为可视宽高)
当padding+border>width ? 怪异盒子可视宽度会被撑大，因为padding优先级更大