CSS
文章平均质量分 73
css和css3相关知识
Xiaaoke
这个作者很懒,什么都没留下…
展开
-
CSS预处理---Less
前言CSS的短板作为前端学习者的我们 或多或少都要学些 CSS ,它作为前端开发的三大基石之一,时刻引领着 Web 的发展潮向。 而 CSS 作为一门标记性语言,可能 给初学者第一印象 就是简单易懂,毫无逻辑,不像编程该有的样子。在语法更新时,每当新属性提出,浏览器的兼容又会马上变成绊脚石,可以说 CSS 短板不容忽视。问题的诞生往往伴随着技术的兴起, 在 Web 发展的这几年, 为了让 CSS 富有逻辑性,短板不那么严重,涌现出了 一些神奇的预处理语言。 它们让 CSS 彻底变成一门 可以使用 变量原创 2022-05-06 00:00:00 · 793 阅读 · 2 评论 -
JavaScript常用API --- CSS操作
文章目录类名操作style操作css选择器类名操作//ie8以下Element.className //获取元素节点的类名Element.className += ' ' + newClassName //新增一个类名//判断是否有某个类名function hasClass(element,className){ return new RegExp(className,'gi').test(element.className);}//移除classfunction remove原创 2022-04-27 12:13:15 · 163 阅读 · 0 评论 -
图解CSS3弹性盒子属性
弹性盒子属性设置弹性盒子:displayflex:块级的弹性盒子inline-flex:行级的弹性盒子-webkit-flex:苹果和谷歌的兼容性搞清楚子元素和父元素设置在父元素上的值flex-direction:子元素在父容器中的位置(默认row)row:横向从左到右排列(左对齐),默认排列row-reverse:横向右对齐元素反转column:纵向排列column...原创 2020-04-17 21:54:24 · 6966 阅读 · 0 评论 -
解决水平和垂直居中的方案
水平居中1 .行内元素语法:text-align:center使用范围:inline、inline-block、inline-table、inline-flex2 .块级元素方法:margin: 0 auto;(必须要有宽度)display:table; + margin: 0 auto;(宽度是内容的宽度)position: absolute + transform:trans...原创 2019-11-24 19:19:41 · 156 阅读 · 0 评论 -
HTML文字溢出显示...
单行溢出<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> p{原创 2020-07-06 18:54:57 · 4467 阅读 · 0 评论 -
教你用css画三角形
只拥有上边框的盒子整整齐齐的一条直线当两条相邻的边框在一起的时候左上角的两条边框的平分的,这样的解析的方式,就使边框不仅仅只是一个边框,有些logo都可以用边框画出来border的延展画一个三角形width: 0;height: 0;border-top: 100px solid transparent;border-left: 100px solid transparent;border-right: 100px solid transparent;border-bottom:原创 2020-07-03 10:19:41 · 328 阅读 · 0 评论 -
四大定位
定位类型static:静态定位fixed:固定定位relative:相对定位absolute:绝对定位静态定位就是标签不加任何定位属性的样子,默认的文档流布局。固定定位1.五个属性:left、right、top、bottom、z-index2.语法:position: fixed;3.所谓固定定位:固定在浏览器的某一个地方,不管页面怎么滑动标签都不会变化4.相对于页面的b...原创 2019-11-27 19:38:54 · 201 阅读 · 0 评论 -
图解伪类nth-child(n)和nth-of-type(n)
nth-child(n)和nth-of-type(n)比较代码效果nth-child(n)和nth-of-type(n)选择方式注意:nth-child(n)和nth-of-type(n):选择的下标是从1开始关于两个伪类的n取值(可为表达式):...原创 2020-04-25 16:03:25 · 915 阅读 · 0 评论 -
一图搞定a链接的四个伪类
a链接的四个伪类a:link {}:设置超链接a在未被访问前的样式a:visited {}:设置超链接a在其链接地址已被访问过时的样式a:hover {}:设置元素在其鼠标悬停时的样式a:active {}:设置元素在被用户激活(在鼠标点击与释放之间发生的事件)时的样式...原创 2020-04-24 19:58:46 · 1751 阅读 · 0 评论 -
选择器的作用和关系选择符
元素选择符通配选择符(*):全部元素对象(一般用于重置页面)类型选择符(div、span…):文档上面的元素id选择符(#id属性值):识别页面唯一性的id属性(可以写多个id但是没有用,JavaScript只识别页面的第一个)class选择符(.class属性值):识别页面class属性关系选择符包含选择符(E F):选择所有被E元素包含的F元素子选择符(E>F):选择...原创 2020-04-20 09:43:10 · 1264 阅读 · 0 评论 -
解决CSS margin带来的塌陷问题
塌陷问题就是当父元素包裹子元素时,子元素设置margin-top时,并不是子元素上边距离父元素上边一段距离,而是子元素和父元素同时距离bfc(块级格式上下文)下边的距离代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0原创 2020-06-28 19:42:05 · 2967 阅读 · 0 评论 -
清除浮动带来的副作用
为什么要清除浮动1. 浮动炸布局2. 如果不清楚浮动,一定会盖住你下面兄弟或者你爸爸基本的内容3. 如果你的子元素设置浮动,你的父元素就不能靠子元素撑大清除浮动的方法1. 父级div中定义一个overflow:hidden<style type="text/css"> .div1{ background-color: #080808; ...原创 2019-11-23 21:59:53 · 762 阅读 · 0 评论 -
玩转css基本属性
什么是CSSCSS 层叠样式表,级联样式,简称才是样式表实现了内容和表示的分离CSS和HTML之间的关系HTML是负责网页的结构CSS 是负责构建HTML元素的样式CSS作用:1.以统一的方式实现样式的定义2.提高页面样式的可重用性和可维护性CSS的使用内联样式(行内样式):<p style=“color: red;”>内部样式:在head标签中<styl......原创 2019-11-17 21:58:42 · 156 阅读 · 0 评论