块元素、内敛元素、行内块元素特点、相互转换、取消默认效果

块元素特性

块元素,也可以称为行元素,布局中常用的标签如:div、p、ul、li、h1~h6等等都是块元素,它在布局中的行为:

  • 支持全部的样式
  • 如果没有设置宽度,默认的宽度等于父级的width
  • 盒子占据一行、即使设置了宽度

包含默认样式的块元素

上面讲的块标签中,有些标签是包含默认的样式的,这个含默认样式的有

  • p标签:含有默认外边距
  • ul、ol标签:含有默认外边距和内边距,以及条目符号(小圆点或者编号)
  • h1~h6标签:含有默认的外边距和字体大小
  • dl、dd标签:含有默认外边距
  • body标签:含有默认的外边距

取消默认样式:

/* 清除标签默认的外边和内边距 */
body,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,dd{
    margin:0px;
    padding:0px;
}

/* 清除标签默认条目符号 */
ul,ol{
    list-style:none;
}

/* 将h标签的文字大小设置为默认大小 */
h1,h2,h3,h4,h5,h6{
    font-size:100%;
    /* 根据实际需求来加   */
    font-weight:normal;
}

内联元素特性

内联元素,也可以称为行内元素,布局中常用的标签如:a、span等等都是内联元素,它们在布局中的行为:

  • 不支持宽、高、margin上下、padding上下
  • 宽高由内容决定
  • 盒子并在一行
  • 代码换行,盒子之间会产生间距
  • 子元素是内联元素,父元素可以用text-align属性设置子元素水平对齐方式

解决内联元素间隙的方法

1、去掉内联元素之间的换行
2、将内联元素的父级设置font-size为0,内联元素自身再设置font-size

常用的含有语义的内联元素:

1、<em> 标签  斜体效果,表示语气中的强调词

2、<i> 标签 斜体效果,表示专业词汇

3、<b> 标签 加粗效果,表示文档中的关键字或者产品名

4、<strong> 标签 加粗效果,表示非常重要的内容

5、<a>标签 下划线效果,表示超链接

取消默认样式

/* 去掉a标签默认的下划线 */
a{
    text-decoration:none;
}
/* 去掉标签默认的文字倾斜 */
em,i{
    font-style:normal;
}
/* 去掉标签默认的文字加粗(按实际需求) */
b,strong{
    font-weight:normal;
}

内联块元素

内联块元素,也叫行内块元素,是新增的元素类型,现有元素没有归于此类别的,img和input元素的行为类似这种元素,但是也归类于内联元素,我们可以用display属性将块元素或者内联元素转化成这种元素。它们在布局中表现的行为:

  • 支持全部样式
  • 如果没有设置宽高,宽高由内容决定
  • 盒子并在一行
  • 代码换行,盒子会产生间距
  • 子元素是内联块元素,父元素可以用text-align属性设置子元素水平对齐方式。

三种元素的转换:display属性

display属性是用来设置元素的类型及隐藏的,常用的属性有:
1、none 元素隐藏且不占位置
2、block 元素以块元素显示
3、inline 元素以内联元素显示
4、inline-block 元素以内联块元素显示

时间: 2024-10-17 05:59:44

块元素、内敛元素、行内块元素特点、相互转换、取消默认效果的相关文章

1 background(复合属性)与font(复合属性) 2 行内块的间距问题 3 行内元素的margin 4 清除浮动 5定位的元素的层级 6 Border-radius: 边框半径

1 background(复合属性)与font(复合属性): background: 颜色  图片的链接  是否平铺  背景位置 是否滚动.(可以随意调动或省略) Font: 粗度 字体风格 字体大小/行高 字体样式 字体大小和样式不可省略 2 行内块的间距问题 行内块元素相邻时,行内块元素之间会有几像素的间距,只有通过浮动解决. 3 行内元素的margin 行内元素的上下外边距不起作用,左右起作用. 4 清除浮动 给父盒子设置一个高度     Clear: both      Overflow

块级元素、行内元素与行内块元素

