php盒子模型,HTML与CSS的盒子模型
这次给大家带来HTML与CSS的盒子模型,使用HTML与CSS的盒子模型的注意事项有哪些,下面就是实战案例,一起来看一下。
一.边框 (上)
1.什么边框?
边框就是环绕在标签宽度和高度周围的线条
2.边框属性的格式
2.1连写(同时设置四条边的边框)
border: 边框的宽度 边框的样式 边框的颜色;
快捷键:
bd+ border: 1px solid #000;
注意点:
1.连写格式中颜色属性可以省略, 省略之后默认就是黑色
2.连写格式中样式不能省略, 省略之后就看不到边框了
3.连写格式中宽度可以省略, 省略之后还是可以看到边框
2.2连写(分别设置四条边的边框)
border-top: 边框的宽度 边框的样式 边框的颜色;
border-right: 边框的宽度 边框的样式 边框的颜色;
border-bottom: 边框的宽度 边框的样式 边框的颜色;
border-left: 边框的宽度 边框的样式 边框的颜色;
快捷键:
bt+ border-top: 1px solid #000;
br+
bb+
bl+
二.边框 (下)
2.3连写(分别设置四条边的边框) 根据三要素设置边框
border-width: 上 右 下 左;
border-style: 上 右 下 左;
border-color: 上 右 下 左;
注意点:
1.这三个属性的取值是按照顺时针来赋值, 也就是按照上右下左来赋值, 而不是按照日常生活中的上下左右
2.这三个属性的取值省略时的规律
2.1上 右 下 左 > 上 右 下 > 左边的取值和右边的一样
2.2上 右 下 左 > 上 右 > 左边的取值和右边的一样 下边的取值和上边一样
2.3上 右 下 左 > 上 > 右下左边取值和上边一样
3.非连写(方向+要素)
border-left-width: 20px;
border-left-style: double;
border-left-color: pink;
三. 内边距
1.什么是内边距?
边框和内容之间的距离就是内边距
2.格式
2.1非连写
padding-top: ;
padding-right: ;
padding-bottom: ;
padding-left: ;
2.2连写
padding: 上 右 下 左;
3.属性的取值省略时的规律
3.1上 右 下 左 > 上 右 下 > 左边的取值和右边的一样
3.2上 右 下 左 > 上 右 > 左边的取值和右边的一样 下边的取值和上边一样
3.3上 右 下 左 > 上 > 右下左边取值和上边一样
注意点:
1.给标签设置内边距之后, 标签占有的宽度和高度会发生变化
2.给标签设置内边距之后, 内边距也会有背景颜色
四. 外边距
1.什么是外边距?
标签和标签之间的距离就是外边距
2.格式
2.1非连写
margin-top: ;
margin-right: ;
margin-bottom: ;
margin-left: ;
2.2连写
margin: 上 右 下 左;
3.这三个属性的取值省略时的规律
3.1上 右 下 左 > 上 右 下 > 左边的取值和右边的一样
3.2上 右 下 左 > 上 右 > 左边的取值和右边的一样 下边的取值和上边一样
3.3上 右 下 左 > 上 > 右下左边取值和上边一样
注意点:
外边距的那一部分是没有背景颜色的
五.外边距合并现象
1.在默认布局的垂直方向上, 默认情况下外边距是不会叠加的, 会出现合并现象, 谁的外边距比较大就听谁的;
2.在水平方向上不会发生合并现象;
外边距合并现象(塌陷)
1.什么是CSS盒子模型?
CSS盒子模型仅仅是一个形象的比喻, HTML中所有的标签都是盒子
结论
1.在HTML中所有的标签都可以设置
宽度/高度 == 指定可以存放内容的区域
内边距 == 填充物
边框 == 手机盒子自己
外边距 == 盒子和盒子之间的间隙
七. 盒子模型的宽度和高度
1.内容的宽度和高度
就是通过width/height属性设置的宽度和高度
2.元素的宽度和高度
宽度 = 左边框 + 左内边距 + width + 右内边距 + 右边框
高度 同理可证
3.元素空间的宽度和高度
宽度 = 左外边距 + 左边框 + 左内边距 + width + 右内边距 + 右边框 + 右外边距
高度 同理可证
八. 盒子box-sizing属性
1.CSS3中新增了一个box-sizing属性, 这个属性可以保证我们给盒子新增padding和border之后, 盒子元素的宽度和高度不变
2.box-sizing属性是如何保证增加padding和border之后, 盒子元素的宽度和高度不变和我们前面学习的原理一样, 增加padding和border之后要想保证盒子元素的宽高不变, 那么就必须减去一部分内容的宽度和高度
3.box-sizing取值
3.1content-box (默认取值)
元素的宽高 = 边框 + 内边距 + 内容宽高
3.2border-box (元素的宽高不会改变)
元素的宽高 = width/height的宽高
九. 盒子居中
注意点 (1)
1.如果两个盒子是嵌套关系, 那么设置了里面一个盒子顶部的外边距, 外面一个盒子也会被顶下来
2.如果外面的盒子不想被一起定下来,那么可以给外面的盒子添加一个边框属性或者设置overflow: hidden;属性
3.在企业开发中, 一般情况下如果需要控制嵌套关系盒子之间的距离, 应该首先考虑padding, 其次再考虑margin
margin本质上是用于控制兄弟关系之间的间隙的
注意点 (2)
1.在嵌套关系的盒子中, 我们可以利用margin: 0 auto;的方式来让里面的盒子在外面的盒子中水平居中
2.margin: 0 auto; 只对水平方向有效, 对垂直方向无效;垂直方向上只能通过像素来计算居中 ;
十. text-align:center;和margin:0 auto;区别
text-align: center;作用
设置盒子中存储的文字/图片水平居中
margin:0 auto;作用
让盒子自己水平居中
十一. 清空默认边距
1.为什么要清空默认边距(外边距和内边距)
在企业开发中为了更好的控制盒子的位置和计算盒子的宽高等等, 所以在企业开发中, 编写代码之前第一件事情就是清空默认的边距
2.如何清空默认的边距
格式*{margin: 0;padding: 0;}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{ margin:0;padding:0}
3.注意点
通配符选择器会找导(遍历)当前界面中所有的标签, 所以性能不好
相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!
推荐阅读:
php盒子模型,HTML与CSS的盒子模型相关推荐
- css模型安装,【CSS】CSS-框模型+定位+实训练习
<[CSS]CSS-框模型+定位+实训练习>由会员分享,可在线阅读,更多相关<[CSS]CSS-框模型+定位+实训练习(9页珍藏版)>请在人人文库网上搜索. 1.第二阶段-We ...
- html文件div盒子浮动,css基础03-盒模型、网站布局思想、浮动以及浮动带来的影响...
定义: 在CSS处理页面的时候,它认为每个元素都是包含在一个不可见的盒子里,盒子模型由内容区域.内容区域周围空间(内边距padding).内边距的外边缘(边框,border)和边框外面将元素与相邻元素 ...
- CSS的盒子模型(Box Model)
盒子模型(Box Model)是 CSS 的核心,现代 Web 布局设计简单说就是一堆盒子的排列与嵌套,掌握了盒子模型与它们的摆放控制,会发现再复杂的页面也不过如此. 然而,任何美好的事物都有缺憾,盒 ...
- 教你吃透CSS的盒子模型(Box Model)
目录 CSS 盒子模型(Box Model) 元素的宽度和高度 浏览器的兼容性问题 CSS 盒子模型(Box Model) 所有HTML元素可以看作盒子,在CSS中,"box model&q ...
- html盒子模型页面居中,【静态页面架构】CSS之盒子模型
CSS架构 盒子模型: 以内容区(显示文本和图像) 内边距(内容区至边距的距离) 边距(内容区的边界) 外边距(元素的边框之间的距离) 1.边距: border属性: 简写属性用来设置边距的上(top ...
- 用php做盒子模型,什么是CSS盒子模型?一文带你了解CSS盒子模型
本篇文章给大家带来的内容是关于什么是CSS盒子模型?一文带你了解CSS盒子模型,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 什么是CSS盒子模型 网页设计中常听的属性名:内容(co ...
- 【重识 HTML + CSS】盒子模型相关知识点
盒子模型 盒子模型 (Box Model) 宽度.高度相关 CSS 属性 - width.height 内边距相关 CSS 属性 - padding 外边距相关 CSS 属性 - margin [常见 ...
- CSS基础——盒子模型【学习笔记】
盒子模型(Box Model) 所谓盒子模型: 就是把HTML页面中的布局元素看作是一个矩形的盒子,也就是一个盛装内容的容器. 盒子模型有元素的内容.边框(border).内边距(padding).和 ...
- 【玩转CSS】盒子模型
?? 信仰:一个人走得远了,就会忘记自己为了什么而出发,希望你可以不忘初心,不要随波逐流,一直走下去 ?? 欢迎关注??点赞??收藏??留言?? ?? 本文由 原创,CSDN首发! ?? 系列专栏:H ...
最新文章
- 微信公众平台两种消息处理流程对比
- catia直线测距怎么调出来_CATIA怎么测量两线夹角.
- cacti气象图调整(批量位置调整、更改生成图大小等)
- python语言的多行注释以什么开头和结尾_Python单行注释与多行注释
- 为什么越来越多的人直接入住毛坯房?有什么优缺点?
- 【转】关于Eclipse创建Android项目时,会多出一个appcompat_v7的问题
- 用javascript实现以下功能!_用python80行代码实现一个微信消息撤回捕捉功能
- 使用 bibexcel 把.out 文件转换成 .net 文件
- 为什么大数据工程师比Java程序员工资高50%?
- Hoeffding's lemma证明
- 保险丝的作用原理及选择
- HTTP Host Header Attack:Basic password reset poisoning
- awd的批量脚本 pwn_北极星杯 awd复现
- YOLOv2—passthrough层
- linux 重启内核,Linux内核文件重启
- 在线视频编辑 剪辑系统源码 支持AE所有特效
- 软考高级考完了,怎么评职称?
- C#网络应用编程——复习总结
- Integer源码 转2进制转16进制
- mysql zimbra_zimbra的使用与管理
热门文章
- 中国工程建设行业现状规模与十四五发展目标分析报告2022-2028年版
- Pedestrian Collision Avoidance System for Scenarios with Occlusions--有遮挡情况下的行人避让系统
- 升达经贸管理学院计算机专业英语四级,关于2018年12月全国大学英语四六级考试郑州升达经贸管理学院考点工作安排的通知...
- 2022流星雨,你的硬盘raw了吗?
- Word 中由EndNote生成的参考文献格式调整
- 【独家】带你走进冯俪老师探寻职业解密
- 喜报!《大数据》72篇论文入选中国知网《学术精要数据库》高影响力论文!...
- GH1131铁基高温合金热强性如何
- 外汇天眼:美国12月Markit制造业PMI初值不及预期 市场担忧经济下滑
- 2020牛客暑期多校训练营(第二场)题解