CSS元素显示模式
就是元素(标签)以什么方式进行显示,如<div>
自己占一行,比如一行可以放多个<span>
。
作用:网页标签很多,不同地方用不同类型的标签,了解他们的特点可以更好地布局我们的网页。
HTML元素一般分为块元素和行内元素两种类型。
块元素
块级元素的特点:
注意:
- 文字类的元素不能使用块级元素。
<p>
标签主要用于存放文字,因此<p>
里面不能放块级元素,特别是不能放<div>
。- 同理
<h1>~<h6>
等都是文字类块级标签,不能放其他块级元素。
行内元素
行内元素特点:
注意:
- 链接里面不能再放链接。
- 特殊情况
<a>
里面可以放块级元素,但是给<a>
转换一下块级模式最安全。
行内块元素
行内块元素的特点:
元素显示模式总结
显示模式的转换
特殊情况下,需要元素模式的转换。
比如想要增加链接<a>
的触发范围。
转换为块元素:display:block;
转换为行内元素:display:inline;
转换为行内块:display:inline-block;
小工具的使用snipaste
是一个简单但强大的截图工具,可以让你将截图贴回到屏幕上。
常用快捷方式:
单行文字垂直居中
让文字的行高等于盒子的高度 就可以让文字在当前盒子内垂直居中。
line-height=height。
CSS的背景
通过CSS背景属性,可以给页面元素添加背景样式。
背景颜色、背景图片、背景平铺、背景图片位置、背景头像固定等。
背景颜色
background: transparent;一般情况下北京元素默认值是transparent(透明)。
背景图片
实际开发常见于logo或者一些装饰性的小图片或者是超大的背景图片。
优点是非常便于控制位置。
background-image
不要拉下url。
背景平铺
在HTML页面上对背景图像进行平铺
用background-repeat
背景图片的位置
background-position
x坐标和y坐标,可以使用方位名词或者精准单位。
1、参数是方位名词
- 如果指定的两个值都是方位名词,则两个值的顺序无关。
- 只指定一个方位名词,另一个值省略,则第二个值默认居中对齐。
2、参数是精确单位 - 如果参数值是精确坐标,那么x、y不能乱位置。
- 如果只指定一个数值,那么一定是x坐标,另一个默认垂直居中。
3、参数是混合单位
精确单位和方位名词混合使用,x、y不能调换位置。
背景图像固定(背景附着)
background-attachment属性设置背景图像是否固定或者随页面其余部分滚动。
后期可以制作视差滚动的效果
背景属性复合写法
简化背景属性的代码,写到同一个background里面
没有特定的书写顺序,习惯顺序为
background:背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置
复合前
复合后:
背景颜色半透明
- 最后一个alpha透明度,取值范围在0~1之间。
- 习惯把0.3的0省略掉,写为.3
- 背景色半透明,盒子里面的内容不受影响
- CSS3新增属性,IE9+版本浏览器才支持
- 实际开发不太关注兼容性,可以放心使用
背景总结