虽懂却不会，真是可怕，自认懂却了无。

善用CSS属性选择器

在用于区别和唯一的情况下完全可以使用属性选择器，而没有必要使用class或id

p[city="http://www.css.com/"]{
　　color:red;
}

<p city="http://www.css.com/">www.css.com</p>

first-line首行段落

利用:after和:before生成内容，可以减少你的标签。

根据你要做的事来选择合适的标签而不是表现。

超越css-64页

常用代码库

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">

  <title>M tools module</title>

  <link rel="stylesheet" href="css/index.css">

</head>

<body>

  --1

  <!-- 左边固定宽度，右边自适应 -->

  <section id="test_1">

    <p>左边：<span>嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻从小嘻嘻嘻嘻嘻嘻下</span></p>

  </section>

  --2

  <!-- 左边固定宽度，右边自适应并且可以编辑内容 -->

  <section id="test_2">

    <p>左边：<span  contenteditable="true">嘻嘻嘻嘻嘻嘻下小嘻嘻嘻嘻嘻嘻下嘻嘻嘻嘻嘻嘻下小嘻嘻嘻嘻嘻嘻下</span></p>

  </section>

  --3

  <!-- 商品列表 -->

  <section id="test_3" class="clearfix">

    <a href="javascript:;">

      <span>图片</span>

      <dl>

        <dt>商品标题商品标题商品标题商品标题商品标题商品标题商品标题</dt>

        <dd>这是一段内容内容内容内容内容</dd>

        <dd>这是一段内容内容内容内容内容</dd>

      </dl>

      <p>底部</p>

    </a>

  </section>

  --4

  <!-- 文字宽度平分 -->

  <section id="test_4">

    <p>文字啊</p>

  </section>

  --5

  <!-- 特效 -->

  <section id="test_5">

    <h3>显示</h3>

    <p>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p>

  </section>

</body>

</html>
/* reset */

div,h1,h2,h3,h4,h5,h6,dl,dt,dd,ul,ol,li,p{

  margin:;

  padding:;

}

/* clearfix */

.clearfix{

  overflow:auto;

  zoom:;

}

/* test_1 */

#test_1 span{

  display:inline-block;

  width:80%;

  vertical-align:top;

}

/* test_2 */

#test_2 span{

  display:inline-block;

  width:80%;

  vertical-align:top;

  min-height: 50px;

  outline: none;

  border: 1px solid #fff;

  padding:3px;

}

#test_2 span:hover{

  border: 1px solid #a0b3d6;

}

/* test_3 */

#test_3 span{

  float:left;

  height:120px;

  margin-right:12px;

}

#test_3 dl{

  min-height:100px;

  max-height:100px;

}

#test_3 dt{

  overflow: hidden;

  text-overflow: ellipsis;

  display: -webkit-box;

  -webkit-line-clamp:;

  -webkit-box-orient: vertical;

}

#test_3 dd{

  padding:5px 0;

}

/* test_4 */

#test_4 p{

  width: 60px;

  text-align: justify;

}

#test_4 p:after{

  content: "";

  display: inline-block;

  width: 100%;

  height:;

}

/* 特效 */

#test_5:hover p{

  opacity:;

  border:1px solid #ccc;

  padding:10px 0;

}

#test_5 p{

  opacity:;

  transition:all 0.5s;

}

............

