CSS--基础

Posted Heroine.z

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了CSS--基础相关的知识,希望对你有一定的参考价值。

1.伪类选择符:它允许给html不存在的标签(标签的某种状态)设置样式,比如说我们给html中一个标签元素的鼠标滑过的状态来设置字体颜色:a:hover{color:blue;}.可以兼容所有浏鉴器的“伪类选择符”就是 a 标签上使用 :hover 了(其实伪类选择符还有很多,尤其是 css3 中,但是不能兼容所有浏览器),其实 :hover 可以放在任意的标签上,比如说 p:hover,但是它们的兼容性也是很不好的,所以现在比较常用的还是 a:hover 的组合。

 2.权值:标签的权值为1,类选择符的权值为10,ID选择符的权值最高为100。还有一个权值比较特殊--继承也有权值但很低,有的文献提出它只有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*/

我们在做网页代码的时,有些特殊的情况需要为某些样式设置具有最高权值,可以使用!important来解决。(!important要写在分号的前面)

p{color:red!important;}
p{color:green;}
/*文本会显示红色*/

3.

body{font-family:"Microsoft Yahei";}
body{font-family:"微软雅黑";}

第一种方法比第二种方法兼容性更好一些。

4.首行缩进:2em的意思就是文字的2倍大小。

p{text-indent:2em;}

5.如果想在网页排版中设置文字间隔或者字母间隔就可以使用  letter-spacing 来实现,如果想设置英文单词之间的间距可以使用 word-spacing来实现。

6.在CSS中,html中的标签元素大体被分为三种不同的类型:块状元素、内联元素(又叫行内元素)和内联块状元素。

  常用的块状元素有:

  <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就是将内联元素显示为块级元素块状元素也可以通过代码display:inline将元素设置为内联元素

  *块级元素特点:

  1、每个块级元素都从新的一行开始,并且其后的元素也另起一行。

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

  3、元素宽度在不设置的情况下,是它本身父容器的100%(和父元素的宽度一致),除非设定一个宽度。

  *内联元素特点:

  1、和其他元素都在一行上;

  2、元素的高度、宽度及顶部和底部边距不可设置;

  3、元素的宽度就是它包含的文字或图片的宽度,不可改变。

  内联块状元素(inline-block)就是同时具备内联元素、块状元素的特点,代码display:inline-block就是将元素设置为内联块状元素

  *内联块状元素元素特点:

  1、和其他元素都在一行上;

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

7.盒子模型

  pading与margin的用法:

  div{padding:20px 10px 15px 30px;}----填充顺序上、右、下、左(顺时针)。
  div{padding:10px;}----上下左右都相等的情况
  div{padding:10px 20px;}----上下相等左右相等的情况,顺序:先上下,后左右。

8.在网页中,元素有三种布局模型:
  1、流动模型(Flow)
  2、浮动模型 (Float)
  3、层模型(Layer)

  流动(Flow)是默认的网页布局模式。流动布局模型具有2个比较典型的特征:

  第一点,块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布,因为在默认状态下,块状元素的宽度都为100%。实际上,块状元素都会以行的形式占据位置。

  第二点,在流动模型下,内联元素都会在所处的包含元素内从左到右水平分布显示。(内联元素可不像块状元素这么霸道独占一行)

 * 任何元素在默认情况下是不能浮动的,但可以用 CSS 定义为浮动,如 div、p、table、img 等元素都可以被定义为浮动。

