一、overflow元素
overflow : hidden,scroll,auto隐藏或显示滚动条
overflow-y
overflow-x
二、设置表格间间隔
border-collapse: separate;
border-spacing: 100px 50px;
三、合并单元格
border-collapse:collapse;
四、border属性
border : 1px solid black;
border-style
border-width;
border-color;
五、font属性
font
font-family
font-style
font-size
font-color
六、background属性
background
background-image
background-repeat 平铺方式
backgorund-color
<link rel="stylesheet" type="text/css" href="/html/csstest1.css" >
<script type="text/javascript" src="example.js"></script>
background-position
background-attachment
七、text 属性
text
text-align 元素内部文字水平布局
text-decoration 删除线的位置
vertical-align 文字或图片垂直布局
color 文字颜色
line-height 行高
八、宽度/高度 = 文本宽度+填充内容(上下)+边框(上下)+边距(上下)
height
width
max-height
min-height
max-width
min-width
九、display visibility属性
显示与隐藏元素
display:none block == $("").hide() $().show()
visibility:hidden show (占空间 会影响布局)
display:inline 按行显示
overflow : hidden,scroll,auto隐藏或显示滚动条
overflow-y
overflow-x
二、设置表格间间隔
border-collapse: separate;
border-spacing: 100px 50px;
三、合并单元格
border-collapse:collapse;
四、border属性
border : 1px solid black;
border-style
border-width;
border-color;
五、font属性
font
font-family
font-style
font-size
font-color
六、background属性
background
background-image
background-repeat 平铺方式
backgorund-color
<link rel="stylesheet" type="text/css" href="/html/csstest1.css" >
<script type="text/javascript" src="example.js"></script>
background-position
background-attachment
七、text 属性
text
text-align 元素内部文字水平布局
text-decoration 删除线的位置
vertical-align 文字或图片垂直布局
color 文字颜色
line-height 行高
八、宽度/高度 = 文本宽度+填充内容(上下)+边框(上下)+边距(上下)
height
width
max-height
min-height
max-width
min-width
九、display visibility属性
显示与隐藏元素
display:none block == $("").hide() $().show()
visibility:hidden show (占空间 会影响布局)
display:inline 按行显示
十、position属性
配合 left ,right ,top ,bottom属性使用
static 默认
fixed 元素的位置相对于浏览器窗口是固定位置。
Fixed定位使元素的位置与文档流无关,因此不占据空间。
Fixed定位的元素和其他元素重叠
relative 相对定位会按照元素的原始位置对该元素进行移动
absolute 绝对定位的元素的位置相对于最近的已定位父元素,如果元素没有已定位的父元素,那么它的位置相对于<html>
定位使元素的位置与文档流无关,因此不占据空间。
absolute 定位使元素的位置与文档流无关,因此不占据空间。
absolute 定位的元素和其他元素重叠。
sticky 它的行为就像 position:relative; 而当页面滚动超出目标区域时,它的表现就像 position:fixed;,它会固定在目标位置。
元素定位表现为在跨越特定阈值前为相对定位,之后为固定定位。
十一、z-index属性
元素的定位与文档流无关,所以它们可以覆盖页面上的其它元素
十二、float属性 (先排版浮动属性的元素) --------- 可以使垂直布局变成水平布局
float left|right
元素的水平方向浮动,意味着元素只能左右移动而不能上下移动。
一个浮动元素会尽量向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。
浮动元素之后的元素将围绕它。
浮动元素之前的元素将不会受到影响
.thumbnail
{
float:left;
width:110px;
height:90px;
margin:5px;
}
十三、clear 属性
left
right
both
none
clear 属性指定元素(左右)两侧不能出现浮动元素。
十四、对齐
1、margin 属性 对齐
auto 元素框居中对齐 如果没有设置 width 属性(或者设置 100%),居中对齐将不起作用。
文件居中对齐采用text-align
图片居中对齐也可以采用margin :auto (设置好宽度)
2、position :absolute
.right {
position: absolute;
right: 0px;
width: 300px;
border: 3px solid #73AD21;
padding: 10px;
}
当使用 position 来对齐元素时, 通常 <body> 元素会设置 margin 和 padding 。 这样可以避免在不同的浏览器中出现可见的差异。
3、float属性 ---左右对齐
如果子元素的高度大于父元素,且子元素设置了浮动,那么子元素将溢出,这时候你可以使用 "clearfix(清除浮动)" 来解决该问题。
.clearfix {
overflow: auto;
}
4、垂直居中对齐 --- padding
内容垂直和水平都居中
水平和垂直都居中,可以使用 padding 和 text-align: center:
.center {
padding: 70px 0;
border: 3px solid green;
text-align: center;
}
5、垂直居中 - 使用 line-height
十五、CSS元素选择器
后代选择器(以空格分隔) div p div下的所有p标签
子元素选择器(以大于号分隔) div>p 与后代选择器相比,子元素选择器(Child selectors)只能选择作为某元素直接子元素的元素。
相邻兄弟选择器(以加号分隔) div+p 选择逻辑上紧接在另一个元素(div)后的第一个(p)元素,而且二者有相同的父元素,可以使用相邻兄弟选择器(Adjacent sibling selector)
普通兄弟选择器(以破折号分隔) div~p 后续兄弟选择器选取所有指定元素之后的逻辑直接相邻兄弟元素
十六、伪类
语法
selector:pseudo-class {property:value;}
selector.class:pseudo-class {property:value;}
1、anchor伪类
例子:
a:link {color:#FF0000;} /* 未访问的链接 */
a:visited {color:#00FF00;} /* 已访问的链接 */
a:hover {color:#FF00FF;} /* 鼠标划过链接 */
a:active {color:#0000FF;} /* 已选中的链接 *//
2、child伪类
first-child
last-child
p > i:first-child
{
color:blue;
}
3、lang 伪类
伪类使你有能力为不同的语言定义特殊的规则
所有伪类汇总
选择器 | 示例 | 示例说明 |
---|---|---|
:link | a:link | 选择所有未访问链接 |
:visited | a:visited | 选择所有访问过的链接 |
:active | a:active | 选择正在活动链接 |
:hover | a:hover | 把鼠标放在链接上的状态 |
:focus | input:focus | 选择元素输入后具有焦点 |
:first-letter | p:first-letter | 选择每个<p> 元素的第一个字母 |
:first-line | p:first-line | 选择每个<p> 元素的第一行 |
:first-child | p:first-child | 选择器匹配属于任意元素的第一个子元素的 <]p> 元素 |
:before | p:before | 在每个<p>元素之前插入内容 |
:after | p:after | 在每个<p>元素之后插入内容 |
:lang(language) | p:lang(it) | 为<p>元素的lang属性选择一个开始值 |
十七、CSS中所有选择器汇总
选择器 | 示例 | 示例说明 | CSS |
---|---|---|---|
.class | .intro | 选择所有class="intro"的元素 | 1 |
#id | #firstname | 选择所有id="firstname"的元素 | 1 |
* | * | 选择所有元素 | 2 |
element | p | 选择所有<p>元素 | 1 |
element,element | div,p | 选择所有<div>元素和<p>元素 | 1 |
element element | div p | 选择<div>元素内的所有<p>元素 | 1 |
element>element | div>p | 选择所有父级是 <div> 元素的 <p> 元素 | 2 |
element+element | div+p | 选择所有紧接着<div>元素之后的<p>元素 | 2 |
[attribute] | [target] | 选择所有带有target属性元素 | 2 |
[attribute=value] | [target=-blank] | 选择所有使用target="-blank"的元素 | 2 |
[attribute~=value] | [title~=flower] | 选择标题属性包含单词"flower"的所有元素 | 2 |
[attribute|=language] | [lang|=en] | 选择一个lang属性的起始值="EN"的所有元素 | 2 |
:link | a:link | 选择所有未访问链接 | 1 |
:visited | a:visited | 选择所有访问过的链接 | 1 |
:active | a:active | 选择活动链接 | 1 |
:hover | a:hover | 选择鼠标在链接上面时 | 1 |
:focus | input:focus | 选择具有焦点的输入元素 | 2 |
:first-letter | p:first-letter | 选择每一个<P>元素的第一个字母 | 1 |
:first-line | p:first-line | 选择每一个<P>元素的第一行 | 1 |
:first-child | p:first-child | 指定只有当<p>元素是其父级的第一个子级的样式。 | 2 |
:before | p:before | 在每个<p>元素之前插入内容 | 2 |
:after | p:after | 在每个<p>元素之后插入内容 | 2 |
:lang(language) | p:lang(it) | 选择一个lang属性的起始值="it"的所有<p>元素 | 2 |
element1~element2 | p~ul | 选择p元素之后的每一个ul元素 | 3 |
[attribute^=value] | a[src^="https"] | 选择每一个src属性的值以"https"开头的元素 | 3 |
[attribute$=value] | a[src$=".pdf"] | 选择每一个src属性的值以".pdf"结尾的元素 | 3 |
[attribute*=value] | a[src*="runoob"] | 选择每一个src属性的值包含子字符串"runoob"的元素 | 3 |
:first-of-type | p:first-of-type | 选择每个p元素是其父级的第一个p元素 | 3 |
:last-of-type | p:last-of-type | 选择每个p元素是其父级的最后一个p元素 | 3 |
:only-of-type | p:only-of-type | 选择每个p元素是其父级的唯一p元素 | 3 |
:only-child | p:only-child | 选择每个p元素是其父级的唯一子元素 | 3 |
:nth-child(n) | p:nth-child(2) | 选择每个p元素是其父级的第二个子元素 | 3 |
:nth-last-child(n) | p:nth-last-child(2) | 选择每个p元素的是其父级的第二个子元素,从最后一个子项计数 | 3 |
:nth-of-type(n) | p:nth-of-type(2) | 选择每个p元素是其父级的第二个p元素 | 3 |
:nth-last-of-type(n) | p:nth-last-of-type(2) | 选择每个p元素的是其父级的第二个p元素,从最后一个子项计数 | 3 |
:last-child | p:last-child | 选择每个p元素是其父级的最后一个子级。 | 3 |
:root | :root | 选择文档的根元素 | 3 |
:empty | p:empty | 选择每个没有任何子级的p元素(包括文本节点) | 3 |
:target | #news:target | 选择当前活动的#news元素(包含该锚名称的点击的URL) | 3 |
:enabled | input:enabled | 选择每一个已启用的输入元素 | 3 |
:disabled | input:disabled | 选择每一个禁用的输入元素 | 3 |
:checked | input:checked | 选择每个选中的输入元素 | 3 |
:not(selector) | :not(p) | 选择每个并非p元素的元素 | 3 |
::selection | ::selection | 匹配元素中被用户选中或处于高亮状态的部分 | 3 |
:out-of-range | :out-of-range | 匹配值在指定区间之外的input元素 | 3 |
:in-range | :in-range | 匹配值在指定区间之内的input元素 | 3 |
:read-write | :read-write | 用于匹配可读及可写的元素 | 3 |
:read-only | :read-only | 用于匹配设置 "readonly"(只读) 属性的元素 | 3 |
:optional | :optional | 用于匹配可选的输入元素 | 3 |
:required | :required | 用于匹配设置了 "required" 属性的元素 | 3 |
:valid | :valid | 用于匹配输入值为合法的元素 | 3 |
:invalid | :invalid | 用于匹配输入值为非法的元素 | 3 |