C1认证学习二十三二十四二十五（块级元素与行内元素定位浮动）

Posted 2021-09-27 江 月

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