CSS 2017-07-25
来源:互联网 发布:知乎 汉景帝杀吴太子 编辑:程序博客网 时间:2024/06/05 04:25
1. css排版-缩进(text'-indent)
<style>p{text-indent:2em;}</style>
2. CSS行间距(line-height)
<style>p{line-height:2em;}</style>
3. CSS文字间隔(letter-spacing)
<style>p{letter-spacing:20px;}</style>
4. CSS段落对齐(text-align)
<style>p{text-align:left/right/center;}</style>
5. em与px的区别
em: 倍数,是一个相对的单位,具有继承性;取决于给定的font-size值,例如font-size="10px",则1em="10px" .
px: 像素 ,是一个绝对的单位。
另:" % "号表示相对与font-size的大小。
6. CSS元素分类
类型:块状元素、内联元素(又叫行内元素)和内联块状元素。
常用的块状元素有:
<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>
常用的内联元素有:
<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>
常用的内联块状元素有:
<img>、<input>
①强制转换为块状元素;
a{display:block;}
②强制转换为内联元素:
div{display:inline;}
③转换为内联块状元素
a{ display:inline-block;}
7. CSS盒模型-边框(一)
添加边框样式: div { border-width: ...px;
borer-style:dashed/dotted/solid;
border-color: red ;
}
以上可以简写成: div { border: ..px dashed/dotted/solid red ; }
8.CSS 盒模型--边框(二)
对盒子的某条边设置边框
实例 : div{border-bottom/top/left/right: ..px solid/dotted/dashed color ; }
9. padding , border,margin
10. CSS填充设定( padding)
div { padding-top/bottom/left/right :(..px) } 也可以直接写padding:m px 表示四个填充都取相同的值。
11. CSS边界设定(margin)
和上面一样
div { margin-top/bottom/left/right :(..px) } 也可以直接写margin:m px 表示四个填充都取相同的值。
12. CSS布局模型
在网页中,元素有三种布局模型:
1、流动模型(Flow)
2、浮动模型 (Float)
3、层模型(Layer)
13. CSS 流动模型(flow)
流动模型是网页采取的默认的布局方式。
一个块状元素占宽100%,而且分行显示。
内联元素,包含元素内从左到右水平分布。
14. CSS浮动模型(float)
如何让块状元素并排显示,这时候就要用到浮动模型了;设置元素浮动就可以实现了。
float:left/right;
层模型的三种形式:
1)绝对定位 position:absolute
2)相对定位 position: relative
3) 固定定位 position :fixed
层模型-绝对定位: 对块元素进行绝对定位; position: absolute;
left/right/top/bottom: ? px //这里的方位表示距离各个边的距离,而不是移动的方向
层模型-相对定位: 相对于块元素以前的位置进行移位: position: relative;
left/right/top/bottom: ? px
层模型-固定定位:相对于浏览器视图的绝对定位,简单来讲就是绝对定位是确定了在页面中的位置,而固定定位是对于浏览器的窗口而言,其块元素与浏览器的边界值是没有发生变化的;简而言之,其效果就是当滑动鼠标改变页面在浏览器中的位置是,固定定位的元素块相对于浏览器窗口的位置是不会发生变化的。
16. relative 与absolute定位结合使用
可实现相对于其它元素的定位。
假设有 “块中块” : <div id="father"> //父块
<div id="son"> hello world ! </div> //子块
</div>
下面来实现子快元素相对与父块元素的定位:
<style type="text/css">
#father
{ width:?px;
height:?px;
position:relative; /* 注意参照的元素这里必须设置成相对定位*/
}
#son
{ position:absolute;
top/bottom/left/right: ?px; /*相对于参照元素进行位置设置*/
}
</style>
17. 盒模型代码简写
padding和margin一样,可以按照顺时针的顺序,即top-right-bottom-left 的顺序来书写值,若top与bottom值相同,left和right值相同;则可以简写成(top/bottom)px (left/right)px;若这四个值都相同,则可同写为一个值。
18. 颜色值缩写
关于颜色的css样式也是可以缩写的,当你设置的颜色是16进制的色彩值时,如果每两位的值相同,可以缩写一半。
例子1:
p{color:#000000;}
可以缩写为:
p{color: #000;}
例子2:
p{color: #336699;}
可以缩写为:
p{color: #369;}
19.
{font-variant: small-caps}
将普通型的大写字母转换成小写型大写字母。
20. text-align 文本居中显示
p{text-align:center}
- CSS 2017-07-25
- CSS 2017-07-24
- CSS 2017-07-26
- 30-CSS-07-CSS(CSS样式的结合应用)
- 一天搞定CSS:css选择器--07
- CSS基础-25CSS常用操作-分类
- 07、css列表
- 【07】CSS介绍
- day-25-表单-css
- 2017_7_12 CSS基础
- 2017 Amsterdam CSS Day
- 学习笔记2017.07.07-day5,pm-CSS语法-CSS-ID和CLASS-CSS背景-CSS文本
- CSS
- css
- css
- css
- css
- CSS
- 边界值三点分析法
- java换行符
- java synchronized详解 转自网上资源
- jdk定时任务简述
- js中函数的参数
- CSS 2017-07-25
- js实现加载更多功能实例
- php模拟post提交请求,调用接口
- CAP原理和BASE思想浅聊
- C语言和设计模式(之开篇)
- 10.JavaScript外部对象-BOM
- zookeeper原理
- java反射中参数问题
- easyUI学习过程(二) ----在myeclipse上创建web项目并运行html文件