css

2019-05-30 08:51:21 阅读：151 来源： 互联网

标签：定位盒子 top background position border css

1.css背景样式

background-color 背景颜色

background-image 背景图片
background-repeat 背景图片的重复
repeat-y 只允许在y轴重复
repeat-x 只允许在x轴重复
no-repeat 不重复，只显示一次
background-position 背景图片的定位
取值：两个，分别表示x和y方向。如果只写一个，则两个值相等
例如：京东、淘宝五星好评
雪碧图：各个小图标的集合，使用的目的是减少http的请求

width: 700px;
height: 700px;
font-size: 50px;
/*background-color: #f00;*/
background-image: url(../images/pig.jpg);
background-repeat: no-repeat;
background-position: top center;

2.css的框模型

任何一个元素，都可以理解成一个盒子
盒子是可以装"东西"
里面东西跟"盒子的包装"有一定的空间
两个盒子或者说多个盒子，盒子之间是不是有一定的"距离"(空间)

盒子模型的组成
margin 外边距盒子与盒子之间的距离
border 边框包装盒
padding 内边距填充物
content 内容买好的东西

margin 合起来写的属性
4个
当你写一个的时候，四个全部相同
两个的时候，上右，对边补齐
三个的时候，上右下，对边补齐
margin-top margin-right margin-bottom margin-left
这四个属性可以单独的拿出来写

border 边框合写的属性
border-color 颜色
border-top-color: ;
border-left-color:

border-style 样式
也分上下左右
border-width 宽度
也分上下左右
写的时候不需要区分顺序

padding
上右下左
对边补齐
定义的width和height只是content部分
padding和border会把盒子撑大

盒子的大小 content+padding+border

background 是把上面所有的全部合在一起
background : color image repeat position
background-size 背景图片的大小

3.css定位

1）fixed定位

元素的位置相对于浏览器窗口是固定位置。

即使窗口是滚动的它也不会移动

例：

p.pos_fixed
{
position:fixed;
top:30px;
right:5px;
} 2）relation定位相对定位元素的定位是相对其正常位置。例： h2.pos_left
{
position:relative;
left:-20px;
}
h2.pos_right
{
position:relative;
left:20px;
} 可以移动的相对定位元素的内容和相互重叠的元素，它原本所占的空间不会改变。例： h2.pos_top
{
position:relative;
top:-50px;
} 3）absolute定位绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>:

Absolutely定位使元素的位置与文档流无关，因此不占据空间。

Absolutely定位的元素和其他元素重叠。

例： h2
{
position:absolute;
left:100px;
top:150px;
}

标签：定位,盒子,top,background,position,border,css
来源： https://www.cnblogs.com/Star-Trails/p/10947498.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

css