CSS开发基础——CSS盒子模型
来源:互联网 发布:centos yum mysql 编辑:程序博客网 时间:2024/06/01 20:59
1、CSS的盒子模型
- height:高度
- width:宽度
- padding:内边距
- margin:外边距
- border:边框
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> { margin: 0; padding: 0; } .box{ width: 300px; height: 300px; padding: 50px; border: 50px solid #54acf3; margin: 50px; color: #fff; background: #2196F3; } </style></head><body> <div class="box"> 在此可以填充内容 </div></body></html>
显示结果如下:
通过改变width、height、padding、margin的值改变显示结果,还可以设置margin-left、margin-right等值,每一个值下面都是一串的设置,通过调试可以发现整个图形的现实是有上、下、左、右不同的块组成的,可以对不同的块进行剪切设置,使用起来比较方便。
调试情况如下:
可以清晰的看到调试出来的盒子模型每个值的设置情况。
CSS可以用ie、和google浏览器进行预览和调试,但是调试的过程中chrome浏览器的颜色可以在图中的小方块处直接选择,但是ie浏览器需要手动设置,而且用chrome设置其他值时按回车可以直接进入下一行,但是ie浏览器不能直接回车进入下一行,对于初学者来说,用chrome浏览器进行调试比较方便。前端的学习需要在不同的浏览器进行调试,稍微熟练的话可以多加练习。
0 0
- CSS开发基础——CSS盒子模型
- CSS—盒子模型
- 前端基础——CSS盒子模型
- 前端基础——CSS盒子模型
- css基础,盒子模型
- 【CSS】——盒子模型
- CSS——盒子模型
- CSS——盒子模型
- CSS—盒子模型(a)
- CSS — (盒子模型)
- CSS基础之盒子模型
- 【CSS 基础】06 盒子模型
- CSS基础-18CSS盒子模型-盒子模型应用
- CSS基础-13CSS盒子模型-概述
- CSS基础-14CSS盒子模型-内边距
- CSS基础-15CSS盒子模型-边框
- 牛腩发布系统--CSS盒子模型基础
- CSS基础学习十三:盒子模型
- BUPT OJ 中序遍历序列
- dp总结
- 高可用性系统的实践与经验
- Plplot绘制简单2D函数图
- C++实现UMG中自定义不规则形状按钮
- CSS开发基础——CSS盒子模型
- 《利用条件随机场实现中文病历文本中时间关系的自动提取》——阅读笔记
- solr支持jsonp
- Makefile初步使用
- 再谈 CSS 预处理器[转]
- 图的最小生成树
- mybatis criteria singleton
- Spring MVC & 常用注解
- mock-api使用