CSS的盒子模型案例

最新推荐文章于 2024-03-18 20:33:21 发布
最新推荐文章于 2024-03-18 20:33:21 发布 · 591 阅读 · 0
文章标签：

#数据库

CSS的功能可谓强大，作为程序员，不能只在后台默默无闻，也要到前台爽一把，意思意思，这样自己干活从前台

界面到后台数据库就算是全能了。能给自己省了不少力气，艺多不压身嘛，下面来介绍一下CSS里面的盒子模型。

所谓的盒子模型就是指比如Div嵌套Div这里的Div可以理解成为一个盒子，当然了，不一定是Div嵌套Div，还可能

是Div里面嵌套了别的东西，不管嵌套了什么，都可以把他们叫做盒子模型。

下面来演示一个模仿很多大型网站的一个多用户图像显示的效果，看着简单，其实做起来不是那么的容易。

首先上HTML代码，这个容易

<!DOCTYPE html> <html> <head> <title>box.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <link rel="stylesheet" href="../css/box.css" type="text/css"></link> </head> <body> <div class="div1"> <ul class="faceul"> <li><img src="/HTML/img/cat2.jpg"/><br/><a href="#">小猫</a></li> <li><img src="/HTML/img/cat2.jpg"/><br/><a href="#">小猫</a></li> <li><img src="/HTML/img/cat2.jpg"/><br/><a href="#">小猫</a></li> <li><img src="/HTML/img/cat2.jpg"/><br/><a href="#">小猫</a></li> <li><img src="/HTML/img/cat2.jpg"/><br/><a href="#">小猫</a></li> <li><img src="/HTML/img/cat2.jpg"/><br/><a href="#">小猫</a></li> <li><img src="/HTML/img/cat2.jpg"/><br/><a href="#">小猫</a></li> <li><img src="/HTML/img/cat2.jpg"/><br/><a href="#">小猫</a></li> <li><img src="/HTML/img/cat2.jpg"/><br/><a href="#">小猫</a></li> <li><img src="/HTML/img/cat2.jpg"/><br/><a href="#">小猫</a></li> <li><img src="/HTML/img/cat2.jpg"/><br/><a href="#">小猫</a></li> <li><img src="/HTML/img/cat2.jpg"/><br/><a href="#">小猫</a></li> </ul> </div> </body> </html>
其实就是一个div里面嵌套了ul然后里面有li和img和href，分别受CSS的控制，大头在CSS这里。

body{ margin: 0px; padding: 0px; } /*用于控制显示的位置*/ .div1{ width: 500px; height:300px; border:1px solid #b4b4b4; margin-left: 400px; margin-top: 100px; } /*用于控制显示图片区域的宽度和高度*/ .faceul{ width: 450px; height: 280px; border:1px solid red; margin-left: 0px; list-style-type: none; } /*用于控制单个图片区域大小*/ .faceul li{ widows: 50px; height: 85px; border: 1px solid blue; float: left; margin-left: 5px; margin-top: 5px; } .faceul a{ font-size: 12px; margin-left: 25px; } .faceul img{ width: 90px; margin-top: 2px; } a:LINK { text-decoration: none; color: red; } a:HOVER { text-decoration: underline; color:blue; } a:VISITED { color: gray; }
分别使用了类选择器，父子选择器。然后还有html选择器，使用的还是挺多的功能，主要是这些东西控制起来不简

单，还是得多练练才行。

效果图


我的感触，设计网页不简单。干啥都不容易啊，不能轻易鄙视前台，谁都不容易，不要对你没有做过的事情下结

论。这是真理！

iteye_3606
关注
css盒子模型案例
weixin_49474155的博客
07-31 925
1.课程导航 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> #a{ width: 200px; height: 300px; border: 1px solid #7FFFD4; } img{ vertical-align: middle;
CSS盒子模型之产品模块案例
weixin_48879289的博客
09-13 969
代码最终运行效果图如下： 代码开始编写前，我们需要编写一行清除样式本身带有的内外边距的代码，该代码用通配符标识了这篇代码的通用，如下：其中padding为内边距样式；margin为外边距。 接着，我们需要构造大致模型——“大的盒子”装上“图片模块”、段落标签、两个“小盒子”（分占一行）。整体布局思路是这样，接着先写出部分代码如下： 那么，“大盒子”起先没有任何修饰，这时，我定义了一个类选择器，先整体body给它个颜色，然后给“大盒子”设置行高，列宽，底色还有在整体页面的边距。部分代码...
css3-盒模型实例.html
08-27
同上
css案例学习之盒子模型
weixin_33778778的博客
11-23 159
定义：每个盒子都有：边界、边框、填充、内容四个属性； 每个属性都包括四个部分：上、右、下、左；这四部分可同时设置，也可分别设置；里的抗震辅料厚度，而边框有大小和颜色之分，我们又可以理解为生活中所见盒子的厚度以及这个盒子是用什么颜色材料做成的，边界就是该盒子与其它东西要保留多大距离。 案例代码： &lt;!DOCTYPE html PUBliC "-//W3C//DTD XHTML...
一个实例带你透析CSS盒子模型
Rookie
08-29 986
文章目录CSS盒子模型简介盒子模型与width/height之间的关系一个玩转margin的实例结语 CSS盒子模型简介 当对一个文档进行布局（lay out）的时候，将所有元素表示为一个个矩形的盒子（box）。每个盒子由四个部分（或称区域）组成。如图，与盒子的四个组成区域相对应，每个盒子有四个边界：内容边界 content、内边距边界 padding、边框边界 border、外边框边界 margin。 这是chrome开发者工具element面板中style部分的一个盒子模型图，如果有对chrome开发
新浪导航案例
绿色水杯
08-22 620
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { ma
css盒子模型实例
张亚运的专栏
11-25 2262
.html代码如下： 2 3 4 CSS Box Model 5 6 body 7 { 8 background: #333; 9 } 10 div 11 { 12 height: 240px; 13 w
CSS盒子模型教程PPT课件.pptx
10-10
CSS 盒子模型教程 CSS 盒子模型是指浏览器对网页中的各个元素...盒子模型的案例包括调整网页中的对齐方式、理解盒子的各个属性、理解空格的影响、理解 body 标记的 margin 属性、如何利用 CSS 控制页面特定的元素等。
超详细的学习笔记：CSS盒子模型（附代码示例）
lbcbjtlhmjq的博客
07-11 2836
盒子的概念1.页面中的每一个标签，都可看做是一个 “盒子”，通过盒子的视角更方便的进行布局2.浏览器在染(显示)网页时，会将网页中的元素看做是一个个的矩形区域，我们也形象的称之为 盒子盒子模型CSS 中规定每个盒子分别由: 内容区域 (content) 、内边距区域 (padding) 、边框区域(border) 、外边距区域(margin)构成，这就是盒子模型记忆:可以联想现实中的包装盒。
CSS——CSS盒子模型（重点※）
热门推荐
流楚丶格念的博客
06-29 1万+
是你的温柔导论看透网页布局的本质盒子模型（Box Model）盒子边框（border）盒子边框写法总结表表格的细线边框圆角边框(CSS3)内边距（padding）外边距（margin）外边距实现盒子居中文字盒子居中图片和背景区别清除元素的默认内外边距外边距合并相邻块元素垂直外边距的合并嵌套块元素垂直外边距的合并content宽度和高度盒子模型布局稳定性盒子阴影盒子基本训练案例导航栏案例※新闻内容布局美化案例※ 导论 其实，CSS就三个大模块： 盒子模型 、 浮动 、 定位，其余的都是细节。要求这三部分，无
CSS+DIV-盒子模型示例.zip
11-03
CSS+DIV-盒子模型示例.zip
css盒子模型及其实战案例（上），web前端CSS全局样式
m0_61041374的博客
03-18 1041
*JavaScript：**JavaScript基础，JavaScript数据类型，算术运算，强制转换，赋值运算，关系运算，逻辑运算，三元运算，分支循环，switch，while，do-while，for，break，continue，数组，数组方法，二维数组，字符串。**CSS：**CSS代码语法，CSS 放置位置，CSS的继承，选择器的种类/优先级，背景样式，字体样式，文本属性，基本样式，样式重置，盒模型样式，浮动float，定位position，浏览器默认样式。
css之盒子模型案例
态度决定高度A=X+Y+Z
05-22 1255
/* 盒子模型: 盒子模型就是把一个html边框比作成了一个盒子的边框，盒子模型要做用于操作数据与边框之间的距离或者 是边框与边框之间的距离。 盒子模型主要是用于操作内边距(padding)与外边距（margin） */ div{ border-style:solid; width:100px; height:100px; /* 内边距 */ padding
实例-CSS盒子模型演示
qq_45348373的博客
12-01 483
最近呢就是有朋友问我css盒子模型的演示，所以今天我将给大家讲一讲盒子模型。然后呢，我会很系统的将这一课讲完，内容比较多也希望各位能够仔细观看，看懂了，实操一下也就会了。
css盒子模型及实例
龙行天下 欢迎来我的地盘
10-24 892
1.概述css盒子模型 1>先看看w3c的概述 2>其实css每个元素都是一个盒子（盒模型） 2.css盒子模型种类 1>w3c标准模型—————————>element空间宽度 = content内容 + border + padding + margin 2>IE传统模型（IE6-）—————>element = content = content(border + paddin
CSS笔记4-盒子模型案例
PIUYIXIU的博客
10-27 562
案例一： 鼠标事件+背景图片+边框格式设置 <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <style type="text/css"> li{ list-style-type:none; } body,ul,li,h1{ margin:0; padding:0; } div ul li a{ text-decorat
css盒子模型及其实战案例（下）
阿牛的博客
02-04 2008
今天总结盒子模型剩下的一点内容，包括圆角边框，盒子阴影，文字阴影
CSS盒子模型
w1404273025的博客
05-30 1543
CSS盒子模型（04）
css盒子模型布局案例
最新发布
03-28
### 关于CSS盒子模型布局的实际案例 #### CSS盒子模型概述 CSS盒子模型是网页布局的核心概念之一，它定义了HTML元素如何占据空间以及与其他元素的关系。每个HTML元素都被视为一个矩形盒子，该盒子由内容区域(content)、内边距(padding)、边框(border)和外边距(margin)组成[^2]。 以下是几个实际的CSS盒子模型布局示例： --- #### 示例1：简单的两栏布局 这是一个经典的两栏布局例子，展示了如何使用`float`属性来创建并排排列的两个列。 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Two Column Layout</title> <style> .container { width: 100%; overflow: hidden; } .left, .right { float: left; padding: 10px; border: 1px solid black; } .left { width: 70%; /* 左侧宽度 */ } .right { width: 29%; /* 右侧宽度 */ margin-left: 1%; /* 防止溢出 */ } </style> </head> <body> <div class="container"> <div class="left">左侧内容</div> <div class="right">右侧内容</div> </div> </body> </html> ``` 此代码片段展示了一个基本的两栏布局，其中`.left`和`.right`类分别代表左栏和右栏。通过设置不同的宽度和浮动方向，实现了水平排列的效果[^4]。 --- #### 示例2：Flexbox实现响应式卡片布局 现代Web开发中，Flexbox是一种更灵活的方式用于构建复杂的布局结构。下面是一个基于Flexbox的响应式卡片布局实例。 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Card Layout with Flexbox</title> <style> .card-container { display: flex; justify-content: space-around; flex-wrap: wrap; } .card { box-sizing: border-box; width: calc(33% - 20px); /* 自适应三列布局 */ margin: 10px; padding: 20px; border: 1px solid gray; background-color: lightblue; } </style> </head> <body> <div class="card-container"> <div class="card">卡片1</div> <div class="card">卡片2</div> <div class="card">卡片3</div> <div class="card">卡片4</div> </div> </body> </html> ``` 在这个示例中，`.card-container`被配置为flex容器，而`.card`作为其子项自动按照设定的比例分布。这种技术非常适合动态数量的内容布局。 --- #### 替换元素的应用场景 除了常规的布局需求之外，在某些情况下还需要处理特殊类型的元素——即替换元素(replaced elements)，比如图像(`<img>`), iframe嵌入框架(`<iframe>`), 或者视频播放器(`<video>`)等。对于这类对象来说，虽然内部呈现不受外部样式表直接影响，但是仍然可以通过调整它们所在的盒型尺寸参数达到预期视觉效果[^3]。 例如，如果想让图片完全填充父级容器而不失真，则可采用如下方法: ```css img { max-width: 100%; height: auto; } ``` 上述规则确保任何大小的图片都不会超出其容器边界，并保持原始比例不变。 --- ### 总结 以上介绍了几种典型的CSS盒子模型应用场景及其对应的解决方案。无论是传统的浮动法还是现代化的弹性网格体系(Flexbox/Grids)，都离不开对基础理论的理解与实践操作相结合的过程。掌握好这些技巧之后便能更加自如地应对各种复杂的设计挑战。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值