zcy_369-CSDN博客

原创 CSS3的grid布局

grid(网格布局）网格布局（Grid）它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局grid布局的相关概念采用网格布局的区域，称为"容器"（container）。容器内部采用网格定位的子元素，称为"项目"（item）注意：项目只能是容器的顶层子元素，不包含项目的子元素。Grid 布局只对项目生效。grid布局中的行和列 1.容器里面的水平区域称为"行"（row），垂直区域称为"列"（column） 2. 行和列的交叉区域...

2021-08-09 20:39:51 349

原创响应式布局特点、 Meta标签的设置、移动端页面布局

响应式布局特点优点面对不同分辨率设备灵活性强能够快捷解决多设备显示适应问题缺点兼容各种设备工作量大，效率低下代码累赘，会出现隐藏无用的元素，加载时间加长其实这是一种折中性质的设计解决方案，多方面因素影响而达不到最佳效果一定程度上改变了网站原有的布局结构，会出现用户混淆的情况Meta标签的设置准备工作：设置Meta标签 <meta name="viewport" content="width=device-wid...

2021-08-04 20:46:24 566 1

原创 CSS3 多列与媒体查询

1、column-count 说明：属性规定元素应该被分隔的列数适用于：除table外的非替换块级元素, table-cells, inline-block元素2、column-gap 说明：属性规定列之间的间隔大小3、column-rule 说明：设置或检索对象的列与列之间的边框。复合属性。 column-rule-color规定列之间规则的颜色。 column-rule-style规定列之间规则...

2021-08-03 21:25:33 108

原创 CSS3 弹性盒

怪异盒模型 box-sizing用来设置盒模型的解析规则的 box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素。content-box(按标准盒模型的规则解析)这是由 CSS2.1 规定的宽度高度行为。宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框。border-box(按怪异盒模型的规则解析)为元素设定的宽度和高度决定了元素的边框盒。就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设...

2021-08-02 21:24:02 69

原创 CSS中的3D相关属性

transform-style: flat/preserve-3d；指定嵌套元素如何在3D空间中呈现 flat：flat值为默认值，表示所有子元素在2D平面呈现 preserve-3d：表示所有子元素在3D空间中呈现注意：transform-style属性需要设置在父元素中，并且高于任何嵌套的变形元素perspective：200px；景深视距用来设置用户和元素3D空间Z平面之间的距离。而其效应由他的值来决定，值越小，用户与3D空间Z平面距离越近，视觉效果...

2021-08-01 15:23:11 430

原创 CSS3的3D转换

CSS3的3D设置 2d场景，在屏幕上水平和垂直的交叉线x轴和y轴 3d场景，在垂直于屏幕的方法，相对于3d多出个z轴 Z轴：靠近屏幕的方向是正向，远离屏幕的方向是反向定义 3D 平移移动 transform ：translate3d(10px,20px,30px)； transform ：translateX(200px) translateY(200px) translateZ(200px)；定义 3D 旋转 transform ：...

2021-07-31 21:37:23 71

原创 CSS3 2D转换

变形属性 transform transform翻译成汉语具有"变换"或者"改变"的意思。通过此属性具有非常强大的功能，比如可以实现元素的位移、拉伸或者旋转等效果最能体现transform 属性强大实力的是实现元素的3D变换效果 2D 2D变换，是在一个平面对元素进行的操作。可以对元素进行水平或者垂直位移、旋转或者拉伸变形属性：transform的所有属性值 1、transform：none;默认值2、transform：tr...

2021-07-30 21:58:05 62

原创 CSS3渐变/过渡

线性渐变方向默认从上到下 background: linear-gradient(2~多个颜色，颜色中间用逗号分隔); linear-gradient(to 方向[1到2两个],2~多个颜色，颜色中间用逗号分隔) linear-gradient(度数deg,2~多个颜色，颜色中间用逗号分隔) 加浏览器内核方向:方向没有to 直接跟的left/right/。。。【两个方向的时候浏览器加内核的识别标...

2021-07-29 20:41:45 189

原创 HTML5的相关知识

HTML5的语法内容类型（ContentType） HTML5的文件扩展符与内容类型保持不变，仍然为".html"或".htm" DOCTYPE声明 <!DOCTYPE html>不区分大小写指定字符集编码 <meta charset="UTF-8"> 可省略标记的元素不允许写结束标记的元素：br、col、embed、hr、img、input、link、meta 可以省略结束标记的元素： li、dt、dd、p、opti...

2021-07-28 20:57:51 65

原创 css选择器

属性选择器选择属性进行操作 type 选择带有type属性的进行操作 type="value" 选择的type属性值为value type^="value" 选择的type属性值开始位置带有value type$="value" 选择的type属性值结束位置带有value结构伪类选择器 1.:first-child[选择第一个元素]/:last-child[选择最后一个元素]/:nth-child()[第n个元...

2021-07-27 21:12:01 233

原创表单相关知识

1.表单：收集用户信息2.表单的组成部分:表单域【表单的区域】+表单控件【input】+提示信息【请输入姓名】3.应用:登录注册界面等等4.表单控件:单选框只能选择一个，必须有那么属性，而且name属性值必须一致【同一组单选框】type="radio"5.复选框可以选择多个type="checkbox"6.选择文件type="file"7.下拉菜单<...

2021-07-26 22:10:32 145

原创 css定位

1.固定定位语法：position：fixed+边偏移量【left/top/right/bottom】才能让元素达到自己想要的位置应用：浏览器侧边导航栏实现效果：div或者某些元素固定在页面的某个位置可以让内容脱离标准文档流【完全脱离（文字图片都可以被覆盖）】 2.粘性定位语法:position:sticky 应用:参考银行导航栏实现效果：如果前面有元素，并且元素有高度，那么他会滑过元素高度之后再执行固定定位；如果前面元素没有或者元素的高...

2021-07-25 20:10:00 56

原创清除高度塌陷的三种解决方法:

清除高度塌陷的三种解决方法:1.给产生高度塌陷的元素加overflow:hidden实现原理:触发bfc，bfc在计算高度时会把浮动的元素的高度计算在内缺点:如果有定位的元素时，则会隐藏【注意！！！】2.给产生高度塌陷的元素最后面添加一个div：并且给他设置高度为0，clear：both【清除浮动对添加的div的影响】实现原理:清除浮动带来的影响缺点:代码的冗余3.万能...

2021-07-24 19:44:55 508

原创垂直对齐和伪对象【伪元素选择器】选择器

1.什么是垂直对齐：在垂直方式设置元素的位置应用场景：log垂直居中，下拉菜单垂直居中，控制文本与图片的位置语法：vertical-align属性值：middle/top/text-top/bottom/text-bottom/baselinemiddle【实现垂直居中(居中，需要在父级元素中设置line-height）】text/text-top【重要】/text-bottom【文字的最下放】/top【li...

2021-07-23 20:24:55 120

原创表格基础知识

表格：1.表格是什么：页面中用来显示数据2.课表/日历/成绩单/oa系统3.语法结构：<table><tr><td></td>...</tr>...但是：如果没有加特殊的属性每一行中的单...

2021-07-23 20:11:23 158

原创前端基础知识学习

元素之间的相互转化：1.什么是元素之间的相互转化：元素类型之间的相互变化2.为什么：优化用户体验【a标签转化为可以设置宽度高度的元素;b.解决浮动的能解决的一部分问题】3.怎么进行元素之间的相互转化：display:inline[行内元素]/block[块级元素]/inline-block[行内块级元素]注意：不能把行内块级元素转化为行内元素元素的分类：块级元素：div p ul li ol li dl dt dd h1-h6 hr特点：1.独自占据一行2.可以设置宽度和高度3.可以设置te...

2021-07-20 20:54:02 51

zcy_369的博客