谈谈Web布局的基本认知

May最近周末至少会利用一天的时间泡在培训班。回顾一下老师讲的Web布局的基本认知。Web布局大致简单分为浮动布局和不浮动布局。再谈这两种布局之前,我们一定要了解一个概念-盒子模型。

一. 什么是盒子模型?

我们可以把网页的一些功能板块理解为是一个个盒子模型。当我们审查某个元素的时候,可以看到一个盒子模型。文章源自MAY的SEO博客-https://may90.com/building/web-layout-basis.html

盒子模型举例文章源自MAY的SEO博客-https://may90.com/building/web-layout-basis.html

右下角就是一个盒子模型:文章源自MAY的SEO博客-https://may90.com/building/web-layout-basis.html

内容区Content:1122x88px文章源自MAY的SEO博客-https://may90.com/building/web-layout-basis.html

内边距Padding文章源自MAY的SEO博客-https://may90.com/building/web-layout-basis.html

边框border文章源自MAY的SEO博客-https://may90.com/building/web-layout-basis.html

外边距margin文章源自MAY的SEO博客-https://may90.com/building/web-layout-basis.html

一个盒子的总宽度为:左外边距+左边框+左内边距+内容区宽度+右内边距+右边框+右外边距文章源自MAY的SEO博客-https://may90.com/building/web-layout-basis.html

一个盒子的总高度为:上外边距+上边框+上内边距+内容区宽度+下内边距+下边框+下外边距文章源自MAY的SEO博客-https://may90.com/building/web-layout-basis.html

二. 不浮动布局

1. 宽度文章源自MAY的SEO博客-https://may90.com/building/web-layout-basis.html

1.1. 盒子默认是有宽度的,宽度都是由父级所决定的;

1.2. 一旦盒子被指定宽度后,将不受到任何的限制;

1.3. 盒子被指定相对百分比的宽度,这里的“相对”是指相对于它的直接父级。

2. 高度

2.1. 盒子默认是没有高度的,一般由子级撑开;

2.2. 不要轻易给盒子设置高度。

三. 浮动布局

1. 语法

浮动 方向 浮动方向
float left float: left;  向左浮动
right float: right;  向右浮动
none float: none;  不浮动

2. 宽度

2.1. 盒子默认是由内容撑开的;

2.2. 如果被父级宽度限制了,会自动换行;

2.3. 盒子被指定固定宽度后,将不受到任何的限制;

2.4. 盒子被指定相对百分比的宽度,这里的相对是只相对于它直接父级的宽度。

3. 高度

盒子默认是没有高度的,不要轻易给盒子设置高度。

4. 父级高度塌陷

一旦子级都浮动后,父级的高度就会塌陷,如何解决?

方法1. 给父级添加 overflow: hidden;

方法2. 给最后一个子级添加标签

<div class="clearfix"></div>

然后给这个标签添加CSS:

.clearfix{clear: both;}

你看懂了吗?

 

我的微信
扫一扫微信,添加好友
weinxin
我的微信
我的微信公众号
关注公众号,了解最新动态
weinxin
我的公众号
 
  • 本文由 MAY的SEO博客 发表于 2018年12月25日
  • 转载请务必保留本文链接:https://may90.com/building/web-layout-basis.html
CSS样式表优化方法与技巧 SEO优化

CSS样式表优化方法与技巧

HTML好比是构建网页的框架,那么CSS样式表就好比是用来美化装饰网页,外在的视觉体验,往往是影响用户体验的一个重要参考因素;那CSS样式表有哪些优化方法与技巧呢? 有三种方法可以给网站添加CSS样式...
HTML行内元素与块级元素的特点及相互转换 SEO资源

HTML行内元素与块级元素的特点及相互转换

May一看到代码就会特别头疼,所以一直在学习代码SEO资源相关知识,以下为个人总结。 一. 行内元素 1. 不能设置宽高 a. 宽度与子级中的内容一样宽; b. 高度与子级中的内容一样高; 2. 在一...
CSS属性的优先级与继承性 SEO资源

CSS属性的优先级与继承性

May此刻正泡在培训班学习SEO资源CSS相关知识,以下是今天所学内容的总结。 一. 优先级 父级与子级拥有相同属性时,子级优先。 二. 继承性 子级会继承父级的属性; 不是所有的属性都有继承性; 技...
10个WordPress图片优化插件提高页面速度 SEO建站

10个WordPress图片优化插件提高页面速度

很多时候,图片是页面大小的一部分,这意味着优化它们可以极大地提高您的网站速度。鉴于页面速度对搜索排名和用户体验的重要性,在WordPress网站上,图片优化插件可以快速、一致地优化图片大小以提高页面速...
    • 阿南 4

      学习了

    评论已关闭!