CSS
关注
分享
扫一扫
CSS的知识
Cirrod
把自己热爱的东西做到了极致就变成了钱
展开
-
css设置盒子水平居中 magin 0 auto失效原因
解决方法：①设置display:block或者display:inline-block；②给定要居中的行内元素的宽度。解决办法：①利用css3新增的transform translate属性。2.浮动、绝对定位、固定定位的盒子失效。1.盒子没有指定宽度。解决：设置width。......原创 2022-08-12 20:38:06 · 715 阅读 · 0 评论 -
布局---BFC（块级格式化上下文）详解
BFC块格式化上下文（BlockFormattingContext）布局过程。原创 2022-07-19 11:37:56 · 164 阅读 · 0 评论 -
CSS---CSS3新增的vw vh单位
CSS3中新增了一种视口单位 vw和vh，何谓视口，就是根据你浏览器窗口的大小的单位，不受父元素影响。在移动端，视口单位相对于布局视口。1vw=可视窗口宽度的百分之一，比如窗口宽度是750，则1vw = 7.5px·1vh =可视窗口高度的百分之一，比如窗口高度是667，则1vh = 6.67px使用它唯一需要注意的就是它的兼容性:①在PC端已兼容到IE9②在移动端iOS 8以上以及Android 4.4以上获得支持，并且在微信×5内核中也得到完美的全面支持Vue本身都只兼容到.原创 2022-02-15 13:52:37 · 1668 阅读 · 0 评论 -
CSS---px rpx pt em rem四种单位总结
1.px像素（Pixel）相对长度单位。像素px是相对于显示器屏幕分辨率而言的2.rpxrpx :微信小程序开发中新出了尺寸单位rpx（responsive pixel）: 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。设备 rpx换算px (屏幕宽度/750) ；px换算rpx (750/屏幕宽度) ;px属于逻..原创 2022-02-12 16:18:12 · 4232 阅读 · 0 评论 -
CSS---引入CSS代码的四种方式
1.内联方式内联方式指的是直接在 HTML 标签中的 style 属性中添加 CSS。<div style="background: red"></div>不推荐的写法，它只能改变当前标签的样式，如果想要多个 <div> 拥有相同的样式，你不得不重复地为每个 <div> 添加相同的样式，如果想要修改一种样式，又不得不修改所有的 style 中的代码。很显然，内联方式引入 CSS 代码会导致 HTML 代码变得冗长，且使得代码难以维护。2.嵌原创 2022-02-12 15:34:17 · 4680 阅读 · 0 评论 -
Css---行内元素和行内块元素间的间隙问题
案例一：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <ti.原创 2022-01-23 15:31:50 · 3624 阅读 · 0 评论 -
Css---vertical-align 属性的用法与应用
一、在页面布局里，居中问题是非常常见的！1.有宽度的块级元素水平居中对齐，是margin:0 auto;2.让文字居中对齐，是text-align:center;而vertical-align：垂直对齐，它只针对行内元素或者行内块元素先看w3c的官方说明：该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。这会使元素降低而不是升高。在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式。先理解下基线是什么基线的位置并不是固定..原创 2022-01-23 14:41:45 · 4253 阅读 · 0 评论 -
项目中css的初始化
一、目的：为了消除各浏览器对css默认的设置，保持网页在各浏览器中的外观保持一致1./* 把我们所有标签的内外边距边框清零，盒子为边框盒型，不会因为padding而变大*/（不建议，这样会加重网页渲染性能）* { margin: 0; padding: 0; boder:0 box-sizing: border-box;}建议把项目中用到的标签都列出来，例如body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pr........原创 2022-01-22 22:35:48 · 737 阅读 · 0 评论 -
CSS3实现盒子在屏幕正中间显示
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title&...原创 2022-01-13 10:33:56 · 562 阅读 · 0 评论 -
css设置文字超出盒子部分显示...
1.给定盒子宽度后，在css加上以下样式就可以啦 overflow: hidden; text-overflow: ellipsis; white-space: nowrap;原创 2022-01-13 11:33:07 · 3544 阅读 · 0 评论