css基础知识汇总

仅作为学习笔

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="#">Onea>
  <a href="#">Twoa>
  <a href="#">Threea>
nav>

css样式

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

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

onetwothree


盒子模型

css基础知识汇总_第1张图片


层模型,类似图层的感觉

绝对定位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%,达到居中。

你可能感兴趣的:(css)