CSS学习笔记:排版布局属性
来源:互联网 发布:nginx 图片服务器架构 编辑:程序博客网 时间:2024/03/29 14:33
1、定位属性
属性名称 属性值列表 描述position: static | relative | absolute | fixed 默认|相对与自身|相对于祖先|相对于窗口z-index: internal 在文档中的层叠索引,越大就越前top: internal 相对于参照物距离顶部的偏移距离right: internal 相对于参照物距离右边的偏移距离bottom: internal 相对于参照物距离底部的偏移距离left: internal 相对于参照物距离左边的偏移距离
2、布局属性
属性名称 属性值列表 描述dispaly: none | block | inline 标签显示开关,不显示不占用物理空间float: none | left | right 块标签浮动属性clear: none | left | right | both 清楚块标签浮动属性visibility: visible | hidden 标签显示开关,隐藏后依然占用物理空间overflow: visible | hidden | scroll | auto 内容溢出容器大小时处理方式overflow-x: visible | hidden | scroll | auto 内容横向溢出容器大小时处理方式overflow-y: visible | hidden | scroll | auto 内容纵向溢出容器大小时处理方式
3、大小属性
属性名称 属性值列表 描述width: internal 容器宽度大小,单位可以为px或百分比min-width: internal 容器最小宽度大小,单位可以为px或百分比max-width: internal 容器最大宽度大小,单位可以为px或百分比height: internal 容器高度大小,单位可以为px或百分比min-height: internal 容器最小高度大小,单位可以为px或百分比max-height: internal 容器最大高度大小,单位可以为px或百分比
4、边距属性
属性名称 属性值列表 描述margin: auto | internal 外边距距离,top right bottom leftmargin-top: auto | internal 外边距顶部距离margin-right: auto | internal 外边距右边距离margin-bottom: auto | internal 外边距底部距离margin-left: auto | internal 外边距左边距离padding: auto | internal 内边距距离,top right bottom leftpadding-top: auto | internal 内边距顶部距离padding-right: auto | internal 内边距右边距离padding-bottom: auto | internal 内边距底部距离padding-left: auto | internal 内边距左边距离
5、边框属性
属性名称 属性值列表border-width: internalborder-style: none(无边框) | hidden(隐藏) | dotted(点) | dashed(虚线) | solid(实线) | double(双线) | groove(3D凹槽) | ridge(3D凸槽) | inset(3D凹线) | outset(3D凸线)border-color: #FF00FFborder: width style color
Sample code:
<!DOCTYPE html><html><head> <title>使用div+css排版布局</title> <style type="text/css"> body { margin:0px; padding:0px; } .head { height:80px; width:100%; background-color:#FF1200; } .logo { float:left; margin-left:20px; margin-top:10px; height:60px; width:150px; background-color:#823; } .list { float:right; margin-top:45px; margin-right:10px; width:250px; height:35px; background-color:#888; } .content { clear:both; width:100%; } .left { float:left; width:150px; height:600px; background-color:blue; } .right { float:left; width:800px; height:600px; background-color:#673200; } </style></head><body> <div class="head"> <div class="logo">我是logo</div> <div class="list">我是list</div> </div> <div class="content"> <div class="left">我是左边</div> <div class="right">我是右边</div> </div></body></html>
0 0
- CSS学习笔记:排版布局属性
- css网页布局中文字排版的属性和用法
- css网页布局中文字排版的属性和用法
- css布局和排版
- CSS学习笔记之边缘属性和简单的布局
- CSS布局学习笔记
- css布局-学习笔记
- CSS学习笔记--布局
- 学习笔记:CSS布局
- css属性学习笔记
- CSS布局和排版要点
- CSS——排版布局
- Css格式化排版与布局
- CSS学习笔记-学习CSS布局
- css布局的学习笔记
- CSS布局学习随手笔记
- CSS学习笔记:3 布局
- CSS实战:DIV+CSS排版布局
- 【寒江雪】Direct3D11纹理贴图
- DOS常用命令
- 帝国CMS常用标签
- linux读写mac HFS+
- 手机端通过软件Es文件浏览器访问Linux服务器文件(局域网或远程服务器)
- CSS学习笔记:排版布局属性
- JavaScript 中element和attribute以及节点、属性的增删
- 哈理工OJ 1045 Draw A Square(简单模拟)
- Linux中的高级文本处理命令,cut命令,sed命令,awk命令
- Zookeeper 配置文件解释
- 【浑水摸鱼】化学方程式默写练习器
- 算法训练 未名湖边的烦恼
- hdu 2087
- 使用TensorFlow编写识别数字的CNN训练程序详解