9.层模型有三种形式:

  1、绝对定位(position: absolute)

  2、相对定位(position: relative)

  3、固定定位(position: fixed)

  *元素设置层模型中的绝对定位,需要设置position:absolute(表示绝对定位)。

  这条语句的作用将元素从文档流中拖出来,然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块,则相对于body元素,即相对于浏览器窗口。

  *元素设置层模型中的相对定位,需要设置position:relative(表示相对定位)。

  它通过left、right、top、bottom属性确定元素在正常文档流中的偏移位置。相对定位完成的过程是首先按static(float)方式生成一个元素(并且元素像层一样浮动了起来),然后相对于以前的位置移动,移动的方向和幅度由left、right、top、bottom属性确定,偏移前的位置保留不动

  偏移前的位置保留不动偏移前的位置还保留不动,覆盖不了前面的div没有偏移前的位置。虽然现在的div元素相对于以前的位置产生了偏移,但是div元素以前的位置还是保留着,所以div中元素是显示在了div元素以前位置的后面

  *元素设置层模型中的固定定位,需要设置position:fixed(表示固定定位,与absolute定位类型类似,但它的相对移动的坐标是视图(屏幕内的网页窗口)本身。

  由于视图本身是固定的,它不会随浏览器窗口的滚动条滚动而变化,除非你在屏幕中移动浏览器窗口的屏幕位置,或改变浏览器窗口的显示大小,因此固定定位的元素会始终位于浏览器窗口内视图的某个位置,不会受文档流动影响,这与background-attachment:fixed?属性功能相同。

  *相对于其它元素进行定位

  1、参照定位的元素必须是相对定位元素的前辈元素:

   2、参照定位的元素必须加入position:relative;

   3、定位元素加入position:absolute,便可以使用top、bottom、left、right来进行偏移定位了。

10.字体缩写:

 body{ font:italic  small-caps  bold  12px/1.5em  "宋体",sans-serif;}

  1、使用这一简写方式你至少要指定 font-size 和 font-family 属性,其他的属性(如 font-weight、font-style、font-varient、line-height)如未指定将自动使用默认值。

  2、在缩写时 font-size 与 line-height 中间要加入“/”斜扛。

11.em就是本元素给定字体的 font-size 值,如果元素的 font-size 为 14px ,那么 1em = 14px;如果 font-size 为 18px,那么 1em = 18px。

  但当给 font-size 设置单位为 em 时,此时计算的标准以 p 的父元素的 font-size 为基础。

  例:<p>以这个<span>例子</span>为例。</p>

  p{font-size:14px}
  span{font-size:0.8em;}
  结果 span 中的字体“例子”字体大小就为 11.2px(14 * 0.8 = 11.2px)。

  百分比的例子:
  p{font-size:12px;line-height:130%}
  设置行高(行间距)为字体的130%(12 * 1.3 = 15.6px)

12.水平居中总结

  *满足定宽和块状两个条件的元素是可以通过设置“左右margin”值为“auto”来实现居中的。

  *在实际工作中我们会遇到需要为“不定宽度的块状元素”设置居中,比如网页上的分页导航,因为分页的数量是不确定的,所以我们不能通过设置宽度来限制它的弹性。

  不定宽度的块状元素有三种方法居中(这三种方法目前使用的都比多):

  1. 加入 table 标签
  2. 设置 display;inline 方法
  3. 设置 position:relative 和 left:50%;

  第一种方法:

  第一步:为需要设置的居中的元素外面加入一个 table 标签 ( 包括 <tbody>、<tr>、<td> )。

  第二步:为这个 table 设置“左右 margin 居中”(这个和定宽块状元素的方法一样)。

<div>
<table>
  <tbody>
    <tr><td>
    <ul>
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
    </ul>
    </td></tr>
  </tbody>
</table>
</div>
<style>
table{
    margin:0 auto;
}

ul{list-style:none;margin:0;padding:0;}
li{float:left;display:inline;margin-right:8px;}
</style>

  第二种方法:

   改变块级元素的 display 为 inline 类型,然后使用 text-align:center 来实现居中效果。

  这种方法相比第一种方法的优势是不用增加无语义标签,简化了标签的嵌套深度,但也存在着一些问题:它将块状元素的 display 类型改为 inline,变成了行内元素,所以少了一些功能,比如设定长度值。

<body>
<div class="container">
    <ul>
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
    </ul>
</div>
</body>
<style>
.container{
    text-align:center;
}
.container ul{
    list-style:none;
    margin:0;
    padding:0;
    display:inline;
}
.container li{
    margin-right:8px;
    display:inline;
}
</style>

  第三种方法:

  通过给父元素设置 float,然后给父元素设置 position:relative 和 left:50%,子元素设置 position:relative 和 left:-50% 来实现水平居中。

<body>
<div class="container">
    <ul>
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
    </ul>
</div>
</body>

<style>
.container{
    float:left;
    position:relative;
    left:50%
}

.container ul{
    list-style:none;
    margin:0;
    padding:0;
    
    position:relative;
    left:-50%;
}
.container li{float:left;display:inline;margin-right:8px;}
</style>
 这种方法可以保留块状元素仍以 display:block 的形式显示,优点不添加无语议表标签,不增加嵌套深度,但它的缺点是设置了 position:relative,带来了一定的副作用。

13.垂直居中:
  *父元素高度确定的单行文本的竖直居中的方法是通过设置父元素的 height 和 line-height 高度一致来实现的。

<div class="container">
    hello Word!
</div>
 
<style>
.container{
    height:100px;
    line-height:100px;
    background:#999;
}
</style>

  *父元素高度确定的多行文本、图片、块状元素的竖直居中的方法有两种:

  方法一:使用插入 table (包括tbody、tr、td)标签,同时设置 vertical-align:middle。

  css 中有一个用于竖直居中的属性 vertical-align,但这个样式只有在父元素为 td 或 th 时,才会生效。所以又要插入 table 标签了。

<body>
<table><tbody><tr><td class="wrap">
<div>
    <p>看我是否可以居中。</p>
    <p>看我是否可以居中。</p>
    <p>看我是否可以居中。</p>
    <p>看我是否可以居中。</p>
    <p>看我是否可以居中。</p>
</div>
</td></tr></tbody></table>
</body>
table td{height:500px;background:#ccc}

因为 td 标签默认情况下就默认设置了 vertical-align 为 middle,所以我们不需要显式地设置了。

方法二:
在 chrome、firefox 及 IE8 以上的浏览器下可以设置块级元素的 display 为 table-cell,激活 vertical-align 属性,但注意 IE6、7 并不支持这个样式。

<style>
.container{
    height:300px;
    background:#ccc;
    display:table-cell;/*IE8以上及Chrome、Firefox*/
    vertical-align:middle;/*IE8以上及Chrome、Firefox*/
}
</style>


14.
隐性改变display类型
  元素(不论之前是什么类型元素,display:none 除外)设置以下 2 个句之一:

  1. position : absolute

  2. float : left 或 float:right

  元素会自动变为以 display:inline-block 的方式显示,当然就可以设置元素的 width 和 height 了且默认宽度不占满父元素。



 

以上是关于CSS--基础的主要内容,如果未能解决你的问题,请参考以下文章

VSCode自定义代码片段7——CSS动画

VSCode自定义代码片段7——CSS动画

VSCode自定义代码片段6——CSS选择器

css常用代码片段 (更新中)

CSS代码片段

CSS代码片段