CSS
关注
分享
扫一扫
文章平均质量分 73
css和css3相关知识
Xiaaoke
这个作者很懒，什么都没留下…
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
CSS预处理---Less
前言 CSS的短板 作为前端学习者的我们 或多或少都要学些 CSS ，它作为前端开发的三大基石之一，时刻引领着 Web 的发展潮向。 而 CSS 作为一门标记性语言，可能 给初学者第一印象 就是简单易懂，毫无逻辑，不像编程该有的样子。在语法更新时，每当新属性提出，浏览器的兼容又会马上变成绊脚石，可以说 CSS 短板不容忽视。 问题的诞生往往伴随着技术的兴起， 在 Web 发展的这几年， 为了让 CSS 富有逻辑性，短板不那么严重，涌现出了 一些神奇的预处理语言。 它们让 CSS 彻底变成一门 可以使用 变量原创 2022-05-06 00:00:00 · 972 阅读 · 2 评论 -
JavaScript常用API --- CSS操作
文章目录类名操作style操作css选择器 类名操作 //ie8以下 Element.className //获取元素节点的类名 Element.className += ' ' + newClassName //新增一个类名 //判断是否有某个类名 function hasClass(element,className){ return new RegExp(className,'gi').test(element.className); } //移除class function remove原创 2022-04-27 12:13:15 · 240 阅读 · 0 评论 -
图解CSS3弹性盒子属性
弹性盒子属性 设置弹性盒子：display flex：块级的弹性盒子 inline-flex：行级的弹性盒子 -webkit-flex：苹果和谷歌的兼容性 搞清楚子元素和父元素 设置在父元素上的值 flex-direction：子元素在父容器中的位置（默认row） row：横向从左到右排列(左对齐)，默认排列 row-reverse：横向右对齐元素反转 column：纵向排列 column...原创 2020-04-17 21:54:24 · 7514 阅读 · 0 评论 -
解决水平和垂直居中的方案
水平居中 1 .行内元素 语法：text-align:center 使用范围：inline、inline-block、inline-table、inline-flex 2 .块级元素 方法： margin: 0 auto;（必须要有宽度） display:table; + margin: 0 auto;（宽度是内容的宽度） position: absolute + transform:trans...原创 2019-11-24 19:19:41 · 194 阅读 · 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 · 4546 阅读 · 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 · 398 阅读 · 0 评论 -
四大定位
定位类型 static：静态定位 fixed：固定定位 relative：相对定位 absolute：绝对定位 静态定位 就是标签不加任何定位属性的样子，默认的文档流布局。 固定定位 1.五个属性：left、right、top、bottom、z-index 2.语法：position: fixed; 3.所谓固定定位：固定在浏览器的某一个地方，不管页面怎么滑动标签都不会变化 4.相对于页面的b...原创 2019-11-27 19:38:54 · 263 阅读 · 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 · 984 阅读 · 0 评论 -
一图搞定a链接的四个伪类
a链接的四个伪类 a:link {}：设置超链接a在未被访问前的样式 a:visited {}：设置超链接a在其链接地址已被访问过时的样式 a:hover {}：设置元素在其鼠标悬停时的样式 a:active {}：设置元素在被用户激活（在鼠标点击与释放之间发生的事件）时的样式 ...原创 2020-04-24 19:58:46 · 1835 阅读 · 0 评论 -
选择器的作用和关系选择符
元素选择符 通配选择符（*）：全部元素对象(一般用于重置页面) 类型选择符（div、span…）：文档上面的元素 id选择符（#id属性值）：识别页面唯一性的id属性（可以写多个id但是没有用，JavaScript只识别页面的第一个） class选择符（.class属性值）：识别页面class属性 关系选择符 包含选择符（E F）：选择所有被E元素包含的F元素 子选择符（E>F）：选择...原创 2020-04-20 09:43:10 · 1338 阅读 · 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 · 3046 阅读 · 0 评论 -
清除浮动带来的副作用
为什么要清除浮动 1. 浮动炸布局 2. 如果不清楚浮动，一定会盖住你下面兄弟或者你爸爸基本的内容 3. 如果你的子元素设置浮动，你的父元素就不能靠子元素撑大 清除浮动的方法 1. 父级div中定义一个overflow:hidden <style type="text/css"> .div1{ background-color: #080808; ...原创 2019-11-23 21:59:53 · 823 阅读 · 0 评论 -
玩转css基本属性
什么是CSS CSS 层叠样式表，级联样式，简称才是样式表 实现了内容和表示的分离 CSS和HTML之间的关系 HTML是负责网页的结构 CSS 是负责构建HTML元素的样式 CSS作用： 1.以统一的方式实现样式的定义 2.提高页面样式的可重用性和可维护性 CSS的使用 内联样式（行内样式）：<p style=“color: red;”> 内部样式：在head标签中<styl......原创 2019-11-17 21:58:42 · 217 阅读 · 0 评论