css基础知识汇总

来源：互联网发布：集金号软件下载编辑：程序博客网时间：2024/06/05 06:39

仅作为学习笔

css性质

继承特殊性层叠重要性即继承上级的样式权限问题，注意继承权限为0.1 相同权值时，后面的样式覆盖前面的样式设置最高权限！important（高于浏览器默认的样式权限）

权限理解

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*/

易混理解

<style type="text/css">p{color:red;}.first{color:green;}/*因为权值高显示为绿色*/span{color:pink;}/*设置为粉色*/</style></head><body>    <h1>勇气</h1>    <p class="first">三年级时，我还是一个<span>胆小如鼠</span>的小女孩，上课从来不敢回答老师提出的问题，生怕回答错了老师会批评我。就一直没有这个勇气来回答老师提出的问题。学校举办的活动我也没勇气参加。</p>运行结果是文字是绿色，只有“胆小如鼠”是粉色，因为<span>是继承上级的权限是0.1，而span本身是1，所以粉色起作用。----------文字排版字体：font-family:"Micorsoft YaHei";字号，颜色：font：12px #888；粗体：font-style:Bold;斜体：font-style:Italic;下划线：text-decoration:underline;删除线:text-decoration:line-through;缩进:text-indent:2em;(2em表示两倍字体大小的意思)行间距：text-height:2em;中文字间距，字母间距：letter-spacing：20px；英文单词间距：word-spacing：20px；对齐：块级元素中文字或图片text-align:center/left/right;----------常用的块状元素有：<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>常用的内联元素有：<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>常用的内联块状元素有：<img>、<input>

display:block/inline/inline-block
设置成块级元素/内联元素/内联块状元素

属性块状元素内联元素内联块状元素是否占一行是否否 height/width/行高/margin-top/bottom是否可设置可不可可默认宽度，宽度是否可改变宽度与父级一致，可改宽度就是包含内容的宽度，不可改宽度就是包含内容的宽度,可改

注意：内联元素之间有一个间距问题，例子如下：

<nav>  <a href="#">One</a>  <a href="#">Two</a>  <a href="#">Three</a></nav>

css样式

nav a {  display: inline-block;  padding: 5px;  background: red;}

上面的代码显示的效果如下：
这里写图片描述
这里的间隙是由于回车键的存在产生的效果，把标签关闭放在最后可解决，也可在每个和下一个之间加注释解决

<a>one</a><a>two</a><a>three</a>

盒子模型

这里写图片描述

层模型，类似图层的感觉

绝对定位position:absolute;就是把元素从文件流中取出来。
相对定位position:relative;按static(float)方式生成一个元素(并且元素像层一样浮动了起来)，然后相对于以前的位置移动，移动的方向和幅度由left、right、top、bottom属性确定，偏移前的位置保留不动。
固定定位position:fixed；固定定位的元素会始终位于浏览器窗口内视图的某个位置，不会受文档流动影响，这与background-attachment:fixed;属性功能相同。

关于居中

行内元素居中：给父元素设置 text-align:center 来实现
定宽块状元素居中：通过设置“左右margin”值为“auto”来实现居中的。eg： margin:20px auto;
不定宽块状元素居中：

加table：利用table的长度自适应性，可视为定宽块状元素，再用margin：0 auto，设置。
设置display：inline方法，改变块级元素的 display 为 inline 类型（设置为 行内元素 显示），然后使用 text-align:center 来实现居中效果。
设置position：relative和left：50%，利用相对定位方式，将元素向左偏移50%，达到居中。

0 0