web前端入门到实战:CSS盒子模型-成都创新互联网站建设

关于创新互联

多方位宣传企业产品与服务 突出企业形象

公司简介 公司的服务 荣誉资质 新闻动态 联系我们

web前端入门到实战:CSS盒子模型

一、什么叫框模型

页面元素皆为框(盒子),定义了元素框处理元素内容,内边距,外边距以及边框的计算方式。

10多年的贵阳网站建设经验,针对设计、前端、开发、售后、文案、推广等六对一服务,响应快,48小时及时工作处理。成都全网营销推广的优势是能够根据用户设备显示端的尺寸不同,自动调整贵阳建站的显示方式,使网站能够适用不同显示终端,在浏览器中调整网站的宽度,无论在任何一种浏览器上浏览网站,都能展现优雅布局与设计,从而大程度地提升浏览体验。成都创新互联从事“贵阳网站设计”,“贵阳网站推广”以来,每个客户项目都认真落实执行。

二、外边距

围绕在元素边框外的空白距离(元素与元素之间的距离)

语法: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外边距的大小




    

名称栏目:web前端入门到实战:CSS盒子模型
网站地址:http://kswsj.cn/article/gpjpis.html

其他资讯