CSS感悟

原创已于 2024-08-26 20:30:58 修改 · 459 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#css #前端

于 2024-08-19 17:54:54 首次发布

CSS三大样式

块元素
特点
独占一行
具有宽高属性, 默认宽度为直接父级宽度
注意: p h dt 标签里最好不要有块元素
行内块元素
特点
可以一行之内显示
可以设置宽高, 默认宽高等于内容的宽高
行内块元素元素之间默认有间隙
注意: 行内块元素内最好不要有块元素
行内元素
特点
一行之内显示
没有宽高属性, 本身宽高由内容宽高决定
行内元素里最好不要有非行内元素

CSS分析思路

确定尺寸----width和height(是否使用默认值)
确定是否浮动或定位
确定margin
确定padding
确定border
字体font和颜色color
背景等其他样式

CSS属性书写顺序

定位类
display( 最上边 ) | position | float | clear | visibility | overflow
自身类
width | height | margin | padding | border | background
文本类
font | color | text-decoration | text-align | vertical-align | white-space | break-word
其他类( CSS3 )
content | cursor | border-radius | box-shadow | text-shadow

margin

margin的左右边距属性
不管是否指定盒子的宽度, 使用左右margin后,盒子会移动,无非是两种不同情况
情况1: 不指定盒子的width时, 盒子real width = 总宽度(父级) - margin宽度
情况2: 指定宽度时, 盒子width不变, 盒子real width = 原width

padding

padding左右边距属性
不管是否指定盒子的宽度,使用padding左右属性后,盒子内容会移动,2种情况
情况1:不指定盒子的width时, 盒子real width = 原width
情况2: 指定宽度时, 盒子width不变, 盒子real width = 原宽度 + padding值
<font color="red">**小结:**</font> 盒子的大小是不包含margin的. 在不指定盒子宽度时,盒子的宽度是弹性(**可伸缩**)的,取决于最近的最接父级宽度大小,当指定盒子宽度后,则固定.有如下情况
**不指定盒子宽度**
	margin:盒子宽度减少
	padding: 盒子大小不变
**指定盒子宽度**
	margin: 盒子大小不变
	padding: 盒子变宽

float

任何元素都能浮动, 浮动后具有行内块元素相似的特征
一般情况下,布局要遵循一浮全浮,否则布局容易出问题
布局一般是 “标准流+浮动” 配合使用
浮动元素没有上外边距bug
浮动后,脱标,但只压盒子,不压文字,文字环绕效果

块元素 | 行内块元素(行内元素)的浮动特征

块元素浮动
浮动后, 只影响后边的元素, 前边的元素稳如老狗
行内块元素 | 行内元素
浮动后, 更像是一种排队提权(插队)

清除浮动的本质
清除浮动元素脱离文档流后的影响
方法有4

额外标签法(w3c推荐)
在最后一个浮动元素后加一个块元素

<div class="father">
        <div class="son1">
            大猫
        </div>
        <div class="son2">
            二毛
        </div>
        <div style="clear: both"></div>
    </div>

缺点:额外添加元素,影响布局结构

给父级添加overflow

<style type="text/css">
	.clear {
		overflow: hidden;
	}
</style>

缺点:会把溢出的部分给隐藏(overflow: hidden)

给父级添加伪元素::after

<style type="text/css">
	.clear {
		/*这里是父级元素样式*/
		/*兼容IE6/IE7浏览器*/
		*zoom: 1;
	}
	.clear:after {
		content: "";
		display: block;
		clear: both;
		height: 0;
		visibility: hidden;
	}
</style>

缺点: 照顾低版本浏览器

给父级添加双伪元素

<style type="text/css">
	.clear::before,.clear::after {
		content: "";
		display: table;
	}
	.clear::after {
		clear: both;
	}
	.clear {
		*zoom: 1;
	}
</style>

缺点: 照顾低版本浏览器

定位

定位总结

z-index

在使用定位布局时,可能会出现盒子重叠的情况,此时,可以使用z-index来控制盒子的前后次序(z轴)
语法: 选择器 {z-index: 1;}

数值可以是正整数 0 负整数, 默认值是auto, 数值越大,盒子越靠上
如果属性值相同, 则按照书写顺序, 后来居上
数字后面不能加单位
只有定位的盒子才有z-index属性

