- 博客(17)
- 收藏
- 关注
RSS订阅
1原创 弹性盒子相关
一、弹性盒子模型1、flex三个子属性介绍①flex-grow 定义项目的放大比例，默认为0，即如果存在剩余空间也不放大②flex-shrink定义了项目的收缩比例，默认为1，即如果空间不足该项目将缩小。负值对该属性无效。收缩量的计算方式：（元素宽度*收缩比例/元素*收比例 相加）*溢出宽度③flex-basis2、项目的主轴方向的长度flex（flex-grow，flex-shrink、flex-basis）说明：复合属性。设置或检索弹性盒模型对象的子元素如何分配剩余空间。缩写「flex: 1」,...
2021-08-03 21:29:52
126
原创 弹性盒子相关
父元素1 flex-start默认值， 主轴项端对齐■flex-end主轴末端对齐■center主轴居中对齐”space-betweeM在E主轴两端对齐，中间自动分配■space-around在主轴自动分配空白空间1 space-evenly平均分配空白空间flex-direction. .设置主轴方向row.默认横向一 .行内排列row-reverse:反转横向排列(右对齐，从后往前排，最后一.项排在最前面。column:纵向排列。column-reverse:反转纵向排列，从下往上
2021-08-02 21:39:44
116
原创 2D转换相关
1.CSS中Transform转换属性transform:none; 定义不进行转换transform：translateX(200px);根据X轴给定的参数，从当前元素位置移动。transform：translateY(200px);根据Y轴给定的参数，从当前元素位置移动。transform：translateZ(200px);定义3D转换，只是用Z轴的值。transform：translate(10px，20px);定义2D平移移动transform：translate...
2021-07-31 21:29:47
78
原创 又是一天的总结
颜色渐变word-break : normal/默认浏览器换行word-break :keep-all/以符号作为换行标准，不允许文字中断word-break :break-al1大小写转化:text-transform:capitalize首字母大写/uppercase全部大写/lowercase全部小写/none默认font-variant: small-caps;小的大写字母线性渐变：方向 默认从上到下语法:background :1、线性渐变background
2021-07-29 22:11:50
73
原创 html相关
一、HTML语法。1、不区分大小写。2、指定字符集编码。3、可省略标记的元素不允许写结束标记：br，col，embed（可以引用文件，图片，音视频，），hr，img，input，link、meta。4、可省略标记标签的元素p、li、option、thead、tfoot、tbody、tr、th、td、colgroup、dt、dd5、可省略全部html、head、body、colgroup、tbody6、属性值可以为单引号也可以为双引号。常用类名：header头,footer脚，nav导航,sec
2021-07-28 18:53:46
54
原创 2021-07-27
结构伪类选择器1、first-child：选择低一个元素last-child：选择最后一个元素nth-child（）选择第几个元素nth-last-2、:first-of-type[选择第一类元素]/ :last-of-type[选择最后一类元素]/:nth-of-type[第n个元素，或者是奇数odd偶数even][跟:nth-child不同只会计算相同类型的标签: nth-last-of-type[倒着来第n个元素，或者是奇数odd偶数even]3.E:only-child 只有一个子元素【
2021-07-27 21:16:30
58
原创 表单总结（1）
form表单（提交或收集数据用的）1、组成：表单域，提交数据的指定区域。表单控件：（text/password）提示信息：请输入你的姓名、请输入你的密码。《form action=“” 》2、（单选框radio）同一组name属性相同完成互斥效果，代表相同的选项。（复选框CheckBox）（上传文件file）multiple可以多选文件。multiple=“multiple”同样可以多选文件3、select >option(下拉列表）文本域：rextarea （双标签） plac
2021-07-26 20:39:30
62
原创 利用渐变+伪元素选择器做立体阴影效果
首先利用div创立一个盒子，然后定义宽高，这里我将width设置为400px，height也是400px，然后设置一个径向渐变，这里我是这样设置的background:radial-gradient(circleat10%20%,yellow,red,black);这次我要实现的立体效果是一个圆形，所以在设置一个border-radius:50%;到这里就已经完成了立体图的第一步，接下来便是设置阴影了，这里我们需要用到::after伪元素选择器，我们可以利用绝对定位把阴影图放到适当的位...
2021-07-25 13:36:19
271
原创 标准盒子模型以及IE盒子模型（怪异盒子模型）
两者都是由content、padding、border、margin构成。在标准盒子模型中，你定义的width和height只是content这一部分的大小，而在浏览器中所表现出的盒子大小则是content+padding+border所构成 。例如：width=200px；height=200px；padding=10px；border=1px；这时浏览器所表现出的盒子的width就为200+10*2+1*2=222px；height也是222；在IE盒子模型中（怪异盒子模型）你所定义的wid
2021-07-24 19:28:28
338
原创 表格相关总结（1）
1、表格<table>border:设置表格的边框cellspacing：设置单元格与单元格之间的空白间距celllpadding：设置单元格内容与单元格边框之间的距离width：设置表格的宽度height：设置表格高度align：设置表格在网页中的水平对齐方式2、表格的结构：（创建表格时，如果没有使用tbody浏览器会自动添加tbody并且将所有的tr添加到tbody中，所以tr的父元素不是table而是tbody）3、表格的构成头部（thead）主体（tbody）页
2021-07-23 19:18:59
95
原创 高度塌陷，垂直居中等总结
什么是垂直对齐方式:在垂直方式设置元素的位置应用场景: log垂直居中，下拉菜单垂直居中，控制文木与图片的位置语法: vertical-align属性值: middle/top/text-top / bottom/text-bottom/ baselinemiddle【实现垂直居中】/te 'xtext-top【重要】/text-bottom【文字的最下放】/top 【line-height的最上方】2、whitepre:保留所有的空白区域，并且强制在一行中显示出来pre-wrap:没有完全保留
2021-07-23 16:20:57
78
原创 定位问题.
兄弟选择器p+a：后面一行元素p~a：后面全部1、固定定位：position：fixed+（right/left/top/botton）变偏移量才能让元素达到自己的位置实现效果：div或者某些元素定位在某个位置2、粘性定位position：sticky效果：如果前面有元素，并且元素有高度那么他会划过元素高度之后在执行粘性定位；如果前面元素高度小于或者没有高度，则直接开始执行3、绝对定位position：absolute效果：如果父级元素有定位则根据父级元素进行偏移，如果父级元素没有定位，
2021-07-20 21:51:47
73
原创 选择器优先级及块级元素
一、选择器优先级1、当选择器权重一种是，按顺序执行后脸会覆盖前面的（操作同一个元素）2、各个选择器之间的权重：标签0001 class0010 ID 01003、！important可以提高优先级4、样式覆盖：相同属性设置里相同的操作5、当网页制作中不知道哪个优先显示的时二、继承：在父元素这值得某些元素在子元素可以继承1、知道为什么元素没有设置样式大事发生了改变三、元素类型之间的相互转化1、元素之间的相互变化优化用户体验（能解决一部分浮动的问题）2、可以实现换行的元素：标题标签，...
2021-07-20 08:36:08
168
原创 html+css初学（03)
1、文本设置a、字体大小：font-sizeb、字体颜色：colorc、字体：font-familyd、字体样式：font-stylee、text align：centere居中 left靠左 right靠右 justify两端对齐f、text-decoation：none去除超链接下划线 over-line上划线 ...
2021-07-15 19:22:27
57
原创 h5初学（2）
1、form表单：用于收集用户信息，常用于用户登录界面a、文本框：<input type="text">b、密码框<input type="password">c、普通按钮<input type="button">d、提交按钮<input type="submit">e、重置按钮<input type="reset">2、属性a、placeholder：提示信息b、value：给一个初始值c、src：设置与图片按钮路径3、总结
2021-07-14 19:34:32
87
原创 HTML初学
1、什么是H5？H5是一个技术的总称2、H5可以做什么？H5可以做人机交互的界面。3、项目开发流程产品经理——UI设计——前端——后端——测试4、网页的组成a、html b、css c、js5、VS code的安装插件a、Chinese（简体中文） b、open in brow c、live server6、语法标签：<标签名></标签名> <标签名>属性：属性值7、<br>换行，单标签8、空...
2021-07-13 19:08:18
66
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人