CSS
文章平均质量分 69
css与css3等常见布局的知识
会飞的战斗鸡
专注前端领域开发~
展开
-
前端drag api课程表demo
【代码】前端drag api课程表demo。原创 2023-10-30 22:53:51 · 230 阅读 · 0 评论 -
CSS定位详解
居中算法:加了==绝对定位的盒子不能通过margin:0 auto;定位:将盒子定在一个位置,所有定位也是在摆放盒子,按照定位的方式移动盒子。定位的盒子移动的最终位置、有top、bottom、left、right属性。默认:静态定位 |相对定位 | 绝对定位 | 固定定位 | 粘性定位。因此,相对定位没有脱标,它最典型的应用就是给绝对定位当爹。例如:将页面滚动到一定的位置后元素变为固定定位效果(**固定定位小技巧:**固定到版心右侧。用于指定一个元素在文档中的定位方式,定位=定位模式+边偏移。原创 2023-02-03 11:14:11 · 757 阅读 · 0 评论 -
响应式布局(基础)
文章目录响应式布局(基础)视口媒体查询(@media)百分比(%)remvm/vh(css3)响应式布局(基础)视口布局视口—编写时的视口视觉视口—实际看到的视口理想视口—分辨率不同端的设备下,1px的大小是不同的,实际上1css像素=物理像素/分辨率为了解决不同设备下分辨率的问题,我们有了下面的方案媒体查询(@media)使用@media对不同屏幕大小写不同的样式百分比(%)子元素宽高的百分比相对于其直接父元素子元素定位相对于其非static定位的父元素的高度原创 2022-05-11 00:07:00 · 95 阅读 · 0 评论 -
图片预加载和懒加载的多种方法
图片预加载和懒加载图片懒加载在渲染页面的时候,先将图片用一张默认图片代替,当图片到达浏览器可视区域时,才显示真实的图片。这样的好处是,可以减缓服务器负担,加快初始界面的渲染速度。实现方式:使用setTimeOut或setInterval定时器进行延迟加载条件加载,符合条件或触发事件后再进行异步下载通过滚动条监听用户距图片距离,快要到达之前进行加载// 通过滚动条监听用户距图片距离,到达进行加载 let img = document.querySelector('img')原创 2022-05-04 12:13:19 · 1638 阅读 · 0 评论 -
css3新增选择器
文章目录css3新增选择器属性选择器结构伪类选择器伪元素选择器demo(伪元素选择器)css3新增选择器属性选择器根据元素特定的属性选择元素,不借助与类或id选择符简介E[att]选择具有att属性的E元素E[att=“val”]选择具有att属性且属性值等于val的E元素E[att^=“val”]匹配具有att属性且值以val开头的E元素E[att$=“val”]匹配具有att属性且值以val结束的E元素E[att*=“val”]匹配具有att原创 2021-07-23 18:35:16 · 139 阅读 · 0 评论 -
css布局技巧
布局技巧margin负值的运用两个有边框的元素浮动时,会使边界部分边框相加解决办法为:将margin设置为负值,使边框重叠原理为:浏览器在渲染元素时,会先渲染第一个元素,此时它拥有margin为负值的属性,第二个元素先浮动靠近到第一个元素,此时还没有margin,所以会发生边框相加,再渲染后,第二个元素才能变为margin为负,此时边框重叠(一个压住另一个)。鼠标经过边框变色效果:鼠标经过某个盒子时,提高当前盒子的层级,没有定位则加相对定位(保留位置),有定位则加z-index。(z-ind原创 2021-07-21 10:23:15 · 61 阅读 · 0 评论 -
css溢出文本省略号
溢出文本省略号单行文本省略需要满足三个条件强制一行内显示文本white-space:nowrap;溢出部分隐藏overflow:hidden;文字用省略号代替超出部分text-overflow:ellipsis;多行文本溢出省略号有较大兼容性问题(适用于webkit内核浏览器)overflow:hidden;text-overflow:ellipsis;/*弹性伸缩盒子模型*/display:-webkit-box;/*限制在一个块元素显示文本的行数*/-w原创 2021-07-21 10:19:47 · 81 阅读 · 0 评论 -
精灵图的使用
文章目录精灵图demo精灵图一个网页中会应用很多小背景图片,服务器会频繁接受和发送请求图片,降低页面加载速度。为了解决这个问题,使用css精灵技术。精灵技术核心:主要针对背景图片使用,将多个小背景图片整合到一张大图片这个大图也叫sprites移动背景图片位置,此时可用background-position(也可直接在url后跟x,y)移动的距离就是这个目标的x和y坐标,注意网页中的坐标有所不同一般情况下都是往上往左移动,所以数值为负值缺点 :图片文件还是较大图原创 2021-07-21 10:13:51 · 151 阅读 · 0 评论 -
css浮动
文章目录浮动传统网页布局的三种方式标准流:标签按照规定好默认方式排列浮动什么是浮动为什么需要浮动浮动的特性浮动元素经常和标准流父级搭配使用demo常见网页布局浮动布局注意点清除浮动为什么清除浮动清除浮动的本质清除浮动浮动传统网页布局的三种方式网页布局的本质—用css来摆放盒子。css提供了三种传统布局方式(盒子的排列顺序):标准流、浮动、定位实际开发中一个页面都包含了这三种布局方式。标准流:标签按照规定好默认方式排列块级元素独占一行,从上向下排列常用元素:div、hr、p、h1~h6原创 2021-07-20 10:44:05 · 69 阅读 · 0 评论 -
css圆角边框、文字、盒子阴影
文章目录圆角边框、文字、盒子阴影圆角边框盒子阴影文字阴影圆角边框、文字、盒子阴影圆角边框css3中新增了圆角边框样式border-radius(半径)属性用于设置元素的外边框圆角参数值可以是数值或者百分比正方形设置一个圆,将数值修改为高度或者宽度的一半圆角矩形设置为高度的一半可以写四个参数,从左上角顺时针表示分开写:border-top-left-radius等等等等(顺序固定)盒子阴影box-shadow:h-shadow v-shadow;数值描述h-sh原创 2021-07-20 10:42:52 · 246 阅读 · 0 评论 -
css盒子模型
文章目录盒子模型盒子模型组成边框边框简写表格细线边框边框影响盒子实际大小内边距(padding)内边距简写内边距影响盒子实际大小内边距不影响盒子大小外边距(margin)外边距简写外边距典型应用块级元素水平居中行内和行内块元素水平居中外边距合并相邻块元素垂直外边距的合并嵌套块元素垂直外边距的塌陷清除内外边距demo新浪导航栏(padding)产品模块盒子模型答疑盒子模型盒子模型组成盒子模型:将html页面中的布局元素看作一个矩形容器css盒子模型本质上是一个盒子,封装周围的html元素,包括:边框、原创 2021-07-20 10:42:18 · 79 阅读 · 0 评论 -
css背景
文章目录CSS的背景背景颜色背景图片背景平铺背景位置方位名词精确单位混合单位背景附着(固定)==背景复合写法==背景色半透明五彩导航demoCSS的背景背景颜色background-color定义元素的背景颜色默认为透明色transparent背景图片background-image:url()描述了元素背景图像实际开发中常见于logo或一些装饰性的小图片或超大的背景图片优点是便于控制位置(精灵图)背景平铺background-repeat:repeat|no-repeat|repeat原创 2021-07-20 10:34:21 · 66 阅读 · 0 评论 -
css元素显示模式
文章目录元素显示模式块级元素行内元素行内块元素元素显示模式转换盒子内的行高demo(简易小米侧边栏)元素显示模式块级元素常见的块级元素<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等自己独占一行;高度宽度外边距都可以控制;宽度默认是容器(父级宽度)的100%;是一个容器及盒子,里面可以放行内或块级元素。注意:文字类的元素内部不能使用块级元素“”标签主要用于存原创 2021-07-20 10:32:18 · 155 阅读 · 0 评论 -
css选择器<五个大类>
文章目录选择器标签选择器类选择器id选择器通配符选择器复合选择器后代选择器子选择器并集选择器伪类选择器链接伪类选择器focus伪类选择器demo选择器标签选择器能快速为当前界面的同一标签设置样式p { color: green;} <!--标签选择器--> <p>男生</p>类选择器使用.类名{}定义属性,在具体的标签中使用class调用样式点定义,结构类调用,一个或多个,开发最常用.red{ color: red;}.font35原创 2021-07-20 10:28:08 · 109 阅读 · 0 评论 -
CSS水平居中,垂直居中,水平垂直居中的多种方法<超级详细>
文章目录居中垂直居中水平居中水平垂直居中居中 <div class="father"> <div class="son"></div> </div>下面的例子都是默认使用上面的html,如果有特殊会重写强调直接设置margin或padding的方法就不再赘述,注意使用margin要用BFC避免外边距重合,使用padding要用css3的box-sizing:border-box避免盒子被撑大垂直居中line-h原创 2022-04-29 17:22:06 · 371 阅读 · 0 评论