定位盒子水平居中算法[垂直居中类似]

绝对定位和固定定位的盒子不能通过margin: 0 auto;实现水平居中,要实现需用如下方法:
注意: 相对定位可以通过margin: 0 auto;实现水平居中

<style type="text/css">
selector {
	position: absolute;
	/* 水平居中 */
	left: 50%;
	margin-left: -自身width的一半;
}
</style>

定位的拓展

absolute和fixed定位跟float类似, 添加后,与行内块元素的特性类似.

行内元素添加绝对或固定定位, 可以直接给其设置宽高
块元素添加绝对或固定定位,如果不给设置宽高,默认大小是内容的大小
浮动元素绝对定位或固定定位,都是脱标的, 因此不会触发上外边距bug[脱标的盒子不会触发上外边距bug]
浮动和定位的区别: 浮动元素只压盒子,不压文字,绝对定位和固定定位都压

网页总体布局

一个完整的网页,是由标准流,浮动和定位一起完成布局的,每个都有自己专门的用法

标准流
可以让盒子上下排列或左右排列, 垂直的块级盒子显示就用标准流布局
浮动
可以让多个块元素一行显示或左右对齐盒子,多个块元素水平显示就用浮动布局
定位
定位最大的特点是有层叠的概念, 可以让多个盒子前后叠压来显示, 如果元素自由在某个盒子内移动就用定位布局

精灵图

CSS Sprites，翻译为精灵图或者雪碧图。

所谓精灵图就是把好多小的图片合并一张大图，以该大图为背景图片的元素尺寸比较小，可以通过控制背景图片的位置，让元素上显示合适的图像。
精灵图依赖于background-position属性

优点

很多元素的背景图用的是一张图片，能够减少网络请求次数，提升页面加载速度

缺点

图片合并麻烦；维护麻烦，修改一个图片可能需要从新布局整个图片，样式。

字体图标

轻量级：一个图标字体要比一系列的图像要小。一旦字体加载了，图标就会马上渲染出来，不需要下载一个个图像。这样可以减少HTTP的请求数量，而且和HTML5的离线存储配合，可以对性能做出优化。
灵活性：本质就是文字，不调字体可以像页面中的文字一样，通过font-size属性来对其进行大小的设置，而且还可以添加各种文字效果，如color、hover、filter、text-shadow、transform等效果。灵活的简直不像话！
兼容性：图标字体支持现代浏览器，甚至是低版本的IE浏览器，所以可以放心的使用它。
相比于位图放大图片会出现失真、缩小又会浪费掉像素点，图标字体不会出现这种情况。

注意: 字体图标不能替代精灵技术，只是对工作中图标部分技术的提升和优化

缺点

图标字体只能被渲染成单色，或者是CSS3的渐变色
版权上也有着对应的限制，当然还是有很多免费的图标字体可以供我们下载。
当自己创作图标字体的时候，是比较耗费时间的，重构人员的后期维护成本也比较高

总结:

如果遇到一些结构和样式比较简单的小图标，就用字体图标。
如果遇到一些结构和样式复杂一点的小图片，就用精灵图。

居中对齐

水平居中

块元素 margin: 0 auto; 或者 定位+盒子模型
注意: auto属性是需要根据宽高计算的,因此需要指定宽高属性
非块元素 text-align: center;

垂直居中

块元素 定位+盒子模型 [往上找]
行内块元素 vertical: middle;
行内元素 line-height: height;

选择器权重表

selector	weight
* 元素伪元素	0,0,0,1
类伪类属性	0,0,1,0
id	0,1,0,0
行内样式	1,0,0,0
!important	无穷大

注意: 比较权重一定要从高到低比较,且只有高位权重相同时才往下继续比较

结构伪类选择器

匹配逻辑

nth-child(n) 对父元素里面所有孩子排序选择(序号是固定的) 先找到第n个孩子,然后看看是否和E
匹配
- 匹配逻辑: 先将所有儿子从1到n排序,然后再看要找的第n个儿子是否是E类型元素,如果是就渲染,否则不渲染
nth-of-type(n) 对父元素里面指定子元素进行排序选择。先去匹配E，然后再根据E 找第n个孩子
- 匹配逻辑: 先将所有符合条件的E类型找出来, 然后再从1—n排序,最后选择第n个元素渲染