CSS背景、尺寸、盒子模型
2017-07-14 09:10
253 查看
1、背景相关属性
background-color:背景色background-image:设定背景图片,需要设置图片的URL地址
background-repeat:图片的复制选项
repeat:在水平和垂直两个方向上进行复制
no-repeat:不复制
repeat-x:在垂直水平方向上复制
repeat-y:在垂直方向上复制
也可以将这一组属性值封装到一个属性background中,表达更加简洁,书写顺序是:背景色background-color
背景图片 background-image
重复方式 background-repeat
位置 background-position
2、尺寸相关属性
height:高度width:宽度
max-width:最大宽度
max-height:最大高度
min-width:最小宽度
min-height:最小高度
3、显示相关属性
隐藏元素的方法:(1) visibility:hidden,仅仅隐藏内容,该元素所占位置依然存在
(2) display:none,不仅隐藏内容,且不占位置
display可以设置元素的显示模式
inline:将块级元素以内联元素形式显示,此时width和height属性无效,其空间取决于元素的内容。
inline-block:将会计元素以内联元素形式显示,同时兼具块级元素的某些特征,比如可以使用width和height设置所占位置大小。
4、盒子模型
margin:外边距margin-top、margin-right、margin-bottom、margin-left、
使用方式
(1) margin:30px;表示上下左右外边距都为30px
margin-top: 单独设置上外边距
margin: 可分别设置上右下左四个边距
(2)padding:内边距
(3)border:边框
border-width:边框宽度
border-style:边框线条类型
border-color:边框的颜色
更优化的书写方式:
border:px dashed blue;
outline:轮廓线
相关文章推荐
- CSS背景、尺寸、显示、盒子模型以及元素的定位
- 从零开始学 Web 之 CSS(三)链接伪类、背景、行高、盒子模型、浮动
- 【css技术指南笔记】 第三章 盒子模型 浮动 清除浮动 定位 显示属性 背景
- CSS中背景图片,文本,列表与盒子模型的边框与边距
- css 样式设计(一)( 在线150个例子 | 背景 | 文本 | 字体 | 链接 | 列表 | 表格 | 盒模型 | 边框 | 轮廓 | 边距 | 填充 |分组和嵌套 | 尺寸 | 定位 | 浮动 |对齐 )
- css背景样式 列表样式 盒子模型 浮动
- CSS中的字体背景和盒子模型
- CSS基础知识总结之背景、尺寸、显示、盒子、定位
- CSS 北京属性 尺寸属性 盒子模型 定位 选择器
- Flexible 弹性盒子模型之CSS flex-flow
- CSS 盒子模型
- CSS 盒子模型
- CSS 实现背景图尺寸不随浏览器缩放而变化
- 【CSS】CSS详细介绍:(HTML/CSS结合方式、CSS代码格式、选择器、盒子模型)
- HTML和CSS的关键:盒子模型(Box model)
- css基础样式和盒子模型
- CSS之盒子模型
- DIV+CSS两种盒子模型
- css-4.边框和盒子模型
- CSS学习之:盒子模型