web前端入门到实战:CSS盒子模型-创新互联
一、什么叫框模型
页面元素皆为框(盒子),定义了元素框处理元素内容,内边距,外边距以及边框的计算方式。
创新互联2013年至今,先为曲靖等服务建站,曲靖等地企业,进行企业商务咨询服务。为曲靖企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。二、外边距
围绕在元素边框外的空白距离(元素与元素之间的距离)
语法:margin,定义4个方向的外边距
1、单边定义:margin-top/right/bottom/left
(1)取值:以px为单位, %占父级元素宽度的%比
正数:margin-left 元素向右移动,margin-top元素向下移动
负数:就是相反方向
取值 auto:自动计算块级元素的外边距,对于上下外边距无效,块级元素水平居中
2、简写方式
margin:value ;定义4个方向的值
margin:v1 v2; v1设置上下,v2设置左右
margin:0 auto:设置块级元素水平居中
margin:v1 v2 v3;v1设置上,v2设置左右,v3设置下
margin:v1 v2 v3 v4;上右下左
3、自带外边距的元素
h2~h7、p、body、ol、ul、dl、pre
一般在开发的时候需要重置具有外边距的元素
方案一:*{margin:0;padding:0}
方案二:参考淘宝
4、外边距的特殊效果
(1)外边距合并
当两个垂直外边距相遇时,他们将合并成一个,最终的距离取决于两个边距中较大的
(2)行内元素对外边距的表现
行内元素垂直外边距无效(img)除外
(3)行内块对外边距的表现
同一行中,一个行内块设置了垂直边距,同行其他行内会跟着变化
(4)外边距溢出
在特殊条件下,为子元素设置上外边距,会作用到父元素
特殊条件:
1.父元素上边框
2.为第一个子元素设置上外边框,任何一个 都会造成外边框溢出
解决方法:
为父元素添加边框,弊端:影响了父元素的实际高度
为父元素添加内边距,弊端 了父元素的实际高度
在父元素的 第一个子元素位置,添加一个空的table
三、内边距
不会影响其他元素,但是会影响自己的占地尺寸,视觉上感觉大小发生变化
语法:
padding:value ;设置4个方向的内边距
padding:v1 v2;v1设置上下,v2设置左右
padding:v1 v2 v3;v1设置上,v2设置左右,v3设置下
padding:v1 v2 v3 v4;设置上右下左
单方向设置:padding-top/right/bottom/left
box-sizing属性,设置框模型的计算方式
box-sizing:content-box;默认值,盒子模型计算,div设置的width,height为content的大小
专门建立的学习Q-q-u-n ⑦⑧④-⑦⑧③-零①② 分享学习方法和需要注意的小细节,不停更新最新的教程和学习技巧(从零基础开始到前端项目实战教程,学习工具,全栈开发学习路线以及规划)
box-sizing:boder-box;div设置的width,height为border外边距的大小
另外有需要云服务器可以了解下创新互联cdcxhl.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。
本文名称:web前端入门到实战:CSS盒子模型-创新互联
文章路径:http://myzitong.com/article/hjihi.html