#块元素和内联元素
##两者简介及其区别
div就是一个块元素,所谓块元素就是会独占一行的元素,无论他的内容有多少,他都会独占一整航
常见的块元素:p h1 h2 h3
div这个标签没有任何语义,就是一个纯粹的块元素,并且它不会为它里面的元素设置任何默认的样式
div主要用来对页面进行布局
span就是一个内联元素,也称行内元素,所谓的行内元素,指的是只占自身大小的元素,不会占用一行
常见的内联元素:a img iframe span
span没有任何的语义,专门用来选中文字,为文字设置其样式
注意:一般情况下只使用块元素去包含内联元素,而不会使用内联元素去包含块元素
##盒子模型----关于块元素和内联元素的盒子模型
盒子模型中分为 :外边距margin + 边框 border + 内边距 padding+ 内容content
我们一般设置的样式都是默认给内容设置的样式,所以说设置具体样式时,记得指定元素
margin和padding的设置
可以设置1-4个数字:分别按顺时针顺序对应
例如:
padding: 25px 50px 75px 100px 对应即为 上 右 下 左的内边距
**对于padding和margin,浏览器都会对其有默认的样式,如果必要时,要对默认的样式进行清理
语法:
XX{
margin:0;
padding:0;
}**
border的设置:
boder-width、border-style、border-color
还有border:10px solid black 可以直接为边框设置宽度,样式,颜色
内联元素较为特殊,不能设置width和height
但内联元素可以设置水平方向和垂直方向的内边距,而且垂直方向的内边距不会影响页面整体的布局,也就是说,不会和其他的div产生冲突
内联元素还支持水平方向的外边距的设置
##display和visibility样式——两者都是写在CSS样式表里的
display 可以用来修改元素的类型
可选值:
inline:可以将一个元素作为内联元素显示
block:可以将一个元素作为块元素显示
inline-block:将一个元素转换为行内块元素
可以使元素既有块元素的特点,又有内联元素的特点
所以就既可以设置宽高,又不会独占一行的空间
none:不会显示元素,而且元素不会再页面中占用位置
如 display:inline;
visibility 可以用来设置元素的隐藏和显示状态
可选值:
visible 默认值,默认元素在页面中显示
hidden 元素会隐藏不显示,但它的位置依然会保持
如 visibility:hidden
##overflow样式
子元素默认存在于父元素的内容区,所以子元素的大小最大等于父元素的大小 但是如果子元素的大小超过了父元素的内容区
那么超过大小的部分,就会在父元素以外的位置显示
超出父元素的内容部分,我们就称之为溢出的内容
父元素默认是将溢出的内容,在父元素外显示
所以需要用到overflow样式
通过overflow 可以设置父元素如何处理溢出的内容
可选值:
visible,默认值,不会对溢出内容做处理
hidden,溢出的内容,会被修剪,不会显示
scroll,会为父元素添加滚动条,通过拖动滚动条俩查看完整的内容
该属性不论内容是否溢出,都会为水平和垂直双向添加滚动条
aoto,会根据需求自动添加滚动条,需要水平就加水平,需要垂直就加垂直,
##float浮动样式
当为一个元素设置了浮动样式以后,元素会立刻脱离文档流,
脱离文档流以后,它下边的元素就会立刻向上浮动,
语法 float:right/left
1、元素浮动以后,会尽量向页面的左上或者右上漂浮,直到遇到父元素的边框
2、所以,如果浮动的元素上面是一个没有浮动的块元素,则浮动元素不会超过块元素。
3、浮动元素也不会超过他上面的兄弟元素,最多一边齐
4、浮动元素内的文字,并不会被块元素覆盖而是会环绕在其周围
5、当块元素脱离文档流后,高度和宽度都由子元素来决定
若没有脱离文档流,高度宽度就由自身的定义决定
6、当一个内联元素脱离文档流后,会变成块元素,就可以设置高度和宽度
(因为本身内联元素并不可以设置高度和宽度)
##关于浮动的高度塌陷问题
在文档流中,父元素的高度是由子元素的高度撑开的,而当子元素设置浮动脱离文档流后,父元素的高度就会塌陷
所以在开发中,为了避免高度塌陷问题
**解决父元素高度塌陷
.clearfix:after{
content:" ";
display: block;
clear:both;
}**
解决父子元素的外边距重叠问题
.box:before{ before指的是元素的开头
content:" ";
display:table; 将一个元素设置为表格的形式
}
##元素的定位position
position属性,用来确定元素位置,定位,将指定的元素,摆放在任意位置
可选值:
static:默认值,元素没有开启定位
relative:开启了元素的相对定位
absolute:开启了元素的绝对定位
fixed:开启元素的固定定位,也是绝对定位的一种
###相对定位relative
1、当开启元素相对定位后,但不设置偏移量,那么元素不会发生任何变化
开启定位后,可以通过left right top bottom 四个属性来设置元素的偏移量
四者均为元素相对于其定位位置的偏移量
2、相对定位是相对于元素在文档流中原来的位置进行定位
3、开启相对定位的元素,不会脱离文档流,原来的位置不会被其他元素挤掉
4、相对定位会使元素提升一个层级(相当于高了一层)
5、相对定位并不会改变元素的性质,块元素仍然是块元素
###绝对定位absolute
1、当元素开启了绝对定位后,会使元素脱离文档流
2、开启了绝对定位后,如果不设置偏移量,元素位置不会发生改变
3、绝对定位的定位是相对于离他最近的开启了相对定位position不是static的祖先元素进行定位的(一般情况下,开启了子元素的绝对定位后,都会开启父元素的相对定位)
4、绝对定位也会使元素提升一个层级
5、绝对定位会改变元素的性质,内联元素会变成块元素
###固定定位fixed
1、固定定位也是一种绝对定位,具有绝对定位的大多数特点
2、但不同的是,固定定位永远是相对于浏览器窗口进行定位的
3、固定定位会固定在浏览器的某个位置,不会随滚动条滚动
p{
position:fixed; //固定在当前位置不动
top:XXpx;
right:XXpx;
}
##元素的层级问题
1、通过z-index属性,可以用来设置元素的层级
2、指定一个正整数作为值,该值则为当前元素的层级
**3、z-index对于没有开启定位的元素不起作用**
4、父元素设置的层级再高,也不会盖住子元素
##设置元素的透明背景
opacity可以用来设置背景的透明
它需要一个0-1之间的值,0表示完全透明,1表示完全不透明