CSS学习笔记4

最新推荐文章于 2022-10-20 16:59:36 发布

沉迷于搬砖

最新推荐文章于 2022-10-20 16:59:36 发布

阅读量220

点赞数

文章标签： css 学习 css3

本文链接：https://blog.csdn.net/weixin_45960356/article/details/125558610

版权

CSS 学习笔记4

浮动

浮动定义

说明：浮动是一种非常重要的布局属性
属性名：float，有漂流，浮动的意思
属性值：left（左浮动），right（右浮动）
作用：让元素脱离标准流，同一级的浮动元素可并排在一排显示

浮动的性质

浮动的元素脱离标准流
标准文档流特点：区分行块；块级元素：可设置宽高，必须独占一行，行内元素：补鞥呢设置宽高，可并排一行
浮动的元素脱离了标准流的限制，具备行块二象性，浮动元素可设置宽高，还可并排一行，而不会出现空白折叠现象，如元素不设置宽高，可被元素内容自动撑开
浮动元素依次贴边
浮动属性值：left，right
浮动方向设置不同，进行布局时，加载位置方向不同
浮动元素没有margin塌陷
margin塌陷现象出现在标准流中，浮动元素已经脱离标准流，不再具有margin塌陷现象
浮动元素让出标准流位置
元素浮动后，脱离了标准流，会将原来占有的标准流位置让给后面的一个同级元素（但在IE6，IE7浏览器中会存在兼容性问题）
字围现象
同级元素中前面的元素浮动，后面的元素不浮动，不浮动的元素内部还有一些文字，浮动的蓝色盒子会压盖粉色盒子的一部分，但文字内容不会被盖住，粉色盒子中的文字会让开蓝色盒子位置，围绕它进行加载，这种现象称为字围现象

设置浮动会出现的问题

浮动问题1

标准流中的元素，不设置高度的情况下，都能被内部的标准流元素自动撑高，如果内部的子元素进行了浮动，浮动子元素是撑不高标准流父亲的。
在这里插入图片描述

浮动问题2

父元素没有高度，会影响后面元素的标准流位置，如果浮动的子元素足够高时，有可能影响到后面浮动元素的贴边。
在这里插入图片描述

以上的问题需要被解决，解决方法是清除浮动带来的影响。

清除浮动方法

清除浮动方法1：height
给标准流的父亲强制给一个合适的高度

解决：父元素有了高度，前面的额浮动不能影响后面元素的标准流位置和贴边
会出现的问题：父元素高度不是自适应，一旦子元素高度变化，问题可能再次出现
清除浮动方法2：clear属性
使用clear，清除标签自身的受到的前面浮动元素的影响
属性值：left，清除前面左浮动带来的影响；right，清除前面右浮动带来的影响；both，清除前面所有浮动带来的影响
说明：给标准流父元素添加clear属性，父元素不受前面浮动影响，不会再占有浮动让出的位置

解决：浮动元素影响后面元素标准流位置和贴边
会出现的问题：父元素不能高度自适应，练个父元素之间如果有margin效果不正确
清除浮动方法3：隔墙法
外墙法：在两个大的父盒子之间，添加一个空白的div标签，标签上带clear: both属性

解决：浮动影响后面元素标准流位置和贴边，模拟父元素间的距离
会出现的问题：父元素灭有高度自适应

内墙法：父元素内部，所有的浮动子元素后面添加一个空的div元素，标签高度为0，添加clear属性

解决：父元素高度自适应，浮动影响后面的元素位置和贴边
缺点：浮动是CSS样式属性带来的问题，内墙法使用HTML结构辅助解决问题，如果页面中浮动元素很多，需要添加多个没有语义的空标签，造成HTML结构的冗余
清除浮动方法4：伪类
本质是使用伪类方法利用CSS代码书写一堵内墙
伪类选择器：通过给选中的标签添加伪类，去选中标签的某个状态或位置
:after：这个伪类表示选中的是某个标签内部的最后的位置
书写方法：前面必须加普通的选择器，后面连续书写伪类名称
将伪类添加给一个选中父盒子的选择器后面，一般给需要清除浮动的父盒字设置一个clearfix的类名

解决：父元素高度自适应，浮动影响后面的额元素位置和贴边
清除浮动方法5：溢出隐藏
给内部有浮动子元素的父元素添加溢出隐藏overflow: hidden; 属性，可解决浮动的所有问题

补充：overflow 属性
元素高度设置后，overflow: hidden; 效果是将超过高度的部分直接隐藏

元素高度没有设置时，如果元素同时设置了overflow: hidden属性，元素会自适应内容的高度
高度自适应原因：一个元素没有设置高度，同时设置了溢出隐藏，浏览器在加载盒子尺寸，遇到溢出
隐藏浏览器会强制性去检索内部的子元素的高度，不论子元素是标准流还是浮动，都会将最高的高度作为父盒字高度加载
浮动影响后面的元素：元素有了高度后，可管理往内部所有的浮动元素，不会延伸到后面标签中影响贴边

总结：
如果父元素高度是固定的，建议使用height属性解决
如果父元素高度需要自适应，建议使用overflow属性解决浮动问题

CSS伪类选择器

概念

伪类和类之间有一定的相似之处，也存在明显的区别
普通的类：必须给标签设置对应的class属性值，才能选中标签，而且类选择器后面添加的属性，会立即加载到浏览器中
伪类：不需要给标签添加任何属性，伪类名都是语法提前规定好的，书写时伪类必须搭配其他选择器使用，伪类选择器后面添加的样式不一定是立即加载到浏览器之上，只有用户出发了对应的行为，伪类的样式才会立即加载
伪类选择器的权重与普通的类选择器相同
伪类选择器写法：前面是普通的选择器，后面紧跟:伪类名

a标签的伪类

a标签可根据用户行为不同，划分为四种状态，通过a标签的伪类可将四种状态选中设置为不同的样式效果，用户出发对应行为，就可加载对应的样式
在这里插入图片描述
a标签的伪类书写顺序
1.a标签上可能会同事出发2到3个状态，每个状态的属性都会进行加载，相同的属性之间会发生层叠
2.伪类的权重时相同的，只能根据书写顺序，后写的层叠先写的，所以伪类书写顺序非常重要
3.要想让每个伪类的状态正常加载，书写顺序必须是：访问前link、访问后visited、鼠标移上hover、鼠标点击active
4.爱恨准则：love hate

a标签的伪类实际应用
一般会将访问前和访问后状态设置为一样的效果，保证了页面的统一性，可选择性的设置鼠标移上和鼠标点击状态
在这里插入图片描述
更多常见的一种设置方式如下：
a标签任何普通的选择器，可同事选中四种状态，可将四种状态设置为相同的样式，属性可设置所有的a默认显示样式的属性，包括盒子模型、文字等
a:hover 伪类选择器：设置鼠标上移时不一样的样式属性
在这里插入图片描述

其他标签也可设置:hover伪类状态

背景属性

CSS中除了布局类属性，还需要添加一些背景类的内容进行页面的修饰，从而让页面变得更加美观
CSS中通过background属性来设置背景，它是一个综合属性，可拆分成多个单一属性

1.背景颜色 background-color

属性名：background-color
作用：在盒子区域添加背景颜色的修饰
加载区域：在border以内加载背景颜色
属性值：颜色名、颜色值

2.背景图片 background-image

属性名：background-image
作用：给盒子添加图片的背景修饰
加载范围：默认的加载到边框及内部分，后期如果图片不重复加载，加载从border以内开始
属性名：url(图片路径)
url： uniform resource locator。统一资源定位符，小括号内部书写查看图片的路径

3.背景重复 background-repeat

属性名：background-repeat
作用：设置添加的背景图是否要在盒子中重复进行加载
根据属性值不同，有四种重复加载方式
在这里插入图片描述

4.背景定位 background-position

属性名：background-position
作用：主要用于设置不重复的背景区域加载开始位置
属性值：分为三种写法，单词表示法、像素表示法、百分比表示法（无论哪种写法，属性值都有两个，值之间空格分隔）
第一个属性值：表示背景图片在水平方向的位置
第二个属性值：表示背景图片在垂直方向的位置

