分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 技术分享

网页的布局方式

发布时间:2023-09-06 02:16责任编辑:蔡小小关键词:暂无标签

1、什么是网页的布局方式

网页的布局方式其实就是指浏览器是如何对网页中的元素是如何排版的

1、标准流(文档流/普通流)排版方式

  1.1、浏览器默认的排版方式

  1.2、在css元素中,分为行内元素,块级元素,行内块级元素

  1.3、在标准流中有两种排版,一种是垂直排版,一种是水平排版;

  垂直排版:如果元素是块级元素

  水平排版:如果元素是行内块级元素

  

2、浮动流排版方式

  2.1、浮动流是一种半脱离标准流的排版方式

  2.2、只有一种排版方式,就是水平排版;

    它只能设置某个元素向左或者向右对齐

注意:

  1、浮动流中没有居中对齐,center,的方式;

  2、在浮动流中是不可以使用margin:0 auto;

特点:

  1、在浮动流中是不区分块级元素/行内元素/行内块级元素都可以水平排版

  2、在浮动流中不论是块级元素/行内元素/行内块级都可以设置宽高的。

什么是浮动元素的脱标?

  脱标:脱离标准流

  1、当某一个元素浮动之后,那么这个元素看上去就像从标准流中删除一样,这个就是浮动元素的脱标

  2

浮动元素脱标有什么影响?

  

浮动元素排序规则:

  1、相同方向上的浮动元素,先浮动的元素会显示在前面,后浮动的元素会显示在后面

  2、不同方向上的浮动元素,左浮动会找左浮动,右浮动找右浮动;

  3、浮动元素浮动之后的位置,有浮动复原之前在标准流中的位置来确定

  

网页的布局方式

原文地址:https://www.cnblogs.com/wzlol/p/9728834.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved