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

Posted 2020-10-04 稀里糊涂林老冷

块元素特性

块元素，也可以称为行元素，布局中常用的标签如：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 元素以内联块元素显示