web作业小结 | 易学教程

1，添加背景图片时，背景图片无法完全显现（只显示图片的局部）
利用background-size解决；

background: url(gray-tunnel-207153.jpg) no-repeat ;
    background-size: 100% 100%;//可使图片完全显现

no-repeat设置图片形式不重叠，当图片宽度不大时，若不设置no-repeat有可能相当于两张相同图片并列显示。

2.插入背景图片，图片随所在块的文本宽度改变而改变

　　为此块定义指定的 width height;

.header{
    width:360px;
    height:300px;
    background: url(mm.jpg);
    background-size: 100% 100%;
    margin-top: 100px;
}

3去除链接的下划线

　　text-deceration:none;

4.将图片设置成圆形

　　设置borderr-radius的百分比。要得到圆形，需图片为正方形，若图片为长方形得到的会使之变成椭圆。

5.利用@media实现pc端和手机端两套视口的变化

　　写两套css，一套针对手机端，另一套针对pc端，用media进行选择·。

@media only screen and (max-width:768px){}
@media only screen and (min-width:768px){}
//

针对这次题而言用了screen,实际上不同设备所需用的不同，但常用且不存在兼容问题的是all和screen,media有很多的功能，详情参见https://www.cnblogs.com/lguow/p/9316598.html。

6.overflow规定当内容溢出元素框时发生的事情。

值	说明
visible	默认值。内容不会被修剪，会呈现在元素框之外。
hidden	内容会被修剪，并且其余内容是不可见的。
scroll	内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto	如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit	规定应该从父元素继承 overflow 属性的值。

7.css选择器

[class*="col-"]选择所有类名中含有“col-”的元素

[class^="col-"]选择类名中所有以col-开头的元素

[class$="-col"]选择所有类名中以-col结尾的元素

8.选择器的权重

（所谓优先级，就是指css样式在浏览器中被解析的先后顺序。而优先级就是分配给指定的css声明的一个权重，当很多规则被应用到一个元素上时，权重决定哪种规则先生效）

css优先级的规则：

css选择规则的权值不同时，权值高的优先

css选择规则的权值相同时，后定义的规则有限

css属性后面加!important时，无条件绝对优先

标签选择器的权重为0001

class选择器，属性选择器，伪类选择器，伪元素选择器的权重为0010

id选择器的权重为0100

包含选择器的权重：所包含选择器的权重之和

子选择器的权重：所包含选择器的权重之和

交集选择器权重为选择器之和

继承样式的权重为0000

行内样式的权重为1000

8，文字垂直居中

有容器时，令文字的line-height与容器的height值相等即可

9.使用栅格系统时，如果希望列与列之间有空隙，不能用margin，可以通过设置小列的padding值来实现

来源：https://www.cnblogs.com/echol/p/12457990.html

标签