1.动态修改div的大小

Html:

<div>
Hello
</div>

css:

div { resize:both; overflow:auto; }

2. box-sizing 决定width、height 与padding、border的关系

  (1). 默认情况下,box-sizing 的值是content-box, 这个时候width和height不包含padding和border

<div class="box">
<div class="left">Left</div>
<div class="right">Right</div>
</div>
.box {
width: 800px;
height: 100px;
border: solid 5px red;
padding: 10px;
}
.left, .right {
border: solid 10px green;
padding: 10px;
margin: 10px;
box-sizing: content-box;
width: 340px;
float: left;
}

结果图:

            

  如图所示,div 的width为340px,与css中所设一样

  (2). 如果我们把box-sizing的值设为border-box,  这个时候width和height就包含padding和border

<div class="box">
<div class="left">Left</div>
<div class="right">Right</div>
</div>
.box {
width: 800px;
height: 100px;
border: solid 5px red;
padding: 10px;
}
.left, .right {
border: solid 10px green;
padding: 10px;
margin: 10px;
box-sizing: border-box;
width: 340px;
float: left;
}

结果如图:

             

    如图所示,div 的width为300px,与css中所设不一样,差的40刚好是padding和border的

3. content属性与:after和:before的关系

(1)、伪元素:before和:after用法

这个两个伪元素在真正页面元素内部之前和之后添加新内容(当然了,可以对伪元素应用定位可以置于任何位置)。
可以用以下例子来说明:
<p>wonyun!</p><style>p:before{content:"hello "}p:after{content:"you are handsome!"}</style>
上面例子从技术角度看,等价于下面的html结构:
<p><span>hello </span>wonyun! <span>you are handsome!</span></p>
由此可知:
  伪元素:before和:after添加的内容默认是inline元素;这个两个伪元素的content属性,表示伪元素的内容,设置:before和:after时必须设置其content属性,否则伪元素就不起作用。
那么问题来了,content属性的值可以有哪些内容呢,具体有以下几种情况:
  a. 字符串,字符串作为伪元素的内容添加到主元素中
         注意:字符串中若有html字符串,添加到主元素后不会进行html转义,也不会转化为真正的html内容显示,而是会原样输出
      b. attr(attr_name), 伪元素的内容跟主元素的某个属性值进行关联,及其内容为主元素的某指定属性的值
      c. :可以通过js动态改变主元素的指定属性值,这时伪元素的内容也会跟着改变,可以实现某些特殊效果,如图片加载失败用一段文字替换。
      d. url()/uri(), 引用外部资源,例如图片;
      e. counter(), 调用计数器,可以不使用列表元素实现序号问题。

(2)、:before和:after特点

a. 上面说了,伪元素是通过样式来达到元素效果的,也就是说伪元素不占用dom元素节点,引用:before,:after伪元素妙用里面总结的,:before和:after伪元素的主要特点如下:
  伪元素不属于文档,所以js无法操作它
  伪元素属于主元素的一部分,因此点击伪元素触发的是主元素的click事件
  原文说块级元素才能有:before, :after,其实是不妥的,大部分行级元素也可以设置伪元素,但是像img可替换元素,因为其外观和尺寸有外部资源决定,那么如果外部资源正确加载,就会替换掉其内部内容,这时伪元素也会被替换掉,但是当外部资源加载失败时,设置的伪元素是可以起作用的。
 
b. 基于伪元素的特点可以知道其优缺点,也引用别人文章的话:
  * 优点 * 减少dom节点数 * 让css帮助解决部分js问题,让问题变得简单*缺点 * 不利于SEO * 无法审查元素,不利于调试

4.去掉点击input框时出现的默认边框

  

outline: none;

5.设置字符串里字符之间的距离

letter-spacing: 10px;

