盒子模型

盒子模型:

border表示的是盒子的边框问题:
先设置盒子的宽和高:
width:100px;
heigth:100px;
boeder:1px solid blck;表示盒子的边框;
border细化:border-left、border-、border-right、border-top。
例如:border-left:10px dotted blue.
画三角形:用边框
盒子里面的文字一般都是左对齐,但也可以用text-align:center来居中对齐、right来右对齐。
设置垂直居中;使单行文本高度等于容器的高度:
height=100px;
line-height=100px;
首行缩进;text-indent;2em两个空格

1em=1*该元素的font-size

line- height:1.2em,每行都有行间距,行高。


因为行为、样式相分离,而html的<del></del>中掺杂了太多的css的成分,所以不用这个标签,用css中的text-decoration:line-through;来代替。

text-decoration:none;表示没有线。

例如在<del></del>标签的子元素里使用,就会去掉下划线。


像素:每英寸能割下的垂直像素点数。

px就是一个像素。


<a></a>标签可以等效为:

span{

     text-decoration:underline下划线


  设置光标移动到网址(文字)上变成小手、小问号:cursor=help(问号)...

伪类选择器:当鼠标移入他的林领域之内,它才会加上css样式。

a:hover{

伪类选择器之一:hover

}

 



1.行级元素(内联元素)span、strong、em、a、del

特点:1.内容决定元素所占位置

           2.不可以通过css改变宽高

2.块级元素:div、p、ul、li、ol 、form、address、

特点:1.独占一行

           2.可以通过css改变宽高

3.行级块元素:

img图片设置时只设置宽或者高,另外一个会自动等比例缩放。

特点:

1.内容决定大小

2. 可以改变高

 

当这样定义时,会保存前面提到的特点(例如独占一行),但也可以不这样写,例如将第一个写为display:block,此时元素就会占满一行。

又例如:将div的block写为inline,此时设置什么宽高都不好使,特点也会失效,都会变成这样:

 

凡是带有inline的元素,都有文字特性,有文字特性就会被分割。


好的习惯:先定义功能,再引用:

 


自定义标签:

因为有些css中自带的样式不是我们想要的,所以我们用css右边来自定义标签,去掉时用none。

 


*{

 通配符选择器:能初始化所有标签

因为各个标签有各自的功能,而通配适用符就可以完全涵盖所有标签,有就改变,没有就没有,所以也是很常用、很方便的。


盒子模型:

盒子的三大部分:

盒子壁:border

内边距:padding

盒子的内容:content=width+height

盒模型:

还要加一个:外边距:margin 浏览器以左上为障碍


padding; 上 右 下 左 (四个值)

padding:上    左(右)  下 (三个值)

padding:上(下)   左(右)  (两个值)

作为盒子来说左右等距的情况更多。

也可以单独:padding-left:100px.

border-width:和padding是一样的你,也是四个值,也可以单独设置。

 

使里面的盒子在外面的盒子正中心时,方法(子级在父级的正中间):

1. 使两个的长宽高一致。

2. padding,使之环绕

制作远视图:

 



 

1.

盒子的定位;

position:absolute;绝对定位

top=100px;

left=100px;

 

 body默认的padding为8px。

给背景加透明度:opacity:0.5 值为0--1。

盒子模型的几个bug:

 

层模型形成:当一个元素成了绝对定位absolute的元素时,它就脱离了原来的层(位置)跑到了上面一个层面上去了,所以在本例题中,red脱离了原来位置,red本身的位置变成真空,而下面的green就滑到了上面,而red在green上面一层。

 


 

此时再给red重新定位(以及加限定条件,例如长宽高),也并不影响green,因为两者根本不在同一层级,red在上一层。

 


2.

盒子的定位;

position:relative;相对定位

top=100px;

left=100px;

 

层模型形成:当一个元素成了相对定位relative的元素时,它就脱离了原来的层(位置)跑到了上面一个层面上去了,但是不同的是,它保留原来的位置,所以在本例题中,下面的green就无法顶替red的位置。

 


 

此时再给red重新定位(以及加限定条件,例如长宽高),也并不影响green,因为两者根本不在同一层级,red在上一层,而green还是无法滑到red的那个位置,因为red是保留原来位置的。

 


 

 

对比:

1.absolute:a.脱离原来位置进行定位

                    b.相对于最近的有定位的父级进行定位,如果没有定位,那么相对于文档(页面边框)进行定位。

2.relative:a.保留原来位置进行定位

                   b.相对于自己原来的位置进行定位

具体使用在何处:

relative作为参照物,用absolute来定位。

因为relative保存原来位置,

absolute一改变,后续元素全上去了。

absolute定位更灵活。

黄色为黑色的参照物:

 



fixed定位:广告滚动条,你下滑上滑页面广告都不动



页面中心定位:

开始时,相对于页面定义上左为%50,而并不在中间, 这是因为定位时是以左顶点定位的。

代码:

 


效果如图:

 


后来设置-%50的申位,使之以中心点来定位,就做到了始终在屏幕中心,就算缩小页面,也始终是在中心位置。

代码:

 


效果如图:

 


缩放页面后仍然居中:

 

 

阅读更多
个人分类: web
想对作者说点什么? 我来说一句

CSS盒子模型.rar

2010年03月23日 822B 下载

H5div盒子模型例子

2018年04月27日 2KB 下载

盒子模型 内外边距

2017年12月28日 964B 下载

没有更多推荐了,返回首页

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