css盒模型
2015-08-30 13:20
651 查看
css盒模型
内联元素转换为块级元素(使其具有块级元素的特点)
a{display:block;}
块级元素的特点
每个块级元素都从新的一行开始,并且其后的元素也另起一行。(真霸道,一个块级元素独占一行)元素的高度、宽度、行高以及顶和底边距都可设置。
元素宽度在不设置的情况下,是它本身父容器的100%(和父元素的宽度一致),除非设定一个宽度。
块级元素转换为内联元素(使其具有内联元素的特点)
div{display:inline;}
内联元素的特点
和其他元素都在一行上;元素的高度、宽度及顶部和底部边距不可设置;
元素的宽度就是它包含的文字或图片的宽度,不可改变。
内联块状元素(同时具备内联元素、块状元素的特点)
display:inline-block;
内联块状元素特征
和其他元素都在一行上;元素的高度、宽度、行高以及顶和底边距都可设置。
盒子模型
块级标签都具备盒子模型的特点把月饼内容,那么月饼盒子就是页面元素
月饼到盒子之间的距离称为内填充(padding)
盒子与盒子间的距离称为外填充 (margin)
盒子的边框叫做(border)
四个方向:top ,left,bottom,right。
盒模型----边框
粗细 ,样式,颜色div{
border:2px solid red;
}
div{
border-width:2px;
border-style:solid;
border-color:red;
}
border-style(边框样式)常见样式有:dashed(虚线)| dotted(点线)| solid(实线)。
border-color(边框颜色)中的颜色可设置为十六进制颜色,如:border-color:#888;//前面的井号不要忘掉。
border-width(边框宽度)中的宽度也可以设置为:thin | medium | thick(但不是很常用),最常还是用象素(px)。
div{border-bottom:1px solid red;}
盒模型----宽度和高度
width ,height。width:200px;height:30px;
盒模型----填充
元素内容与边框之间是可以设置距离的,称之为“填充”。填充也可分为上、右、下、左(顺时针)。如下代码: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:20px 10px 15px 30px;}
也可以分开写:
div{
margin-top:20px;
margin-right:10px;
margin-bottom:15px;
margin-left:30px;
}
如果上右下左的边界都为10px;可以这么写:
div{ margin:10px;}
如果上下边界一样为10px,左右一样为20px,可以这么写:
div{ margin:10px 20px;}
相关文章推荐
- CSS格式化排版
- CSS3: box-shadow 阴影
- IE6/7/8如何兼容CSS3属性
- 怎样以快速样式的方式在word文档中生成以下多级自动编号
- css3 backgound背景的一些用法 和background-position用法
- css中隐藏元素的使用
- 区分html与css中的属性
- (0829)BOM对象-location-screen-history-navigat、DOM对象-htmlDOM-cssDOM
- 博客园样式个性化
- 编写灵活、稳定、高质量的 HTML 和 CSS 代码的规范。
- CSS设定图片变灰色
- 总结css实现固定和自适应宽度混合的多栏布局实现方法
- 学习笔记 五 css
- CSS 3 概述
- CSS3 icon font完全指南
- CSS display:none和visibility:hidden区别
- css去除页面点击链接、按钮触发的虚线框
- CSS选择器优先级
- HTML/CSS基础
- 使用link标签导入外部样式表