css学习小汇总

来源：互联网发布：python的前景编辑：程序博客网时间：2024/05/23 00:03

css选择器

<p class="first">三年级时，我还是一个<span>胆小如鼠</span>的小女孩，上课从来不敢回答老师提出的问题，生怕回答错了老师会批评我。就一直参加。</p>    <p id="second">到了三年级下出了一个很<span class="first">简单</span>的问题，班里很多同学都举手了，甚。</p>

Css：

p.first{}p span{}span.first{}#second{}

p,span{}

标签选择器：标签名{},作用于所有标签。
类选择器：.类名{}，在标签内定义class="aaa bbb ",属图形结构。
ID选择器：#ID{}，在标签内定义id="",有严格的一一对应关系。
子选择器：span>li{}，作用于父元素span下一层的li标签，第一个li标签。.first>span{}
包含选择器：span li{}，作用于父元素span下所有li标签。 .first span{}
通用选择器: *{}，匹配所有html元素。
伪类选择符：它允许给html不存在的标签(标签的某种状态)设置样式，比如说我们给html中的一个标签元素的鼠标滑过的状态来设置字体颜色。

分组选择符:h1,span{color:red;}

标签的权值为1，类选择符的权值为10，ID选择符的权值最高为100。例如下面的代码：
p{color:red;} /*权值为1*/p span{color:green;} /*权值为1+1=2*/.warning{color:white;} /*权值为10*/p span.warning{color:purple;} /*权值为1+1+10=12*/#footer .note p{color:yellow;} /*权值为100+10+1=111*/


注意：还有一个权值比较特殊--继承也有权值但很低，有的文献提出它只有0.1，所以可以理解为继承的权值最低。
行间距：p{line-height:2em;}

块状与内联元素

常用的块状元素有：display：block 宽度默认为父容器的100%高度自适应另起一行

常用的内联元素有：、display:inline

元素的高度、宽度及顶部和底部边距不可设置；元素的宽度就是它包含的文字或图片的宽度，不可改变。

常用的内联块状元素有：1、和其他元素都在一行上；

2、元素的高度、宽度、行高以及顶和底边距都可设置。 Display:inline-block

布局：相对绝对

布局：层模型有三种形式：

1、绝对定位(position: absolute) 相对于浏览器窗口

2、相对定位(position: relative)

3、固定定位(position: fixed) 相对于浏览器不随滑轮改变

绝对和相对结合：box1是box2的前辈元素 box2相对于box1进行绝对定位

div{border:2px red solid;}#box1{    width:200px;    height:200px;    position:relative;          }#box2{ position:absolute;top:20px;left:30px;          }<div id="box1"><div id="box2">相对参照元素进行定位</div></div>

居中设置

水平居中设置方法：

行内元素（文本、图片）->设置父级元素 text-align:center

块状元素（固定宽度）->左右margin:auto 整个盒子居中

块状元素（不固定宽度）->比如div是父元素设置为text-align:center 设置其中的某个块状元素ul为行内元素display:inline ul将会水平居中

<div class="container">    <ul>        <li><a href="#">1</a></li>        <li><a href="#">2</a></li>        <li><a href="#">3</a></li>    </ul></div><style>.container{    text-align:center;}/* margin:0;padding:0（消除文本与div边框之间的间隙）*/.container ul{    list-style:none;    margin:0;    padding:0;    display:inline;}/* margin-right:8px（设置li文本之间的间隔）*/.container li{    margin-right:8px;    display:inline;}</style>

垂直居中

父元素高度确定的单行文本-> height=line-height

父元素高度确定的多行文本->

<body><table><tbody><tr><td class="wrap"><div>    <p>看我是否可以居中。</p></div></td></tr></tbody></table></body>css代码：table td{height:500px;background:#ccc}因为 td 标签默认情况下就默认设置了 vertical-align 为 middle，所以我们不需要显式地设置了。

阅读全文

0 0