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%的人还看了以下文章

  • CSS实现段落首字下沉效果的2种方法

    CSS实现段落首字下沉效果方法一 在CSS布局中,通过设置首字的大小并向左浮动,从而使得首字与其他字符区别;通过右边距控制首字与其他字符的距离。 #first{font-size:3em; font-weight:bold; float:left; margin-right:20px; } <p><span id=”first”>云&…

    2019年4月2日
    11.7K0
  • 12款纯CSS3实现的优秀导航菜单(含源码下载)

    选12款纯CSS3实现的优秀面包屑导航,只提供在线演示的面包屑导航,你可以点击在线演示,在打开的Demo页面中,右键另存为网页,即可得到源码。

    2022年5月10日 网页制作
    2.8K0
  • 一句代码给图片加倒影-CSS3

    本文使用纯CSS代码给图片加倒影,CSS代码 : img { -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(250, 250, 250, 0.1))); } 效果如下图所示: 完整代码: &lt…

    2019年8月18日
    2.4K0
  • 会移动的文字 marquee标签(入门到高级)

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

    2018年7月30日
    3.6K0
  • 中国省、市区二级联动下拉选择框-JS源码

    中国省、市区二级联动下拉选择框,包含所有省份及市县信息。 当选择省份下拉选择框时,市区的下拉框会根据选择的省市加载出来。如上图所示选择“山东省”,市的下拉选择框只会出现山东省的市县。 1.把中国省份和市区的信息放到JavaScript文件里(js/common.js),中国网页设计在js文件里定义了两个数组,分别存放省份和对应的市区。 //省份 var pr…

    2019年6月5日
    4.5K0
  • 第1课:开始学习HTML

    建议你每天学习2到3课,然后花点时间来实验你所学到的新知识。 学习制作网站是件充满乐趣的事,而且一旦掌握它,你便会感到无比满足。好的,不多说,我们现在就开始吧! 这第一课中,我们简要介绍制作网站所需的工具。 需要哪些工具? “浏览器(browser)”你有了,它是用于浏览网站的程序。你现在就是通过浏览器在观看本页面的。 也许你听说过、甚至用过一些网页制作工具…

    2018年1月20日
    4.2K0

发表回复

登录后才能评论