-

等都是块级元素，不能放其他块级元素。

行内元素

行内元素特点

相邻行内元素在一行上，一行可以显示多个 等高度、宽度直接设置是无效的

a { width: 100px; height: 100px;}小猪佩奇//宽度、高度设置无效

默认宽度就是本身内容的宽度行内元素只能容纳文本或其他行内元素

行内元素注意

链接内不能放链接特殊情况链接里面可以放块级元素

,,同时具有块元素和行内元素的特点，称为行内块元素。

行内块元素特点

显示模式转换

行内元素转为块级元素（重点）

a { width: 100px; height: 100px; background-color: green; /* 将元素a转换为块元素 */ display: block;}小猪佩奇

块级元素转为行内元素

div { width: 100px; // 提示错误 height: 100px; // 提示错误 background-color: green; /* 将div块级元素转换为行内元素 */ display: inline;}

我是块级元素1

我是块级元素2

转换为行内块 （重点）

span { width: 100px; height: 100px; background-color: green; display: inline-block;}span1span2

snipaste工具

手机 电话卡电视 盒子笔记 本平板出行 穿城智能 路由器耳机 音响

单行文字垂直居中：文字行高等于盒子高度即可

手机 电话卡电视 盒子笔记 本平板出行 穿城智能 路由器耳机 音响

CSS背景

背景图片：描述元素的背景图像。background-image: none | url(url)

背景图片位置：background-position: x y; (x坐标和y坐标，使用方位名词或者精确单位)

方位名词与顺序无关

background-position: center right;background-position: right center;//效果一样

背景复合写法约定顺序：背景颜色、背景图片、背景平铺、背景图像滚动、背景图片位置。

background: black url(images/bg.jpg) no-repeat fixed center top;background-color: black;background-image: url(images/bg.jpg);background-repeat: no-repeat;background-attachment: fixed;background-position: center top;

背景颜色半透明

/* 背景是黑色 alpha是指透明度 默认值为0*/background: rgba(red, green, blue, alpha);/* 背景是白色 */background: rgba(red, green, blue, 1);//最后一项取值介于0-1之间background: rgba(red, green, blue, 0.3);background: rgba(red, green, blue, .3); // 0.3的0可省略

alpha是指透明度， 取值介于0-1之间。背景半透明是指盒子背景半透明，盒子里的内容不受影响。CSS新增属性，IE9+版本浏览器才支持。

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。