当前栏目: [前端开发基础]您现在的位置是:成都seo > 前端学习 > 前端开发基础 > 正文

HTML基础学习第八天

2020-04-09 03:42前端开发基础 人已围观文章来源:成都SEO文章作者:小成站长

简介行内块元素 img / input / /td 他们同时具有块元素和行内元素的特点 1.和相邻行内块元素,也会有空白缝隙 元素模式 元...

行内块元素
 
<img /> <input /> </td> 他们同时具有块元素和行内元素的特点
 
1.和相邻行内块元素,也会有空白缝隙
 
元素模式 元素排列 设置样式 默认宽度 包含
 
块级元素 一行只能放一个块级元素 可以设置宽度高度 容器100% 容器可以包含任何标签
 
行内元素 一行可以放多行内元素 不可直接设置宽度高度 它本身内容的宽度 容纳文本或其他行内元素
 
行内块级元素 一样放多个行内块级元素 可以设置宽度和高度 它本身内容的宽度
 
元素显示模式转换
 
display: block; 转换为块级元素
 
display: inline; 转换为行内元素
 
display:inline-block; 转换为行内块元素
 
 
----------------------------------------
单行文字垂直居中
height: 40px;
line-height:40px;
 
--------------------------------------
背景颜色
background-color :
 
背景图片
background-image: url();
 
1.非常便于控制位置;
-------------------------------------------
背景平铺:
background-repeat:  ;
 
 repeat (平铺)
 no repeat
 repeat-x;
 repeat-y;
 
注意背景图片:
 
可以添加背景图片 也可以添加背景颜色  只不过背景图片会压住背景颜色
 
-------------------------------------------------------
背景图片位置
 
background-position: x y;
 
如果是方位名词
 
background-position: ceter right;= background-position:right ceter;
 
背景图片位置
 
精确的单位
background-position: 20px 50px;
background-position: X Y;
 
数值
 
注意: 如果参数值是精确坐标,那么第一个肯定是X坐标,第二个一定Y坐标
如果只指定一个数值,那改数值一定是X坐标,另一个默认垂直居中
 
3.参数是混合单位
如果指定的两个值是精确单位和方位名词混合使用,则第一个值X坐标,第二个值是Y坐标
background-position: 20px center; = background-position: 20px;
background-position: center 20px; 
---------------------------------------
背景图像固定(背景附着)
 
background-attachment;scroll (滚动) || (fixed)固定
 
背景 复合写法
背景 没有顺序写法
background: 背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置;
background: transparent url() repeat-y fixed top;
 
 
 
 

Tags:

说点什么吧
  • 全部评论(0
    还没有评论,快来抢沙发吧!

本栏推荐

标签云

站点信息

  • 文章统计96篇文章
  • 标签管理标签云
  • 微信公众号:扫描二维码,关注我们