1.块级元素与行内元素的区别? 块级元素独占一行 行内元素可以在一行显示,但是不能设置上下的padding和margin值. 2.块级元素与行内元素的相互转换? 块级元素转行内元素:display:inline; 行内元素转块级元素:display:block; 3.行内块元素相邻布局的时候,中间几像素的间距怎么解决? 给元素添加浮动 4.常见的块级元素.行内元素与行内块元素? 块级元素 :div.h系列.li.dt.dd.p 行内元素  :span.u.a..em.b.i.u.em 行内块元素

CSS基础知识(2)三种样式表的写法,块、行内、行内块元素之间的转换

margin: 0 auto /*可以让盒子居中*/1.三种样式表的书写方法 (1)内嵌式写法 特点:样式只作用于当前文件,没有真正实现结构表现分离. <head> <style type="text/css"> 样式表写法 </style></head> (2)外链式写法 特点:作用范围是当前站点,谁调用谁生效,范围广,真正实现结构表现分离. <link rel="stylesheet" href="

块级元素,行内(内联)元素和行内块元素分别有哪些, 另外什么是替换元素和费替换元素

参考替换元素和非替换元素: https://www.cnblogs.com/lixiaodou/p/7150624.html   块级元素.行内(内联)元素和行内块元素 块状元素 块状元素代表性的就是<div>,其他如<p>.<nav>.<aside>.<header>.<footer>.<center>.<section>.<article>.<ui>.<li>.<o

HTML元素中块级元素、行内元素以及行内块元素整理

块级元素 h1-h6>>1-6级标题 p>>段落 div>>定义文档中的节 ul>>定义无序列表 ol>>定义有序列表 li>>定义无序列表与有序列表中的项 hr>>水平线 address>>定义文档作者或拥有者的联系信息 blockquote>>定义长的引用 pre>>定义预格式文本 form>>定义表单 fieldset>>定义围绕表单中元素的边框 legen

行内块元素 、块元素、内联元素关于text-align:center margin:0 auto的比较

行内元素.块元素的区别 1.行内元素会在一条直线上水平排列 2.行内元素width.height设置无效,padding和margin的上下无效 2.块元素各占一行,垂直排列,相当于末尾有<br>标签 3.块元素可以包含行内元素和块元素,但是行内元素是不能包含块元素的 下面开始上图 首先选择使用一个block  和inline,并给定边框border,方便查看 对于inline设置text-align:center是无效的 后面发现设置宽度 高度也是无效的 因此引入了行内块元素,分别设置宽度,

行内元素与块元素的区别,及常用块元素和常用行内元素

一.行内元素(内联元素)与块元素的区别 1.块元素独占一行,宽度默认100% 行内元素宽度都是它内容的的宽度 2.块元素默认情况可以设置宽度和高度 行内元素默认去.情况不能设置 3.块元素margin.padding上下左右都可以 行内元素只能margin.padding左右,不能上下 二.常用块元素和常用行内元素 1.常用块元素:div.p.form.ul.ol.li,h1,table等, 2.常见行内元素:a,span,em,strong,input,img等

块元素,行内元素,行内块区别

块元素  例如:div,p,ul,dl,ol,li,dd,dt,h1~h6  特点:独占一行,可以设置宽高,可以设置margin,padding,默认情况下宽度=父级元素的宽度  转换成行内 display:inline ****************************************************************************************** 行内元素  例如:a,span,i,em,strong,b,label  特点:不会独占一行,与

行内元素与块级元素的区别,行内块级元素在IE8-的兼容性

行内元素与块级元素的区别 行内元素最好不要包裹块级元素,但是块级元素可以任意的包裹行内元素 行内元素如果其上一个元素也是行内元素,则他们会分布在统一水平线上,即在一行上排列,块级元素不论上一个元素是行内元素还是块级元素都要另起一行,单独占一行. 对于行内元素设置with.height.margin值无效,但对于块级元素,设置这些值是有效的. 行内块级元素在IE8以下的兼容性 div { display: inline-block: *zoom: 1: *display: inline: } 解析