【CSS】盒子模型案例 ( 盒子模型尺寸计算 | 盒子模型水平居中 | 盒子模型内外边距设置 | 背景图片及位置设置 | 盒子嵌套设置 )
文章目录
- 一、实现效果
- 二、基本 HTML 结构
- 三、设置最外层盒子样式 ( 盒子模型内外边距设置 )
- 四、设置标题盒子样式 ( 盒子模型尺寸计算 | 盒子模型水平居中 )
- 五、设置列表盒子样式 ( 删除列表样式 | 背景图片及位置设置 )
一、实现效果
实现如下效果 :
二、基本 HTML 结构
先设置基本的 HTML 标签结构 , 和 清除所有元素的内外边距 ;
使用 通配符选择器 * 设置所有标签的默认内外边距为 0 ;
/* 清除标签默认的内外边距 */* {padding: 0; margin: 0;}
代码示例 :
<!DOCTYPE html>
<html lang="en">
<head> <meta charset="UTF-8" /> <title>盒子模型示例</title><base target="_blank"/><style>/* 清除标签默认的内外边距 */* {padding: 0; margin: 0;}</style>
</head>
<body><!-- 最外层盒子 --><div class="box"><!-- 标题盒子 --><h2>我的成就</h2><!-- 列表盒子 --><ul><li><a href="#">2021年度博客之星TOP 9</a></li><li><a href="#">博客专家认证</a></li><li><a href="#">获得12,223次点赞</a></li><li><a href="#">内容获得5,055次评论</a></li><li><a href="#">获得27,784次收藏</a></li></ul></div>
</body>
</html>
展示效果 :
三、设置最外层盒子样式 ( 盒子模型内外边距设置 )
将 效果图片拖动 到 Adobe Fireworks 中 , 使用 切片工具 分析盒子模型 :
- 整个盒子的尺寸为 339 x 238 像素
- 盒子顶部的内边距为 16 像素
- 盒子左侧的内边距为 16 像素
盒子尺寸为 339 x 238 像素 , 如果设置 16 像素内边距 , 则 内容尺寸需要在盒子尺寸的基础上 , 宽高各减去 16 * 2 像素 ;
设置的最外层盒子模型样式 :
.box {/* 尺寸设计 : 339 x 238 , 内容尺寸要减去宽高内边距 16 px * 2 */width: 307px;height: 206px;/* 盒子模型水平居中 */margin: 0 auto;/* 设置内边距 需要结合内容尺寸 以及总体尺寸进行设计 */padding: 16px;/* 测试背景 */background-color: pink;}
显示效果 :
四、设置标题盒子样式 ( 盒子模型尺寸计算 | 盒子模型水平居中 )
在 Fireworks 中测量标题盒子样式 :
- 顶部标题盒子高度是 50 像素
- 文字大小为 17 像素
- 文字顶部有 16 像素 内边距 , 顶部使用外部模型盒子的内边距 , 可以不设置
- 文字底部有 16 像素 内边距
- 文字左侧有 16 像素 内边距 , 左侧使用外部模型盒子的内边距 , 可以不设置
- 标题盒子有一个 1 像素的下边框
代码示例 :
<!DOCTYPE html>
<html lang="en">
<head> <meta charset="UTF-8" /> <title>盒子模型示例</title><base target="_blank"/><style>/* 清除标签默认的内外边距 */* {padding: 0; margin: 0;}.box {/* 尺寸设计 : 339 x 238 , 内容尺寸要减去宽高内边距 16 px * 2 */width: 307px;height: 206px;/* 盒子模型水平居中 */margin: 0 auto;/* 设置内边距 需要结合内容尺寸 以及总体尺寸进行设计 */padding: 16px;/* 测试背景 */background-color: pink;}.box h2 {/* 字体大小 */font-size: 17px;/* 取消标题的粗体显示 */font-weight: 400;/* 设置底部内边距 16 像素 */padding-bottom: 16px;/* 底部边框 */border-bottom: 1px solid #ccc;/* 测试背景 */background-color: blue;}</style>
</head>
<body><!-- 最外层盒子 --><div class="box"><!-- 标题盒子 --><h2>个人成就</h2><!-- 列表盒子 --><ul><li><a href="#">2021年度博客之星TOP 9</a></li><li><a href="#">博客专家认证</a></li><li><a href="#">获得12,223次点赞</a></li><li><a href="#">内容获得5,055次评论</a></li><li><a href="#">获得27,784次收藏</a></li></ul></div>
</body>
</html>
显示效果 :
五、设置列表盒子样式 ( 删除列表样式 | 背景图片及位置设置 )
在 Fireworks 中测量标题盒子样式 :
列表项的左侧有默认的圆点 ,
先使用
/* 删除列表样式 */li {list-style: none;}
样式 , 取消列表的默认样式 ;
无序列表的上边距为 10 像素 , 这里可以设置为 上边的 标题盒子 的 下外边距 , 以免出现 外边距塌陷的情况 ;
.box h2 {/* 字体大小 */font-size: 17px;/* 取消标题的粗体显示 */font-weight: 400;/* 设置底部内边距 16 像素 */padding-bottom: 16px;/* 底部边框 */border-bottom: 1px solid #ccc;/* 距离无序列表第一项有 10 像素间隔 */margin-bottom: 10px;}
一条完整的 列表项如下 :
- 左侧图片大小 22 x 22 像素 , 垂直居中 , 紧贴左侧
- 文字距离左侧边界 32 像素
- 文字大小 12 像素
- 整体盒子高度 34 像素
列表项的样式为 :
/* 删除列表样式 */li {list-style: none;}.box ul li {height: 34px;/* 垂直居中 */line-height: 34px;/* 背景不重复 位置 水平 0 像素 垂直居中 */background: url(images/icon_1.png) no-repeat 0 center;/* 文字距离左侧有 32 像素 */padding-left: 32px; }
链接样式为 : 只需要关注字体大小即可 ;
.box ul li a {/* 设置文字颜色与大小 */color: #333;font-size: 12px;/* 取消底部链接横线 */text-decoration: none;}
完整代码示例 :
<!DOCTYPE html>
<html lang="en">
<head> <meta charset="UTF-8" /> <title>盒子模型示例</title><base target="_blank"/><style>/* 清除标签默认的内外边距 */* {padding: 0; margin: 0;}.box {/* 尺寸设计 : 339 x 238 , 内容尺寸要减去宽高内边距 16 px * 2 */width: 307px;height: 206px;/* 盒子模型水平居中 */margin: 0 auto;/* 设置内边距 需要结合内容尺寸 以及总体尺寸进行设计 */padding: 16px;}.box h2 {/* 字体大小 */font-size: 17px;/* 取消标题的粗体显示 */font-weight: 400;/* 设置底部内边距 16 像素 */padding-bottom: 16px;/* 底部边框 */border-bottom: 1px solid #ccc;/* 距离无序列表第一项有 10 像素间隔 */margin-bottom: 10px;}/* 删除列表样式 */li {list-style: none;}.box ul li {height: 34px;/* 垂直居中 */line-height: 34px;/* 背景不重复 位置 水平 0 像素 垂直居中 */background: url(images/icon_1.png) no-repeat 0 center;/* 文字距离左侧有 32 像素 */padding-left: 32px; }.box ul li a {/* 设置文字颜色与大小 */color: #333;font-size: 12px;/* 取消底部链接横线 */text-decoration: none;}</style>
</head>
<body><!-- 最外层盒子 --><div class="box"><!-- 标题盒子 --><h2>个人成就</h2><!-- 列表盒子 --><ul><li><a href="#">2021年度博客之星TOP 9</a></li><li style="background-image: url(images/icon_2.png);"><a href="#">博客专家认证</a></li><li style="background-image: url(images/icon_3.png);"><a href="#">获得12,223次点赞</a></li><li style="background-image: url(images/icon_4.png);"><a href="#">内容获得5,055次评论</a></li><li style="background-image: url(images/icon_5.png);"><a href="#">获得27,784次收藏</a></li></ul></div>
</body>
</html>
展示效果 :
【CSS】盒子模型案例 ( 盒子模型尺寸计算 | 盒子模型水平居中 | 盒子模型内外边距设置 | 背景图片及位置设置 | 盒子嵌套设置 )相关推荐
- background-position—CSS设置背景图片的位置
background-position :在 CSS 中通过 background-position 属性可以调整背景图片的位置.因为在默认情况下背景图片都是从设置了 background-posit ...
- CSS再学习(如何设置背景图片透明,弹性盒子,盒子阴影)+HTML冷门知识
目录 css组合器 后代选择器 (空格) 子选择器 (>) 相邻兄弟选择器 (+) 通用兄弟选择器 (~) CSS伪类选择器 什么是伪类? 能干什么? 注意事项 鼠标悬浮提示的功能 first- ...
- html盒子左右边框边距,CSS盒子模型、内外边距、边框、行高、背景
1.盒子模型 所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子,也就是一个盛装内容的容器.每个矩形都由元素的内容.内边距(padding).边框(border)和外边距(margin)组成. ...
- 电脑桌面怎么设置html背景图,css中如何设置背景图片?
在前端开发过程中,为了页面的美观,往往都会给html页面添加背景图片.那么如何利用css设置html中用图片做背景?本章就给大家介绍css怎样设置背景图片. css怎样设置背景图片? css back ...
- css如何设置背景图片?background属性添加背景图片
在前端开发过程中,为了页面的美观,往往都会给html页面添加背景图片.那么如何利用css设置html中用图片做背景?本章就给大家介绍css怎样设置背景图片.有一定的参考价值,有需要的朋友可以参考一下, ...
- php背景图片 存放位置,CSS中背景图片位置 background-position 的使用方法
在使用背景图片时,经常会遇到背景图片所在的位置不是我们想要的,那如何设置背景图片的位置呢?以下就来介绍CSS中背景图片位置 background-position 的用法. 在背景图片的背景图片位置属 ...
- html div背景图片路径,css如何设置背景图片位置?
在使用背景图片时,经常会遇到背景图片所在的位置不是我们想要的,那如何设置背景图片的位置呢?下面我们来看一下css设置背景图片位置的方法. 在背景图片的背景图片位置属性中,background-posi ...
- CSS 设置背景图片
一.基本设置 使用 CSS 可以通过以下属性设置背景图片: background-image: 设置背景图片的 URL. background-size: 设置背景图片的大小.可以设置为绝对像素值,也 ...
- CSS盒子模型(内容区、边框、内外边距)
一.盒子模型 1.什么是盒子模型.为什么要设置盒子模型,盒子模型具体怎么构成,怎么设置? 把各种元素布局到页面,就像想买个桌子,放到家里,要知道桌子的大小,形状,然后才能放到家里所以我们把所有的元素都 ...
最新文章
- Java XML解析器
- Spring boot 整合 Mybatis 实现增删改查(MyEclipse版)
- stm32采集正弦波峰峰值_科研项目 | 基于STM32的永磁同步电机SVPWM控制设计
- Hough直线检测的理解
- Java 面试题问与答:编译时与运行时
- union all会影响性能吗_哪些因素会影响悬臂式掘进机的性能?
- SelectedNode与e.node的区别
- 华为机试HJ11:数字颠倒
- windows10改变鼠标指针
- Lab07 南向协议AC-DCN esight
- 语音转写和语音听写_如何在Windows 10上使用语音听写
- Enzo高灵敏度检测——Arg8-Vasopressin ELISA kit
- 企业邮箱品牌哪家好?四大品牌企业邮箱推荐
- Codevs 4246 奶牛的身高
- ONF执行主席Dan Pitt:下一个战争可能是控制器
- 反激式开关电源输出电压的PID控制之MATLAB仿真
- 伯克利创造出“可看到未来”的机器人,能帮助无人驾驶预测事故
- C语言----- 4/π=1-1/3+1/5-1/7+...,编程计算π的近似值,直到最后一项的值小于10-4次方为止 //输出π的值,并统计累加的项数
- 了解并总结软件工程与计算机科学的关系及区别,你的观点?
- 基于web的拼图游戏