随笔分类 -  前端学习之CSS

centos7安装最新版node和npm
摘要：一，首先安装wget，用于下载node yum install -y wget 二，在node官网查看node最新版本，使用wget下载node最新包 wget https://nodejs.org/dist/v10.20.1/node-v10.20.1-linux-x64.tar.xz 三，解压下 阅读全文
posted @ 2021-06-01 15:10 nick_xm 阅读(1289) 评论(0) 推荐(0)
css z-index 定位值
摘要：一，z-index解释 这个东西非常简单，它有四大特性，每个特性你记住了，页面布局就不会出现找不到盒子的情况。 z-index 值表示谁压着谁，数值大的压盖住数值小的， 只有定位了的元素，才能有z-index,也就是说，不管相对定位，绝对定位，固定定位，都可以使用z-index，而浮动元素不能使用z 阅读全文
posted @ 2021-04-25 17:22 nick_xm 阅读(122) 评论(0) 推荐(0)
css 盒子定位说明
摘要：一，定位的分类 定位有三种： 1.相对定位 2.绝对定位 3.固定定位 这三种定位，每一种都暗藏玄机，所以我们要一一单讲。 二，相对定位 相对定位:相对于自己原来的位置定位 1）现象和使用： 1.如果对当前元素仅仅设置了相对定位，那么与标准流的盒子什么区别。 2.设置相对定位之后，我们才可以使用四个 阅读全文
posted @ 2021-04-25 17:17 nick_xm 阅读(379) 评论(0) 推荐(0)
css backgroud属性与雪碧技术
摘要：一，先来讲讲颜色表示法 共有三种：单词、rgb表示法、十六进制表示法 rgb:红色 绿色 蓝色 三原色 光学显示器，每个像素都是由三原色的发光原件组成的，靠明亮度不同调成不同的颜色的。 用逗号隔开，r、g、b的值，每个值的取值范围0~255，一共256个值。 如果此项的值，是255，那么就说明是纯色 阅读全文
posted @ 2021-04-25 17:05 nick_xm 阅读(127) 评论(0) 推荐(0)
css margin 外边距塌陷问题
摘要：一，margin 外边距塌陷问题 当时说到了盒模型，盒模型包含着margin，为什么要在这里说margin呢？因为元素和元素在垂直方向上margin里面有坑。 我们来看一个例子： html结构： <div class="father"> <div class="box1"></div> <div c 阅读全文
posted @ 2021-04-25 16:59 nick_xm 阅读(517) 评论(0) 推荐(0)
css 浮动元素与清除浮动
摘要：一，什么是标准文档流 宏观的将，我们的web页面和ps等设计软件有本质的区别，web 网页的制作，是个“流”，从上而下 ，像 “织毛衣”。而设计软件 ，想往哪里画东西，就去哪里画 标准文档流下 有哪些微观现象？ 1）空白折叠现象 多个空格会被合并成一个空格显示到浏览器页面中。img标签换行写。会发现 阅读全文
posted @ 2021-04-25 15:44 nick_xm 阅读(128) 评论(0) 推荐(0)
css 盒模型的概念与使用
摘要：一，盒模型的概念 在CSS中，"box model"这一术语是用来设计和布局时使用，然后在网页中基本上都会显示一些方方正正的盒子。我们称为这种盒子叫盒模型。 盒模型有两种：标准模型和IE模型。我们在这里重点讲标准模型。 二，盒模型的属性 width： # 内容的宽度 height: # 内容的高度 阅读全文
posted @ 2021-04-25 13:20 nick_xm 阅读(346) 评论(0) 推荐(0)
CSS 的display显示属性使用
摘要：一,css的显示模式（display) 学习的初期，我们就要知道，标准文档流等级森严。标签分为两种等级： 行内元素 块级元素 比如h1标签和span，同时设置宽高，来看浏览器效果，那么你会发现： 二，行内元素和块级元素的区别 行内元素： 与其他行内元素并排； 不能设置宽、高。默认的宽度，就是文字的宽 阅读全文
posted @ 2021-04-21 18:09 nick_xm 阅读(417) 评论(0) 推荐(0)
CSS 背景属性
摘要：一，背景属性 常用背景相关属性： 属性 描述 background-color 规定要使用的背景颜色。 background-image 规定要使用的背景图像。 background-size 规定背景图片的尺寸。 background-repeat 规定如何重复背景图像。 background-a 阅读全文
posted @ 2021-04-21 18:08 nick_xm 阅读(120) 评论(0) 推荐(0)
字体属性
摘要：一，字体属性 1) text-align 文本对齐 test-align属性规定元素中的文本的水平对齐方式 | 值 | 描述 | | : : | : : | | left | 左边对齐 默认值 | | right | 右对齐 | | center | 居中对齐 | | justify | 两端对齐2 阅读全文
posted @ 2021-04-21 18:06 nick_xm 阅读(226) 评论(0) 推荐(0)
字体相关css属性介绍
摘要：一，字体相关css属性介绍 1）font-family 字体系列。 font-family可以把多个字体名称作为一个“回退”系统来保存。如果浏览器不支持第一个字体，则会尝试下一个。浏览器会使用它可识别的第一个值。 简单示例： body { font-family: "Microsoft Yahei" 阅读全文
posted @ 2021-04-21 18:03 nick_xm 阅读(63) 评论(0) 推荐(0)
选择器的优先级
摘要：一，选择器的优先级 我们现在已经学过了很多的选择器，也就是说我们有很多种方法从HTML中找到某个元素，那么就会有一个问题：如果我通过不用的选择器找到了相同的一个元素，并且设置了不同的样式，那么浏览器究竟应该按照哪一个样式渲染呢？也就是不同的选择器它们的优先级是怎样的呢？ 是先来后到呢还是后来居上呢？ 阅读全文
posted @ 2021-04-21 17:56 nick_xm 阅读(424) 评论(0) 推荐(0)
常见的伪元素
摘要：一，伪元素 介绍常用的伪元素。 二，first-letter 用于为文本的首字母设置特殊样式。 例如： p:first-letter{ font-size: 48px; } 三，berore 用于在元素的内容前面插入新内容。 例如； p:before{ content: "*"; color: re 阅读全文
posted @ 2021-04-21 17:54 nick_xm 阅读(699) 评论(0) 推荐(0)
分组选择器和伪类选择器
摘要：一，分组选择器 1）什么是分组选择器 当多个元素的样式相同的时候，我们没有必要重复地为每个元素都设置样式，我们可以通过在多个选择器之间使用逗号分隔的分组选择器来统一设置元素样式。 例如： div,p { color: red; } 为div标签和p标签统一设置字体为红色的样式。 通常，我们会分两行来 阅读全文
posted @ 2021-04-21 17:53 nick_xm 阅读(277) 评论(0) 推荐(0)
属性选择器
摘要：一，属性选择器 除了HTML元素的id属性和class属性外，还可以根据HTML元素的特定属性选择元素 1）根据属性查找 [title] { color: red; } 2) 根据属性和值查找 找到所有title属性等于hello的元素： [title="hello"] { color: red; 阅读全文
posted @ 2021-04-21 17:52 nick_xm 阅读(171) 评论(0) 推荐(0)
基础选择器和高级选择器
摘要：| #### 一，CSS 选择器 | | | | 首先来说一下，什么是选择器。在一个HTML页面中会有很多很多的元素，不同的元素可能会有不同的样式，某些元素又需要设置相同的样式，选择器就是用来从HTML页面中查找特定元素的，找到元素之后就可以为它们设置样式了。 选择器为样式规则指定一个作用范围。 | 阅读全文
posted @ 2021-04-21 17:51 nick_xm 阅读(76) 评论(0) 推荐(0)
网页中引用css样式
摘要：一，网页中引用css样式 1）CSS 的三种引入方式 内联样式 行内样式表 外部样式表 链接式 导入式 二，内嵌方式 style 标签 <!doctype html> <html> <head> <meta charset="utf8"> <style> p { color: red; } </st 阅读全文
posted @ 2021-04-21 17:50 nick_xm 阅读(295) 评论(0) 推荐(0)
CSS 初始
摘要：一，CSS 初始 一，我们为什么需要CSS 使用css的目的就是让网页具有美观一致的页面，另外一个最重要的原因是内容与格式分离 在没有CSS之前，我们想要修改HTML元素的样式需要为每个HTML元素单独定义样式属性，当HTML内容非常多时，就会定义很多重复的样式属性，并且修改的时候需要逐个修改，费心 阅读全文
posted @ 2021-04-21 17:46 nick_xm 阅读(60) 评论(0) 推荐(0)