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

善用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. 命令行中mysql乱码问题

    1.现象  在命令行中,执行sql语句如果包含中问题,提示“ Data too long for column '列名' at row 1”   或者在命令行中查询出的结果中,中文乱码   2.分析 ...

  2. 如何判断UIPanGestureRecognizer的拖动方向

    最近做一个项目,需要用到UIPanGestureRecognizer做一个侧滑菜单,需求是不能向右侧拖动(点击按钮右滑),但可以向左侧手势拖动收回:于是需要判断拖动的方向,百度了一下,网上大部分的答案 ...

  3. Python成长笔记 - 基础篇 （七）python面向对象

      三大特性: 1.封装:在类中对数据赋值.内部调用对外部用户是透明的,这使类变成了一个胶囊或容器,里面包含着类的数据和方法 2.继承:一个类可以派生出子类,在父类中定义的属性.方法会自动被子类继承 ...

  4. Android--全局获取Context

    1.Android 提供了一个Application 类,每当应用程序启动的时候,系统就会自动将这个类进行初始化.这里我们可以定制一个自己的Application 类,以便于管理程序内一些全局的状态信 ...

  5. VHDL生成的ngc文件被verilog的工程调用的问题

    1. 问题的提出 工程a是一个soft core,用VHDL写的,综合的时候去掉了"Add I/O buffers" ,并将-iob(Pack I/O Registers into ...

  6. kvm虚拟机--存储池配置梳理(转)

    1.创建基于文件夹的存储池(目录) 2.定义存储池与其目录 1 # virsh pool-define-as vmdisk --type dir --target /data/vmfs 3.创建已定义 ...

  7. 彻底理解ThreadLocal一

    synchronized这类线程同步的机制可以解决多线程并发问题,在这种解决方案下,多个线程访问到的,都是同一份变量的内容.为了防止在多线程访问的过程中,可能会出现的并发错误.不得不对多个线程的访问进 ...

  8. SQLSERVER全文搜索

    SQLSERVER全文搜索 看这篇文章之前请先看一下下面我摘抄的全文搜索的MSDN资料,基本上MSDN上关于全文搜索的资料的我都copy下来了 并且非常认真地阅读和试验了一次,并且补充了一些SQL语句 ...

  9. 介绍Oedis - Redis OH/RM

    作死造轮子 Oedis是近段时间为了解决日志型数据如何与Entity Framework的查询整合的问题写的一个Redis的OH /RM.虽然Redis出来蛮久了,各路高手也都提出了实践方案,但是或许 ...

  10. Flyway， 数据库Schema管理利器

    整天跟数据库打交道的程序员都知道,当数据库的Schema发生改变时是多么痛苦的事情.尤其是一个在不断开发完善的项目,随着需求变化,数据库的schema也会跟着变化,而追踪记录这些变化一向都是费时费力. ...