css global在类名的应用

1、某些类名是全局的、静态的，不需要进行转换，仅需要在类名位置使用一个特殊的语法即可。:global(.main){ ... }2、使了global的类名不会进行转换，相反的，没有使用global的类名，表示默认使用了local。:local(.main){ ... }使用了local的类名表

2023-02-25

CSS设计模式之ITCSS的介绍

1、ITCSS和SMACSS其实很像，SMACSS是对CSS做分类处理，而ITCSS是对CSS做分层处理。2、分层是纵向的，从上往下，层层关联的。分层：七层与SMACSS区别：层次分得更细我们可以看到最上层是 Settings，然后是 Tools，依次往下，最后是trumps。越往上它的复用性

2023-02-25

css边距重叠是什么意思

1、边界重叠是指两个或两个以上盒子的相邻边界重合在一起，构成单一边界。可以相邻也可以嵌套，其中没有非空内容、补白、边框。.neighbor{ height:100px; background:red; } .father{ background:#f436365e; } .child{ height:100px; margin-

2023-02-25

css中a标签伪类如何使用

1、书写顺序必须是访问前link，访问后visited，鼠标移动hover，鼠标点击active。注意：伪类的权重是一样的，后写的层次先写。2、通常将访问前后的状态设置为相同的效果。保证了页面的统一性，可选择性地设置鼠标移动和鼠标点击状态。实例a:link,a:vis

2023-02-25

css中背景定位有哪些方法

1、单词表示法，表示图片与盒子背景区域进行对应方向的对齐。水平方向可选单词：left、center、right垂直方向可选单词：top、center、bottom2、像素表示法，像素值区分正负，正数表示图片针对盒子的原点向右、向下移动。第一个属性值：像素是几，表示背

2023-02-25

css首行缩进text-indent的实现

元素的首行不会自动缩进的，如果使用&nbsp；来代替，会出现很多冗余代码。1、可以使用text-indent来实现文字缩进的效果。2、缩进值的大小应该为字体大小的两倍，想要缩进几个字符，就把缩进值改为字体大小的几倍。实例<!DOCTYPEhtml> <html> <head>

2023-02-25

css文本修饰text-decoration的使用

在 HTML 中，可以使用 s 标签、u 标签来实现文字的划线效果，但是为了保证结构与样式分离的原则，一般使用 CSS 来实现样式，提高代码的可读性和可维护性；1、超链接默认带下划线，可以用text-decoration：none来清除超链接的下划线。2、下划线常用于文

2023-02-25

css文字间距的使用

1、letter-spacing是字母间距，每一个汉字和每一个英文字母被当做一个字。2、word-spacing是单词间距，只针对英文单词。一般说来，这两个属性常用于英文网站，在中文站中应用较少。实例<!DOCTYPEhtml> <html> <head> <metaname="keywords"content

2023-02-25

css中flex是什么意思

1、flex是flexible的缩写，意思为弹性布局，用来为盒模型提供灵活性。任何一个容器都可以指定为 flex 布局(包括行内元素)2、利用flex实现居中布局，实现简易的弹性伸缩布局。实例<style> /*使用flex进行布局*/ .wrap{ display:flex; justify-co

2023-02-25

css overflow属性有什么用

1、配合浮动父容器，解决父容器高度塌陷的问题。2、利用overflow扩展盒子高度，overflow属性可以触发浏览器重新计算父元素盒子高度。实例<!DOCTYPEhtml> <html> <head> <metacharset="utf-8"> <style> #wrap2{ width:55px; border:3pxsolidre

2023-02-25

css中z-index属性

1、z-index属性值：当默认值为0时，z-index属性可以设置各元素之间的重叠关系。2、z-index值大的层位于其值小的层之上。实例div{ position:relative; width:100px; height:100px; } p{ position:absolute; font-size:20px; width:100px; heig

2023-02-25