![](https://img-blog.csdnimg.cn/20201014180756780.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
CSS3
文章平均质量分 92
CSS3
非让我改名字
这个作者很懒,什么都没留下…
展开
-
css盒模型
盒模型<!-- CSS将页面中的所有元素都设置为了一个矩形的盒子将元素设置为矩形的盒子后,对页面的布局就变成将不同的盒子摆放到不同的位置每一个盒子都由一下几个部分组成:内容区(content)内边距(padding)边框(border)外边距(margin)--><style> .box1{ /* 内容区(content),元素中的所有的子元素和文本内容都在内容区中排列 内容区的大小由width 和 height两个属性来设原创 2022-01-05 12:43:45 · 43 阅读 · 0 评论 -
css flex
Flex 弹性盒、伸缩盒是CSS中的又一种布局手段,它主要用来代替浮动来完成页面的布局flex可以使元素具有弹性,让元素可以跟随页面的大小的改变而改变 - 弹性容器 - 要使用弹性盒,必须先将一个元素设置为弹性容器 - 我们通过 display 来设置弹性容器 display:flex 设置为块级弹性容器 display:inline-flex 设置为行内的弹性容器原创 2022-01-05 12:42:39 · 55 阅读 · 0 评论 -
2D\3D\动画\过渡
CSS3 2D转换2D 转换是改变标签在二维平面上的位置和形状移动: translate旋转: rotate缩放: scaletranslate移动x 就是 x 轴上移动y 就是 y 轴上移动transform: translate(x, y)transform: translateX(n)transfrom: translateY(n)2D 的移动主要是指 水平、垂直方向上的移动translate 最大的优点就是不影响其他元素的位置translate 中原创 2022-01-05 12:39:35 · 96 阅读 · 0 评论 -
css定位
定位定位是一种更加高级的布局手段,通过定位可以将元素摆放到页面的任意位置使用position属性来设置定位可选值:static 默认值,元素是静止的没有开启定位relative 开启元素的相对定位absolute 开启元素的绝对定位fixed 开启元素的固定定位 sticky 粘滞定位相对定位当元素的position属性值设置为relative时则开启了元素的相对定位相对定位的特点:1.元素开启相对定位以后,如果不设置偏移量元素不会发生任何的变化2.相对定位是参照于元素本来在原创 2022-01-05 12:36:42 · 64 阅读 · 0 评论 -
css浮动
通过浮动可以使一个元素向其父元素的左侧或右侧移动使用 float 属性来设置于元素的浮动可选值:none 默认值 ,元素不浮动left 元素向左浮动right 元素向右浮动注意,元素设置浮动以后,水平布局的等式便不需要强制成立元素设置浮动以后,会完全从文档流中脱离,不再占用文档流的位置,所以元素下边的还在文档流中的元素会自动向上移动。任何元素加浮动后变成行内块元素。如果块元素没有设置宽度,默认与父元素一样宽,加了浮动后,宽度由内容决定浮动常和标准盒子一起用,一般页面垂直布局都用标准盒子,每个原创 2022-01-05 12:35:10 · 346 阅读 · 0 评论 -
css选择器
复合选择器<style> /* 交集选择器 作用:选中同时复合多个条件的元素 语法:选择器1选择器2选择器3选择器n{} 注意:交集选择器中如果有元素选择器,必须使用元素选择器开头 */ /*元素标签是div并且类是red*/ div.red{ /* 将class为red的div字体大小设置为30px */ font-size: 30px; } .a.b.c{ color: blue } /* div#box{} */ /原创 2022-01-05 12:32:51 · 172 阅读 · 0 评论