css布局基础-盒子模型

网页设计的第一步就是设计版面布局,本文介绍了css布局基础-盒子模型,CSS盒模型是描述网页布局的视觉模型中网页元素的矩形盒状模型。盒模型由margin(边界)、border(边框)、padding(填充)和content(内容)4部分组成。

网页设计的第一步就是设计版面布局

用最合适浏览的方式将图片、文字等对象放置在页面的不同位置。

在设计时必须遵循突出重点、平衡和谐的原则,将网站标志、主菜单等重要的模块放在最显眼、最突出的位置,然后再考虑次要模块的摆放。

css布局基础-盒子模型

css布局基础-盒子模型

CSS盒模型是CSS布局的基础,每个网页元素都被抽象为一个盒子,而网页的排版布局可以看作对组成网页的盒子元素按照一定的规则进行摆放后的结果。

CSS盒模型是描述网页布局的视觉模型中网页元素的矩形盒状模型。盒模型由margin(边界)、border(边框)、padding(填充)和content(内容)4部分组成。

margin也被称为外边距,用来设置网页中元素和元素之间的距离,即定义元素周围的空间范围。

border(边框)用来设置网页中元素边框的宽度、颜色和样式。

padding(填充),也称为内边距,用来设置元素的内容与边框之间的距离。

content(内容)是元素的真正内容部分,用来容纳和显示内容。

注意:一个元素出现在另一个元素上面时,上面元素的底外边距与下面元素的顶外边距发生叠加

当元素被设置宽度和高度后,如果元素的区域大小不能容纳元素中的内容,在CSS中需要通过overflow(溢出)属性来控制应该如何显示

visible:如果元素中的内容超出了元素的大小,则允许内容从元素中溢出。
hidden:任何溢出的内容将会被隐藏,不会显示出来。
scroll:元素中会出现水平和垂直的滚动条,可以滚动显示元素中的内容。需要注意的是,即使内容没有溢出元素,元素中仍然会显示水平和垂直滚动条。
auto:浏览器会根据内容溢出的情况,在需要时才显示水平或垂直滚动条。

这就是css布局基础-盒子模型的全部内容,学完了以后做些练习吧!

css布局基础:盒子模型练习

125jz网原创文章。发布者:江山如画,转载请注明出处:http://www.125jz.com/10663.html

(0)
江山如画的头像江山如画管理团队
上一篇 2022年7月10日 上午8:57
下一篇 2022年7月14日 上午9:42

99%的人还看了以下文章

  • 第11课:表格的高级特性

    表格还有哪些相关属性? colspan和rowspan这两个属性用于创建特殊的表格。colspan是“column span(跨列)”的缩写。colspan属性用在<td>标签中,用来指定单元格横向跨越的列数: 例1: <table border=”1″> <tr><td colspan=”3″>单元格1&lt…

    2018年1月19日
    1.8K0
  • 第4课:制作自己的第一个网站

    学完前几节课,现在只需再花几分钟时间,你就能学会如何制作自己的第一个网站了。 如何做呢? 通过第一课,我们知道制作一个网页需要有浏览器和记事本程序(或者类似的文本编辑器)。请打开记事本程序(Notepad):依次选择“开始菜单→程序→附件→记事本”即可。 然后呢? 我们先从简单的做起吧。先试着做一个显示如下内容的网页:“哇!这是我的第一个网站。 ”继续学习,…

    2018年1月20日
    2.5K0
  • 怎么让一长串英文字符自动换行?

    长串英文字符之间没有空格,整串都显示在一行,撑破了div,甚至跑到屏幕外了,如何解决? <!doctype html> <html> <head> <meta charset=”utf-8″> <title>怎么让一长串英文字符自动换行?|www.125jz.com</title> &l…

    2019年11月20日
    1.9K0
  • 会移动的文字 marquee标签(入门到高级)

    会移动的文字(Marquee) 基本语法 <marquee> … </marquee> <marquee> 啦啦啦,我会移动耶! </marquee> 文字移动属性的设置 方向 <direction=#> #=left, right <marquee direction=left&…

    2018年7月30日
    3.2K0
  • css布局基础:行内元素、块级元素练习

    主要知识点: 1、理解什么是行内元素?什么是块级元素? 2、知道块级元素能够设置宽高,行内元素不可设置宽高(替换元素可以)。 3、掌握display属性的使用。 4、掌握css伪类选择器的使用。 扩展: 1、nth-child()选择器 选择其父元素的第n个子元素。 效果图: 参考: <nav> <ul> <li><…

    2020年4月4日
    2.1K0
  • 网页制作常用正则表达式大全、正则表达式在线测试工具

    正则表达式,用一段非常简短的表达式语句,便能够快速实现一个非常复杂的业务逻辑。正则表达式经常被用于字段或任意字符串的校验。熟练地掌握正则表达式的话,能够使你的开发效率得到极大的提升。 正则表达式在线测试工具 regex101是一个非常不错的正则表达式在线测试工具,你可以直接在线测试你的正则表达式。 网页制作常用正则表达式 1 用户名正则 //用户名正则,4到…

    2018年9月12日
    3.2K0

发表回复

登录后才能评论