以前做项目的时候，学习了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. Lucas,.net Web框架

    #LucasLucasLucasWeb框架是基于新的魔法糖思想创建的框架.本框架有两大特点.1.所有框架里最简单易学易配置的.2.所有框架里效率最快的.1.UrlRouter没有使用IOC注入及反射, ...

  2. 【Zookeeper】源码分析之网络通信（三）

    一.前言 前面已经学习了NIOServerCnxn,接着继续学习NettyServerCnxn. 二.NettyServerCnxn源码分析 2.1 类的继承关系 public class Netty ...

  3. 从零开始搭建Salt Web之封装salt-api接口

    salt-api现在已经正常运行,接下来则是实现通过调用salt-api来执行salt命令. 调用salt-api执行命令时,记得携带c_path参数 因为salt中自带了tornado这个库,所以决 ...

  4. java标签（label）求16进制字符串的整数和 把一个整数转为4个16进制字符表示

    p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 18.0px Menlo; color: #4f76cb } p.p2 { margin: 0.0px 0. ...

  5. smarty模板基础3 *缓存数据*

    缓存数据,这个并不是暂存的缓存,而是写入了内存的缓存 通过一个例子来书写:缓存数据 一.书写php和html页面的基本功能 既然是用smarty模板,那么前端和后端要分开写了 (1)php页面 < ...

  6. 1036: [ZJOI2008]树的统计Count

    1036: [ZJOI2008]树的统计Count Time Limit: 10 Sec  Memory Limit: 162 MBSubmit: 7496  Solved: 3078[Submit] ...

  7. 1820: [JSOI2010]Express Service 快递服务

    1820: [JSOI2010]Express Service 快递服务 Time Limit: 10 Sec  Memory Limit: 64 MBSubmit: 847  Solved: 325 ...

  8. 【WCF】错误处理（二）：错误码―—FaultCode

    先来说说SOAP消息中错误消息的包装结构,一条SOAP错误消息的大致形式如下: <s:Fault> <faultcode xmlns:a="me-cust-error&qu ...

  9. 谷歌开源图片压缩算法Guetzli实测体验报告

    谷歌大神又出开源新技术啦,这次是对JPEG格式的图片采用全新算法重新编码,输出的图片还是JPEG但是图片大小明显缩小,而质量不但没有损失,甚至还更加优化,速速来体验一把. 一.环境安装 下载谷歌开源软 ...

  10. 将基因组数据分类并写出文件，python，awk，R data.table速度PK

    由于基因组数据过大,想进一步用R语言处理担心系统内存不够,因此想着将文件按染色体拆分,发现python,awk,R 语言都能够非常简单快捷的实现,那么速度是否有差距呢,因此在跑几个50G的大文件之前, ...