以前做项目的时候，学习了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. C#实体类生成XML与XML Schema文档

    一.实体类生成XML private void CreateXML() { Type[] objType = DBEntityRegst(); foreach (var item in objType ...

  2. 获取页面中任意一个元素距离body的偏移量

    //offSet:等同于jQuery中的offSet方法,获取页面中任意一个元素距离body的偏移量function offSet(curEle) { var totalLeft = null; va ...

  3. webpack配置React开发环境(上)

    Webpack 是一个前端资源加载/打包工具,我们部门的一条主要技术栈就是Webpack+React+ES6+node,虽然之前自己做个人项目也接触好多次Webpack,但是自己并没有研读总结过Web ...

  4. 每天一个Linux命令 8

    yum 光盘yum源搭建好处:不需要上网,省去许多网络yum源下载所需的时间,安装速度会大大增加.缺点:yum源不一定是最新的 1.打开虚拟机,加载光盘镜像,进入Linux系统,挂载光盘.2. 让网络 ...

  5. Html +++++css总结

    一. Html部分 Html定义 Hyper Text Markup Language  超文本标记语言 html 1.0  ->  html  2.0   -> ... -> ht ...

  6. 纯HTML自动刷新页面或重定向

    refresh 属性值  --  刷新与跳转(重定向)页面 refresh出现在http-equiv属性中,使用content属性表示刷新或跳转的开始时间与跳转的网址 refresh示例一:5秒之后刷 ...

  7. 百度推送-sitemap-使用playframework框架实现-java

    主动推送的目的是能够把我们高质量内容推送给百度,但是首先你得有一个属于你自己的网站,在百度站长进行验证通过之后,才有资格推送百度sitemap. 百度站长平台为未使用百度统计的站点提供三种验证方式:文 ...

  8. fastlane安装流程和fastlane match同步证书和PP文件方法

    分步指南 安装fastlane:  ① Make sure you have the latest version of the Xcode command line tools installed: ...

  9. 浅谈隐语义模型和非负矩阵分解NMF

    本文从基础介绍隐语义模型和NMF. 隐语义模型 ”隐语义模型“常常在推荐系统和文本分类中遇到,最初来源于IR领域的LSA(Latent Semantic Analysis),举两个case加快理解. ...

  10. Intellij IDEA中文乱码解决

    界面乱码 原因:IDEA默认设置界面的字体不支持中文 解决:修改为支持中文的字体,建议字体Microsoft Yahei UI.大小11,具体操作File -> Setting -> Ap ...