Web前端开发技术与实践-布局.pptx

Web前端开发技术与实践 布局 1 本章主要内容 定位与布局的基本属性 多列布局 盒布局 案例：网页布局 2 1.定位与布局的基本属性 布局是指对网页中各个构成要素的合理编排，是呈现页面内容的基础。合理的布局将有效的提高页面的可读性，提升用户体验。 通过定位与布局的基本属性，可以确定元素的位置，并实现页面多种多样的布局。 3 1.1基本属性 1.定位与布局的基本属性 4 1.1基本属性 1.定位与布局的基本属性 5 1.1基本属性 1.定位与布局的基本属性 外边距属性 margin属性可以设定元素的所有外边距。 该属性可以通过1-4个正负值进行设置，其值可以为像素、百分比等单位，也可从父元素继承外边距。 可以通过margin-top、margin-right、margin-bottom、margin-left属性分别设置。 6 1.2外边距与内边距 1.定位与布局的基本属性 具体语法： 7 1.2外边距与内边距 1.定位与布局的基本属性 行内元素的外边距 当行内元素定义外边距时，只能看到左右外边距对布局的影响，但是上下外边距犹如不存在一般，不会对周围元素产生影响。 块级元素的外边距 对于块级元素来说，外边距都能够很好的被解析。可以用“display”属性来改变元素的表现形式来保证元素对外边距的支持。 8 1.2外边距与内边距 1.定位与布局的基本属性 内边距属性 padding属性可以设定元素的所有内边距。该属性可以通过1-4个正负值进行设置，其值可以为像素、百分比等单位，也可从父元素继承外边距。 可以通过padding-top、padding-right、padding-bottom、padding-left属性分别设置。 9 1.2外边距与内边距 1.定位与布局的基本属性 具体语法： 10 1.2外边距与内边距 1.定位与布局的基本属性 float 网页的布局主要通过float属性来实现，float 属性定义元素在哪个方向浮动。 属性值有以下四种情况： left定义向左浮动。 right定义向右浮动。 none为float属性的默认值，表示元素不浮动，并会显示在其在页面中出现的位置。 inherit规定应该从父元素继承float属性的值。 11 1.3浮动布局 1.定位与布局的基本属性 浮动元素特性 当一个元素被设置为浮动元素后，元素本身的属性会发生一些改变，具体如下: 空间的改变。 位置的改变。 布局环绕。 当元素被定义为浮动显示时，它会自动成为一个块状元素，相当于定义了“display:block;”。但是块级元素会自动伸张宽度，占据一行位置，且块级元素会附加换行符，所以在同一行内只能显示一个块级元素。而浮动元素虽然拥有块级元素的特性，但是它并没有上述表现，这时它更像行内元素那样收缩显示。 12 1.3浮动布局 13 现场演示： 案例12-01：浮动元素的空间 案例12-02：浮动元素的位置 案例12-03：浮动元素的环绕 案例12-04：图文混排 1.定位与布局的基本属性 clear属性规定元素的哪一侧不允许存在其他浮动元素，属性值有五种情况： left、right、both left、right、both分别规定在左侧不允许浮动元素、在右侧不允许浮动元素和在左右两侧均不允许浮动元素。 none none为clear元素的默认值，允许浮动元素出现在两侧。 inherit inherit规定应该从父元素继承clear属性的值。 14 1.3浮动布局 1.定位与布局的基本属性 元素浮动以后，其所在的位置会被下方不浮动的元素填充掉，而有些时候这样的填充会破坏页面布局，clear元素可以解决这个问题。在不浮动元素中添加与浮动元素float属性值相同的clear属性值，会使不浮动元素显示在浮动元素的下边距边界之下。 浮动元素也可以添加clear属性，添加的clear属性的属性值只有和float属性的属性值相同时才能起作用，即当元素向左浮动时只能清除元素的左浮动，而不能将属性值设为清除右浮动。 15 1.3浮动布局 16 现场演示： 案例12-05：清除浮动 1.定位与布局的基本属性 定位坐标值 为了灵活的定位页面元素，CSS定义了4个坐标属性：top、right、bottom和left。通过这些属性的联合使用，可包含块的4个内顶角来定位元素在页面中的位置。 top属性表示定位元素顶边外壁到包含块元素顶部内壁的距离。 right属性表示定位元素右边外壁到包含块元素右侧内壁的距离。 left属性表示定位元素左边外壁到包含块元素左侧内壁的距离。 bottom属性表示定位元素底边外壁到包含块元素底部内壁的距离。 17 1.4定位布局 1.定位与布局的基本属性 position position属性用于确定元素的位置，该属性可将图片放置