CSS
文章平均质量分 89
开到荼蘼223's
快乐被识破
展开
-
关于CSS3弹性盒子的flex布局以及媒体查询
CSS3弹性盒子(Flex Box)弹性盒子是css3中一种新的布局手段,它主要用来代替浮动来完成页面的布局,当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式,换句话来讲就是可以让元素跟随页面大小的改变而改变,引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。弹性容器要使用弹性盒子,必须将一个元素设置为弹性容器,我们通过 display:flex 来设置弹性容器,display:inline-flex 设置为行内的弹性容器弹原创 2021-08-29 00:52:33 · 1024 阅读 · 0 评论 -
CSS实现垂直居中的5种方法
第一种 position定位+margin负距离前提是知道居中元素的宽高,首先给居中元素定位,之后设置margin的负距离为具体宽高的一半便可达到垂直居中效果 <style> .box1 { height: 300px; width: 300px; border: 10px solid pink; position: relative; } .原创 2021-08-20 00:34:24 · 19981 阅读 · 2 评论 -
CSS基础之过渡,动画,变形,旋转,缩放
文章目录过渡动画变形旋转缩放过渡过渡 (transition)通过过渡可以指定一个属性发生变化时的的切换方式,通过过渡效果可以创建一些非常好的效果,提升用户的体验。过渡的属性:transition-property: 指定要执行过渡的属性,多个属性间用逗号隔开,如果所有属性都需要过渡可以使用all,大部分属性都支持过渡。注意:过渡必须是一个有效数值像 auto不是有效数值transition-duration: 指定过渡效果的持续时间,时间单位 s和ms。transition-原创 2021-05-14 21:52:17 · 1181 阅读 · 0 评论 -
CSS定位,绝对定位的布局,元素层级
文章目录定位相对定位绝对定位固定定位粘滞定位绝对定位的布局元素的层级定位在对页面进行布局时除了用到浮动以外,还会用到定位,定位是一种更加高级的布局手段,通过定位可以让元素摆放到页面的任意位置,使用position属性来设置定位。可选值:static 默认值,元素是静止没有开启定位relative 开启元素的相对定位absolute 开启元素的绝对定位fixed 开启元素的固定定位sticky 开启元素的粘滞定位相对定位当元素的positio属性设置为relative时则开启了相对定位原创 2021-05-11 23:38:02 · 852 阅读 · 0 评论 -
CSS浮动,BFC,清除浮动,高度塌陷以及最终解决方法
文章目录浮动浮动的特点元素浮动后的特点高度塌陷问题BFC清除浮动clearfix浮动在我们进行静态页面布局时往往会用到浮动这一功能,通过浮动可以使一个元素向其父元素的左侧或者右侧移动,使用float 属性来设置来元素的浮动。可选值:none 不浮动left 向左浮动right 向右浮动让box1浮动 .box1{ width:200px; height:200px; background-color:原创 2021-05-08 21:11:47 · 280 阅读 · 0 评论 -
盒子模型成分结构以及水平/垂直方向布局,阴影,圆角
文章目录盒子模型盒子模型的组成盒子的大小盒子的水平方向布局盒子的垂直方向布局默认样式轮廓阴影圆角盒子模型在我们进行网页布局时一定离不开盒子模型,css将页面中所有元素都设置为一个矩形的盒子,元素设置为矩形后的盒子后,对页面的布局就变成将不同盒子摆放到不同位置。盒子模型的组成标准W3C盒子模型每一个盒子模型都是由以下几个部分组成:内容区 content边框 border内边距 padding外边距 margin内容区内容区(content),元素中所有的子元素和文本内容都在内容区中原创 2021-05-01 17:06:13 · 527 阅读 · 0 评论 -
CSS基本语法,属性,选择器,权重,单位
文章目录CSSCSS基本语法:CSS使用方法内联样式内部样式表引入外部样式表CSS常用选择器元素选择器id选择器类选择器通配选择器复合选择器交集选择器分组选择器(并集选择器)关系选择器子元素选择器后代元素选择器兄弟选择器属性选择器伪类选择器样式的继承选择器权重单位颜色CSSCSS层叠样式表用来对搭建的网页骨架添加样式效果,提高用户的使用体验。网页实际是一个多层的结构,通过css可以通过分别为网页的每一个层来设置样式,而最终我们看到的是网页的最上边一层。CSS基本语法:css基本语法:选择器 声明块原创 2021-04-30 09:42:14 · 363 阅读 · 0 评论