给自己时间,不要焦急,一步一步来,一日一日过,
请相信生命的韧性是惊人的,跟自己向上的心去合作,不要放弃对自己的爱护。
元素的显示与隐藏
display显示
使用disply隐藏之后,不再保留原来的位置,会被之后正常的文档流覆盖
display: none 隐藏对象
display:block 除了转换为块级元素之外,同时还有显示元素的意思。
visibility可见性
和display隐藏不同的是,使用可见性隐藏,元素仍然会保留原来的位置
visibility:visible ;  对象可视
visibility:hidden;   对象隐藏
overflow溢出
这是一个神奇的单词哈😄,很多地方都会用到它,之前提到的清除浮动也使用到了overflow
属性值 | 描述 |
---|---|
visible | 不剪切内容也不添加滚动条 |
hidden | 不显示超过对象尺寸的内容,超出的部分隐藏掉 |
scroll | 不管超出内容否,总是显示滚动条 |
auto | 超出自动显示滚动条,不超出不显示滚动条 |
综合运用
HTML部分
CSS部分(很重要的思想转换,一定要记得
)
CSS用户界面样式
鼠标样式cursor
属性值 | 描述 |
---|---|
default | 小白 默认 |
pointer | 小手 |
move | 移动 |
text | 文本 |
not-allowed | 禁止 |
轮廓线
平时我们最直接的写法是 :outline: none,取消轮廓线。
<input type="text" style="outline: none;"/>
防止文本域拖拽
平时使用文本域布局的时候,如果不设置任何属性,用户抗议自己修改文本域的大小,会影响页面的整体布局,这时我们就要注意了: 实际开发中,我们文本域右下角是不可以拖拽的 ❗
<textarea style="resize: none;"></textarea>
vertical-align 垂直对齐
vertical-align 不影响块级元素中的内容对齐,它只针对于行内元素
或者行内块元素
特别是行内块元素, 通常用来控制图片/表单与文字的对齐。
vertical-align : baseline |top |middle |bottom
对齐方式依次是:基线、顶线、中线、底线
溢出的文字省略号显示
设置或检索是否使用一个省略标记(...)标示对象内文本的溢出
text-overflow : clip ;不显示省略标记(...),而是简单的裁切
text-overflow:ellipsis ; 当对象内文本溢出时显示省略标记(...)
white-space设置或检索对象内文本显示方式。通常我们使用于强制一行显示内容
white-space:normal ;默认处理方式
white-space:nowrap ; 强制在同一行内显示所有文本,直到文本结束或者遭遇br标签对象才换行。
省略号三部曲
/*1. 先强制一行内显示文本*/
white-space: nowrap;
/*2. 超出的部分隐藏*/
overflow: hidden;
/*3. 文字用省略号替代超出的部分*/
text-overflow: ellipsis;
CSS精灵技术(sprite) 很重要
为什么需要sprites技术
👇图为网页的请求原理图,当用户访问一个网站时,需要向服务器发送请求,网页上的每张图像都要经过一次请求才能展示给用户,但是
一个网页中往往会应用很多小的背景图作为修饰,当网页中的图像过多,服务器就会频繁的接收和发送请求,会降低页面的加载速度
特点:有效的减少服务器接收和发送请求的次数,提高页面的加载速度
精灵技术讲解
CSS精灵图实际上是将网页中的一些背景图整合到一张大图中,这样当用户访问该页面时,只需要向服务器发送一次请求,网页中的背景图像即可全部展示出来
需要使用到的CSS技术:background-image、background-repeat、background-position属性进行背景定位。
精灵技术使用的核心总结
- 精确测量,每个小背景图片的大小和位置。
- 给盒子指定小背景图片时, 背景定位基本都是负值。
CSS布局的三种机制
普通流
块级元素会独占一行,从上向下
顺序排列;
- 常用元素:div、hr、p、h1~h6、ul、ol、dl、form、table
行内元素会按照顺序,从左到右
顺序排列,碰到父元素边缘则自动换行;
- 常用元素:span、a、i、em等
浮动
浮动最主要的价值是可以让多个块级元素在同一行内展示出来。
元素的浮动是指设置了浮动属性的元素会
- 脱离标准普通流的控制
- 移动到指定位置。
选择器 { float: 属性值; }
属性值 | 描述 |
---|---|
none | 元素不浮动(默认值) |
left | 元素向左浮动 |
right | 元素向右浮动 |
我们使用浮动的核心目的——让多个块级盒子在同一行显示。 这个也是我们最常见的一种布局方式
一个完整的网页,是 标准流 + 浮动 + 定位 一起完成的。
浮动只会影响当前的或者是后面的标准流盒子,不会影响前面的标准流,每个标准流单独占一行。
如果一个盒子里面有多个子盒子,如果其中一个盒子浮动了,其他兄弟也应该浮动,避免引起其他的问题哈。
下面我们来看以下👇几种情况:
以下所说的div结构均为此:
<div>
<div class="a"></div>
<div class="b"></div>
</div>
当a盒子浮动,b盒子也浮动的时候,a、b两盒子会显示在同一行。 当a盒子不浮动,b盒子浮动的时候,a盒子即是标准的文档流,是很霸道的哈,他会单独占据一行,所以b盒子会依照a盒子为参考,b盒子浮动。
清除浮动
我们为什么要清除浮动呢 ❓
父级盒子很多情况下,不方便给高度
,但是子盒子浮动就不占有位置,注意哦,浮动的盒子不占位置。
最后父级盒子高度为0,就影响了下面的标准流盒子,下面的标准流盒子会覆盖原本想展示的内容。
- 总结:
- 由于浮动元素不再占用原文档流的位置,所以它会对后面的元素排版产生影响
- 准确地说,并不是清除浮动,而是
清除浮动后造成的影响。
清除浮动主要为了解决父级元素因为子级浮动引起内部高度为0 的问题。清除浮动之后, 父级就会根据浮动的子盒子自动检测高度。父级有了高度,就不会影响下面的标准流了。
清除浮动的方法
如下图所示,若父元素nav盒子没有设置高度,子元素均设置浮动,则会导致子元素浮动在正常文档流之外,父元素的高度为:0,影响之后正常的文档流,所以此时我们会清除浮动。
以下👇所示的四种清除浮动的方式,均以此案例为参照
注意此处说的浮动元素是指浮动的最后一个元素哈
2.父级添加overflow属性方法W3C推荐的做法是通过在浮动元素末尾添加一个空的标签例如 < div style=”clear:both”>< /div>。
可以给父级添加: overflow为 hidden| auto| scroll 都可以实现。
一般我们会在父级元素样式后加:overflow:hidden。
缺点: 内容增多时候容易造成不会自动换行导致内容被隐藏掉,无法显示需要溢出的元素。
3.使用after伪元素清除浮动
此方式虽然代码多一点,但是不会改变html的结构
:after相当于在结构后用css添加了一个新的标签。
/*声明清除浮动的样式 */
.clearfix:after{
content: "";
display: block;
height: 0;
visibility: hidden;
clear: both;
}
.clearfix{
*zoom:1; /* ie6,7专门清除浮动的样式*/
}
4.使用双伪元素清除浮动
跟第三种方式差不多哈,在盒子的前后插入一个盒子
.clearfix:before,.clearfix:after {
content:"";
display:table;
}
.clearfix:after {
clear:both;
}
.clearfix {
*zoom:1;
}
定位与塌陷(塌陷的解决方法)
之前我们有提到过,当给一个父元素内部的子元素设置margin值的时候,父级元素可能也会发生改变,即外边距合并就是通常所说的塌陷,但是绝对定位和浮动不会触发外边距合并
👇:
什么是塌陷
为什么会出现塌陷呢,只有父子元素会出现塌陷吗,下面会进行详细的讲解,很重要的,一定要掌握理解,只有了解了原因才会自然的想起他的解决方式。
原因:在标准文档流中,竖直方向的margin会出现叠加现象(水平方向不会塌陷),两个margin紧挨着,中间没有border或者padding,当两个margin直接接触,就产生了合并,即外边距合并,表现为较大的margin会覆盖掉较小的margin,竖直方向的两个盒子中间只有一个较大的margin,这就是margin塌陷现象。
出现塌陷的对象
- 兄弟关系的盒子
- 父子关系的盒子
塌陷的解决方案
这里总结了一下七种解决方案,需要根据项目的要求,选择适合的解决方案即可
定位详解
语法:定位 = 定位模式 + 边偏移
边偏移
在 CSS 中,通过 top
、bottom
、left
和 right
属性定义元素的边偏移,简单的说就是上下左右四个方向名词😀
边偏移属性 | 示例 | 描述 |
---|---|---|
top |
top: 80px |
顶端偏移量,定义元素相对于其父元素上边线的距离。 |
bottom |
bottom: 80px |
底部偏移量,定义元素相对于其父元素下边线的距离。 |
left |
left: 80px |
左侧偏移量,定义元素相对于其父元素左边线的距离。 |
right |
right: 80px |
右侧偏移量,定义元素相对于其父元素右边线的距离 |
定位的盒子有了边偏移才有价值。 一般情况下,凡是有定位地方必定有边偏移。
定位模式
在CSS中,通过position的属性定义元素的定位模式,就是定位的分类,很重要的需要掌握的
选择器 { position: 属性值; }
定位模式是有不同分类的,在不同情况下,我们用到不同的定位模式。
值 | 语义 |
---|---|
static |
静态定位(默认) |
relative |
相对定位 |
absolute |
绝对定位 |
fixed |
固定定位 |
相对定位(relative)很重要
相对定位是元素相对于他自己原来在标准流中的位置来移动的。
相对定位的特性:
- 相对于他自己原来在标准流中的位置来移动的。
- 定位的盒子原来在标准流中的区域继续占有,后面的盒子仍然以标准流的方式来对待他。
绝对定位(absolute)很重要
绝对定位是元素以带有定位的父级元素来移动的
绝对定位的特性:
- 完全不占任何位置
- 依据最近的已经定位(绝对、固定或者相对定位)的父元素进行定位。
- 父元素如果没有定位,则以浏览器为标准定位
如👇图所示的,父级元素有一个相对定位模式,给子元素设置一个绝对定位,此时子盒子会以父级的左上角为标准点进行定位。
如下图所示,父级元素没有定位的时候,给子元素设置一个绝对定位,该子盒子就会以文档即浏览器为标准进行定位。注意这里的父级元素不仅指子元素的上一级父亲元素,会一级一级元素的向上找,如果父亲元素的上一级有定位,就以爷爷元素为准进行定位。
总结一下:将元素依据最近的已经定位(绝对、固定或者相对定位)的父元素进行定位。
固定定位(fixed)很重要
固定定位是绝对定位的特殊形式
固定定位的特性:
- 完全不占有位置
- 只认浏览器的可视窗口,跟父级元素无任何关系,不随滚动条而滚动
绝对定位盒子居中对齐
绝对定位的盒子不能通过margin:0 auto水平居中。
这里有一个简单的计算公式让绝对定位的盒子水平居中,我们先让盒子左移50%,这时我们会发现,移动位置多了呀,多的长度是盒子的一般,那我们就需要减去盒子一半的长度,可以设置margin-left为负数,负数的值就等于盒子宽度的一半。
我们可以来实践一下: 给父级元素盒子设置一个position:relative,给需要居中的盒子设置绝对定位,left等于50%,margin-left等于-盒子宽度的一半。绝对定位盒子垂直水平居中hin重要
👆上面主要是对绝对定位水平居中有一个详细的讲解,接下来通过一张图对绝对定位的的垂直水平居中,以及其他位置的居中进行详细的讲解:
我们先看这个图片,整个黑色边框是一个长800px,高度为400px的大盒子,示例盒子宽度为200px,高度为100px,上下两个盒子分别水平居中,左右两个盒子是垂直居中,和水平居中原理一致。
重点来啦
,我们平时经常会用到的垂直水平居中,给盒子设置绝对定位后,设置:left:50%,top:50%,这时会发现盒子距离中间位置向右多偏移了宽度的一半,向下多偏移了高度的一半,所以也是需要减去的,给盒子来一个margin:-50px -100px;具体代码示例如下👇: