C1认证学习二十三、二十四、二十五(块级元素与行内元素、定位、浮动)
二十三
任务背景
HTML中元素大多数是块级元素或者是行内元素,浏览器在显示页面的时候,对这两类元素的默认处理方法是不一样的。
任务目标
1、理解块级元素以及行内元素的区别
2、掌握块级元素以及行内元素的转换方法
块级元素
在浏览器中总是独占一行
宽高、内外边距可以控制,而且上下左右的外边距均可以对周围的元素产生影响
可以包含内容、行内元素以及其他块级元素
宽度未设置的时候默认为父级元素的宽度,高度未设置的时候是内容的高度
常见的快有:
div、form、footer、h1-h6、ol、ul、p、video
设置display属性是display:block可以将元素转换为块级元素。
行内元素
不独占一行
宽高、上下边距不可以控制,仅有左右的边距可以控制而且会对周围的元素产生影响
一般只能包含内容以及其他行内元素,不可以包含块级元素
宽高未设置的时候默认是内容的宽高
常见的行内元素有:
span、label、a、em、strong、img
设置display属性的值是display:inline可以将元素转换为行内元素
行内块级元素
综合块级元素以及行内元素的特性
不独占一行
元素的宽高、内外边距均可以设置,上下左右边距会对周围的元素产生影响
宽高未设置的时候是内容的宽高
常见的行内块级元素有:
button、input、textarea、select
设置display属性是display:inline-block可以将元素转换为行内块级元素
二十四
任务背景
在一个网页的排版布局中,定位属性是最重要的属性之一,能够熟练使用定位布局对页面的美化有很好的的帮助。
任务目标
1、理解什么是脱离文档流
2、掌握position定位的特性以及使用方法
3、掌握层级属性z-index的使用
脱离文档流
文档流指的是在元素排版的过程中,元素会自动从上到下,从左到右进行排列,这叫文档流
position定位
position定位用于指定元素的定位的类型,属性的值是:
static
relative
absolute
fixed
sticky
二十五
任务背景
浮动属性
这个属性的产生之初是为了实现“文字环绕的效果”,让文字环绕在网页中实行类似于word中的图文混排,浮动可以使用于任何的一个元素,在页面布局中发挥着巨大的作用。
任务目标
1、理解CSS的浮动属性
2、掌握浮动的布局
float
float属性用于设置元素是否浮动,absolute属性定位的元素会忽略掉float属性的
none
left
right