css层叠性 行内样式 > ID样式 > 类别样式 > 标记样式 如果给同一个标签定义相同的属性,在样式文件里,底下的文件会覆盖上面的文件 1.如果一个列表li,宽度300PX,高度是30px,加的内容超出这个范围会显示在li的外面,如果你希望超出的部分隐藏,那么加 overflow: hidden; 2.如果一个块里的内容不确定高度的时候,那么这个块不能指定固定的高,此时加overflow: hidden;(可以让块的高度自适应) 链接文字的状态 a:link 链接 a:visited 访问后 a:hover 鼠标经过 a:active 鼠标点击时 做企业站关于链接文字的状态常用以下几种: 1.链接文字默认没有下划线,鼠标经过有下划线,访问后没有下划线(普通企业站) 2.链接文字都没有下划线,可能默认链接时一种颜色,鼠标经过变一种颜色(普通企业站) 3.链接文字默认有下划线,鼠标经过有下划线并且可以变颜色(新闻站用的多) 注意:通常情况下,链接和访问后的状态是相同的 text-decoration用于控制链接文字要不要下划线 text-decoration:none;没有下划线 text-decoration:underline;有下划线 font-weight:normal; 让文字不加粗 font-weight:bold 加粗
类选择器可以结合元素选择器来使用。
例如,您可能希望只有段落显示为红色文本:
p.important {color:red;}
选择器现在会匹配 class 属性包含 important 的所有 p 元素,但是其他任何类型的元素都不匹配,不论是否有此 class 属性。选择器 p.important 解释为:“其 class 属性值为 important 的所有段落”。 因为 h1 元素不是段落,这个规则的选择器与之不匹配,因此 h1 元素不会变成红色文本。
如果你确实希望为 h1 元素指定不同的样式,可以使用选择器 h1.important:
p.important {color:red;}
h1.important {color:blue;}
一个 class 值中可能包含一个词列表,各个词之间用空格分隔。例如,如果希望将一个特定的元素同时标记为重要(important)和警告(warning),就可以写作:
<p class="important warning" >
This paragraph is a very important warning.
</p>
这两个词的顺序无关紧要,写成 warning important 也可以。
我们假设 class 为 important 的所有元素都是粗体,而 class 为 warning 的所有元素为斜体,class 中同时包含 important 和 warning 的所有元素还有一个银色的背景 。就可以写作:
.important {font-weight:bold;}
.warning {font-style:italic;}
.important.warning {background:silver;}
如果我的DIV宽度就必须固定为980px,但是又加1px的边框,那么div宽度就应该写成978px 大盒子宽度 大盒子总宽度=第一个盒子宽度+间距(第一个到第二个之间的距离)+第二个盒子宽度+间距+第三个盒子宽度+左右的边框 980px 大盒子总高度=第一个盒子高度+间距(第一个到第二个之间的距离)+第二个盒子高度+间距+第三个盒子高度+上下的边框
流式布局:盒子的宽度,padding,margin进行百分比定义
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
*{
margin:0;
padding;0;
}
div{
width:100%;
height:200px;
background-color:orange;
position:relative;
}
div p:nth-child(1){
position:absolute;
top:0px;
left:0px;
width:120px;
height:80px;
background-color:red;
}
div p:nth-child(2){
float:left;
width:100%;
height:80px;
background-color:blue;
padding-left:120px;
box-sizing:border-box;
}
div p:nth-child(3){
position:absolute;
top:0px;
right:0px;
width:10%;
height:80px;
background-color:green;
}
</style>
</head>
<body>
<div>
<p>1</p>
<p>2</p>
<p>3</p>
</div>
</body>
DIV实际宽度:内边距+border+div宽度
display:-webkit-box用法
(1)、介绍的第一个就是display:-webkit-box,我们知道元素大致分为内联元素、块状元素和介于两者之间的元素,当然还有inline-table、table-cell等神马的,那么display:-webkit-box怎么用呢,什么举个应用场景,对于下图所示的情况,父元素被1、2、3均分,且2和1之间间隔10px,你会怎么做?
这时候我们可以试试新的display:-webkit-box,另外还有如下属性配合使用,
-webkit-box-orient子元素排列方向 horizontal | vertical |inline-axis | block-axis | inherit,其中默认值是inline-axis,即横向排列
-webkit-box-flex 子元素之间比例,仅作一个系数
-webkit-box-direction 子元素排列顺序 normal | reverse |inherit,其中默认值是normal
-webkit-box-flex-group 以组为单位的流体系数
-webkit-box-ordinal-group 以组为单位的子元素排列方向
-webkit-box-lines子元素是否换行,类似word-wrap和word-break的作用
-webkit-box-align 子元素垂直方向的对其方式
-webkit-box-pack 子元素水平方向的对其方式
这些配合使用的属性我们全部默认即可
CSS:
HTML:
怎么理解上面的代码呢,父亲有一块地,要分给兄弟几个,除去老大和老二之间的分割线所占的那块,剩下的部分均分的分数由li的兄弟个数和box-flex的总数确定,现在一共三兄弟,每兄弟的box-flex都是1,所以就总分数=1*1+1*1+1*1=3。
如果代码稍作修改
那么现在老二的box-flex是2了,总分数就是1*1+1*2+1*1=4,其中老大老三各占一份,老二占两份,显示效果如下: