HTML入门02

标签的分类

• 1.块级元素（display:block）
  • 独占一行
  • 如果不设置宽度，会撑满父级的宽
  • 可以设置宽高、外边距、内填充
  • 排列方式：上下
  • h1~h6、p、ul ol li dl dt dd、div
• 2.行内元素（display:inline）
  • 可以和行内元素共占一行
  • 写宽高不起作用，并且上下方向上的外边距和内填充是不能设置的，他的大小由内容决定
  • 排列方式：从左到右
  • b/strong i/em s/del u/ins a span
• 3.行内块级元素（display:inline-block）
  • 可以设置宽高
  • 可以和行内样式共占一行
  • 排列方式：左右
  • img、audio、video

注意：行内块是比较特殊的行内元素，比如img，像文字类的，p标签里面不能放块级元素，浏览器在渲染的时候会出现问题

标签

• 标题标签:h1~h6
• 图片标签:img
• 段落：p
• 超链接：a
• 格式化：b/strong i/em s/del u/ins
• 三个列表：ul ol li dl dt dd
• 大盒子：div
• 小盒子：span
• 音乐：audio
• 视频：video

display的几个值

1. block块级元素/显示
2. inline行级元素
3. inline-block行内块级元素
4. none隐藏

面试题

1.隐藏元素有哪几种方式，有什么区别？

5种 display:none visibility:hidden opacity：0 margin负值 宽高设置为0
区别就是display:none,隐藏后不占用空间，visibility:hidden与opacity：0隐藏后只是看不见了，但是占用的空间还在，opacity：0是把不透明度降低为0,宽高为0以后只是盒子不显示，文字还在

CSS常用的样式

1）清除页面中所有元素的margin和padding

*是通配符选择器，代表选中页面中的所有元素，把所有元素的margin和padding清为0

*{
margin:0;
padding:0;
}

2）清除列表前面默认样

        ul,ol{
            list-style:none;
        }

3) 清除a标签文本的下划线

 a{
            text-decoration:none;
                        /* none清除 underline显示 
            text-decoration: underline;*/
        }
 

4）宽、高、背景颜色

            width:100px;
            height: 100px;
            background-color: red;