您现在的位置是：首页 > 网站制作 > CSS3|Html5CSS3|Html5
CSS盒模型的概念及组成 content padding border margin
胜于蓝2019-07-30【CSS3|Html5】人已围观
简介嗯...ps随便大概画了一个参考图，色彩有点...见谅CSS盒模型的概念及组成 css盒模型概念——css盒模型是css的基石，每个html元素都可以看作是一个盒模型。 css
嗯...ps随便大概画了一个参考图，色彩有点...见谅
CSS盒模型的概念及组成
css盒模型概念——css盒模型是css的基石，每个html元素都可以看作是一个盒模型。
css盒模型的组成——内容（content）、补白或填充（padding）、边框（border）、外边距（margin）
1.内容（content）
语法:
width: 数值+单位; height: 数值+单位;eg:
.box{
width: 300px;
height: 300px;
}2.补白或填充（ content 和 border 之间的距离）
①设置一个值
padding: 20px; （上下左右均为20px）
②设置两个值
padding: 15px 25px; （上下为15px、左右为25px）
③设置三个值
padding: 10px 5px 20px; （上下为10px、左右为5px、下为20px）
④设置四个值（顺时针方向）
padding: 20px 10px 5px 0px; （上为20px、右为10px、下为5px、左为0px）
⑤还可以单独设置某一个方向的padding值
padding-left: 20px; （left 还可以设置为 top、bottom、right）
注:
①当给元素设置了padding值后，要在原来的宽高上减去设置的padding值，保证总宽高不变;
②当需要调整子元素在父元素中的位置关系时，给父元素设置padding属性;
③padding不允许设置负值;
④背景可以延伸到padding区域。
3.边框（设置 padding和margin 之间的部分）
语法:
①边框类型
border-style: solid（实线） | dashed （虚线） | dotted （点线） | double （双线）;②边框颜色
border-color: 颜色值;③边框宽度
border-width: 数值+单位;④border简写方式
border: 宽度 线型 颜色;eg:
border: 5px solid black;⑤还可以单独设置某一方向的边框
border-top: 2px solid black; /*注: top可更改为 bottom、right、left*/注：
①背景可以延伸到border区域，当边框为实线时会遮挡住背景色
③当元素设置了border时，要在原来宽高的基础上减去设置的border值，保证总宽高不变
4.外边距
语法：
margin: 数值+单位;注:margin属性值的设置方法同padding
①背景不能延伸到margin区域
②margin可以设置负值
③当需要调整元素之间的位置关系或子元素在父元素中的位置关系时，给本元素添加margin属性
注:
标准盒模型的总宽高 = width + 左右padding + 左右border + 左右margin
标准盒模型的总高度 = height + 上下padding + 上下border + 上下margin
标准盒模型 = content + padding + border + margin
怪异盒模型 = content + margin
注: 当网页没有添加文档声明时，就会触发某些浏览器的怪异模式
Tags：
扫描关注胜于蓝微信|公众号，第一时间获取网站模板更新动态
本文地址：/web/html/83.html
很赞哦！ ()
相关文章
随机图文
CSS3 画基本图形，圆形、椭圆形、三角形
CSS3 圆形 #css3-circle{ width: 150px; height: 150px; border-radius: 50%; background-color: #232323;} CSS3 椭圆形 #css3-elipse{ width: 200px; height: 100px
CSS 颜色十六进制值
按十六进制值排序列表按颜色名称进行排序 Color Name HEX Color Black #000000 Navy #000080 DarkBlue #00008B Me-
HTML中 列表类属性的详细介绍
1.列表符号样式 语法：list-style-type: disc (实心圆) | circle （空心圆） | square (实心方块) | decimal （数字） | none （取掉列表符号样式）; 2.使用图片作为列表符号 语法：l 
HTML 拾色器
选取颜色: 或输入颜色值:OK 或使用 HTML5: 选择的颜色: 黑色文本 阴影 白色文本 阴影 red #ff0000 rgb(255, 0, 0) hsl(0, 100%, 50%) hsv(0, 100%
文章评论
当前时间
快速排名
- 网站建设|万词霸屏,企业软文推广,刷下拉框
- 快速排名：不用再等SEO三个月，只需3-7天即可把行业关键词覆盖百度搜索引擎首页，点击不收费，排名报表，真实访问量报表一目了然。
合作加盟
- 扫码请注明来意,否则不会通过
- 填写商户姓名不要带有“超市”,“便利店” ,“百货”等
- 扫码成为快钱代理
- 扫码加站长微信,为您推荐快钱总部负责人
- 快钱POSS机（电签版）
- 1,免押版：签约费率快捷交易0.38%,常规交易0.65%
- 贷记卡单笔≥3000元视为激活
- 2,,有押版：签约快捷交易0.38%,常规交易0.65%
- 激活首刷≥99元,扣除99元系统服务费,多出部分shishi到账
- 电签版ipos参与每月扶持奖励
- 电签版ipos与Mpos单独考核台均
- 30台以上有效激活奖励3000元扶持金
- 当月交易额≥3000元的为活跃用户
标签云
猜你喜欢
