前端开发HTML+CSS之盒子模型(四)
在了解了最基本和最简单的网页制作之后,我们需要开始关注细节问题,比如我们期望的背景和文本的分布问题,如何才能达到我们预期的效果,如何更加的美观,如何让用户具有更好的体验感受,才是我们更加需要关注的
故我们开始讲解盒子模型,也就是一个块内的分布以及块外的布局的逻辑关系
同时在开头介绍一个小技巧,刚设计网页的盒子模型时,你可能不能正确的设计外边距,内边距,导致一些块之间的距离不能得到很好的控制,故这个时候我们可以通过检查网页的源代码来得到
右键网页任意一个地方 – 检查 – 得到HTML代码
或者通过组合键ctrl+shift+I
或F12功能键
点击不同的代码块,左部分可显示该代码块所占的区域,从而可通过检查不同的块来知道是哪一块的内外边距没有设置好
在正式进行盒子模型叙述之前,我们先来看一段代码
这段代码位于body内
div {border: 1px solid red; /*边框样式*/margin: 10px; /*外边距*/padding: 16px; /*内边距*/width: 600px; /*宽度*/height: 500px; /*高度*/
}
这为一个盒子的基本属性
一、盒子边框设置
边框包括盒子的内边距和内容
边框风格
即边框的形状,可同时设置4个边框也可以分别设置
属性 | 描述 |
---|---|
border-style | 同时设置4个方向的风格 |
border-bottom-style | 下边框风格 |
border-left-style | 左边框风格 |
border-right-style | 右边框风格 |
border-top-style | 上边框风格 |
参数值 | 描述 |
---|---|
none | 无边框,默认值 |
dotted | 点状 |
dashed | 虚线 |
solid | 实线 |
double | 双实线 |
groove | 3D凹槽 |
ridge | 3D垄状 |
inset | 内嵌一个立体边框 |
outset | 外嵌一个立体边框 |
inherit | 父元素继承 |
e.g.
border-style: dashed; /*均为虚*/
border-style: dashed solid; /*上下为虚,左右为实*/
border-style: dashed solid dotted; /*上为虚,左右为实线,下为点;*/
border-style: dashed solid double dotted; /*上为虚,右为实线,下为实线,左为点线*/
边框宽度
属性 | 描述 |
---|---|
border-width | 同时设置4个方向的宽度 |
border-bottom-width | 下边框宽度 |
border-left-width | 左边框宽度 |
border-right-width | 右边框宽度 |
border-top-width | 上边框宽度 |
宽度值 | 描述 |
---|---|
length | 具体某个值,单位为px/em |
关键字 thin medium thick | 分别对应细边框,中等(默认),粗边框 |
inherit | 继承父元素 |
其上下左右设置宽度的方法同上边框类型
边框颜色
属性 | 描述 |
---|---|
border-color | 同时设置4个方向的颜色 |
border-bottom-color | 下边框颜色 |
border-left-color | 左边框颜色 |
border-right-color | 右边框颜色 |
border-top-color | 上边框颜色 |
同理设置
统一设置边框的宽度,颜色,风格
一般都统一设置
属性 | 描述 |
---|---|
border | 同时设置4个方向的颜色,宽度,风格 |
border-bottom | 下边框颜色,宽度,风格 |
border-left | 左边框颜色,宽度,风格 |
border-right | 右边框颜色,宽度,风格 |
border-top | 上边框颜色,宽度,风格 |
e.g.
border: 1px solid red;
边框形状
由于四个边框颜色一致时看上去为一个矩形,但是当我们将边框四个颜色设为不一样的时候,且增加其宽度,会发现各个边框形状为等边三角形
当边框宽度大于或等于3px时,当值越大,三角形越明显
二、盒子内边距
内边距也就是设置了边框与内容之间的空白区域
内边距设置
属性 | 描述 |
---|---|
padding | 同时设置4个方向的内边距 |
padding -bottom | 下内边距 |
padding -left | 左内边距 |
padding-right | 右内边距 |
padding-top | 上内边距 |
参数值 | 描述 |
---|---|
auto | 浏览器计算内边距 |
length | px/em/cm为单位的某个具体正数值作为内边距值,默认为0 |
% | 基于父级元素宽度来计算 |
inherit | 继承父级元素 |
内边距特点
- 撑大元素的尺寸
在设置宽高的时候要减去内边距的数值 - 背景延申到padding区域
即背景将占据整个盒子
三、盒子外边距设置
向外扩展盒子与盒子周围其他盒子的距离,margin用于定义盒子边框与周围其它盒子的空白区域
外边距设置
属性 | 描述 |
---|---|
margin | 同时设置4个方向的外边距 |
margin -bottom | 下外边距 |
margin -left | 左外边距 |
margin-right | 右外边距 |
margin-top | 上外边距 |
参数值 | 描述 |
---|---|
auto | 浏览器计算外边距 |
length | px/em/cm为单位的某个具体数值作为外边距值,可取正负 |
% | 基于父级元素宽度来计算内边距 |
inherit | 继承父级元素 |
其四个方向的使用方法同上
外边距合并
即两个相邻块级元素的外边距的取值问题
- 全为正
较小的margin塌陷到较大的margin中 - 存在负
合并后的外边距高度等于这些发生合并的外边距的和 - 和为负
重叠深度等于外边距和的绝对值 - 和为0
两个块级元素无缝连接
在进行了上述的学习,我们能自由放置我们的某一个盒子了,但是如果有多个块,我们就存在将它如何放置的问题,故需要学习浮动和定位
我们已经可以开始设计精美的某一个盒子了,快动手尝试一下吧!
贴出来我初学时做的某些盒子(嘻嘻嘻)
做这个真的就会有一个很明显的过程,看着丑不溜秋的盒子作品再到自己慢慢的喜欢,就真的需要慢慢专研和学习的呢!
该系列博客参考了聂常红 刘伟著的前端HTML+CSS修炼之道
第四篇HTML+CSS学习笔记到此结束 cheers! ?
前端开发HTML+CSS之盒子模型(四)相关推荐
- Web前端,CSS中盒子模型的组成,了解掌握盒子模型的边框、内边距、外边距
前言 持续总结输出中,今天分享的是Web前端,CSS中盒子模型的组成,了解掌握盒子模型的边框.内边距.外边距 1.盒子模型的介绍 盒子的概念 页面中的每一个标签,都可看做是一个 "盒子&qu ...
- php盒子模型,HTML与CSS的盒子模型
这次给大家带来HTML与CSS的盒子模型,使用HTML与CSS的盒子模型的注意事项有哪些,下面就是实战案例,一起来看一下. 一.边框 (上) 1.什么边框? 边框就是环绕在标签宽度和高度周围的线条 2 ...
- 视频教程-全栈开发之前端开发-HTML5/CSS
全栈开发之前端开发 多年互联网从业经验: 有丰富的的企业网站.手游.APP开发经验: 曾担任上海益盟软件技术股份有限公司项目经理及产品经理: 参与项目有益盟私募工厂.睿妙影音家庭物联网设备.手游东方江 ...
- 前端开发工程师css样式进阶指南
display: none; 与 visibility: hidden; 的区别 相同: 它们都能让元素不可见 区别: display:none;会让元素完全从渲染树中消失,渲染的时候不占据任何空间: ...
- h5前端开发,CSS全局样式
第一章 HTML(★★) 1.浏览器页面有哪三层构成,分别是什么,作用是什么? 2.HTML5的优点与缺点? 3.Doctype作用? 严格模式与混杂模式如何区分?它们有何意义? 4.HTML5有哪些 ...
- 关于css设置盒子模型,设置像素与实际像素不同的问题
关于css设置盒子模型,设置像素和实际像素不同的问题 写网页时,发现自己网页设置盒子像素和实际用ps量的像素不同.盒子模型的margin和padding也对,网页的缩放也时100%,但就是不同. 分析 ...
- html盒子模型页面居中,【静态页面架构】CSS之盒子模型
CSS架构 盒子模型: 以内容区(显示文本和图像) 内边距(内容区至边距的距离) 边距(内容区的边界) 外边距(元素的边框之间的距离) 1.边距: border属性: 简写属性用来设置边距的上(top ...
- 1+x证书Web前端开发HTML+CSS专项练习测试题(八)
1+x证书Web前端开发HTML+CSS专项练习测试题(八) 官方QQ群 01.{HTML题目}HTML是什么意思? (B) A)高级文本语言 B)超文本标记语言 C)扩展标记语言 D)图形化标记语言 ...
- 前端开发[html+css]的实用网站分享(一)
目录 1.Glassmorphism 玻璃特效生成器 2卡片快速生成器 3.button按钮集合 1.Glassmorphism 玻璃特效生成器 Glassmorphism generator 玻璃特 ...
最新文章
- 5行Python代码实现图像分割
- python创建scrapy_Python爬虫教程-31-创建 Scrapy 爬虫框架项目
- MySQL 安装报找不到MSVCR120.dll错误
- idea中如何创建servlet文件
- 【渝粤题库】陕西师范大学292241金融市场学Ⅰ 作业(高起专)
- MITx - 6.00.1x 笔记(4) Good Programming Practices
- kubernetes 数据_为什么数据科学家喜欢Kubernetes
- fullcalendar 数据渲染 背景色_数据可视化设计,从0到1必备技能
- java 复制一个对象_Java如何完全复制一个对象
- AHCI和IDE区别,和在目前系统中设置 AHCI - 摘自网络
- 大数据时代的大数据技术与应用有哪些
- python3 x完全兼容_中国大学MOOC: Python 3.x 系列版本代码完全兼容 Python 2.x系列的既有语法。...
- laravel学习1.0
- java中根据权重随机获取数据
- 数据分析——Kettle插件开发异常信息总结
- 【BP数据预测】差分进化算法优化BP神经网络数据预测【含Matlab源码 1315期】
- 解决idea ctrl alt + T 打开Surround With里面却没有逻辑语句模板问题
- JDK源码学习与分析之Character
- 淘宝兼职刷信誉之骗局解密
- 制造业数据挖掘系统的应用有哪些,如何创造高价值
热门文章
- kali破解pdf密码
- 代码注释生成:《Towards Automatically Generating Summary Comments for Java Methods》论文笔记
- 福禄克Fluke DSX-8000 CableAnalyzer线缆分析仪介绍
- 【功能安全(ISO 26262)系列】番外篇 第一话 戏说汽车安全是个什么鬼
- Web报表系统葡萄城报表:B/S 报表软件
- noip2014:螺旋矩阵_网页设计:2014年值得关注的20个最热门趋势
- android Studio keytool' 不是内部或外部命令,也不是可运行的程序 或批处理文件
- 性能监控工具的配置及使用 - 	听云-Server
- java-net-php-python-springboot家政服务平台计算机毕业设计程序
- 使用JMF实现java写自己的视频播放器