CSS 简介02
2016-05-26 00:00
375 查看
摘要: CSS 元素分类 布局模型
一、元素分类
1.块元素:设置display:block就是将元素显示为块级元素。
块级元素的特点:
1.1.每个块级元素都是从新的一行开始,并且其后的元素也是另起一行。(一个块级元素独占一行);
1.2.元素的高度、宽度、行高以及顶部和底边距都可以设置;
1.3.元素宽度在不设置的情况下,是它本身父容器的100%,除非设定一个宽度。
2.内联元素:块状元素也可以通过代码display:inline将元素设置为内联元素。
2.1.和其他元素都在同一行上;
2.2.元素的高度、宽度及顶部和底部边距不可设置;
2.3.元素的宽度就是它包含的文字或者图片的宽度,不可改变。
3.内联块元素:就是同时具备内联元素、块状元素的特点,代码display:inline-block就是将元素设置为内联块状元素。
3.1.和其他元素都在一行上;
3.2.元素的高度、宽度、行高以及顶部和底部边距都可以设置。
说明:
![](http://static.oschina.net/uploads/space/2016/0526/112022_tB6L_2565014.png)
二、盒模型
盒模型:一盒月饼:里边每个小月饼相当于一个div,小月饼距离包装盒称为padding,小月饼与小月饼之间称为margin,月饼包装称为bording。
边框:盒子模型的边框就是围绕着内容的一条线,这条线可以设置他的粗细,样式,颜色。
div{
border:2px solid red;
}
填充:
div{
padding:上、右、下、左;
}
边界:
div{
margin:上、右、下、左;
}
三、布局模型
1.流动模型(flow)
他是一种默认的网页布局。块状元素都会在他所处的块中自上而下垂直延伸布局,默认宽度100%,块状元素以行占据位置;内联元素会在所处的块中自左向右分布显示。
2.浮动模型(float)
任何元素在默认情况下是不可以浮动的,如果想让两个元素并排显示,可以采用css定义为浮动
float:left or right;
3.层模型(layer)
每个图层都可以根据给定的坐标,精确定位。
层模型的三种形式:
3.1.绝对定位:设置position:absolute(表示绝对定位),将该元素从文档流中拖出来,然后设置left,right,top,bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位,如果没有,则相对于body。
3.2.相对定位
3.3.固定定位
一、元素分类
1.块元素:设置display:block就是将元素显示为块级元素。
块级元素的特点:
1.1.每个块级元素都是从新的一行开始,并且其后的元素也是另起一行。(一个块级元素独占一行);
1.2.元素的高度、宽度、行高以及顶部和底边距都可以设置;
1.3.元素宽度在不设置的情况下,是它本身父容器的100%,除非设定一个宽度。
2.内联元素:块状元素也可以通过代码display:inline将元素设置为内联元素。
2.1.和其他元素都在同一行上;
2.2.元素的高度、宽度及顶部和底部边距不可设置;
2.3.元素的宽度就是它包含的文字或者图片的宽度,不可改变。
3.内联块元素:就是同时具备内联元素、块状元素的特点,代码display:inline-block就是将元素设置为内联块状元素。
3.1.和其他元素都在一行上;
3.2.元素的高度、宽度、行高以及顶部和底部边距都可以设置。
说明:
![](http://static.oschina.net/uploads/space/2016/0526/112022_tB6L_2565014.png)
二、盒模型
盒模型:一盒月饼:里边每个小月饼相当于一个div,小月饼距离包装盒称为padding,小月饼与小月饼之间称为margin,月饼包装称为bording。
边框:盒子模型的边框就是围绕着内容的一条线,这条线可以设置他的粗细,样式,颜色。
div{
border:2px solid red;
}
填充:
div{
padding:上、右、下、左;
}
边界:
div{
margin:上、右、下、左;
}
三、布局模型
1.流动模型(flow)
他是一种默认的网页布局。块状元素都会在他所处的块中自上而下垂直延伸布局,默认宽度100%,块状元素以行占据位置;内联元素会在所处的块中自左向右分布显示。
2.浮动模型(float)
任何元素在默认情况下是不可以浮动的,如果想让两个元素并排显示,可以采用css定义为浮动
float:left or right;
3.层模型(layer)
每个图层都可以根据给定的坐标,精确定位。
层模型的三种形式:
3.1.绝对定位:设置position:absolute(表示绝对定位),将该元素从文档流中拖出来,然后设置left,right,top,bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位,如果没有,则相对于body。
3.2.相对定位
3.3.固定定位
相关文章推荐
- Web布局连载——两栏固定布局(五)
- [div+css]晒晒最新制作专题推广页模板
- 盒子模型
- CSS选择器
- CSS样式优先权
- [css] line-height 百分比单位和数值单位的区别
- Apple官网研究之使用Justify布局导航
- 关于前端的思考与感悟
- rem : web app适配的秘密武器
- 设计更快的网页(三):字体和 CSS 调整
- 纯CSS制作的新闻网站中的文章列表
- 10条影响CSS渲染速度的写法与使用建议第1/3页
- BS项目中的CSS架构_仅加载自己需要的CSS
- 很不错的 CSS Hack 又学了一招
- 发一个css比较清爽的写法
- CSS expression控制图片自动缩放效果代码[兼容 IE,Firefox]
- css布局网页水平居中常用方法
- CSS经典技巧十则第1/2页
- css 兼容性问题this.style.cursor=''hand''