CSS 入门 笔记
来源:互联网 发布:道路工程预算软件 编辑:程序博客网 时间:2024/04/30 21:08
一、布局属性
display
1、block:元素显示在下一行,作为一个新段落。
2、list-item:元素显示在下一行,前面与列表元素标记。
3、inline:元素显示在当前段落内。
4、none:元素不显示。
margin和padding属性——用于添加元素周围的间距。
1、margin(边距)
说明:margin指的是在元素”外面”添加空隙,是”相对于“另外一个元素来进行添加空隙的。
2、padding(填充)
说明:padding指的是由元素”内部“向外部扩充空间,例如padding-left:20px,意思就是在当前元素的大小上向右增加20px大小。
align和float属性——用于将元素相对其他内容放置。
1、align(对齐)
a)text-align(水平对齐)
b)vertical-align(垂直对齐)
c)text-indent(水平缩进)
举例:对图像设定垂直方向中间对齐,那么图像周围的文字就会垂直对齐它。也就是说当图像很大而只有一段文字的话,文字就会在图像的垂直方向的中间显示。
2、float(浮动)
说明:float只有left和right,当设置元素向一边浮动时,元素会尽可能的向设定边靠拢,除非遇到其它元素,否则会一直向浏览器边界靠拢。
而且随着浏览器大小的改变,元素也会跟着浮动,当第一排不够时移向第二排,且无需管display,但是对滚动条的改变无效,想要实现对滚动条有效果请使用背景图片,并且设置background-attachment : scroll;以及用background-position-x(y)指定位置 。
min-width:可以设定最小宽度,当低于这个宽度的时候float无效。
定位
relative(相对定位)
说明:相对于父级元素定位。(可用z-index调节显示顺序)
abslution(绝对定位)
说明:相对于其它元素(包括父级元素)定位。
z-index(显示层级)
说明:可以控制元素的显示顺序,但是被设置的元素一定要设定abslution这种可以用z-index调节显示顺序的定位方式,不设定无效。
二、格式化属性
文字
字体风格
1.font-family:字体集
2.font-size:字体大小
3.font-style:字体样式
4.font-weight:字体粗细
5.line-height:设置文本行的高度
使用一下技术管理文本流
1.float:决定文本如何沿元素绕排。(也就是说你设置了这个元素那么他周围的文字就得按设定的来绕排)
2.clear:禁止元素沿元素绕排。
3.overflow:在元素太小而不能包含所有文本时控制文本的溢出方式。
图像
图像属性
1.alt 图像替换文本,当图像未能加载成功显示的文本。
图像映射
说明:可以将一张图分割成很多份,然后给每一份设定要访问的网址。一般情况下不使用,都是将很多张图合成一张大的,然后每张图设定要访问的网址。
伪类 说明:是一种描述应用到某种情况的元素样式类,比如用户与该元素互动的各种状态。 例如<a>的伪类有如下: a:link 描述未被访问过的超链接样式。 a:visited 描述访问过并且存在于浏览器内存的超链接样式。 a:hove 描述用户鼠标悬停下(单击之前)的超链接样式。 a:active 描述被点击但未被释放时超链接的样式。 示例代码: <style type="text/css"> a:hover{ color:#CCCCCC } </style>列表
- CSS入门学习笔记
- CSS入门笔记
- CSS入门笔记
- CSS学习入门笔记
- css入门笔记
- CSS 入门 笔记
- CSS入门笔记
- CSS入门笔记2
- CSS入门笔记
- 【Div+CSS笔记】 0x02 css入门
- CSS入门学习笔记[1]
- Css技术入门笔记01
- Css技术入门笔记02
- 《CSS入门经典》学习笔记
- 前端入门学习笔记—CSS
- HTML入门学习笔记--体验CSS(1)
- HTML入门学习笔记--CSS属性(2)
- HTML入门学习笔记--CSS选择器(3)
- 旅游攻略
- 什么叫过滤器呢?
- 【bzoj 3172】【codevs 2542】[Tjoi2013]单词(AC自动机)
- linux菜鸟入门之压缩以及归档
- laravel开发环境homestead搭建
- CSS 入门 笔记
- 阿里云配置tomcat
- HDU 4725 最短路
- NoSQL_Cassandra_导出数据库结构/数据库结构还原
- Swift3.0学习笔记----遍历字符串
- JS-数据类型
- !important标记,实战的时候不允许用,只是作为一个知识点,除非极其特殊的情况下用。
- UPDATE
- Leetcode-417. Pacific Atlantic Water Flow