CSS基础知识总结之背景、尺寸、显示、盒子、定位
2017-07-13 20:23
609 查看
背景
（1）background-color：背景颜色
（2）background-image:url("图片路径");
（3）background-repeat:图片复制属性，几个常用取值
①repeat，重复，默认
②no-repeat，不重复
③repeat-x，横轴重复
④repeat-y，纵轴重复
⑤round，循环
（4）background-position：位置
①top，顶部
②bottom，底部
③right，右边
④left，左边
⑤center，中心
background-color: #a1ff54;
background-image: url("");
background-repeat:repeat-x;
background-position: center;
当然可以将一组属性封装到一个属性background中，表达更加简洁。有书写顺序：background-color background-image，background-repeat background-position
background: gainsboro url("")
no-repeat right top;
尺寸
（1）height:高度
（2）width:宽度
div{
width:200px;
height:200px;
background-color:#3695ff;
}
（3）max-height最大高度
（4）max-width最大宽度
（5）min-height最小高度
（6）min-width最小宽度
显示
（1）隐藏元素的方法
①visibility：hidden，仅仅隐藏内容，该元素所占的位置依然存在。
②dispaly：none，不仅隐藏内容，而且隐藏一切格式。
（2）display可以设置元素的显示模式。
①inline，将块级元素以内联元素的形式显示，通俗的讲就是在一行显示，此时width和height属性无效，其空间取决于元素的内容。
②Inline-block，将块级元素以内联的形式来显示，同是兼具块级元素的某些特征，比如可以使用width和height属性设置所占位置大小。
③block,可以将内联元素以块级元素的形式来显示，自己理解的就是可以换行。
边距
（1）margin外边距
①margin：**px；表示上下左右外边距都是**px
margin: 30px
margin-top
margin-right
margin-bottom
margin-left
③一起设置四个方向的外边距，顺序分别是上右下左。
margin: 10px 20px
30px 40px;
（2）padding内边距，同margin
（3）border边框
border: 10px dashed red;
（4）outline轮廓
outline: 5px dotted gold;
定位
定位方式有：
static（静态的），默认。无定位，元素正场出现在流中。
div{
width:200px;
height:200px;
background-color:#a1ff54;
position:static;
}
<body>
<div></div>静态定位的演示
<.body>
fixed（固定的），
relative（相对的），
<style type="text/css">
#div1{
width:
200px;
height:
200px;
background-color:
#a1ff54;
position:fixed;
}
#div2{
width:
200px;
height:
200px;
top:
200px;
background-color:
red;
position:relative;
}
</style>
<styletype="text/css">
#div1{
width:
200px;
height:
200px;
background-color:
#a1ff54;
position:fixed;
}
#div2{
width:
200px;
height:
200px;
left:
30px;
top:50px;
background-color:
red;
position:relative;
}
</style>
从结果可以看出，fixed定位会将元素从流中摘出来，定位取决去left和top
重新定位之后可能会出现重叠，通过z-index可以调整其顺序，但是
#div1{
width:200px;
height:200px;
background-color:#a1ff54;
position:fixed;
z-index:1;
}
#div2{
width:200px;
height:200px;
left:30px;
top:50px;
background-color:rgb(256,0,0);
position:relative;
<style type="text/css">
#div1{
width:200px;
height:200px;
background-color:#a1ff54;
}
#div2{
width:200px;
height:200px;
left:20px;
top:30px;
background-color:rgb(256,0,0);
position:relative;
}
#div3{
width:100px;
height:100px;
background:blue;
}
</style>
absolute（绝对的），绝对定位的元素也会从流中摘出来，依靠left属性进行定位，与fixed类似，但是的参照物不同。Fixed参照根元素（HTML），absolute参照物是父容器
<style type="text/css">
#div1{
width:200px;
height:200px;
background-color:#a1ff54;
}
#div2{
width:200px;
height:200px;
left:30px;
top:50px;
background-color:rgb(256,0,0);
position:absolute;
}
#div3{
width:100px;
height:100px;
background:blue;
}
</style>
（1）background-color：背景颜色
（2）background-image:url("图片路径");
（3）background-repeat:图片复制属性，几个常用取值
①repeat，重复，默认
②no-repeat，不重复
③repeat-x，横轴重复
④repeat-y，纵轴重复
⑤round，循环
（4）background-position：位置
①top，顶部
②bottom，底部
③right，右边
④left，左边
⑤center，中心
background-color: #a1ff54;
background-image: url("");
background-repeat:repeat-x;
background-position: center;
当然可以将一组属性封装到一个属性background中，表达更加简洁。有书写顺序：background-color background-image，background-repeat background-position
background: gainsboro url("")
no-repeat right top;
尺寸
（1）height:高度
（2）width:宽度
div{
width:200px;
height:200px;
background-color:#3695ff;
}
（3）max-height最大高度
（4）max-width最大宽度
（5）min-height最小高度
（6）min-width最小宽度
显示
（1）隐藏元素的方法
①visibility：hidden，仅仅隐藏内容，该元素所占的位置依然存在。
②dispaly：none，不仅隐藏内容，而且隐藏一切格式。
（2）display可以设置元素的显示模式。
①inline，将块级元素以内联元素的形式显示，通俗的讲就是在一行显示，此时width和height属性无效，其空间取决于元素的内容。
②Inline-block，将块级元素以内联的形式来显示，同是兼具块级元素的某些特征，比如可以使用width和height属性设置所占位置大小。
③block,可以将内联元素以块级元素的形式来显示，自己理解的就是可以换行。
边距
（1）margin外边距
①margin：**px；表示上下左右外边距都是**px
margin: 30px
margin-top
margin-right
margin-bottom
margin-left
③一起设置四个方向的外边距，顺序分别是上右下左。
margin: 10px 20px
30px 40px;
（2）padding内边距，同margin
（3）border边框
顺序是border-width:10px;宽度
border-style 边框的样式
①solid实线
②dotted虚线
③double双实线
④groove 凹槽。就像相框一样，看着像立体的。
border-color: red;
border: 10px dashed red;
（4）outline轮廓
outline: 5px dotted gold;
定位
定位方式有：
static（静态的），默认。无定位，元素正场出现在流中。
div{
width:200px;
height:200px;
background-color:#a1ff54;
position:static;
}
<body>
<div></div>静态定位的演示
<.body>
fixed（固定的），
relative（相对的），
<style type="text/css">
#div1{
width:
200px;
height:
200px;
background-color:
#a1ff54;
position:fixed;
}
#div2{
width:
200px;
height:
200px;
top:
200px;
background-color:
red;
position:relative;
}
</style>
<styletype="text/css">
#div1{
width:
200px;
height:
200px;
background-color:
#a1ff54;
position:fixed;
}
#div2{
width:
200px;
height:
200px;
left:
30px;
top:50px;
background-color:
red;
position:relative;
}
</style>
从结果可以看出，fixed定位会将元素从流中摘出来，定位取决去left和top
重新定位之后可能会出现重叠，通过z-index可以调整其顺序，但是
#div1{
width:200px;
height:200px;
background-color:#a1ff54;
position:fixed;
z-index:1;
}
#div2{
width:200px;
height:200px;
left:30px;
top:50px;
background-color:rgb(256,0,0);
position:relative;
<style type="text/css">
#div1{
width:200px;
height:200px;
background-color:#a1ff54;
}
#div2{
width:200px;
height:200px;
left:20px;
top:30px;
background-color:rgb(256,0,0);
position:relative;
}
#div3{
width:100px;
height:100px;
background:blue;
}
</style>
absolute（绝对的），绝对定位的元素也会从流中摘出来，依靠left属性进行定位，与fixed类似，但是的参照物不同。Fixed参照根元素（HTML），absolute参照物是父容器
<style type="text/css">
#div1{
width:200px;
height:200px;
background-color:#a1ff54;
}
#div2{
width:200px;
height:200px;
left:30px;
top:50px;
background-color:rgb(256,0,0);
position:absolute;
}
#div3{
width:100px;
height:100px;
background:blue;
}
</style>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- CSS背景、尺寸、显示、盒子模型以及元素的定位
- 【css技术指南笔记】 第三章 盒子模型 浮动 清除浮动 定位 显示属性 背景
- CSS背景属性 尺寸属性 显示属性 定位及选择器
- 对CSS基础知识学习的一些总结
- CSS基础知识---浮动，定位和盒模型
- HTML/CSS基础知识总结
- HTML+CSS基础知识整理总结2015.3.11
- Css背景图片知识总结
- 黑马程序员-html+css基础知识总结
- CSS基础知识 － 盒模型/定位/浮动
- html+css基础知识总结
- CSS基础知识总结之颜色、单位
- HTML+CSS基础知识整理总结2015.3.10
- Selenium基础知识（详解IDE命令、css及xpath定位一）
- div+css总结—FF、IE7下div不设置高度背景颜色或外边框不能显示的解决方法
- div+css总结—FF下div不设置高度背景颜色或外边框不能显示的解决方法
- 总结CSS基础知识【复习之一】
- CSS基础知识总结--《CSS权威指南》阅读笔记（二）
- CSS基础之浮动定位、显示、光标、定位
- JavaWeb基础知识：Html和Css实战WebView实现手机显示网页