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 笔记的更多相关文章
-
HTML+CSS学习笔记 (6) - 开始学习CSS
HTML+CSS学习笔记 (6) - 开始学习CSS 认识CSS样式 CSS全称为"层叠样式表 (Cascading Style Sheets)",它主要是用于定义HTML内容在浏 ...
-
《学习CSS布局》学习笔记
近几天做了一个小的企业展示网站.虽然页面是在模板的基础上改的,但改的多了不熟悉CSS也很麻烦.正好我看到了学习CSS布局这个网站,于是补习了一下CSS知识. CSS的显示 CSS的元素分为两类:块级元 ...
-
每天成长一点---WEB前端学习入门笔记
WEB前端学习入门笔记 从今天开始,本人就要学习WEB前端了. 经过老师的建议,说到他每天都会记录下来新的知识点,每天都是在围绕着这些问题来度过,很有必要每天抽出半个小时来写一个知识总结,及时对一天工 ...
-
如何深入学习CSS
学习CSS有了一定基础后,有的人会觉得好象没有什么学的.因为知道一些基本的理论性的东西.CSS说它容易是因为它的知识点有限.说它难学就在于各浏览器对CSS的支持程度不同.如何深入学习我给出以下几点见意 ...
-
学习ThinkPHP笔记
学习ThinkPHP笔记 TP的模块化设计 名称 描述 应用 基于同一个入口文件访问的项目我们称之为一个应用. 模块 一个应用下面可以包含多个模块,每个模块在应用目录下面都是一个独立的子目录. 控制器 ...
-
学习 CSS 样式
1.CSS浮动 : http://www.cnblogs.com/zhongxinWang/archive/2013/03/27/2984764.html (1)一个重要结论: ...
-
css知多少(2)——学习css的思路
两周之前写过该系列的第一篇,其实当时只是一个想法,这段时间迟迟未更新,是在思考一个解决过程.现在初有成效,就开更吧. 1. 一个段子 开题不必太严肃,写博客也不像写书,像聊天似的写东西是最好的表达方式 ...
-
DSP28377S - ADC学习编程笔记
DSP28377S - ADC学习编程笔记 彭会锋 2016-08-04 20:19:52 1 ADC类型导致的配置区别 F28377S的ADC类型是Type 4类型,我的理解是不同类型的ADC采 ...
-
开始学习css
今天开始学习css:应用一本<HTML5与CSS3网页设计基础> 先学习css样式规则声明. Body{ color:blue} 对应:选择符:{声明属性:声明值}: Background ...
随机推荐
-
【Java学习系列】第3课--Java 高级教程
本文地址 可以拜读: 从零开始学 Java 分享提纲: 1. Java数据结构 2. Java 集合框架 3. Java泛型 4. Java序列化 5. Java网络编程 6. Java发送Email ...
-
Nodejs学习笔记(十二)--- 定时任务(node-schedule)
目录 写在之前 Cron风格定时器 通配符解释 范围触发 递归规则定时器 对象文本语法定时器 取消定时器 写在之后 写在之前 在实际开发项目中,会遇到很多定时任务的工作.比如:定时导出某些数据.定时发 ...
-
slot signal机制
有一个比较 经典的实现:http://sigslot.sourceforge.net/很精简的 signal slot的实现,跨平台.webrtc项目在用,我在自己项目里也用了.这个源码有2000多行 ...
-
Windows vista以上模拟Alt Ctrl Delete
之前客户要求我们能够在windows登陆界面能够用指定账户批量控制机器登陆,然后用windows credentials provider(vista以上,xp需要用Gina)实现了这个功能,这期间遇 ...
-
C++类包含问题(重复包含和相互包含)
一.重复包含头文件 头文件重复包含,可能会导致的错误包括:变量重定义,类型重定义及其他一些莫名其妙的错误.C++提供两种解决方案,分别是#ifndef和#pragma once #ifndef _SO ...
-
解决IOS safari在input focus弹出输入法时不支持position fixed的问题
该文章为转载 我们在做移动web应用的时候,常常习惯于使用position:fixed把一个input框作为提问或者搜索框固定在页面底部.但在IOS的safari和webview中,对position ...
-
MacOS搭建本地服务器
MacOS搭建本地服务器 一,需求分析 1.1,开发app(ios android)时通常需往app中切入web页面,直接导入不行,故需搭建本地的测试网站服务,通过IP嵌入访问页面. 1.2,开发小程 ...
-
codecombat之地牢关卡Python代码
1.地牢 # 向宝石进发. # 小心撞墙! # 在下面输入你的代码. self.moveRight() self.moveDown() self.moveRight() 2.深藏的宝石 # 利用你的移 ...
-
三.HashMap原理及实现学习总结
HashMap是Java中最常用的集合类框架之一,是Java语言中非常典型的数据结构.本篇主要是从HashMap的工作原理,数据结构分析,HashMap存储和读取几个方面对其进行学习总结.关于Hash ...
-
CentOS7使用命令连接网络配置
背景 在安装完CentOS7无桌面的情况下,无法使用桌面图标连接,如下图所示,这时我们需要在配置文件中配置网络连接信息. 步骤 查看ip地址:ifconfig PS:在未连接网络之前,我们是查看不到i ...