1.块级元素和行内元素分别有哪些?
1.块级元素:
<div></div>、<p></p>、h1~h6、<table></table>、<caption>table的标题</caption>
<form action=""></form>
<ul> <li></li> </ul>
<ol> <li></li> </ol>
<dl> <dt></dt> </dl>
<dl> <dd></dd> </dl>空元素:没有内容的html元素
<br>换行 、 <hr>水平分割线 、 <meta>2.行内元素:
<a></a>超链接
<b></b>加粗
<span></span> 最常用的行内元素
<img src="" alt=""> 图片
<input type="text"> 文本框
<strong></strong> 加粗
<select name="" id=""></select> 下拉框
<label for=""></label>
for属性 :
功能:表示Label标签要绑定的HTML元素,你点击这个标签的时候,所绑定的元素将获取焦点。
用法:<input id="InputBox" type="text">
<label for="InputBox">姓名</label><button></button>
<textarea name="" id="" cols="30" rows="10"></textarea>
<em></em>
<i></i>
<u></u>
2.行内元素和块级元素的区别
1.块级元素独占一行,可以直接设置宽高属性,宽度占满整个父级元素,高度由子级撑起。
行内元素可以与其他元素共享一行,
- 2.宽度、高度由子集元素撑起,不能直接设置宽和高
- 3.不能直接设置上下的内外边距,可以设置距离浏览器左右边距
2.块级元素可以包含块级元素和行内元素,行内元素只能包含文本元素和行内元素
3.行内元素理论上不能设置宽高,但是加上css属性可以设置宽高
3.如何将一个块级元素或者行内元素水平垂直居中?
-
行内元素水平垂直居中
父元素flex布局,且属性justify-content:center; 和 align-items:center ;设置子元素在父元素内垂直且水平居中
-
定宽定高块级元素水平垂直居中
1.不定宽定高(子元素)
- 父元素flex布局,子元素margin:auto;
2.定位+0偏移+子元素margin:auto;
- 父元素相对定位,子元素绝对定位,top、left、bottom、right为0,同时子元素设置margin:auto;
3.绝对定位+margin:
- 父元素相对定位,子元素绝对定位,top、left值为父元素的一半,此时子元素的左上角位于父元素的中心,再利用margin-left和margin-top移动,值分别为子元素宽高的一半