css不能在末尾加 ;
css引入的形式:内联式、嵌入式、外部式;
优先级:内联式>靠的最近的那个
可以使用类选择器词列表方法为一个元素同时设置多个样式
css继承:指某些样式具有继承性,可以应用到下一级标签,如颜色。但边框样式则不具备继承性。
css权值:标签为1,类选择符为10,id选择符为100。 根据一个选择器所有权值相加来最后判断。
最高权值:!important
css层叠:同一元素有多个css样式,切权值一样,则最后的css样式会被应用。
为块级元素里的字体和图片设置居中:text-align:center;
块级元素居中:margin:0 auto;
块级元素大小会被其内容里块级元素撑高,但不会被行内元素撑高。
行内元素的大小取决于内容的大小。
在css中,html标签被分为三大类:块级元素、行内元素、内联块状元素
块级元素:<p> <div> <blockquote> <form> <table> <address> <ul> <ol> <h1>...<h6> <dl>
行内元素:<span> <a> <br> <i> <em> <strong> <label>
<q> <var> <code>
行内块状元素:<img> <input>
块级元素的特点:
1、从新一行开始,并且其后元素也另起一行。
2、元素高度、宽度、行高以及顶和底边距都可以设置。
3、元素在不设置宽度的情况下,会占父容器的100%。
行内元素特点:
1、和其他元素处在同一行。
2、元素高度,宽度,以及顶部和底部边距不可设置。
3、元素的宽度就是它包含的文字或图片的宽度。
内联块状元素特点:
1、和其他元素都在同一行
2、元素宽度,高度,行高以及顶和底边距都可设置。
盒子模型:
一个元素实际宽度(盒子的宽度)=左边界+左边框+左填充+内容宽度+右填充+右边框+右边界。
高度也同理。
边界:margin
填充:padding
CSS布局模型:
建立在盒模型基础上,所有元素有三种布局模型:
1、流动模型(flow)
2、浮动模型(Float)
3、层模型(Layer)
流动模型(flow):
是默认的网页布局模型,两个特征:1、块级元素会在所包含元素内自上而下按顺序垂直延伸分布,并且宽度是100%。2、行内元素都会在所包含元素内从左到右水平分布。
层模型(layer):
三种形式:1、绝对定位(posiotion:absolute) 2、相对定位(position:relative)3、固定定位(position:fixed)
绝对定位:将元素从文档流中拖出来,然后使用left、right、top、bottom属性相对于最接近的一个具有定位属性的父元素进行绝对定位,如果不存在,则相对于body元素,即浏览器窗口。
相对定位:通过left、right、top、bottom确定元素在正常文档流中的偏移位置,过程是通过float方式生成一个元素(且浮了起来),然后相对与以前的位置移动,移动前的位置保留不动。
固定定位(fixed):
与absolute相仿,但是是相对于视图(网页窗口)本身,如果视图是固定到,则元素就会固定。与background-attachment:fixed;属性功能相同。
relative和absolute组合使用:
子元素相对与前辈元素进行定位,子元素加absolute,前辈元素(包括父级元素)加relative;
字体大小:
em:值为本元素给的font-size值,如果元素font-size=14px;1em=14px。当font-size设置为em时,则计算的标准以元素的父元素的font-size为基础。
百分比:也是基于font-size为基础。
水平居中:
行内元素(文本图片等):给父元素设置text-align:center属性。
块状元素:
定宽块状元素:设置margin:0 auto;
不定宽块状元素:
不定宽块状元素(没设置宽度)
1、加入table标签。 添加table标签,包括<table>,<tr>,<td>,为table标签设置margin:0 auto属性,将块级元素放入td中。
2、将块状元素设置为行内元素。 可以实现居中,但少了块状元素的一些功能。
3、给父元素设置float,position:relative,left:50%;给不定宽块状元素设置float,position:relative,left:-50%;
垂直居中:
父元素高度确定的单行文本:为父元素设置height=line height。
父元素高度确定的多行文本:
1、插入table(tbody、tr、td),td默认自带属性vertical-align:middle。
2、父元素设置display:table-cell;vertiacl-align:middle属性。缺点是兼容性差,切修改了块级元素的性质。
隐性改变display类型:
当一个标签有以下属性:
1、position:absolute
2、float:left或right
元素就会自动转变为display:inline-block(行内块级元素)元素,拥有了行内块级元素的性质。