CSS3学习笔记
文章平均质量分 69
CSS3学习笔记
Doe
这个作者很懒,什么都没留下…
展开
-
如何实现浮动元素水平居中
1、错误示范当HTML结构如下所示:<div id="container"> <div class="left">left</div></div>同时,CSS这样写:#container{ width:400px; height:110px; border:1px solid black;}#container div{ width:100px; height:100px; float:left; ...原创 2022-02-26 20:21:21 · 1044 阅读 · 0 评论 -
引入css的四种方式
1、内嵌式2、外联式3、 行内样式4、import代码<!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-wid..原创 2022-02-26 12:21:20 · 3505 阅读 · 0 评论 -
css伪类和伪元素的特性和区别
伪元素是真的有元素 前者是单冒号,后者是双冒号总结一下伪类与伪元素的特性及其区别:伪类本质上是为了弥补常规CSS选择器的不足,以便获取到更多信息; 伪元素本质上是创建了一个有内容的虚拟容器; CSS3中伪类和伪元素的语法不同; 可以同时使用多个伪类,而只能同时使用一个伪元素;1、伪类获取不存在与DOM树中的信息。比如<a>标签的:link、visited等,这些信息不存在与DOM树结构中,只能通过CSS选择器来获取; 获取不能被常规CSS选择器获取的信息。比如伪类转载 2021-11-23 14:42:48 · 267 阅读 · 0 评论 -
如何清除浮动
1、添加额外标签(不推荐)在浮动元素下面加一个块div给div添加属性clear:both可以清除这个div上面的所有浮动如果添加属性clear:left可以清除这个div上面的左浮如果添加属性clear:right可以清除这个div上面的右浮添加无意义标签,语义化差<div class="main left">.main{float:left;}</div><div class="side left">.side{float:right;}&原创 2021-11-25 15:34:12 · 80 阅读 · 0 评论 -
CSS性能优化
提高性能的方法有哪些?1. 合并css文件,如果页面加载10个css文件,每个文件1k,那么也要比只加载一个100k的css文件慢。2. 减少css嵌套,最好不要嵌套三层以上。3. 不要在ID选择器前面进行嵌套,ID本来就是唯一的而且权限值大,嵌套完全是浪费性能。4. 建立公共样式类,把相同样式提取出来作为公共类使用。5. 减少通配符*或者类似[hidden="true"]这类选择器的使用,挨个查找所有...这性能能好吗?6. 巧妙运用css的继承机制,如果父节点定义了,子节点就无需定义。转载 2022-01-12 18:01:58 · 1521 阅读 · 0 评论 -
CSS3新特性
1、transition语法:transition: property duration timing-function delay;eg:transition: CSS属性,花费时间,效果曲线(默认ease),延迟时间(默认0)/*宽度从原始值到制定值的一个过渡,运动曲线ease,运动时间0.5秒,0.2秒后执行过渡*/ transition: width,.5s,ease,.2s值 描述 transition-property 规定设置过渡效果的 CS...原创 2022-01-11 22:47:02 · 98 阅读 · 0 评论 -
css的两种盒模型
所有HTML元素可以看作盒子,在CSS中,"box model"这一术语是用来设计和布局时使用。CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:边距,边框,填充,和实际内容。切换盒模型也很简单,这里需要借助css3的box-sizing属性box-sizing: content-box是W3C盒子模型 box-sizing: border-box是IE盒子模型W3C的标准盒模型IE的盒模型...原创 2021-11-08 22:14:25 · 62 阅读 · 0 评论 -
圣杯布局和双飞翼布局
1、圣杯布局什么是圣杯布局以及双飞翼布局 - 知乎上面这个链接讲的非常清晰,下面是我实现的代码<!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-w原创 2021-10-08 11:00:35 · 102 阅读 · 0 评论 -
css居中div的几种方法
1.text-align:center方式<div class="center"> <span class="center_text"> 123 </span></div>.center{ text-align:center;}center_text{ display:inline-block; width:500px}这种方式可以水平居中块级元素中的行内元素,如inline,inline-block;转载 2021-09-23 10:54:27 · 2255 阅读 · 0 评论 -
CSS隐藏元素的方法
1、CSS display的值是none display属性才是真正意义上的隐藏元素,当元素的display属性为none时,该元素就会就会从视觉中消失,并且连盒模型也不生成.也不会在页面占据任何位置,不但如此,就连它的子元素也会一同从盒子模型中消失。.hide{ display:none;} 说明:给他和它的子元素添加的任何动画效果交互效果都会不起作用。2、type="hidden"的表单元素3、宽度和高度都显式设置为04、一个祖先元素是隐藏的,该元素是不会在页面上原创 2021-05-09 16:19:22 · 140 阅读 · 0 评论 -
css中实现单行多行文字截断
1、单行文本截断 text-overflow文本溢出我们经常用到的应该就是 text-overflow: ellipsis 了,相信大家也很熟悉,只需轻松几行代码就可以实现单行文本截断。div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}实现效果:属性浏览器原生支持,各大浏览器兼容性好,缺点就是只支持单行文本截断,并不支持多行文本截取。适用场景:单行文字截断最简单实现...原创 2021-05-09 13:29:10 · 1954 阅读 · 0 评论 -
4、flex布局
1、认识flex布局lex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。首先明确两个概念:①开启了flex布局的元素叫flex container ②flex container里面的直接子元素叫做flex items2、开启flex布局的方式设置display的属性为flex或者inline-flex可以称为flex container。①flex:flex container以b...原创 2021-04-13 19:29:52 · 135 阅读 · 0 评论 -
3、position
position的作用是将元素在页面中定位。设定值包括 static、absolute、relative、fixed 和 sticky 五个。1、staticHTML里面所有元素的position的默认值都是static下面是设置一个div的position为static的显示效果,static会根据HTML排版的流程(flow)移动,且static元素对于top、left、right、bottom设定值不会生效上图应该class等于height的类高度为120px,所以class原创 2021-04-08 13:32:24 · 124 阅读 · 0 评论 -
2、display
display是显示属性,可以操作标签的显示1.none 不显示2.block 块状显示a. 默认独占一行 高度自适应b.排列方式从上到下c.块状元素可以直接通过宽高改变大小d.可以通过margin:0 auto;实现左右居中(对于块状元素,如果想要它自适应内容的高度,我们一般都把display设置为inline-block,这样不仅具有了内联元素的特质,同时也具备了一些块状元素的特征)(记得width不要设置)3.inline 内联显示a.默认大小为内容.原创 2021-04-08 09:55:51 · 114 阅读 · 0 评论 -
1、BFC———块级格式化上下文
1、css定位方案想要了解BFC,首先我们先认识一下CSS的定位方案。定位方案:一个盒元素可以根据3种定位方案中的一种来布局。这三种方案分别是:正常文档流布局, 浮动布局 和 绝对定位布局。1、正常文档流布局2、浮动布局3、绝对定位布局2、BFC的介绍 我们要学习的BFC正数属于正常文本流布局的,可以把BFC看成页面中的一个渲染区域,它有自己的渲染规则:简单来说,BFC可以看作元素的一个属性,当元素拥有BFC的时候,这个元素可以看成是隔离了的独立容器,容器里...原创 2021-04-07 21:40:39 · 190 阅读 · 1 评论