![](https://img-blog.csdnimg.cn/20201014180756754.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
CSS3
苏先生前端
这个作者很懒,什么都没留下…
展开
-
border-image详解
border-image border-image-slice: ; 默认值100%会将整个图放到div四个角落 如上图所示:该属性的值指的是边框到四条界线的距离。通过线将图片划分为四个部分充当border。设置不同的值就是调整 四条界线的位置从而实现不同的效果。 border-image-repeat: repeat; border-image-repeat: space; border-image-repeat: round ; <div class="first"原创 2020-07-15 21:47:16 · 3287 阅读 · 0 评论 -
css3选择器总结
<!-- 关系选择器--> <div data="a b">div1</div> <div data="a">div2</div> <span>9</span> <p>1</p> <p>2</p> <p>3</p> <!-- 属性选择器--> <li class=".原创 2020-07-11 11:48:37 · 315 阅读 · 0 评论 -
文字溢出 背景图片处理
溢出容器、打点展示 单行文本溢出 三件套处理 <p>今天上着班我妈突然给我发来语音上有一个自拍问题不大</p> p { width: 300px; height: 30px; line-height: 30px; border: 1px solid; /*失去换行功能*/ white-space: nowrap; overflow: hidden; /*文字溢出打点展示*/ text-overflow:原创 2020-06-30 16:59:24 · 325 阅读 · 0 评论 -
float浮动以及浮动流清除和应用
float left、right <div class="wrapper"> <div class="box">1</div> <div class="box">2</div> <div class="box">3</div> <div class="box">4</div> <div class="box"&.原创 2020-06-29 22:15:16 · 172 阅读 · 0 评论 -
两栏布局以及触发BFC规则margin塌陷
两栏布局:两个div一个固定宽高,另外一个自适应。 <div class="right"></div> <div class="left"></div> * { margin: 0; padding: 0; } .right { position: absolute; width: 100px; height: 100px; opacity: 0.3; right: 0;原创 2020-06-23 11:34:16 · 191 阅读 · 0 评论 -
css盒模型与层模型与定位
css盒模型注意 每一个元素都可以看作一个盒子 四大部分 盒子壁 : border 内边距: padding 内容区:content 外边距:margin 改变盒子渲染规则: boxsize:border-box;IE盒模型 W3C盒模型 盒子可视区域区别于盒模型 可视区域 = border +padding + content切记 不计算margin ...原创 2020-05-18 18:04:46 · 253 阅读 · 0 评论 -
css基础属性
1、字体处理 div { font-size: 30px; /* 字体大小 */ font-weight: bold; /* 加粗 */ font-style: normal; /* 斜体 */ font-family: cursive; /* 字体类型 */ color: #f40; /* 上色 */ } 2、三原色 光学三原色rgb 红绿蓝 每一项范围0-f #00原创 2020-05-16 11:27:59 · 158 阅读 · 0 评论 -
css引入及其选择器权重
css层叠样式表 1、行间样式 2、页面级css style标签 3、内联式方式link href属性超文本引用 路径 4、import 方法 权重 !important Infinity 行间样式 1000 id 100 class|属性|伪类 10 标签选择器|伪元素 1 通配符 ...原创 2019-12-25 10:11:44 · 275 阅读 · 0 评论