前端开发之css盒模型
来源:互联网 发布:linux route add 编辑:程序博客网 时间:2024/05/12 22:42
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;}
1 0
- 前端开发之css盒模型
- 前端开发之CSS布局模型
- 004 Python前端之CSS盒模型
- 前端知识整理之CSS盒模型
- 前端面试题之CSS盒模型
- Web开发之CSS盒模型
- web前端开发之Css
- CSS之盒模型
- web前端开发测验之css部分
- web前端开发测验之css部分
- 前端开发:CSS之完美容颜
- 前端开发之CSS格式化排版
- Web开发之CSS布局模型
- css布局之盒模型
- HTML+CSS之CSS盒模型 (8)
- HTML+CSS之CSS盒模型
- HTML+CSS之CSS盒模型 (8)
- 前端开发CSS+DIV
- jstack 使用
- Log4j按级别输出到日志文件
- 翻转子串
- HDU 2018 母牛的故事(dp)
- Windows Server 2008 R2 下安装 VMWare
- 前端开发之css盒模型
- JAVA基础学习(二)--标识符、关键字、数据类型与运算符
- 火云开发课堂 - 《使用Cocos2d-x 开发3D游戏》系列 第九节:卡通渲染
- HDU 2019 数列有序!(水~)
- Linux下/etc/*
- HDU 2020 绝对值排序(水~)
- 运行jar文件并传参
- Protocol Buffers编码详解,例子,图解
- Hadoop分布式文件系统:架构和设计