css3
六六三十六-
整理学习笔记
展开
-
前端面试--水平垂直居中的问题
(一)行内元素水平垂直居中设置text-align:center文本水平居中,在设置行高就可以.(二)块元素水平垂直居中第一种方法,定位配合 margin:;和position: absolute;必须要有宽高才可以使用第二种方法,父元素设置flex布局.第三种方法,不用flex布局,父盒子宽高不确定的情况下使用position: absolute;和transform: translate第四种 不用css3变形和flex布局, 父盒子宽高不固定的情况下..原创 2022-04-15 18:41:33 · 324 阅读 · 0 评论 -
多个css的响应式布局
响应式布局:<!-- 如果需要很多css的情况下可以用这布局 --><!-- screen在电脑屏幕或者移动设备下 --><!-- only screen 仅仅在电脑屏幕或者移动设备下 其他屏幕无效 --><!--all 包含所有设备 --><!-- 在屏幕小于600px的时候显示如下样式 --><link rel="stylesheet" href="../css/6.css" media="screen and (原创 2022-04-15 17:58:31 · 164 阅读 · 0 评论 -
响应式布局
@media all 表示包含所有的设备,比如电脑屏幕和打印机及其他屏幕screen 表示电子设备的屏幕print 表示打印机的屏幕理想视口 name="viewport"显示的宽度为设备的实际宽度 width=device-width,是否对屏幕的尺寸进行缩放 initial-scale=1.0 1.0表示不缩放em;相对于父元素rem;相对于根元素(html的大小)使用 物理单位 在不同的宽度和不同的手机上会有一定的差异我们在这里推荐使用em或者rem 作为移原创 2022-04-14 15:55:22 · 63 阅读 · 0 评论 -
弹性盒子模型(二)
align-content:设置元素在换行后每行元素在辅轴上的对齐方式一旦设置 align-content,那么align-items 的优先级低于align-contentalign-content: center; 换行居中align-content: stretch; 拉伸对齐,子元素没有设置高度, 将占满整个容器的高度,如果子元素设置高度,将失效 align-content: flex-end; 底部对齐align-content: flex-s...原创 2022-04-13 19:55:10 · 138 阅读 · 0 评论 -
弹性盒模型的几种属性值
display: flex;弹性盒模型加在其父元素上,flex-direction: ; 决定主轴方向及项目其他方向flex-direction: row;默认水平方向从左往右flex-direction: row-reverse; 水平方向从右往左flex-direction: column; 垂直方向从上到下flex-direction: column-reverse; 垂直方向从下到上排列flex-wrap: nowrap; 不换行,默认值flex...原创 2022-04-12 16:37:14 · 390 阅读 · 0 评论 -
css3动画
通过伪类触发动画效果.animation动画写法:前提要设定好关键帧,将动画的规则分成多份,最多可以分成100份例如:(1)语法animation: name duration timing-function delay iteration-count direction fill-mode;animation: 关键帧名 过渡时间 过渡函数 延迟时间 动画播放次数 动画播放方向 动画播放状态 动画开始之前和结束之后发生的操作动画播放次数...原创 2022-04-11 20:25:07 · 383 阅读 · 0 评论 -
c3过度动画属性
transition呈现的是一种过渡,是一种动画转换的过程,如渐现、渐弱、动画快慢等CSS3 transition的过渡功能更像是一种“黄油”,通过一些CSS的简单动作触发样式平滑过渡.属 性 名 IE Firefox Chrome Opera Safaritransition 10+ 4.0+ 4.0+ 10.5+ 3.1+transition-property 过渡或动态模拟的CSS属性transition-duration 完成过渡所需要的时间transition-timing原创 2022-04-10 11:53:24 · 570 阅读 · 0 评论 -
固定定位, 绝对定位和相对定位的用法和区别
position: fixed;固定定位定位基准是浏览器窗口,固定在指定位置,不受滚动条影响写法:position: fixed;left: 20px;top: 30px;left: 20px;表示:距离左边20pxtop: 30px; 表示:距离上面30px position: relative;相对定位相对原来的位置,对父元素和相邻的盒子没有影响,原来的位置会被保留.写法: position: relative; left: 20px...原创 2022-04-08 14:22:12 · 803 阅读 · 0 评论 -
C3的一些高级特效(1)
transform 变形2D位移 transform:translate写法:transform: translate(20px, 30px);表示x轴移动的向量长度x轴向右20px,y轴移动的向量长度y轴向下30pxtransform:translateY(30px) 表示 X轴不移动,Y轴向下30px.以此类推,可以有负值.2D缩放 transform: scale写法:transform: scale(1,1) 表示不变可简写transform: scale(1)t原创 2022-04-07 16:52:33 · 258 阅读 · 0 评论 -
什么是浮动,以及解决父级边框塌陷的四种方法
float 浮动,浮动样式主要用于对块元素的布局,元素一旦浮动起来就会脱离标准文档流,这样就可以让块元素一行多个显示,float浮动属性值包括:left,right,none(默认值),分别就是向左浮动,向右浮动和不浮动.clear清除浮动元素产生的空间,属性值包括left,right,both,分别是清除左浮动,清除右浮动和清除左右浮动.清除左浮动或者清除右浮动可能会让元素重叠.解决父级边框塌陷清除浮动,防止父级边框塌陷的四种方法 1、浮动元素...原创 2022-04-06 13:59:34 · 734 阅读 · 0 评论 -
渐变,文字阴影,文本溢出换行和特殊字体的使用
线性渐变:background: linear-gradient(to right top, red, yellow, skyblue);径向渐变:background: radial-gradient(red, yellow, blue);position渐变方向,不给方向默认是从上到下,顺序从哪里来是相反的bottom对应top ,right对应left文字阴影:文字阴影: X轴偏移 Y轴偏移 模糊大小 阴影颜色text-shadow: 3px 3px 3...原创 2022-04-05 18:00:26 · 183 阅读 · 0 评论 -
圆角,阴影以及背景设置
border-radius圆角设置写法:border-radius: 20px 10px 30px 50px;顺序左上.右上.右下.左下 值越大越圆四个角设置50%.或者宽度的一半px就是圆形.border-radius: 50%;△两个值第一个值表示左上角和右下角的圆角大小,第二个值表示右上角和左下角的圆角大小(对角关系)☆三个值:第一个表示左上角的圆角大小,第二个表示右上角和在左下角大小(对角),第三个表示右下角的圆角关系阴影分为外阴影和内阴影;box-shadow.原创 2022-04-04 16:48:12 · 490 阅读 · 0 评论 -
html5新增的一些标签,属性,元素以及css选择器权重
contentEditable 规定是否允许用户编辑内容hidden对包内元素隐藏新的表单标签,增加了提交时会自动校验功能:邮箱: input type="email"input type="submit" value="提交"选取颜色: input type="color"搜索框: input type="search"url类型用于应该包含URL地址的输入域。在提交表单时,会自动验证url域的值。css:/*p:first-of-type p元素的首个...原创 2022-03-31 16:13:55 · 60 阅读 · 0 评论 -
html5新的特性和新增的网页元素
html5新的特性:会新增一些语义化标签.新的表单的控件用于绘画的元素用于媒介的回放的元素<header>一般用在头部信息上,导航引导信息</header><main>包裹主体内容<nav>导航可以用nav包裹</nav><section>内容区域块用它包裹<aside>非正文内容,一般用作侧边栏</aside><article>用作包裹正文内容</artic原创 2022-03-30 17:42:33 · 76 阅读 · 0 评论 -
怪异的盒子模型
盒子尺寸:box-sizing设置盒子属性值box-sizing:content-box 默认值(内容盒子)如下:页面显示:由此可见,盒子设置的200*200是盒子的储物空间,盒子实际一边的大小为200+padding的30+border的40+margin的20组成,也就是290*290.box-sizing:border-box 边框盒子如下:由此可见,盒子设置的200*200是盒子包含边框内的盒子全部尺寸,也就是去除margin外总的尺寸为2..原创 2022-03-29 17:33:50 · 76 阅读 · 0 评论 -
盒子模型常用标签
网页里面的任何一个标签都可以当做一个盒子模型.盒子边框:border边框样式;border-style: dotted; 变成点状 dashed 虚线 none/hidden 无显示 double 双实线 solid 实线...原创 2022-03-28 19:39:48 · 564 阅读 · 0 评论 -
css的几种常用样式(二)
文本样式主要有:text-decoration: none; 去掉下划线text-decoration: underline;设置下划线text-decoration: overline;上划线text-decoration: line-through;删除线对应效果:链接样式;a:link表示鼠标未点击的样式a:visited表示鼠标点击过后的样式a:hover伪类,表示鼠标 悬停样式a:active鼠标点击未松开时的样式☆注意顺序必须是ilnk >原创 2022-03-27 19:03:02 · 490 阅读 · 0 评论 -
css几种高级选择器
css的高级选择器主要分为层次选择器和属性选择器两种。层次选择器主要有:后代选择器,子选择器,相邻兄弟选择器,通用兄弟选择器。后代选择器如下,样式只针对.a里面的p标签。原创 2022-03-24 16:57:11 · 677 阅读 · 0 评论 -
css的几种样式
元素选择器:原创 2022-03-23 16:01:04 · 271 阅读 · 0 评论