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. VMware虚拟机里centos7下安装mysql5.6并授权远程连接Navicat

    这节来安装Mysql5.6,并远程授权连接本地windows的Navicat,可以根据以下步骤安装.此文章为自己收藏,必要时拿出来直接用的,有需要的友友可以查看查看的.文章图片有借助于网络的. 1.新 ...

  2. spring-整合Struts2

    1. Spring 如何在 WEB 应用中使用 ? 1). 需要额外加入的 jar 包: spring-web-4.0.0.RELEASE.jarspring-webmvc-4.0.0.RELEASE ...

  3. CenterOS下安装Nginx

    1. 安装gcc 检查版本命令  gcc -v 安装命令 yum install gcc-c++ 2. 安装pcre 命令 yum install prce-devel 3. 安装zlib 命令 yu ...

  4. Linux下Python与C++混合编程

    最近在做一个CUDA的项目,记录下学习心得. 系统 Linux --generic #-Ubuntu x86_64 GNU/Linux C++调用Python Python模块代码: #!/usr/b ...

  5. ionic cordova platform --help

    ionic platform add android 给我报这个问题,不理解 The platform command has been renamed. To find out more, run: ...

  6. git 克隆指定分支

    git clone -b v2.8.1 https://git.oschina.net/oschina/android-app.git

  7. 解决cron无法运行报错:FAILED to authorize user with PAM (Module is unknown)

    查看cron运行日志 tail -f /var/log/cron 报如下错误: May 8 10:14:01 localhost crond[9399]: (root) FAILED to autho ...

  8. Mysql 性能优化4 mysql参数配置

    mysql 参数的介绍 大概450项参数,大多保持默认就可以了 错误的参数 崩溃,错误,运行缓慢. 参数最好在生产环境前配置好.最好不要在生产环境 中 直接配置,有可能不会立即生效,或者之前的数据和配 ...

  9. PHP 下载中文乱码解决

    利用 iconv() 函数解决乱码 $file_name = iconv("utf-8","gb2312",$file_name); 原文链接 http://m ...

  10. java线程之间的通信

    1.常用的方法 sleep() 该线程进入等待状态,不释放锁 wait() 该线程进入等待状态,释放锁 notify() 随机唤醒一个线程 notifyAll() 唤醒全部线程 getName() 获 ...