web前端基础CSS初识学习笔记(12)CSS盒模型,border与padding不会撑开盒模型的情况
2020-07-14 15:29
190 查看
border与padding不会撑开盒模型的情况
简单示例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> div:first-child { width: 200px; height: 200px; background-color: pink; box-sizing: content-box; /*就是以前的盒子模型,w3c*/ padding: 10px; border: 15px solid red; /*盒子大小为width + padding + border content-box:此值为默认值。其让元素维持w3c 标准的box mode;*/ } div:last-child { width: 200px; height: 200px; background-color: purple; padding: 10px; box-sizing: border-box; /* padding border都不撑开盒子*/ border: 15px solid red; /*盒子大小为 widht 就是说 padding 和 border 是包含在width 里面的*/ } </style> </head> <body> <div> content-box </div> <div> border-box </div> </body> </html>
相关文章推荐
- 学习笔记(12):HTML+CSS前端基础开发视频教程-文字属性
- WEB前端学习笔记-CSS基础教程
- web前端基础学习笔记(15)之CSS 与HTML5 注意要点散记总结
- 前端基础学习-css基础笔记
- 学习笔记-《零基础学习HTML5—html+css基础 》1.前端认知
- web前端基础学习笔记(14)之为什么不建议用table布局
- 大前端学习笔记整理【一】CSS盒模型与基于盒模型的6种元素居中方案
- 学习笔记(11):HTML+CSS前端基础开发视频教程-important
- 大前端学习笔记整理【二】CSS视觉格式化模型
- 零基础web前端学习记录-html和css基础知识
- 学习笔记(30):HTML+CSS前端基础开发视频教程-大布局
- web前端基础之HTML5语义化新标签学习笔记(13)学会用语义化标签
- 学习笔记(三)前端之CSS基础
- 【Web前端学习笔记】CSS3_常用属性,选择器,盒子模型
- web前端——html基础笔记 NO.13{盒模型,颜色值,字体的缩写}
- 学习笔记(10):HTML+CSS前端基础开发视频教程-css的继承性和层叠性
- 学习笔记(19):HTML+CSS前端基础开发视频教程-浮动的概念
- 学习笔记(18):HTML+CSS前端基础开发视频教程-行内元素的特点
- web前端——html基础笔记 NO.12{css布局模型(流动,浮动,层模型)}
- 学习笔记(46):HTML+CSS前端基础开发视频教程-不针对祖先元素的参考点