CSS 随笔
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用法
(2)、:before和:after特点
4.去掉点击input框时出现的默认边框
outline: none;
5.设置字符串里字符之间的距离
letter-spacing: 10px;
CSS 随笔的更多相关文章
- 没人看系列----css 随笔
目录 没人看系列----css 随笔 没人看系列----html随笔 前言 没什么要说的就是自己总结,学习用的如果想学点什么东西,请绕行. CSS (Cascading Style Sheets)层叠 ...
- css随笔1
1.简单清除浏览器样式 *{ padding: 0px; margin: 0px; } 2.得到屏幕范围的div html,body{ width: 1 ...
- CSS随笔2
1. css中: a:link { /*表示普通的,未被访问的链接状态*/ color: black;} a:visited { /*表示链接被访问过后的状态*/ color: bluev ...
- css随笔属性
anchor伪类,用于阅读文章.a:link(没有接触过的链接),用于链接常规状态 (末访问的链接)a:hover(鼠标放在链接上的状态) 用于产生视觉效果(已访问的链接)a:visited(访问过的 ...
- CSS随笔3
1. CSS部分简洁使用 * background-radious:使得边框角“圆化”. * background:pink url(“图片路径”) no-repeat: * border 可以有 ...
- CSS随笔1(CSS常用样式)
样式 属性 大小 font-size(x-large ; xx-small ; 可用数值单位 : PX,PD) 样式 font-style(oblique 偏斜体 : italic 斜体 : norm ...
- css随笔
1. 关于使用pre标签,且要自动换行 可以使用: word-wrap: break-word; white-space: pre-wrap; 2. 更改placeholder样式 .input::- ...
- Matplotlib数据可视化(3):文本与轴
在一幅图表中,文本.坐标轴和图像的是信息传递的核心,对着三者的设置是作图这最为关心的内容,在上一篇博客中虽然列举了一些设置方法,但没有进行深入介绍,本文以围绕如何对文本和坐标轴进行设置展开(对图像 ...
- 初识html、css时随笔记录
css部分样式 圆框效果:border-radius:5px; 固定样式:position:fixed;悬浮窗在IE6中position:absolute其余浏览器可以用fixed: 使table中的 ...
随机推荐
- VMware虚拟机里centos7下安装mysql5.6并授权远程连接Navicat
这节来安装Mysql5.6,并远程授权连接本地windows的Navicat,可以根据以下步骤安装.此文章为自己收藏,必要时拿出来直接用的,有需要的友友可以查看查看的.文章图片有借助于网络的. 1.新 ...
- spring-整合Struts2
1. Spring 如何在 WEB 应用中使用 ? 1). 需要额外加入的 jar 包: spring-web-4.0.0.RELEASE.jarspring-webmvc-4.0.0.RELEASE ...
- CenterOS下安装Nginx
1. 安装gcc 检查版本命令 gcc -v 安装命令 yum install gcc-c++ 2. 安装pcre 命令 yum install prce-devel 3. 安装zlib 命令 yu ...
- Linux下Python与C++混合编程
最近在做一个CUDA的项目,记录下学习心得. 系统 Linux --generic #-Ubuntu x86_64 GNU/Linux C++调用Python Python模块代码: #!/usr/b ...
- ionic cordova platform --help
ionic platform add android 给我报这个问题,不理解 The platform command has been renamed. To find out more, run: ...
- git 克隆指定分支
git clone -b v2.8.1 https://git.oschina.net/oschina/android-app.git
- 解决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 ...
- Mysql 性能优化4 mysql参数配置
mysql 参数的介绍 大概450项参数,大多保持默认就可以了 错误的参数 崩溃,错误,运行缓慢. 参数最好在生产环境前配置好.最好不要在生产环境 中 直接配置,有可能不会立即生效,或者之前的数据和配 ...
- PHP 下载中文乱码解决
利用 iconv() 函数解决乱码 $file_name = iconv("utf-8","gb2312",$file_name); 原文链接 http://m ...
- java线程之间的通信
1.常用的方法 sleep() 该线程进入等待状态,不释放锁 wait() 该线程进入等待状态,释放锁 notify() 随机唤醒一个线程 notifyAll() 唤醒全部线程 getName() 获 ...