白糖冰棒-CSDN博客

原创弹性布局display：flex常用属性

弹性盒子定义 Flex是Flexible Box的缩写，意为"弹性布局”，用来为盒状模型提供最大的灵活性。它的作用：它能够更加高效方便的控制元素的对齐、排列。可以自动计算布局内元素的尺寸，无论这个元素的尺寸是固定的还是动态的控制元素在页面的布局方向。按照不同于DOM所指定排序方式对屏幕上的元素重新排序。设置了flex后float就失效了，但是定位仍然可以使用。注意：弹性容器外及弹性子元素内是正常渲染的。弹性盒子只定义了弹性子元素如何在弹性容器内布局。弹性子元素通常在弹性盒子内一行显示..

2021-12-06 21:46:08 1369

原创 css3动画补充及移动端的知识

一、动画animation: 使用之前需要先设置一个@keyframes自取名字{ 0%{ } 30%{ } 100%{ } } 如下代码： .box{ width: 200px; height: 200px; background-color: aqua; animation: donghua 4s ease-out infinite alternate 0s ; } /*@-webkit-keyframes...

2021-12-06 21:44:38 150

原创 css3动画2D转换和过渡

一、2D转换：transform 它的值有： translate();移动 rotate()旋转 scale()缩放 skew()倾斜 matrix()包含旋转，缩放，移动（平移）和倾斜功能。 1.translate()方法，根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动。 transform: translateX(10px);/*平移x轴距离左边10px*/ transform:...

2021-12-06 20:12:58 129

原创 css3基础

一、边框圆角属性：border-radius: border-radius:0px 1px 2px 0px; /*四个属性为：左上、右上、右下、左下*/ border-radius：0px 5px 0px; /*三个值为：左上、右上/左下、右下*/ border-radius：10px 2px; /*两个值为：左上/右下、右上/左下*/ 二、盒子阴影：box-shadow: box-shadow: 10px 10px 20px blue inset; /*第一个值为x轴阴影，第二个值为y轴阴..

2021-12-06 20:11:02 679

原创 HTML5语义标签

一、header标签页面或页面中某一个区块，通常是一些引导和导航信息二、nav标签可以作为页面导航的链接组三、section标签页面中的一个内容区块，通常由内容及其标题组成四、aside标签非正文的内容，与页面的主要内容分开的，被删除而不会影响到网页的内容五、article标签代表一个独立的、完整的一个区块，可独立于页面其他内容使用六、footer标签页面或页面中的某一个脚注七、main标签 h5的语义化标签，除了单词不一样，本..

2021-12-06 20:09:20 1027

原创 css定位属性

定位属性position ：一、position ：static; 标准流布局展示（默认值）相当于没有设置二、position ：relative; 相对自身原来的位置进行偏移（相对定位）直接使用使用left right top bottom来移动开启相对定位的标签（属性）例：使用相对定位position: relative做出下图效果：代码如下： <!DOCTYPE html> <html lang="en"> <head> ..

2021-12-06 20:07:18 99

原创盒子模型、选择器补充以及float浮动基础讲解

补充一：大盒子和小盒子的兼容问题：问题所在：在大盒子里面套一个小盒子，给小盒子设置内、外边距会影响外面的大盒子一起移动解决方式：在css中给大盒子加上一个overflow属性（如下）： voerflow:hidden;/*超出内容截断*/ 补充二：border-radius圆角设置盒子圆角border-radius属性介绍： border-radius:90px;/*复合属性四个角同时设置半径为90px*/ 拓展为： border-top-left-radius:90px;/*设置左

2021-12-06 20:01:53 198

原创 display常用值

一、display属性基本用法在css样式中display属性常用于把行内元素改成块元素，或者把块元素改成行内块元素 display常用值： display:none;/*此元素不会被显示*/ display:block;/*此元素改为块级元素显示，前后会带有换行符。*/ display:inline-block;/*此元素改为行内块元素显示，前后没有换行符*/ display:table;/*此元素改为块级表格来显示（类似 <table>），表格前后带有换行符。*/ display:i

2021-12-06 19:57:51 716

原创 css盒子模型、背景简要描述

css盒子模型、背景简要描述我们常说的盒子模型一般有四个属性 Border值为边框的宽度，相当于现实中盒子的包装。 Padding值为内边距，指盒子内容距离盒子边框的距离 Content值为盒子的主要内容 Margin值用于盒子与盒子之间，表示盒子与盒子之间的距离 1.外边距margin用法描述： margin：控制盒子的外边距复合属性： margin:1px 2px 3px 4px; 四个值分别控制：上右下左; margin:1px 4px 2px;...

2021-12-06 19:55:38 366

原创 css入门基础

一、css编写方式编写css的三种方式：内联样式（行内样式）、内部样式、外部样式内联样式直接在标签中插入style，如下图：内部样式在head中写<style>,如下图：外部样式则是在head中庸link引入后缀为.css的文件，如下图：！！！样式有优先级,分别为：内联样式>内部样式>外部样式，优先级高设置的样式会覆盖优先级低的样式二、css基础样式 1.入门常用css样式： width:500px; /*设置宽度*/ hei..

2021-12-06 19:47:18 63

原创学了4天的前端知识

标题标签 h1到h6 段落标签 p 换行标签 br 横线 hr 文本格式化标签粗体 strong 斜体 em 下划线 ins ...

2021-11-19 21:28:42 191

qq_45876651的博客