Front end foundation course 4(css2)
来源:互联网 发布:网络直播唱歌 编辑:程序博客网 时间:2024/06/05 18:55
CSS 基础 Part 2
盒模型
什么是盒模型
CSS的盒模型就是用来描述CSS中元素平面空间构成状态的一个模型。如下图:
- padding
- padding-left
- padding-right
- padding-top
- padding-bottom
- border
- border-width
- border-color
- border-style
- e.t.c
- margin
- margin-left
- margin-right
- margin-top
- margin-bottom
注意:margin会有合并情况发生。
过去的战争
怪异模式和标准模式对于 CSS 盒模型的解析不同。
现在的审视
双方说的都有道理,各有各的应用场景,于是我们应该可以自定义解析方式。
box-sizing: content-boxbox-sizing: padding-boxbox-sizing: border-box
行内和块状
- 块状可以包含块状或者行内,行内只能包含行内
- 块状总是新起一行并会尝试占据最宽的宽度
- 块状可以设置宽和高,行内不能
- 纵向的 margin 和 padding 对行内无效
CSS 定位
整个文档流的定位方式分为普通流、浮动和相对定位。
普通流
就是我们最常见的定位方式,将文档内容按照从左至右、从上至下的方式排布。
浮动
浮动即是让元素脱离普通文档流,向左或向右浮动。
使用 float
属性可以产生浮动,它的取值为 left
| right
| none
,例如:
.float-div { float:left;}
浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。
由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样。
与此同时,浮动元素会让行框缩短,从而制造出一种文字围绕的感觉。
由于浮动起来的内容可能会扰乱后面元素的布局,所以可以通过 clear
属性来清除浮动,它的取值为 left
|right
| both
,例如:
.clear-float-div { clear:both;}
相对定位
相对定位即是让元素相对于某个东西来定位。
使用 position
属性可以产生相对定位,它的取值为 static
| relative
|absolute
| fixed
,例如:
.absolute-div { position:absolute;}
static
默认的值,即处于元素的原始位置,未产生相对定位。
relative
相对于元素自身的原始位置进行定位。
<div> <p>This is a paragraph</p></div>
p { position:relative; top:10px; left:10px;}
absolute
相对于祖先元素中最近的一个已定位的元素进行定位。
<div> <p>This is a paragraph</p></div>
div { position:relative;}p { position:absolute; top:10px; left:10px;}
fixed
相对于浏览器可是窗口进行定位。
<div> <p>This is a paragraph</p></div>
p { position:fixed; top:10px; left:10px;}
Demo
之前课程的内容都比较偏理论,下面我们来实战一个Demo。
0 0
- Front end foundation course 4(css2)
- Front end foundation course 1(html1)
- Front end foundation course 2(html2)
- Front end foundation course 3(css1)
- Front end foundation course 5(javascript 1)
- front-end
- front end
- gcc front end
- C/C++ Front End
- C / C ++ front end
- front-end development 总结
- Front-end Developer Handbook
- #Udacity#Front-end#Study_Note
- kotlin-cn front end
- code skills(front end)
- [Front-end] What makes a good front end engineer
- C/C++ Front End Compiler
- Queues in Customer Front End
- 第六周项目一 深复制
- 模拟链表
- ofstream,ifstream,fstream之ios::ate,ios::app,ios::in,ios::out
- tomcat +mysql +linux部署web项目
- java 日期的一系列操作
- Front end foundation course 4(css2)
- 细数二十世纪最伟大的10大算法
- 拍照,图片旋转
- 关于application/x-www-form-urlencoded等字符编码的解释说明
- mybatis源码解读(5)
- iOS根据两个经纬度计算相距距离
- 使用ELK(logstash,elasticsearch,kibana)+redis搭建nginx日志分析平台
- MoSIFT特征
- 数据结构学习——线性表