以前做项目的时候，学习了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. 【Zookeeper】源码分析之服务器（二）

    一.前言 前面阐述了服务器的总体框架,下面来分析服务器的所有父类ZooKeeperServer. 二.ZooKeeperServer源码分析 2.1 类的继承关系 public class ZooKe ...

  2. 【JS】JavaScript中的闭包

    在JavaScript中,闭包指的是有权访问另一个函数作用域中的变量的函数:创建闭包最常见的方式就是在一个函数内创建另一个函数.如下例子: function A(propertyName){ retu ...

  3. Java面试08|Java重要的类和相关的方法

    1.深入理解Class类及其中的方法 获取Class类的方法: 1.调用Object类的getClass()方法来得到Class对象,这也是最常见的产生Class对象的方法.2.使用Class类的中静 ...

  4. Struts2学习笔记④

    刚才看书发现了一个问题,就是ActionSupport和Action接口的区别没搞清楚,弄得我以为我之前的代码写错了.其实ActionSupport已经实现了Action接口了,实际开发中也很少使用A ...

  5. ionic/cordvoa 修改platform文件夹里的文件，build会覆盖问题

    这个问题开始让我感觉很崩溃,然后,我也很意外,如果遇到可以试一试 情景: 编辑platform/android/build.gradle 看了一下cordova 命令,好像还没这个命令,但是我还真的执 ...

  6. linux版powershell安装教程(.net core版)

    powershell 传教士 原创文章 始于2016-12-20,2017-03-15改.文章版本目前博客园为最新版. 允许转载,但必须保留名字和出处,否则追究法律责任 问:powershell二进制 ...

  7. mongodb选型问题

    一.Mongodb的介绍 MongoDB 是一个跨平台的,面向文档的数据库,提供高性能,高可用性和可扩展性方便. MongoDB工作在收集和文件的概念. 数据库 数据库是一个物理容器集合.每个数据库都 ...

  8. spring-AOP-基于Schema切面的小例子

    前言: 如果一个项目没有 jdk 5.0 , 那就无法使用基于@AspectJ 注解 的切面. 但是使用AspectJ的表达式的大门还是可以使用的. 我们可以用java提供的Schema配置方法,来替 ...

  9. TensorFlow anaconda命令备忘

    [查看tensorflow安装的版本] anaconda search -t conda tensorflow [选择版本安装] conda install -c anaconda tensorflo ...

  10. Java程序中与MongoDB建立连接~小记

    1.Mongo和MongoClient的关系 MongoClient继承自Mongo,使用Mongo也可建立连接,但是需要使用与Mongo适应的MongoOptions,MongoURI等类型. 2. ...