CSS 随笔的更多相关文章

  1. 没人看系列----css 随笔

    目录 没人看系列----css 随笔 没人看系列----html随笔 前言 没什么要说的就是自己总结,学习用的如果想学点什么东西,请绕行. CSS (Cascading Style Sheets)层叠 ...

  2. css随笔1

    1.简单清除浏览器样式 *{        padding: 0px;        margin: 0px;    } 2.得到屏幕范围的div html,body{        width: 1 ...

  3. CSS随笔2

    1. css中: a:link { /*表示普通的,未被访问的链接状态*/    color: black;} a:visited { /*表示链接被访问过后的状态*/    color: bluev ...

  4. css随笔属性

    anchor伪类,用于阅读文章.a:link(没有接触过的链接),用于链接常规状态 (末访问的链接)a:hover(鼠标放在链接上的状态) 用于产生视觉效果(已访问的链接)a:visited(访问过的 ...

  5. CSS随笔3

    1. CSS部分简洁使用 * background-radious:使得边框角“圆化”. * background:pink  url(“图片路径”)  no-repeat: * border 可以有 ...

  6. CSS随笔1(CSS常用样式)

    样式 属性 大小 font-size(x-large ; xx-small ; 可用数值单位 : PX,PD) 样式 font-style(oblique 偏斜体 : italic 斜体 : norm ...

  7. css随笔

    1. 关于使用pre标签,且要自动换行 可以使用: word-wrap: break-word; white-space: pre-wrap; 2. 更改placeholder样式 .input::- ...

  8. Matplotlib数据可视化(3):文本与轴

      在一幅图表中,文本.坐标轴和图像的是信息传递的核心,对着三者的设置是作图这最为关心的内容,在上一篇博客中虽然列举了一些设置方法,但没有进行深入介绍,本文以围绕如何对文本和坐标轴进行设置展开(对图像 ...

  9. 初识html、css时随笔记录

    css部分样式 圆框效果:border-radius:5px; 固定样式:position:fixed;悬浮窗在IE6中position:absolute其余浏览器可以用fixed: 使table中的 ...

随机推荐

  1. linux清空文件内容的三种方法

    linux系统中清空文件内容的三种方法 1.使用vi/vim命令打开文件后,输入"%d"清空,后保存即可.但当文件内容较大时,处理较慢,命令如下:vim file_name:%d: ...

  2. Spring Schedule实现定时任务

    applicationContext.xml 1. 增加配置 <!-- 开启定时任务 --> <task:annotation-driven /> <!-- 开启注解 - ...

  3. Zookeeper 配置集群环境详解

    在Linux环境下安装zookeeper 在Linux环境下安装zookeeper 1.       将zookeeper-3.4.13.tar.gz复制到linux操作系统 2.       通过p ...

  4. URL中传递参数给视图函数

    1. 采用在url中使用变量的方式: 在path的第一个参数中,使用<参数名>的方式可以传递参数.然后在视图函数中也要写一个参数,视图函数中的参数必须和url中的参数名称保持一致,不然就找 ...

  5. MQTT 3.1.1,值得升级的6个新特性

    前言 以前看英文文章或资料,看完之后,摘要或者忘记.这一次选择感兴趣的MQTT 3.1.1介绍文章资料,引文见文末,作为练手:非完全翻译,去除掉一些广告性描述,若侵权,请告知. 在沉寂了四年之后,QT ...

  6. java网络编程Socket通信详解

    Java最初是作为网络编程语言出现的,其对网络提供了高度的支持,使得客户端和服务器的沟通变成了现实,而在网络编程中,使用最多的就是Socket.像大家熟悉的QQ.MSN都使用了Socket相关的技术. ...

  7. vue中的计算属性中的坑,

    new Vue({ el: '#app', data: { msg:'121', val: '', }, computed:{ val:function(){ return 3; } }, }); 这 ...

  8. AS3面试题 个人理解

    现在as3面试 感觉就那几个题目来回考.有了题库,大家都看了 都答上来了 题目本身也就失去了考核的意义.而且题目本身也有很多偏的(不常用的)在考. 真正的面试官现在肯定也不会把笔试成绩当作标准.所谓: ...

  9. Windows进程单实例运行

    场景         Windows进程单实例运行,如果有进程没有退出,继续等待,直到进程完全退出,才会进入下一个实例 HANDLE pHandle = NULL; do  {  pHandle = ...

  10. xp sql2000 安装SP4失败解决方案

    环境:xp sp3 SQL: sql2000sql2000 SP4下载链接: http://www.microsoft.com/downloads/details.aspx?familyid=8E2D ...