前端（二） - CSS

2018-01-12 本文已影响0人 Zoulf

CSS

css 全称层叠样式表，主要通过以下三种方式设置：

为了解耦和让代码更好看一点，我们常常使用第二种或第三种方式设置 css，而这两种方式又引出了一个选择器的概念。选择器分为以下几类：

#i1{
            color: #000;
            font-size: 20px;
}

使用：
...
<div id="i1"></div>

！注：选择器中的属性之间用分号隔离

.i1{
            color: #000;
            font-size: 20px;
 }

使用：
...
<div class="i1"></div>

div{
            color: #000;
            font-size: 20px;
}

使用：
<div></div>

#i1{
            background-color: #000;
}
#i1 .c1{
            background-color: #eeeeee;
}

使用：
<div id="i1">
        <div class="c1"></div>
</div>

#i1{
            background-color: #000;
}
#i1,.c1{
            background-color: #eeeeee;
}

border，边框属性，如：border: 1px solid #eeeeee;，可以看到该属性的值分别为宽度，样式（solid 实线，还可以有虚线等），颜色，边框属性还可以根据四个方位只分为一部分的边框，如：border-left 等。
height，width，text-align，line-height；color，background-color，font-size，font-weight（字体加粗）；
float，让标签飘起来，所以可以让块级标签页可以堆叠。但是当漂到一定程度时，父标签无法管理的时候<div style="clear: both;"></div>；
display，可以让标签消失，可以用来做很多东西，比如后面会讲的模态框，display 的值有，none（让标签消失），inline（让标签表现为行内标签，无法设置宽度高度 padding margin），block（..块级标签），inline-block（既具有行内的只占本身大小，也具有块级的可以设置宽高等）；
position，有如下值：
- fixed，固定在页面的某个位置；
- relative + absolute，设置了 absolute 的标签将会与设置了 relative 的标签的处于相对位置（根据 top, bottom, left, right 的值来定）；
opacity，透明度， =1 表示透明；
z-index，层级顺序，常与 position 连用做一些特殊的效果；
overflow，值有 hidden，auto；
background-image，当使用图片做背景时，如果图片过小，浏览器会帮我们自动重复；

<body style="margin: 0 auto">
...

由于 body 标签内部设置了一个 padding，所以当想要完全覆盖整个屏幕时，则需要这样设置。