CSS样式三--盒子模型
来源:互联网 发布:漫画打印排版软件 编辑:程序博客网 时间:2024/06/06 08:41
盒子模型:
- 边框:就是围绕着内容及补白的线,这条线可以设置它的粗细、样式、颜色
//缩写模式p{border:2px solid red;}//分开写如下p{ border-width:2px; //边框宽度也可设置为:thin|medium|thick,但不常用,最常用的还是像素px border-style:solid; //边框常见样式有:dashed(虚线),dotted(点线),solid(实线) border-color:red; //边框颜色可设置为十六进制如:#888}
同样可以只设置边框的一部分,如下边框:
p{border-bottom:1px dotted yellow;} //left,top,right
- 宽度和高度:盒子模型的宽度和高度指的是填充以里的内容范围,就是真正内容的宽高,因此一个元素实际宽度(盒子的宽度)=左边界+左边框+左填充+内容宽度+右填充+右边框+右边界。如下图所示:
代码如下:
p{ width:200px; padding:20px; border:1px; margin:10px;}所以实际宽度为: 10px+1px+20px+200px+20px+1px+10px
- 填充:元素内容与边框之间的距离,代码如下:
div{padding:20px 10px 15px 30px;} //上、右、下、左//顺序一定不要搞混,可以分开写div{ padding-top:20px; padding-right:10px; padding-bottom:15px; padding-left:30px;}//如果上、右、下、左都为10px也可以如下的形式写div{padding:10px;}//如果上下填充为一样10px,左右一样为20px,可以如下的形式写div{padding:10px 20px;}
- 边界(margin):元素与其他元素之间的距离可以使用边界,也分上、右、下、左
div{ margin-top:20px; margin-right:10px; margin-bottom:15px; margin-left:30px;}//如果上下左右边界都为10px,可以用下面的形式写:div{margin:10px;}//如果上下一样为10px,左右一样为20px,可以用下面的形式写div{margin:10px 20px;}//padding和margin的区别:padding在边框里,margin在边框外。
0 0
- CSS样式三--盒子模型
- CSS样式盒子模型
- CSS样式中的盒子模型
- css样式基础之盒子模型
- css基础样式和盒子模型
- CSS样式----盒子模型(图文详解)
- CSS样式----盒子模型(图文详解)
- css背景样式 列表样式 盒子模型 浮动
- CSS(三)_表格,盒子模型,边框
- css复习整理(三):盒子模型
- css中定义盒子模型的滚动条样式
- 理解CSS的盒子模型和样式继承
- 认识CSS样式(第三部分-盒子模型)
- (3)CSS样式——盒子模型
- 4-基本布局+CSS样式属性+盒子模型
- 理解CSS盒子模型
- 盒子模型 css
- css盒子模型
- 六大设计原则(4)迪米特法则
- 使用第三方框架实现异步的HttpClient
- Handler与ProgressBar 例子
- STM32_GPIO
- 【转】asp.net Forms表单验证 使用经验及验证流程分析
- CSS样式三--盒子模型
- 137. Single Number II
- 剑指Offer--024-二叉搜索树的后序遍历序列
- iOS笔记_12_多线程
- 快速排序的实现
- 写一个类似大众点评的城市选择控件
- LeetCode *** 82. Remove Duplicates from Sorted List II
- AJAX各种实现方式比较
- Java基础-初始化