css3 - 精致猪猪侠

css3

七.CSS的元素显示模式

元素显示模式就是元素(标签)以什么方式进行显示，比如: <div>自己独占一行，而一行可以放很多个<span>
HTML元素一般可以分为块级元素和行内元素

1. 块级元素

常见的：<h1>~<h6> <p> `` <div>`` <ul> `` <li>等，其中<div>很常见
特点： 1. 自己独占一行
2.高度，宽度，内外边距都可以控制
3.默认宽度是容器（父级元素宽度）的100%
4.是一个容器或盒子，里面可以放块级或者行内元素
注意：文字类元素内不能使用块级元素，例如<P>标签里面不能放块级元素，特别是<div>, 还有<h1>~<h6>也是文字类块级标签

2. 行内元素

常见的：<a> <span> <b> <em> <span>最常见
特点： 1. 相邻行内元素在一行上，一行可以显示多个
2.高和宽的直接设置是无效的
3.默认宽度是就是它本身内容的宽度
4.行内元素不可容纳块级元素，只可容纳文本或其他行内元素
注意：链接<a>中不能再放链接，特殊地，链接中可以放块级元素，但给<a>转换以下块级模式更安全

3. 行内块元素

例如 <img> <input> <td>他们同时具有块级元素和行内元素的特点
特点： 1. 和相邻的行内元素（或行内块）在一行上，但他们之间有空白空袭，一行可以显示多个
2.默认宽度就是它本身内容的宽度
3.高度，宽度，内外边距都可以控制

4. 元素显示模式转换

1. 转换为块级元素 display:block

特别常见：想要增加链接<a>的触发范围，就要将行内元素a转换为块级元素

2.转换为行内元素 display:inline

3.转换为行内块级元素 display: inline-block

<style>
/*行内元素a转换为块级元素,各占一行*/
  a {
	display:block;
	width:400px;
	height:40px;
	background-color: pink;
	}
	/*块级元素div转换为行内元素，相邻行内元素在一行上，一行可以显示多个，高和宽直接设置不行，只与内容的高和宽相等*/
div { 
       width:400px;
	   height:40px;
	   background-color: red;
	   display:inline
	}
/*行内块元素一行可以显示多个，可设高和宽*/
span{
	   width:400px;
	   height:40px;
	   background-color:  green;
	}
</style>
</head>
<body>
<a href="#">行内元素a转换为块级元素</a>
<a href="#">行内元素a转换为块级元素</a>
<div>俺是块级元素要转行内元素</div>
<div>俺是块级元素素要转行内元素</div>
<span>行内块元素span</span>
<span>行内块元素span</span>
<span>行内块元素span</span>
</body>
</html>

单行文字垂直居中：让文字的行高等于盒子的高度 line-height=height 实现文字在当前盒子内垂直居中

若行高小于盒子的高度，文字会偏上
若行高大于盒子的高度，文字会偏下
行高=上空隙+文字本身的高度+下空隙，行高的上下空隙将文字挤到中间了，上下空隙是透明的

八.CSS的背景

1. 背景颜色 backgroung-color

默认是透明的，transparent
可以取值三种形式： red 十六进制：#FF0000红色 rgb(255,0,0)红色

2.背景图片 background-imagine

默认是none
语法： background-imagine：url(访问图像的相对或绝对路径);
实际开发中常用于一些装饰性的小图片或超大的背景图片，优点是便于控制位置

3.背景平铺 backgroung-repeat

属性值：

repeat（默认）背景图像在纵向和横向上平铺，平铺指图像若比盒子小，则在x和y方向上多次复制平铺，直到将盒子平铺满
no-repeat 背景图像不平铺
repeat-x 背景图像在横向上平铺
repeat-y 背景图像在纵向上平铺
可以同时添加背景颜色和背景图像，只不过背景图像会压住背景颜色

4.背景图片位置 background-position

通常指背景图片在盒子中的位置
background-position : 参数1 参数2 ；
参数代表的是x和y坐标 ,可以使用方位名词或者精确单位

1.参数是方位名词时

x方向：left center right
y方向：top center bottom

如果指定的两个参数都是方位名词时，则两个值前后顺序无关，例如 left top 和top left 的效果一致
若仅仅指定了一个方位名词时，另一个值省略，省略的值默认是居中对齐

2.参数是精确数值时

可以是百分数或者由浮点数和单位组成的长度值

如果指定的两个参数都是精确数值时，则两个值前后顺序有关，参数1 参数2 分别对应 x和y
background-position：20px 50px; 指的是背景图片在距离盒子左边侧20像素，距离盒子上边侧50像素
2.若仅仅指定了一个精确数时，此值一定是x坐标，另一个值省略，省略的值默认是垂直居中
background-position：20px ；指的是背景图片在距离盒子左边侧20像素，并且垂直居中

3.参数是混合单位时

如果指定的两个参数是精确数值和方位名词混合时，则两个值前后顺序有关，参数1 参数2 分别对应 x和y

<title>背景图片位置</title>
<style>
	 div{
	 width:400px;
	height:100px;
	background-color: pink;
	background-image:url(小图标.html);
	background-repeat:no-repeat;
	/*background-position:bottom center;*/
	/*background-position:bottom center;*/
	/*background-position:255px  50px;*/
	background-position: left 40px;
		 }
</style>
</head>
<body>
<div></div>
</body>

5.背景图像固定（背景附着） backgroung-attachment

设置背景图像是否固定或者随着页面的其它部分滚动
属性值：
scroll 背景图像随着对象内容滚动
fixed 背景图像是固定

6.背景复合写法 background （更提倡复合写法）

没有特定的顺序
但一般习惯：
background：背景颜色背景图片的地址背景平铺背景图像固定或滚动背景图片位置

6.背景颜色半透明 background ：rgba(0,0,0,透明度)；

其中的最后一个参数透明度的取值范围是 0到1 之间
背景颜色半透明是指盒子背景半透明，盒子里的内容不受影响

posted on 2021-10-17 12:39 精致猪猪侠阅读(61) 评论(0) 收藏举报

刷新页面返回顶部