以前做项目的时候，学习了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. 第十篇 一个利用反射实现的Excel导出

    前些天写了个导出Excel的公共类,因为项目中也需要上传Excel,没有利用Office组件,(PS:Office在上传文件时候,Excel进程无法关闭,会导致上传和打开失败)有的说利用Kill把进程 ...

  2. 基于Struts自定义MVC-1

    自定义MVC        数据库:Oracle表:User(id,uname,upwd)自定义Struts框架一.定义Action接口 1 import javax.servlet.http.*; ...

  3. Web前端与移动开发学习路线图

    文章转载自「开发者圆桌」一个关于开发者入门.进阶.踩坑的微信公众号 这里整理的Web前端与移动开发学习路线图包含初中级两个部分,你可以通过百度云盘下载观看对应的视频 链接: http://pan.ba ...

  4. CSS知识点汇总 (全是干货O(∩_∩)O~ )

    一.CSS选择器 [选择器的命名规则] 1.只能有字母数字下划线组成,不能有其他任何特殊字符 2.开头不能是数字 [通用选择器]1.写法:*{}2.作用:选中页面中的所有标签(大范围修改)3.优先级: ...

  5. ajax 实现加载页面、删除、查看详细信息，以及bootstrap网页的美化

      由于有些的程序员可能不是很会Photoshop,所以为了美化页面,我们可以借助工具bootstrap,实现起来相对就要比之前做的美观一些, 今天我用bootstrap把之前做的显示表格进行了一下美 ...

  6. linux学习初体验

    前天买了鸟哥私房菜,昨天一早就到了.阅读了前两章. 一.Linux是什么 二.Linux如何学习 还有前面的计算机概论也值得一看.对于计算机构成,硬件解读,数据存储,比一般的电脑维修类的书深一些. 第 ...

  7. 1630/2023: [Usaco2005 Nov]Ant Counting 数蚂蚁

    2023: [Usaco2005 Nov]Ant Counting 数蚂蚁 Time Limit: 4 Sec  Memory Limit: 64 MBSubmit: 85  Solved: 40[S ...

  8. 使用Eclipse/MyEclipse开发Java程序

    集成开发环境(IDE)是一类软件 将程序开发环境和程序调试环境集合在一起,提高开发效率 下载eclipse安装包网址:http://www.eclipse.org/downloads/ **MyEcl ...

  9. C++ IO学习

    关于IO,主要有这么三种类型:标准输入输出,文件输入输出,字符串流.后面两种都是继承自第一种标准输入输出的.他们分别对应的头文件是: 标准输入输出:#include <iostream> ...

  10. 会话控制之session和cookie（20161107）

    注:除了登录页面,每个页面,包括处理页面也要加,为了提高安全性 session尽量不用,因为很占内存 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML ...