前端开发2025年09月04日
一、CSS函数的用法 设置css的属性值时可以使用css函数，如果color:rgba(20,30,50,0.5),css中有很多这样的函数。 a.calc()函数 这个函数是的可以计算容器的大小。如果设置容器的宽度:j main{ width: calc(100vh - 3.5rem - 8rem); } b.fit-content() 这个函数允许我们...
前端开发2025年09月04日
问题： 在进行页面开发时，经常会使用:before, :after伪元素创建一些小tips，但是在:before或:after的content属性使用中文的话，会导致某些浏览器上出现乱码。 解决方案： 确保HTML、CSS文件使用UTF-8格式，并且HTML文档也使用UFT-8的字符编码格式，即HTML文档的meta信息包含 <meta ch...
前端开发2025年09月04日
半透明边框 默认情况下，背景会延伸到边框所在的区域下层。可以通过background-clip属性调整该默认行为。 border: 10px solid rgba(0,0,0,.2) background: blue; background-clip: padding-box; 多重边框 box-shadow box-shadow支持逗号分隔语法，可以创建...
前端开发2025年09月04日
事件冒泡 DOM的事件冒泡机制和WPF很相似，DOM事件机制包含冒泡和捕获两种，按照topmost element->innermost element方向传递事件被称为捕获方式，而从innermost element->topmost element方向传递事件被称为冒泡方式。 事件传递说明： 1.捕获（Capture）传递方...
前端开发2025年09月03日
1.有哪些方式可以对一个DOM设置它的CSS样式？ 外部样式表。引入一个外部CSS文件； 内部样式表。将CSS代码放在标签内部； 内联样式，将CSS样式直接定义在HTML元素内部； 2.CSS中可以通过哪些属性定义，使得一个DOM元素不显示在浏览器的可视范围内？ 最基本的： 设置display属性为none，或者设置visiblity为hidden 技巧性...
前端开发2025年09月03日
使用绝对定位 在已经知道子元素的宽高的时候，子元素设置成绝对定位，top,left,right,bottom=0, margin = auto .wrap{ position: relative; width: 500px; height: 200px; border: 2px solid #000; } .wrap > .inner{ po...
前端开发2025年09月03日
第二章：CSS的基本语法 一 CSS选择器（所有的HTML语言中的标记都是通过不同的css选择器进行控制的）。用户只需要 通过选择器对不同的HTML标签进行控制，并赋予各种样式声明，即可实现各种效果。 1、标记选择器（列如 <p> <ul> p{color:green;}） 2、类别选择器（列如 &a...
前端开发2025年09月02日
IE 8虽然发布，但是依然有不少人用IE 6，对于样式的构建十分头疼。 Div+CSS中最关键的是浮动布局，如果出现右边的框移到下边的状况，一般是以下两种原因： （一）父元素宽度不够 主要是增加父元素宽度即可，因为IE 6的宽度计算和IE 8/FF不一样导致。 （二）IE 6本身的Bug 当浮动的时候，宽度可能会被双倍计算，这样的话可以在float之后写:...
前端开发2025年09月02日
温习一下元素水平垂直居中的几种方法 元素有具体宽度 1、absolute+负边距 .LV_center{ border: 1px solid red; position: absolute; width: 100px; height: 100px; top:50%; left: 50%; margin-top:-原高度/2 ; margin-left: -...
前端开发2025年09月02日
实际效果： @-webkit-keyframes gogogo { 0%{ -webkit-transform: rotate(0deg); border:5px solid red; } 50%{ -webkit-transform: rotate(180deg); background:black; border:5px solid yellow; }...