1.单词表示法
属性值都是使用代表方向的单词进行书写
水平方向可选单词：left、center、right
垂直方向可选单词：top、center、bottom
单词表示图片与盒子背景区域进行对应方向的对齐

2.像素表示法
使用像素值作为背景定位的属性值
第一个属性值：像素是几，表示背景图片左上角针对border以内的左上顶点水平方向位移的距离
第二个属性值：像素是几，表示背景图片左上角针对border以内的左上定点垂直方向位移的距离
像素值区分正负，正负代表位移方向不同，正数表示图片针对盒子的原点向右、向下移动；负数表示图片针对盒子的原点向左、向上移动

3.百分比表示法
百分比表示法使用百分比数字作为属性值
100%代表的数值：
水平方向，等价于盒子的border以内的背景区域宽度减去图片的宽度
垂直方向，等价于盒子的border以内的背景区域高度减去图片的高度

5.背景附着 background-attachment

属性名：background-attachment
作用：设置背景图片是否要随着页面或者盒子的滚动而滚动
属性值：
在这里插入图片描述

6.综合写法

background属性可将五个单一属性的值进行合写
属性值：可有1-5个属性值，值之间用空格进行分隔，背景定位的连个属性值算作一个属性，不鞥你被分开也不能颠倒顺序。五个属性值之间可互换位置

background: url(images/bg.jpg) no-repeat center top fixed #fff;

注意事项：
注意1：如果属性值没有设置完全，其他没有设置的单一属性会按照默认值加载
注意2：如果想去层叠综合属性中的一部分，其他的属性保持不变，最好使用单一属性写法进行层叠

7.背景应用

场景一：替换插入图
h1标签是权重最高的标签，一般会在内部书写最重要的内容，比如logo图片、最大的标题等，另外h1内部的文字，可帮助提高SEO搜索排名，在设置logo图片时，如果使用插入图，就不能书写搜索关键字
背景图替换插入图方法：如果想解决SEO问题，可将HTML结构中的插入图换成搜索关键字，然后使用css添加背景图给a标签和h1标签
文字隐藏方法：将字号设置为0，IE8及以上或高版本浏览器可影藏文字，但IE7以及一下有兼容问题；可设置给a标签一个text-indent属性，属性值为负的很大的值，文字会走到盒子外部，直接再设置移除隐藏属性，将移除文字隐藏。

场景二：padding区域背景图
制作方法：字啊一个盒子中有背景图部分，且有文字内容，文字会让开背景图区域进行加载，背景区域应该使用padding挤出位置，四个方向的padding都可能用于添加背景图
例如padding-left区域背景：
在这里插入图片描述

场景三：精灵图技术
当用户访问一个网站时，需要向服务器发送请求，网页上的每张图像都需要经过一次请求才能展现给用户；然而一个网页中往往会应用很多小的背景图像作为修饰，当网页中的图像过多时，服务器就会频繁地接受和发送请求，这将大大降低页面的加载速度；为了有效减少服务器接受和发送请求的次数，提高页面的加载速度，出现CSS精灵技术（也称为CSSSprites、CSS雪碧）

CSS精灵
CSS精灵是一种处理网页背景图像的方式，将一个页面涉及到的所有零星背景图像都集中到一张大图中，然后将大图应用于网页，这样做后，当用户访问该页面时，只需要向服务器发送一次请求，网页中的背景图像即可全部展示出来；通常情况下，这个由很多小的背景图像合成的大图被称为精灵图

CSS精灵图的技术依据：将夜年终需要要到的小尺寸背景图片制作成一张背景透明的png图片；利用背景定位技术，将精灵图的每个小图片加载到对应的标签上

制作精灵图注意事项：
1.精灵图上放的都是小的装饰性质的背景图片，插入图片不能往上放
2.精灵图的宽度取决于最宽的那个背景图片的标签宽度
3.精灵图可横向摆放也可纵向摆放，但每个图片之间必须留有足够的空白，保证背景图片加载到一个标签内部时，不会出现多余的部分
4.在精灵图的最底端，尽量留一点空白，方便以后添加其他精灵图