领会CSS，实际中的研究的更多相关文章

  1. 说说CSS学习中的瓶颈

    虽已数年,但未就学习专门写过文章,这回破处了.苍蝇不叮没有缝隙的鸡蛋,领导不做没有跟拍的表演,同样,想到写CSS学习的文章也是有原因的(虽然我的不少行为没有原因). 情景再现(尊重隐私,下面故事中人名 ...

  2. CSS学习中的瓶颈期深入分析

    虽已数年,但未就学习专门写过文章,这回破处了.苍蝇不叮没有缝隙的鸡蛋,领导不做没有跟拍的表演,同样,想到写CSS学习的文章也是有原因的(虽然我的不少行为没有原因). 情景再现(尊重隐私,下面故事中人名 ...

  3. 算警示吧——此文来自张鑫旭（说说CSS学习中的瓶颈）

    by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=2523 虽已数年,但未 ...

  4. 透过现象看webpack处理css文件中图片路径转换的具体过程

    webpack是目前使用比较流行的一个前端模块打包器,前端的任何资源都被当成一个模块来处理,如图片.css文件等等.在基于webpack构建的前端项目中,一般都会配置有关css文件处理的规则,这其中也 ...

  5. 关于 CSS 反射倒影的研究思考

    原文地址:https://css-tricks.com/state-css-reflections 译者:nzbin 友情提示:由于演示 demo 的兼容性,推荐火狐浏览.该文章篇幅较长,内容庞杂,有 ...

  6. DIV+CSS布局中主要CSS属性介绍

    Float: Float属性是DIV+CSS布局中最基本也是最常用的属性,用于实现多列功能,我们知道<div>标签默认一行只能显示一个,而使用Float属性可以实现一行显示多个div的功能 ...

  7. CSS布局中的水平垂直居中

    CSS布局中的水平垂直居中 各位好,先说两句题外话.今天是我开通博客园的博客第一天,虽然我申请博客园的账号已经有一年半了,但是由于各种原因迟迟没有开通自己的博客.今天非常有幸开通博客,在此也写一篇关于 ...

  8. 怎样将多个CSS文件导入一个CSS文件中

    问题: 在HTML中引入css的其中的两个方法:    导入式和链接式的目的都是将一个独立的css文件引入一个文件中,二者的区别不大,事实上,二者最大的区别在于链接式使用html的标记引入外部css文 ...

  9. DIV CSS布局中position属性用法深入探究

    本文向大家描述一下DIV CSS布局中的position属性的用法,position属性主要有四种属性值,任何元素的默认position的属性值均是static,静态.这节课主要讲讲relative( ...

  10. 认识和理解css布局中的BFC

    认识和理解css布局中的BFC BFC的定义 是 W3C CSS 2.1 规范中的一个概念,它决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用. Block Formatting Con ...

随机推荐

  1. WebBench源码分析与心得

    源码:https://github.com/EZLippi/WebBench   关键全局变量: speed 成功次数 failed 失败次数 bytes 接收字节数 benchtime 执行时长(秒 ...

  2. 用sql取出来的list需要处理成map的两种情况

    1. 原生sql: select a.id,a.name from a SQLQuery sqlQuery=this.getSession().createSQLQuery(sb.toString() ...

  3. 深入浅出C#中的静态与非静态

    C#语言静态类 vs 普通类  C#语言静态类与普通类的区别有以下几点: 1)C#语言静态类无法实例化而普通类可以: 2)C#语言静态类只能从System.Object基类继承:普通可以继承其它任何非 ...

  4. java中String的一些方法

    1.public String(char[] c,begin,length). 从字符数组c的下标begin处开始,将长度为length的字符数组转换为字符串. begin与length可以省略,即将 ...

  5. 条件随机场理论分析CRF(Conditional Random Field)

  6. 使用vim在Linux下编写C语言程序

    1.进入字符界面 2.创建文件夹用于存放源文件 mkdir helloworld    //创建文件夹命令 cd helloworld        //进入新建的文件夹,这里应该说目录比较好,win ...

  7. poj 1099

    http://poj.org/problem?id=1099 #include<stdio.h> #include<string.h> #include <iostrea ...

  8. ASP.NET 开发必备知识点(2)：那些年追过的ASP.NET权限管理

    一.前言 在前一篇文章已经为大家介绍了OWIN和Katana,有了对他们的了解之后,才能更好地去学习Asp.net Identity,因为Asp.net Identity的实现集成了Owin.其实在A ...

  9. javascript 设计模式-----外观模式

    外观模式是为外部提供简单的接口一种方式,由于模块内部方法庞杂,不能一一对外公开,那么我们需要一个统一的和简单的对外方法(API)来调用这些内在的函数.这时候我们可以用到外观模式: var module ...

  10. Programming Entity Framework CodeFirst--表关系约定

    表之间的关系分为一对多,多对多,一对一三种,实质就是对外键进行配置. 一.一对多 1. Required Destination包含Lodging>的集合. public class Desti ...