CSS
1、css伪类参考地址:https://www.runoob.com/css/css-pseudo-classes.html
2、定位
相对定位:position:relative;
top/bottom left/rright 文档位置不会被别的文件占据
绝对定位:position:absolute;
例子:两栏设计
.left{
position:absolute;
width:300px;
height:800px;
background-color:pink;
}
.right{
height:800px;
margin-left:300px;
background-color:red;
}
2、浮动 :flaot 内联、内联块、浮动、溢出隐藏纯文本可以识别浮动流,除了块级元素
块级元素加了flaot 就变成内联元素
解决方式
a、添加块级元素清除
<div>
<div style="float:left;"></div>
<div style="float:left;"></div>
//***************添加块元素
<p style="clear:both;"></p>
</div>
b、使用伪元素
.box::after{
content:"",
display:block,clear:bath;
}
3、伪元素
::after 在添加元素的盒子内部最后
::befor 在添加元素盒子【内部】最前面
2个运用
p::after{
content: url(图片)或者 attr(data-userName)
margin-left:30px;
}
4、BFC
5、块级、内联块、内联元素
A、块级元素可以嵌套块级元素:2个特殊的
a标签不能嵌套a标签
p标签不能嵌套div标签
B、块级标签 【独占一行,可以自定义宽高】
C、内联块 【不独占一行,可以自定义宽高】
D、内联标签 【不独占一行,不可以自定义宽高】
6、border-showdown特殊用法:边框阴影覆盖,需要遮挡的div设置position:relative;
7、border-redius 特殊用法 div中image图片裁剪角溢出,overflow:hidden;
8、background-image:url()
background-position:30px 40px; 50% 50%;center center;top bottom
background-repeat:no-repeat;
background-size:cover(图片裁剪,不会缩放,配合position:center居中使用)/contain(图片完整放入);
background-attachment:fix; 滚动时,背景图片不变
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步