一、css盒模型:
Margin-Border-Padding-Content
二、Position定位:
static:HTML元素的默认值,即没有定位,元素出现在正常的流中。静态定位的元素不会受到 top, bottom, left, right影响。
fixed:元素的位置相对于浏览器窗口是固定位置。Fixed定位使元素的位置与文档流无关,因此不占据空间。
Relative:
1、相对定位元素的定位是相对其正常位置。
2、可以移动的相对定位元素的内容和相互重叠的元素,它原本所占的空间不会改变。
3、相对定位元素经常被用来作为绝对定位元素的容器块。
4、relative-relative relative-absolute
absolute:
1、绝对定位的元素的位置相对于最近的已定位父元素,如果元素没有已定位的父元素,那么它的位置相对于< html >
2、absolute 定位使元素的位置与文档流无关,因此不占据空间。
3、absolute 定位的元素和其他元素重叠。
4、relative-absolute absolute-absolute
三、CSS选择器:
1、类选择器(class)
.demoDiv{
color:red;
}
<div class="demoDiv"></div>
2、标签选择器
<style>
p{
color:red;
}
</style>
<p>87979</p>
3、ID选择器(#)
#demoDiv{
color:red;
}
<div id="demoDiv"></div>
4、 后代选择器
<style>
.father.child{
color:red;
}
</style>
<p class="father">
<label class="child">
我变红了
<p>我也变红了</p>
</label>
</p>
5、子选择器
<style>
#lala a{color:red;}/*所有<a>子元素*/
#lala >a{color:blue;}/*lala下面第一个<a>子元素*/
</style>
<p id="lala">
<a href="#">我是蓝色</a>
<span><a href="#">我变红了</a></span>
<span><a href="#">我变红了</a></span>
</p>
6、伪类选择器
<style>
a:link{
color:red;
}
a:visited{
color:red;
}
a:hover{
color:blue;
}
input:focus{
background:black;
}
</style>
Link表示链接在没有被点击时的样式。Visited表示链接已经被访问时的样式。Hover表示当鼠标悬停在链接上面时的样式。
伪类不仅可以应用在链接标签中,也可以应用在一些表单元素中,但表单元素的应用IE不支持,所以一般伪类都只会被应用在链接的样式上。
7、通用选择器
<style>
*{
font-size:20px;
}
p*{
color:green;
}
</style>
8、群组选择器
<style>
*{
font-size:20px;
}
p*{
color:green;
}
</style>
8、群组选择器
<style>
p ,td ,li{
color:red;
height:20px;
}
#main p,#sider span{
color:blue;
font-size:30px;
}
#main p span{
color:yellow;
}
.text1 h1,#sider h3,.art_title h2{
color:black;font-weight:100;
}
</style>
使用群组选择器,将会大大的简化CSS代码,将具有多个相同属性的元素,合并群组进行选择,定义同样的CSS属性,这大大的提高了编码效率,同时也减少了CSS文件的体积。
9、 相邻同胞选择器
<style>
h1+p{
color:red;
}
/* +和~的区别:类似上面一个,两者都表示兄弟关系,但是+必须是“大哥+二哥”,~还能是“大哥~三弟”、“二哥~四妹”*/
</style>
<h1>我和<p></p>相邻</h1>
<p>我和<h1></h1>相邻</p>
<p>我和他们都不相邻,所以样式不影响我</p>
10、属性选择器
/*属性选择器,是根据元素的属性来匹配的,其属性可以是标准属性也可以是自定义属性;!ie6,0 0 1 0*/
[attr]
[title]{margn-left:10px}
/*选择具有title属性的所有元素*/
[attr=val]
[tittle='this']{margin-right:10px;}
/*选择属性title的值等于this的所有元素*/
[attr^=val]
[title^='this']{margin-right:200px;}
/*选择属性title的值以this开头的所有元素*/
[attr$=val]
[title$='this']{margin-right:10px;}
/*选择属性title的值以this结尾的所有元素*/
[attr*=val]
[title*='this']{margin:10px;}
/*选择属性title的值包含this的所有元素*/
[attr~=val]
[title~='this']{margin:20px;color:red;}
/*选择属性title的值包含一个以空格分隔的词为this的所有元素,*/
/*即title的值里必须要有this这个单词并且this要与其他单词之间有空格分隔*/
[attr|=val]
[title|='this']{color:red;}
/*选择属性title的值等于This,或值以this-开头的所有元素*/
11、伪元素选择器
<style>
:first-letter,设置块元素首字母样式,行内元素转换成块元素和行内块元素也支持;
div p:first-letter {font-size: 20px}
:first-line,设置第一个文本行样式;
.box .main:first-line {color: #f00}
:before,设置之前的样式,可以插入生成的内容,并设置其样式;
body:before {content: 'The Start:'; display: block}
//在body元素前插入文本内容'The Start:',并设置其为块元素
:after,设置之后的样式,可以插入生成的内容,并设置其样式;
body:after {content: 'The End.'; display: block}
//在body元素最后插入文本内容'The End.',并设置其为块元素
</style>
12、结构性伪类选择器
<style>
.box .ft:first-of-type{color:yellow;}
/*:first-of-type,选择相对父元素里同类型子元素中的第一个,!lte8*/
.box :last-of-type {color: deeppink}
/*:last-of-type,选择相对父元素里同类型子元素中的最后一个,!lte8*/
.box :only-of-type {color: blanchedalmond}
/*:only-of-type,选择相对父元素里同类型子元素中只有一个的元素,!lte8*/
.box .ft:only-of-type {color: blueviolet}
/*//只匹配4里的strong*/
.box :nth-child(3) {color: olivedrab}
/*:nth-child(n),选择其父元素的第n个子元素或多个子元素,索引从1开始,当n用于表达式时索引从0开始!lte8
//匹配第三个子元素即这里的4
*/
.box :nth-child(odd) {color: orange}
/*等价于 .box :nth-child(2n + 1) {color: #f00}
//匹配奇数即这里的2.4.6以及4里的strong和6里的第一个span
*/
.box :nth-child(even) {color: orangered}
/*等价于 .box :nth-child(2n + 2) {color: #f00}和.box :nth-child(2n)
//匹配偶数即这里的3.5以及6里的第二个span
*/
.box :nth-child(n + 1) {color: #f00}
/*
//匹配 n + 1开始的所有子元素即.box里所有的子元素以及子孙元素,因为这里n是从1开始的即:
n = 0 ----> n + 1 = 0 + 1 = 1,即这里的2
n = 1 ----> n + 1 = 1 + 1 = 2,即这里的3
... ...
n = 4 ----> n + 1 = 4 + 1 = 5,即这里的6
*/
.box :nth-last-child(3) {color: #f00}
/*
:nth-last-child(n),跟:nth-child(n)使用类似,只是索引是从最后开始往前数,!lte8
//匹配倒数第三个子元素即这里的4
*/
.box :nth-of-type(2) {color: #f00}
/*
:nth-of-type(n),选择父元素的第n个或多个同类型的子元素,!lte8
//匹配5和6以及6里面的第二个span
*/
.box :nth-last-of-type(2) {color: #f00}
/*
:nth-last-of-type(n),同上,只是从最后开始往前数,!lte8
//匹配3和4以及6里面的第一个span
*/
.box :first-child {color: #f00}
/*:first-child,选择父元素里的第一个子元素,!ie6
//匹配2和4里的strong以及6里的第一个span
*/
.box :last-child {color: #f00}
/*
:last-child,选择父元素里的最后一个子元素,!lte8
//匹配6和6里的最后一个span以及4里的strong
*/
table td:empty {background-color: #ffc}
/*
:root,选择文档的根元素,在HTML中就是指<html>标签,!lte8
:empty,选择没有任何内容的元素,那怕是有一个空格也不行,!lte8
//匹配表格里没有内容的td
:target,选择当前活动的元素,指锚点点击后跳转到的那一个元素,!lte8
:not(selector),选择排除selector以外的其他所有元素,!lte8
*/
.box *:not(div) {background-color: #ffc}
/*
//选择box里除div以外的所有后代元素,如果div里有其他非div元素,也会选择上,如上的HTML CODE就会选择上div里面的span和strong
*/
</style>
13、UI元素状态伪类选择器
<style>
:enabled,指定元素处于可用状态时的样式,一般用于input,select和textarea
:disabled,指定元素处于不可用状态时的样式,一般用于input,select和textarea
:read-only,指定元素为只读状态时的样式,FF为-moz-read-only,一般用于input和textarea
:read-write,指定元素为只可写状态时的样式,FF为-moz-read-write,一般用于input和textarea
:checked,指定元素被选中状态时的样式,FF为-moz-checked一般用于checkbox和radio
:default,指定元素默认选中的样式,一般用于checkbox和radio
:indeterminate,指定默认一组单选或复选都没被选中的样式,只要有一个被选中则样式被取消,一般用于checkbox和radio
::selection,指定元素处理选中状态时的样式,可用于所有元素,上面的几个基本上只用于表单元素;!lte8
FF为::-moz-selection,不能用群组选择器来写;
::selection {background-color: #ffc; color: #fff}
::-moz-selection {background-color: #ffc; color: #fff}
</style>
**四、css选择符分类 **
首先来看一下css选择符(css选择器)有哪些?
1.标签选择器(如:body,div,p,ul,li)
2.类选择器(如:class=“head”,class=“head_logo”)
3.ID选择器(如:id=“name”,id=“name_txt”)
4.全局选择器(如:*号)
5.组合选择器(如:.head .head_logo,注意两选择器用空格键分开)
6.后代选择器 (如:#head .nav ul li 从父集到子孙集的选择器)
7.群组选择器 div,span,img {color:Red} 即具有相同样式的标签分组显示
8.继承选择器(如:div p,注意两选择器用空格键分开)
9.伪类选择器(如:就是链接样式,a元素的伪类,4种不同的状态:link、visited、active、hover。)
10.字符串匹配的属性选择符(^ $ *三种,分别对应开始、结尾、包含)
11.子选择器 (如:div>p ,带大于号>)
12.CSS 相邻兄弟选择器器 (如:h1+p,带加号+)
五、css优先级
当两个规则都作用到了同一个html元素上时,如果定义的属性有冲突,那么应该用谁的值的,CSS有一套优先级的定义。
不同级别
在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式。
作为style属性写在元素内的样式
id选择器
类选择器
标签选择器
通配符选择器
浏览器自定义或继承
总结排序:!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性
***同一级别*** 同一级别中后写的会覆盖先写的样式 ***注意点:*** ①、!important的优先级是最高的,但出现冲突时则需比较”四位数“;②、优先级相同时,则采用就近原则,选择最后出现的样式;
③、继承得来的属性,其优先级最低;
!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性
*css选择器使用强烈建议采用低权重原则,利于充分发挥css的继承性,复用性,模块化、组件化。
多重样式优先级
内联样式)Inline style > (内部样式)Internal style sheet >(外部样式)External style sheet > 浏览器默认样式
常见的链接样式
a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {text-decoration:underline;}
a:active {text-decoration:underline;}
-
a:link - 正常,未访问过的链接
-
a:visited - 用户已访问过的链接
-
a:hover - 当用户鼠标放在链接上时
-
a:active - 链接被点击的那一刻
块级元素(block)特性:
-
总是独占一行,表现为另起一行开始,而且其后的元素也必须另起一行显示;
-
宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制;
内联元素(inline)特性:
-
和相邻的内联元素在同一行;
-
宽度(width)、高度(height)、内边距的top/bottom(padding-top/padding-bottom)和外边距的top/bottom(margin-top/margin-bottom)都不可改变,就是里面文字或图片的大小;
块级元素主要有:
-
address , blockquote , center , dir , div , dl , fieldset , form , h1 , h2 , h3 , h4 , h5 , h6 , hr , isindex , menu , noframes , noscript , ol , p , pre , table , ul , li
内联元素主要有:
-
a , abbr , acronym , b , bdo , big , br , cite , code , dfn , em , font , i , img , input , kbd , label , q , s , samp , select , small , span , strike , strong , sub , sup ,textarea , tt , u , var
主要用的CSS样式有以下三个:
-
display:block -- 显示为块级元素
-
display:inline -- 显示为内联元素
-
display:inline-block -- 显示为内联块元素,表现为同行显示并可修改宽高内外边距等属性,我们常将ul元素加上display:inline-block样式,原本垂直的列表就可以水平显示了。(部分浏览器不兼容)
css伪元素
六、让DIV垂直居中多种方法:
1、
body{text-align:center;vertical-align:middle}
2、实现绝对定位元素的居中
.style{margin:0 auto;}
3、div绝对定位水平垂直居中【margin 负间距】
.autoDiv{position: absolute;left:50%;top:50%;margin-left:-width/2;margin-top:-height/2;}
4、div绝对定位水平垂直居中【Transforms 变形】
div{
width: 200px;
height: 200px;
background: green;
position:absolute;
left:50%; /* 定位父级的50% */
top:50%;
transform: translate(-50%,-50%); /*自己的50% */
}
5、css不定宽高水平垂直居中
.box{
height:600px;
display:flex;
justify-content:center;
align-items:center;
/* aa只要三句话就可以实现不定宽高水平垂直居中。 */
}
.box>div{
background: green;
width: 200px;
height: 200px;
}
Flex布局:
容器的属性有哪些(最外层父容器Box)
flex-direction: row | row-reverse | column | column-reverse;
flex-wrap: nowrap | wrap | wrap-reverse
flex-flow:: || ;flex-flow属性是flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap。
justify-content: flex-start | flex-end | center | space-between | space-around定义了项目在主轴上的对齐方式
align-items : flex-start | flex-end | center | baseline | stretch;(垂直对齐方式定义项目在交叉轴上如何对齐。)
align-content:flex-start | flex-end | center | space-between | space-around | stretch;定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用。
项目的属性item
order:;定义项目的排列顺序。数值越小,排列越靠前,默认为0。
flex-grow: ; /* default 0 /定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大
flex-shrink: ; / default 1 /定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小
flex-basis: | auto; / default auto */flex-basis属性定义了在分配多余空间之前,项目占据的主轴空间(main size)。浏览器根据这个属性,计算主轴是否有多余空间。它的默认值为auto,即项目的本来大小
flex:none | [ <‘flex-grow’> <‘flex-shrink’>? || <‘flex-basis’> ]flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto。后两个属性可选
flex:放大,缩小,分配多余空间
align-self :auto | flex-start | flex-end | center | baseline | stretch;
align-self属性允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性。默认值为auto,表示继承父元素的align-items属性,如果没有父元素,则等同于stretch
undefined
undefined
undefined
undefined
undefined