学习内容:
CSS的元素显示模式:
块元素/行内元素/行内块元素
元素显示模式转换
简洁版小米侧边栏案例
CSS的元素显示模式
1.什么是元素显示模式
作用: 网页的标签非常多,在不同的地方会使用不同类型的标签...块元素的特点:
①比较霸道,自己独占一行.
②高度,宽度,行边距以及内边距都可以控制.
③宽度默认是容器(父级宽度)的100%
④是一个容器及盒子,里面可以放行内或者块级元素....注意:
文字类的元素内不能使用块级元素
标签主要用于存放文字,因此标签连不能放块级元素,特别是不能放....行内块元素的特点:
①和相邻行内元素(行内块)在一行上,但是他们之间会有空白缝隙,一行可以显示多个(行内元素特点).
②默认宽度就是它本身内容的宽度(行内元素特点).
③高度,行高,外边距以及内边距都可以控制...还有一些其他的元素转换的方法:
转换成块元素:display:block
转换成行元素:display:inline
转换成行内块元素:display:block-inline
课堂案例:
制作一个简洁版的小米侧边栏