CSS-网页美容师（二）

CSS-网页美容师（二）

CSS的元素显示模式

块元素

• 个人独占一行
• 可以设置宽度和高度
• 默认宽度是父级容器的100%
• 可以放入块元素和行元素

tip：

和

类都不可以放入div标签

行元素

类如等即行元素

• 相邻的行元素在同一行
• 高，宽设置都是无效的
• 默认宽度就是他本身的高度
• 行内元素只能容纳文本或其他行内元素（即不可以放入块元素）

行内块元素

类如等

• 可以一行放多个
• 默认宽度即它本身的宽度
• 高度，行高，外边距以及内边距都可以控制

元素显示模式总结

元素显示模式转换

如块元素转换为行元素，行元素换为块元素

比如说我们想增加的触发范围

a {
 	display: block;
}
此时即可对a来设置宽高了
转换行元素为
div {
	display: inline;
}
转换为行内块元素即
dispaly: inline-block;

单行文字在盒子里居中的技巧

div {
	height: 50px;
	line-height: 50px;
}
保证line-height和height同高即可

CSS的背景

复合写法需要严格按照要求

background: red url() no-repeat fixed center;

CSS三大特性

• 层叠性

就近原则，代码离的近的叠在上面

• 继承性

“子承父业”

• 优先性

不同的选择器有不同的权重

四组一位，权重可以叠加，但不会进位

• 继承性

“子承父业”

• 优先性

不同的选择器有不同的权重

[外链图片转存中…(img-ZYFDfn1G-1664201774071)]

四组一位，权重可以叠加，但不会进位