摘要: z-index 这个东西非常简单,它有四大特性,每个特性你记住了,页面布局就不会出现找不到盒子的情况。 z-index 值表示谁压着谁,数值大的压盖住数值小的, 只有定位了的元素,才能有z-index,也就是说,不管相对定位,绝对定位,固定定位,都可以使用z-index,而浮动元素不能使用z-ind 阅读全文
posted @ 2018-08-14 22:52 o微凉o 阅读(110) 评论(0) 推荐(0) 编辑
摘要: 定位 定位有三种: 1.相对定位 2.绝对定位 3.固定定位 这三种定位,每一种都暗藏玄机,所以我们要一一单讲。 相对定位 相对定位:相对于自己原来的位置定位 现象和使用: 1.如果对当前元素仅仅设置了相对定位,那么与标准流的盒子什么区别。 2.设置相对定位之后,我们才可以使用四个方向的属性: to 阅读全文
posted @ 2018-08-14 22:51 o微凉o 阅读(127) 评论(0) 推荐(0) 编辑
摘要: 先来讲讲颜色表示法 一共有三种:单词、rgb表示法、十六进制表示法 rgb:红色 绿色 蓝色 三原色 光学显示器,每个像素都是由三原色的发光原件组成的,靠明亮度不同调成不同的颜色的。 用逗号隔开,r、g、b的值,每个值的取值范围0~255,一共256个值。 如果此项的值,是255,那么就说明是纯色: 阅读全文
posted @ 2018-08-14 22:50 o微凉o 阅读(128) 评论(0) 推荐(0) 编辑
摘要: 直接上代码了 html结构 写好上面的结构代码之后,也就是将我们页面展示的内容显示了,但是我们此时要利用我们学过的知识点来布局页面 首先我们要做导航栏,并排显示元素,第一想 浮动,想到使用浮动之后,一定记得清除浮动元素。 css代码如下: 阅读全文
posted @ 2018-08-14 22:48 o微凉o 阅读(184) 评论(0) 推荐(0) 编辑
摘要: 文本属性 介绍几个常用的。 文本对齐 text-align 属性规定元素中的文本的水平对齐方式。 属性值:none | center | left | right | justify 文本颜色 color属性 文本首行缩进 text-indent 属性规定元素首行缩进的距离,单位建议使用em 文本修 阅读全文
posted @ 2018-08-14 22:47 o微凉o 阅读(127) 评论(0) 推荐(0) 编辑
摘要: margin塌陷问题 当时说到了盒模型,盒模型包含着margin,为什么要在这里说margin呢?因为元素和元素在垂直方向上margin里面有坑。 我们来看一个例子: html结构: css样式: 当给两个标准流下兄弟盒子 设置垂直方向上的margin时,那么以较大的为准,那么我们称这种现象叫塌陷。 阅读全文
posted @ 2018-08-14 22:46 o微凉o 阅读(160) 评论(0) 推荐(0) 编辑
摘要: 浮动 浮动是css里面布局最多的一个属性,也是很重要的一个属性。 float:表示浮动的意思。它有四个值。 none: 表示不浮动,默认 left: 表示左浮动 right:表示右浮动 看一个例子 html结构: css样式: 我们会发现,三个元素并排显示,.box1和span因为是左浮动,紧挨在一 阅读全文
posted @ 2018-08-14 22:44 o微凉o 阅读(121) 评论(0) 推荐(0) 编辑
摘要: 学习的初期,我们就要知道,标准文档流等级森严。标签分为两种等级: 行内元素 块级元素 比如h1标签和span,同时设置宽高,来看浏览器效果,那么你会发现: 行内元素和块级元素的区别:(非常重要) 行内元素: 与其他行内元素并排; 不能设置宽、高。默认的宽度,就是文字的宽度。 块级元素: 霸占一行,不 阅读全文
posted @ 2018-08-14 22:36 o微凉o 阅读(103) 评论(0) 推荐(0) 编辑
摘要: margin margin:外边距的意思。表示边框到最近盒子的距离。 阅读全文
posted @ 2018-08-14 22:35 o微凉o 阅读(159) 评论(0) 推荐(0) 编辑
摘要: 什么是标准文档流 宏观的将,我们的web页面和ps等设计软件有本质的区别,web 网页的制作,是个“流”,从上而下 ,像 “织毛衣”。而设计软件 ,想往哪里画东西,就去哪里画 标准文档流下 有哪些微观现象? 1.空白折叠现象 多个空格会被合并成一个空格显示到浏览器页面中。img标签换行写。会发现每张 阅读全文
posted @ 2018-08-14 22:35 o微凉o 阅读(91) 评论(0) 推荐(0) 编辑
摘要: 边框 border:边框的意思,描述盒子的边框 边框有三个要素: 粗细 线性样式 颜色 如果颜色不写,默认是黑色。如果粗细不写,不显示边框。如果只写线性样式,默认的有上下左右 3px的宽度,实体样式,并且黑色的边框。 按照3要素来写border 按照方向划分 上面12条语句,相当于 bordr: 1 阅读全文
posted @ 2018-08-14 22:34 o微凉o 阅读(150) 评论(0) 推荐(0) 编辑
摘要: padding padding:就是内边距的意思,它是边框到内容之间的距离 另外padding的区域是有背景颜色的。并且背景颜色和内容的颜色一样。也就是说background-color这个属性将填充所有的border以内的区域 padding的设置 padding有四个方向,分别描述4个方向的pa 阅读全文
posted @ 2018-08-14 22:30 o微凉o 阅读(182) 评论(0) 推荐(0) 编辑
摘要: 盒模型 在CSS中,"box model"这一术语是用来设计和布局时使用,然后在网页中基本上都会显示一些方方正正的盒子。我们称为这种盒子叫盒模型。 盒模型有两种:标准模型和IE模型。我们在这里重点讲标准模型。 盒模型示意图 盒模型的属性 width:内容的宽度 height: 内容的高度 paddi 阅读全文
posted @ 2018-08-14 22:28 o微凉o 阅读(96) 评论(0) 推荐(0) 编辑
摘要: 直接上代码,看效果! 第一种现象:当权重相同时,以后来设置的属性为准,前提一定要权重相同 我们会发现此时显示的是红色的。 第二种现象: 第一个选择器没有选中内层标签,那么它是通过继承来设置的属性,那么它的权重为0。第二个选择器选中了内层标签,有权重。 所以 继承来的元素 权重为0。跟选中的元素没有可 阅读全文
posted @ 2018-08-14 22:27 o微凉o 阅读(115) 评论(0) 推荐(0) 编辑
摘要: css有两大特性:继承性和层叠性 继承性 面向对象语言都会存在继承的概念,在面向对象语言中,继承的特点:继承了父类的属性和方法。那么我们现在主要研究css,css就是在设置属性的。不会牵扯到方法的层面。 继承:给父级设置一些属性,子级继承了父级的该属性,这就是我们的css中的继承。 记住:有一些属性 阅读全文
posted @ 2018-08-14 22:22 o微凉o 阅读(132) 评论(0) 推荐(0) 编辑
摘要: 伪类选择器一般会用在超链接a标签中,使用a标签的伪类选择器,我们一定要遵循"爱恨准则" LoVe HAte 再给大家介绍一种css3的选择器nth-child() 阅读全文
posted @ 2018-08-14 22:16 o微凉o 阅读(116) 评论(0) 推荐(0) 编辑
摘要: /*设置第一个首字母的样式*/ p:first-letter{ color: red; font-size: 30px; } /* 在....之前 添加内容 这个属性使用不是很频繁 了解 使用此伪元素选择器一定要结合content属性*/ p:before{ ... 阅读全文
posted @ 2018-08-14 22:16 o微凉o 阅读(99) 评论(0) 推荐(0) 编辑
摘要: 属性选择器,字面意思就是根据标签中的属性,选中当前的标签。 语法: 阅读全文
posted @ 2018-08-14 22:14 o微凉o 阅读(120) 评论(0) 推荐(0) 编辑
摘要: 高级选择器分为:后代选择器、子代选择器、并集选择器、交集选择器 后代选择器 使用空格表示后代选择器。顾名思义,父元素的后代(包括儿子,孙子,重孙子) 子代选择器 使用>表示子代选择器。比如div>p,仅仅表示的是当前div元素选中的子代(不包含孙子....)元素p。 并集选择器 多个选择器之间使用逗 阅读全文
posted @ 2018-08-14 22:12 o微凉o 阅读(92) 评论(0) 推荐(0) 编辑
摘要: css的选择器:1.基本选择器 2.高级选择器 基本选择器包含: 1.标签选择器 标签选择器可以选中所有的标签元素,比如div,ul,li ,p等等,不管标签藏的多深,都能选中,选中的是所有的,而不是某一个,所以说 "共性" 而不是 ”特性“ 2.id选择器 # 选中id 同一个页面中id不能重复。 阅读全文
posted @ 2018-08-14 22:07 o微凉o 阅读(68) 评论(0) 推荐(0) 编辑