HTML与CSS学习笔记(5)

1、文字阴影？（针对文字）

text-shadow：

例如 text-shadow: 10px 10px 10px blue;四个值分别是 x y blur color

blur表示模糊值，越大越模糊

注：阴影的默认颜色是跟文字的颜色相同；通过逗号的方式进行分割，可以设置多阴影

2、box-shadow:盒子阴影（针对容器）

x

y

blur

color

inset

多阴影

例如： box-shadow: 10px 10px 10px 30px blue inset; 前面三个属性依次是x y blur,30px表示：容器周围模糊的扩散范围；inset表示内阴影，默认情况为外阴影

注：盒子阴影默认颜色是黑色。默认就是外阴影，如果设置outset不起作用，可选的值只有inset：内阴影；同样可以设置多阴影，用逗号隔开

3、mask遮罩

属性值：url

repeat

x

y

w

h

多遮罩

注：mask目前还没有标准化，需要添加浏览器前缀；默认是x y 都平铺

4、倒影

box-reflect(也没有标准，要加浏览器前缀)

above：表示上面的方向

below：表示下面的方向

left：左边

right：右边

距离

遮罩|渐变

注：渐变：只是针对透明度的渐变不支持颜色的渐变

scaleX(-1);scale（）取不同轴的负值可以达到图片翻转的效果

5、模糊与计算

blur

filter：blur（）

calc:可以实现百分比与像素的计算

例如：width:calc(100% - 100px);无理父容器多大，该子容器始终保持与父容器右边框相差100px距离

    四则运算

6、分栏布局

column-count：分栏的个数;与column-width冲突只能设置一个

column-width：分栏的宽度

column-gap：分栏的间距

column-rule：分栏的边线

column-span：合并分栏,比如标题

7、伪类与伪元素

在css2.1中对伪类和伪元素的区别比较模糊，css3中对这两个概念做了比较清晰的解释，并且在语法上也做了很明显的区分。

css3中规定伪类由一个冒号开始，然后为伪类的名称；伪元素由两个冒号开始，然后是伪元素的名称、

伪类本质上是为了弥补常规css选择器的不足，以便获取到更多的信息。通常表示获取不存在于DOM树中的信息，或获取不能被常规css选择器获取的信息：

    ：hover

    ：focus

    ：empty

    ...

伪元素本质上是创建了一个有内容的虚拟容器,并对该虚拟容器添加样式。这个容器不包含任何DOM元素，但是可以包含内容，另外，开发者还可以为伪元素定制样式。

    ::selection

    ::first-line/first-letter

    ::before/after：往容器里面添加行内元素，并且可以修改行内元素的样式，故为伪元素

    ...

*伪类和伪元素的区别：

    伪类是为了弥补css选择器的不足，添加的样式是在实际容器上：

     /* 该背景属性通过伪类hover添加到box上去了，弥补了box选择器的不足 */

     .box:hover{background: red;} 

    伪类元素则是虚拟一个有内容的容器，并对该容器添加样式：

    为box容器中被选中的内容添加样式，这里被选中的内容即为一个虚拟的容器

     .box::selection{background: red;color: yellow;}

8、css Hack(了解)

CSS Hack用来解决浏览器的兼容性问题，为不同版本的浏览器定制编写不同的CSS效果，使用每个浏览器单独识别的样式代码，控制浏览器的显示样式。

Hack分类：

1、CSS属性前缀法

是在CSS样式属性名前加上一些只有特定浏览器才能识别的hack前缀，以达到预期的页面展示效果。

前缀标识兼容浏览器

_ IE6

+、* IE6、IE7

\9 IE6~IE9

\0 IE8~IE11

        2、选择器前缀法

            是针对一些页面表现不一致或者需要特殊对待的浏览器，在CSS选择器前加上一些只有某些特定浏览器才能识别的前缀进行hack。

             前缀标识                兼容浏览器

              *html                    IE6

              *+html                   IE7

              ：root                IE9以上及现代浏览器

        3、IE条件注释法

            这是一种IE浏览器转悠的Hack写法，微软官方推荐使用的hack方式

             前缀标识                兼容浏览器

  <!--[if IE]>...<![endif]-->           IE

  <!--[if IE 7]>...<![endif]-->         IE7

  <!--[if lte IE]>...<![endif]-->       IE7以下

  <!--[if ! IE 7]>...<![endif]-->       非IE7

    注：IE10以上已经不支持注释法了（了解即可）

9、IE低版本的BUG（部分）

常见兼容性问题

1、透明度:opacity:IE8及以下版本不识别，写成兼容性写法:filter: alpha(opacity=50);

    2、双边距:

        /* IE6下的双边距bug，及解决方案 */加：_display:inline;（加_表示仅针对IE6）

    .box{float:left;width: 100px;height: 100px;background: red;margin-left: 50px;_display:inline;}

    3、最小高度:

         /* IE6下的最下高度bug，最小高度为19px */

         解决方法为加overflow-hidden;

    4、图片链接产生边框:

    <a href="#">

        <img src="../img/练习1.jpg" alt="">

    </a>

    解决方法： img{border: none;}

10、渐进增强与优雅降级

渐进增强：针对低版本的浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和最佳功能达到更好地用户体验。

优雅降级：一开始就构建完整的功能，然后在针对低版本浏览器进行向下兼容(用不同方式实现和高级浏览器上一样的显示效果)

11、网页布局扩展

1、等高布局：

    子容器的margin如果取负值则，则会使父容器的高度小于子容器的高度：

    利用margin负值和padding的组合实现：

     .parent{border: 10px black solid;overflow: hidden;}

    .box1{float: left;width: 100px;background:red;margin-bottom: -2000px;padding-bottom: 2000px;}

    .box2{float: right;width: 100px;background:blue;margin-bottom: -2000px;padding-bottom: 2000px;}

随着box1和box2内容的变多撑大父容器漏出hidden的区域，实现一种等高效果

2、三列布局：左右固定，中间自适应

    1、BFC方式

    2、定位

    3、浮动（双飞翼布局、圣杯布局）(了解，一般用flex来做)

        终点了解：利用margin负值

    4、flex弹性

巴特西

HTML与CSS学习笔记(5)

最新文章

热门文章