以前做项目的时候，学习了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:;

                height:;/*中间的正方形*/

                border-width: 50px;

                border-style: solid;

                border-color: red transparent transparent transparent; /*让其他三块透明，从而体现三角形*/

            }

        </style>

    </head>

    <body>

        <div></div>

    </body>

</html>

梯形：

点开firebug,

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

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

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

加油~

你说你精通CSS，真的吗？的更多相关文章

  1. 你真的精通 CSS 了？来挑战一下 CSS 选择器测验吧

    CSS 选择器赋予 CSS 强大的 HTML 元素匹配功能.作为前端开发人员必须要掌握的一部分,可能基本的大家都知道.但是你真的精通 CSS 了吗?挑战一下 CSS 选择器测验就知道. 您可能感兴趣的 ...

  2. 朝花夕拾《精通CSS》三、对一些标签元素的使用

    一.背景 翻出我4年前看的<精通CSS>一书,可惜当初没有整理读书笔记的习惯,最近又很少写前端,遂很多东西.知识点遗忘了,恰且现在 css 也有些变化和进步,遂一起打包整理,输出成几篇 b ...

  3. 系列文章--精通CSS.DIV网页样式与布局学习

    精通CSS.DIV网页样式与布局(八)——滤镜的使用 精通CSS.DIV网页样式与布局(七)——制作实用菜单 精通CSS.DIV网页样式与布局(六)——页面和浏览器元素 精通CSS.DIV网页样式与布 ...

  4. 《精通CSS：高级Web标准解决方案》学习笔记（上）

    鉴于国产CSS书籍基本都是辣鸡的现状,我在半年前动用某工作室的购书资金采购了一些技术书籍,这本广受好评的<精通CSS>也在其中.但是在阅读过后我深深的感觉到,如果说CSS本来已经是一种很琐 ...

  5. 精通CSS+DIV网页样式与布局--图片效果

    提到图片效果,小伙伴们可能会想到美图秀秀,ps等,这些软件都是款非常不错的照片处理软件,包括常用的:黑白,增强,高斯,高对比,夜视,老照片和铅笔画等等.不管你是否是专业的 照片拍摄人员,我们都可以通过 ...

  6. 《精通CSS层叠样式表》

    书名 <精通CSS层叠样式表> 图片 时间 2017-7月 学习 感觉和ps一样对我都不友好 3天撸完

  7. 《精通CSS》读书笔记（一）

    最近新添16本书,目前开始看陈剑瓯翻译的<精通CSS——高级Web标准解决方案>(Andy Budd, CSS Mastery -- Advanced Web Standards Solu ...

  8. 精通CSS：高级Web标准解决方式（第2版）

    精通CSS:高级Web标准解决方式(第2版) 跳转至: 导航. 搜索 层叠重要度:(也就是说.用户!important能够覆盖inline style) !important.用户>作者.最后是 ...

  9. 朝花夕拾《精通CSS》二、选择器 & 层叠

    一.背景 翻出我4年前看的<精通CSS>一书,可惜当初没有整理读书笔记的习惯,最近又很少写前端,遂很多东西.知识点遗忘了,恰且现在 css 也有些变化和进步,遂一起打包整理,输出成几篇 b ...

  10. 朝花夕拾《精通CSS》一、HTML & CSS 的基础

    一.背景 翻出我4年前看的<精通CSS>一书,可惜当初没有整理读书笔记的习惯,最近又很少写前端,遂很多东西.知识点遗忘了,恰且现在 css 也有些变化和进步,遂一起打包整理,输出成几篇 b ...

随机推荐

  1. 网络性能测试工具Iperf/Jperf解读

    Iperf 是一个网络性能测试工具.Iperf 可以测试TCP 和UDP 带宽质量.Iperf 可以测量最大TCP 带宽,具有多种参数和UDP 特性. Iperf 可以报告带宽,延时抖动和数据包丢失. ...

  2. C#异步的世界【下】

    接上篇:<C#异步的世界[上]> 上篇主要分析了async\await之前的一些异步模式,今天说异步的主要是指C#5的async\await异步.在此为了方便的表述,我们称async\aw ...

  3. C#中判断字符串相等的方法

    可以使用如下方式: 1. String.Compare(str1, str2) == 0  或者  str1.CompareTo(str2) == 0 2. str1.Equals(str2)  或者 ...

  4. Linux下修改系统时区

    使用 /etc/localtime 文件修改时区 先查看一下当前的时区,下面这个例子中使用 UTC 即世界统一标准时区.假设你可能需要改为美国西部标准时间,即太平洋时间. # date Thu Aug ...

  5. Java并发之线程异常捕获

    由于线程的本质特性,使得你不能捕获从线程中逃逸的异常,如: import java.util.concurrent.ExecutorService; import java.util.concurre ...

  6. layer弹出层框架alert与msg详解

    ayer至今仍作为layui的代表作,她的受众广泛并非偶然,而是这五年多的坚持,不断完善和维护.不断建设和提升社区服务,使得猿们纷纷自发传播,乃至于成为今天的Layui最强劲的源动力.目前,layer ...

  7. android开发艺术探索读书笔记之-------view的事件分发机制

    View的点击事件的分发,其实就是对MotionEvent事件的分发过程,即当一个MotionEvent产生后,系统需要把这个事件传递给一个具体的View,而这个过程就是分发过程. 分发过程主要由以下 ...

  8. bootstrap常见类的总结

    相信大家和我一样,曾经找过bootstrap的类名定义. 无奈没有找到现成的,那我就来总结一下常见类名吧. 基础样式:btn,alert,form,table,input,select.textare ...

  9. Shell中的算术运算(译)

    算术运算 尽管Shell中的变量被缺省地看做是string类型,而非number,但是Shell本身仍然支持算术运算.主要有以下5种方式. 1. declare 2. expr $ z=5 $ z=` ...

  10. [原创]HBase学习笔记（1）-安装和部署

    HBase安装和部署 使用的HBase版本是1.2.4 1.安装步骤(默认hdfs已安装好) # 下载并解压安装包 cd tools/ tar -zxf hbase-1.2.4-bin.tar.gz ...