你说你精通CSS，真的吗？

以前做项目的时候，学习了HTML和CSS，感觉这两个比较简单，在W3school 里学习了一下之后，就觉得自己已经没问题了。可是，真正要做一个好看的页面，我还是要写好久。其实，对于CSS，我并没有像我以为的那么熟悉与精通。近期做了一个系统的学习之后，感觉有必要做一个总结。

CSS基础小知识：

相对单位：px,em；
- px：像素；
- em:当前元素字体大小
css特性：继承性，层叠性；
- 继承性：有一部分属性是可以继承的，比如：font-family,font-size,font-style,text-align,text-indent,color等；
- 层叠性：元素相同，属性相同，权重相同采用“后来者居上”
优先级
- 行内样式>（内部样式=外部样式）
- 行内样式 >id选择器> class选择器 >元素选择器
- !important 可覆盖其他所有样式

li+li{
border-top:2px solid red;
}

书写规范：对于CSS的命名，必须需要注意它的规范性，最好就是那种一看文件名就知道这个CSS文件写的是哪的特效。

盒子模型：

CSS盒子模型的四个属性：

border：边框，如图中3
margin：外边距，如图中2
- 外边距叠加之后的外边距高度等于发生叠加之前的两个外边距中的最大值
padding：内边距，如图中1
- 在背景图片与内容之间，可使用它进行补白；
content：内容，如图中4

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>html</title>
        <style type="text/css">
            div{
                background-image: url(img/1.png);
                width: 152px;
                height:66px;
                line-height: 60px;
                padding-left: 85px;/*让汉字向右移*/
                font-size: 15px;
                color: blueviolet;
            }
        </style>
    </head>
    <body>
        <div>学习状况</div>
    </body>
</html>

overflow属性：

overflow:scroll 显示滚动条
overflow:hidden 隐藏超出部分，以免影响布局，清除浮动；

display属性：

块元素(block):
- 独占一行，排斥其他元素跟其位于同一行；
- 内部可容纳其他块元素或者行元素；
- 可定义高度和宽度；
- 可定义四个方向的margin属性；
行内元素(inline):
- 可以与其它行内元素位于同一行；
- 可以容纳行元素，不可容纳块元素；
- 无法定义高度和宽度；
- 可定义margin的左右，不可定义上下；

行内块元素(inline-block)
table-cell(以表格单元格的形式呈现):

图片垂直居中于元素；
等高布局；
自动平均划分元素，并在一行显示；

display的属性取值：常见的便是以上和none。

display：none 和visibility：hidden之间的区别：

display:none ：元素被隐藏之后，不占据之前的位置，彻底地消失了。
visibility:hidden ：元素被隐藏之后，依旧占据之前的位置，只是看不到了。

文本效果：

text-indent:
- text-indent:2em 表示内容的缩进；
- text-indent:-9999px 隐藏logo中的文字；
text-align:
- text-align:center; 文字，inline，inline-block元素的居中；在父元素中定义；
- margin:0 auto; 块元素的水平居中；在当前元素中定义；
vertical-align:
- vertical-align:top ：顶部对齐；
- vertical-align:middle ：中部对齐；
- vertical-align:baseline ：基线对齐；
- vertical-align:bottom ：底部对齐；
line-height:
- 一行文字的高度由line-height定义，一段文字的高度由height定义；
- height=line-height 可以实现单行文字的垂直居中；

浮动布局：

当一个元素定义了float：left或者float:right,这个元素都会变成block元素，可以按照block的方法处理。

浮动的影响：

　　对自身的影响：转化为块元素；

　　对兄弟元素的影响：浮动为同一方向，则紧挨着排序；浮动为相反方向，则都往两头跑；

　　负作用：父元素高度塌陷，从而导致边框不能撑开，背景颜色无法显示；页面布局错乱；

清除浮动：

clear:both——

overflow:hidden——应用于浮动的父元素，而不是当前的元素；

::after伪元素——结合clear:both一起实现；

.clearfix::after
{
    clear:both;
    display:block;
}

定位布局：

固定定位(fixed)
相对定位(relative)：子元素相对于父元素来定位，父元素定义为relative，子元素则定义为absolute；
绝对定位(absolute)
静态定位(static)

z-index属性：用来设定层的先后顺序的；

CSS图形：

　　不得不说，CSS的图形让我大跌眼镜了，虽然我没有近视。

三角形：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>html</title>
        <style type="text/css">
            div{
                width: 0;
                height:0;/*中间的正方形*/
                border-width: 50px;
                border-style: solid;
                border-color: red transparent transparent transparent; /*让其他三块透明，从而体现三角形*/
            }
        </style>
    </head>
    <body>
        <div></div>
    </body>
</html>

梯形：

点开firebug,

看到代码注释，其实就可以明白了。边框三角形采用两个三角形累加。

还有圆形，椭圆之类的，利用圆角属性border-radius就好了。

写了那么多，不得不感谢一下这个前端学习的大本营绿叶学习网看了作者写的书，才知道这个网站的，网站特效做的很好，和轩枫阁很像，都值得学习！

加油~

posted @ 2017-04-12 15:04 Seraphjin 阅读(586) 评论(0) 编辑收藏举报

刷新页面返回顶部

Seraphjin

逆水行舟，不进则退。

你说你精通CSS，真的吗？

公告