HTML、CSS
文章平均质量分 54
HTML、CSS知识
YourLie_in_April
这个作者很懒,什么都没留下…
展开
-
增加和清除浮动
float: (增加浮动)属性值:left元素向左浮动、right 元素向右浮动、 none(为默认值)元素不浮动。(浮动:如字面意思所说,会将选择的元素进行浮空挪动,所以它已不存在在原来的位置上,会造成原来盒子的坍塌。)clear:(清除浮动)属性值:left 在左侧不允许浮动元素、right 在右侧不允许浮动元素、both在左、右两侧不允许浮动元素、 none (为默认值)允许浮动元素出现在两侧。清除浮动,防止盒子塌陷的四种方法:1、在浮动元素后面加空div,再使用cle...原创 2022-04-06 15:29:47 · 440 阅读 · 0 评论 -
HTML5中inpunt新增
type新增属性值:email:电子邮箱地址文本框(提交表单时会自动校验email格式)。url:网页地址文本框(提交表单时会自动校验网站格式)。color:选取颜色(后面通过js方法:decodeURIComponent('上传颜色数据')颜色转化为16进制表达)。search:搜索框。number:数字框。range:数字滑块。date:年、月、日。month:年、月。week:年、周。time:时间(小时、分钟)。datetime:UTC时间。datet原创 2022-04-01 14:10:48 · 1526 阅读 · 0 评论 -
渐变、阴影及文本设置
渐变分为两种:线性渐变和径向渐变。linear-gradients线性渐变:颜色沿着一条直线过渡:从左到右to right、从右到左to left、从上到下to bottom、从左下到右上to right top等。radial-gradients径向渐变:圆形或椭圆形渐变,颜色不再沿着一条直线变化,而是从一个起点朝所有方向混合。(circle以圆形径向渐变。可设置颜色百分比,最大为100%,来调节第几个颜色所占颜色的百分比。)text-shadow:文字阴影属性值:h-shadow...原创 2022-04-05 16:27:09 · 487 阅读 · 0 评论 -
媒体查询及响应式布局
@media: 通过对属性进行验证,确认是否被选中,添加样式。screen:就表示所有的电子设备的屏幕、print:表示打印机的屏幕、all:表示所有、and:和,两个条件之间需添加(前后需要添加空格)。max-width: 表示小于等于这个宽度的时候 屏幕显示、min-width: 表示大于等于这个宽度的时候 屏幕显示。小知识点:meta name="viewport" 理想视口。width=device-width 显示的宽度为设备的宽度。initial-scale=1.0 是否原创 2022-04-14 15:23:48 · 187 阅读 · 0 评论 -
CSS3动画及3D初识
CSS3中动画:animation:动画(通过在animation属性中设置关键帧属性值,用来实现一个更为复杂的动画效果。)(连写顺序为:animation: animation-name animation–duration animation-timing-function animation-delay animation-iteration-count animation-direction;)。animation–duration: 过渡时间。animation-timing-func原创 2022-04-11 15:39:58 · 315 阅读 · 0 评论 -
CSS3定位
position:定位属性。(属性值:static (默认值)没有定位、 relative: 相对定位、 absolute: 绝对定位、 fixed: 固定定位。)position: relative; 相对定位(相对于元素本身的位置进行定位,可设置:top、left、right、bottom。可以理解为LOL的永恩或者说王者荣耀的元歌,原来的位置会被保留下来,灵魂去按照设置的属性值飘动。)position: absolute;绝对定位(绝对定位的基准是以它最近的一个“已经定位...原创 2022-04-08 14:47:07 · 475 阅读 · 0 评论 -
圆角、阴影及图片定位
border-radius: 圆角(以顺时针的顺序去设置其属性值, 左上角—右上角—右下角—左下角。)所设置的值越大,圆角越大越圆,最多为高的一半。(要想制作圆型需满足:设置的宽度和高度必须相同、圆角的半径为元素宽度的一半,或者设置为50%)box-shadow: 阴影 (属性设置为: box-shadow: x-offset y-offset blur-radius color inset ;) x-offset :X轴位移,指定阴影水平位移量、y-offset :Y轴位移,用来指定阴原创 2022-04-04 17:17:01 · 626 阅读 · 0 评论 -
CSS3过渡
transition: 过渡属性。(如果两个状态发生改变,没有过渡,效果是瞬间变化的。如果加上了过渡,那么这个过程就会有动画的效果。)transition-property:过渡或动态模拟的CSS属性。(可以是width,height等,一般使用all)transition-duration: 完成过渡所需要的时间。(单位s)transition-timing-function: 指定过渡速度函数。( linear 线性过渡、ease 平滑过渡、ease-in 由慢到快、ease-out 由快原创 2022-04-10 13:06:58 · 1013 阅读 · 0 评论 -
Flex弹性布局(二)
align-content:统一设置所有的多轴交叉轴定位对齐方式。(当换行时,会出现多个交叉轴,属性值会定义每行相对于本行的交叉轴的定位。)align-content: flex-start; start对齐。align-content: flex-end; end对齐。(其他属性值类似于justify-content: ;。)align-self: 在一根轴线下允许单个项目的对齐方式与其他统一的对齐方式不一样。(属性值类似于justify-content: ;。)order: 设置排列原创 2022-04-13 14:53:44 · 138 阅读 · 0 评论 -
水平垂直居中
实现行内元素实现水平和垂直居中的方式:text-align: center;line-height: Xpx;实现元素的水平和垂直居中的几种方式:1、使用弹性盒模型 实现水平和垂直居中。display: flex;justify-content: center;align-items: center;2、采取绝对定位配合margin的方式实现。(得设置固定的宽度和高度。)position: absolute;left: 50%;top: 50%;margin-原创 2022-04-15 15:29:41 · 349 阅读 · 0 评论 -
Flex布局
flex:弹性布局。(可以控制元素的对齐、排列,而且可以自动计算布局内元素的尺寸,控制元素在页面的布局方向,按照不同的排序方式对屏幕上的元素重新排序。)display : flex;块级元素。display : inline-flex;行内元素。flex-direction: 定义排列顺序(默认从左到右row)。flex-direction: row-reverse;右到左。flex-direction: column;上到下。flex-direction: column-rev..原创 2022-04-12 15:19:50 · 376 阅读 · 0 评论 -
CSS3的2D变形
CSS3变形是平移、旋转、缩放、倾斜效果的集合。设置变形函数时可以是一个属性,也可以是多个,中间以空格隔开。transform:变形。属性值:translate(x,y):平移,基于X、Y坐标重新定位元素的位置 。(x为X轴(横坐标)移动的向量长度 、y为Y轴(横坐标)移动的向量长度。)translateX(x):X轴移动x,Y轴不移动。translateY(y):Y轴移动y,X轴不移动。scale(x,y):缩放,可以使任意元素对象尺寸发生变化。(从中心开始向X轴放大x倍,Y轴放大y倍原创 2022-04-07 14:26:43 · 369 阅读 · 0 评论