CSS3笔记4
1.CSS3盒子模型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div:first-child {
width: 200px;
height: 200px;
background-color: pink;
box-sizing: content-box; /*以前的盒子模型 w3c标准*/
padding: 10px;
border: 15px solid red;
/*盒子大小为 width + padding + border content-box:此值为其默认值,其让元素维持W3C的标准Box mode;*/
}
div:last-child {
width: 200px;
height: 200px;
background-color: purple;
padding: 10px;
box-sizing: border-box; /*padding border 不撑开盒子*/
border: 15px solid red;
/*盒子大小为width padding和border是包含到width里面的*/ }
</style>
</head>
<body>
<div>content-box</div>
<div>border-box</div>
</body>
</html>
CSS3盒子模型
2.盒子阴影
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
h1 {
font-size: 100px;
/*text-shadow: 水平距离 垂直距离 模糊距离 阴影颜色*/
text-shadow: 10px 3px 3px rgba(0, 0, 0, .5); }
div {
width: 200px;
height: 200px;
border: 10px solid red;
/*box-shadow: 5px 5px 3px 4px rgba(0, 0, 0, .4);*/
box-shadow: 0 15px 30px rgba(0, 0, 0, .4) inset;
/*box-shadow: 水平位置 垂直位置 模糊距离 阴影尺寸 （颜色大小） 阴影颜色 内外阴影*/ }
</style>
</head>
<body>
<h1>文字阴影演示</h1>
<div>盒子阴影演示</div>
</body>
</html>
盒子阴影
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
width: 249px;
height: 249px;
line-height: 249px;
background-color: pink;
margin: 100px;
background: url(images/shui.jpg) 0 0 no-repeat;
font-size: 30px;
text-align: center;
color: rgba(255, 255, 255, 0.7); /*颜色半透明*/
border-radius: 50%; /*变成一个圆 圆角*/
box-shadow: 5px 5px 10px 16px rgba(255, 255, 255, 0.4) inset,
5px 4px 10px rgba(0, 0, 0, 0.3) /*内阴影*/
</style>
</head>
<body>
<div>水晶图片</div>
</body>
</html>
水晶图片案例
3.文字环绕效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
width: 500px;
height: 500px;
border: 1px solid hotpink;
margin: 0 auto; /*让盒子居中对齐*/
}
img {
float: right; 浮动发明的目的是用来做文字环绕效果*/
}
</style>
</head>
<body>
<div>
JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。
<img src="data:images/shui.jpg" height="220" width="171" alt="">
在1995年时，由Netscape公司的Brendan Eich，在网景导航者浏览器上首次设计实现而成。因为Netscape与Sun合作，Netscape管理层希望它外观看起来像Java，因此取名为JavaScript。但实际上它的语法风格与Self及Scheme较为接近。 [1] 为了取得技术优势，微软推出了JScript，CEnvi推出ScriptEase，与JavaScript同样可在浏览器上运行。为了统一规格，因为JavaScript兼容于ECMA标准，因此也称为ECMAScript。 </div>
</body>
</html>
文字环绕效果
4.浮动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
width: 400px;
height: 200px;
background-color: pink;
/*display: inline-block;*/
/*转换成行内快元素 就可以放一行上 有宽度高度 但是元素之间有空隙 不方便处理*/
float: left; /*让元素浮动起来就能解决有缝隙的问题啦*/
}
div:nth-child(2) {
background-color: skyblue;
}
div:nth-child(3) {
background-color: purple;
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
</body>
</html>
左浮动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.father {
width: 500px;
height: 300px;
background-color: pink;
border: 10px solid red;
padding: 10px; /*子盒子浮动不会压住父盒子的padding和margin值*/
}
.son {
width: 100px;
height: 100px;
background-color: purple;
float: left;
}
</style>
</head>
<body>
<div class="father">
<div class="son">
</div>
</div>
</body>
</html>
浮动特性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
section {
width: 800px;
height: 500px;
background-color: pink;
}
section div:first-child {
width: 200px;
height: 200px;
background-color: purple;
}
section div:last-child {
width: 249px;
height: 300px;
background-color: skyblue;
float: left;
/*熊大和熊二都浮动,则盒子会顶对齐*/
/*熊大不浮动 熊二浮动，熊二则会跑到下一行*/
}
</style>
</head>
<body>
<section>
<div>熊大</div>
<div>熊二</div>
</section>
</body>
</html>
浮动特性2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
height: 200px;
background-color: pink;
float: left; /*块级元素添加浮动之后,具有行内快的特性*/
}
span {
background-color: purple;
height: 100px;
float: left; /*行内元素添加浮动之后，具有行内快的特性*/
}
/*行内快特性 可以一行放多个 有宽度和高度 盒子的大小是有内容决定的*/
</style>
</head>
<body>
<div>我是div1</div>
<div>div2</div>
<span>我是span1</span>
<span>span2</span>
</body>
</html>
浮动改变元素模式
浮动特性总结
5.网页布局
布局流程
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.top {
width: 960px;
height: 80px;
background-color: pink;
text-align: center; /*文字居中对齐*/
margin: 0 auto; /*盒子居中对齐*/
}
.banner {
width: 960px;
height: 120px;
background-color: purple;
margin: 0 auto;
text-align: center;
}
.main {
width: 960px;
height: 200px;
background-color: skyblue;
margin: 0 auto;
text-align: center;
}
.footer {
width: 960px;
height: 80px;
background-color: black;
margin: 0 auto;
text-align: center;
}
</style>
</head>
<body>
<div class="top">top</div>
<div class="banner">banner</div>
<div class="main">main</div>
<div class="footer">footer</div>
</body>
</html>
一列固定宽度且居中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.top,
.banner,
.main,
.footer {
width: 960px;
text-align: center;
margin: 0 auto;
margin-bottom: 10px;
}
.top {
height: 80px;
background-color: pink;
}
.banner {
height: 120px;
background-color: purple;
}
.main {
height: 500px;
background-color: hotpink;
}
.footer {
height: 150px;
background-color: black;
}
</style>
</head>
<body>
<div class="top"></div>
<div class="banner"></div>
<div class="main"></div>
<div class="footer"></div>
</body>
</html>
一列固定宽度且居中，有间隙
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.top,
.banner,
.main,
.left,
.right,
.footer {
width: 960px;
margin: 0 auto;
text-align: center;
background-color: #eee; /*灰色*/
border: 1px dashed #ccc; /*类似灰色*/
}
.top {
height: 80px;
}
.banner {
height: 150px;
}
.main {
height: 500px;
}
.left {
width: 360px;
height: 500px;
background-color: pink;
float: left;
}
.right {
width: 592px;
height: 500px;
background-color: purple;
float: left;
}
.footer {
height: 120px;
}
</style>
</head>
<body>
<div class="top">top</div>
<div class="banner">banner</div>
<div class="main">
<div class="left">left</div>
<div class="right">right</div>
</div>
<div class="footer">footer</div>
</body>
</html>
两列左窄右宽型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
ul {
list-style: none; /*取消列表默认的小点样式*/
}
.top {
height: 60px;
background-color: #000;
color: white;
text-align: center;
line-height: 60px;
}
.banner {
width: 960px;
height: 400px;
background-color: skyblue;
margin: 20px auto;
border-radius: 15px;
text-align: center;
line-height: 400px;
}
.main {
width: 960px;
height: 200px;
margin: 0 auto;
}
.main ul li {
width: 240px;
height: 200px;
background-color: pink;
float: left; /*浮动的目的是让多个块级li 一行显示 而且没有缝隙哟*/
}
.main ul li:nth-child(even) { /*让偶数li元素变成紫色*/
background-color: purple;
}
.footer {
height: 100px;
background-color: #000;
}
</style>
</head>
<body>
<div class="top">top</div>
<div class="banner">banner</div>
<div class="main">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
<div class="footer">footer</div>
</body>
</html>
通栏平均分布型
6.清除浮动的4种姿势
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.box1 {
width: 600px;
background-color: pink;
}
.box2 {
width: 600px;
height: 240px;
background-color: purple;
}
.son1 {
width: 150px;
height: 100px;
background-color: skyblue;
float: left;
}
.son2 {
width: 300px;
height: 100px;
background-color: hotpink;
float: left;
}
/*如果son1和son2都浮动了，浮动元素不占有位置，父亲又没有高度
此时底下的盒子就会跑上来*/
.clear {
clear: both; /*清除浮动的影响*/
}
</style>
</head>
<body>
<div class="box1">
<div class="son1"></div>
<div class="son2"></div>
<!-- 在浮动盒子的后面添加一个空盒子
缺点是添加很多额外的标签，不推荐使用 -->
<div class="clear"></div>
</div>
<div class="box2"></div>
</body>
</html>
浮动盒子后面加标签（low，不推荐）
后面效果与这个效果一样。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.box1 {
/*height: 200px; 很多情况下,我们父级盒子,不方便给高度,考虑孩子会变*/
width: 600px;
background-color: pink;
overflow: hidden; /*触发BFC BFC可以清除浮动 这是解决方案 BFC以后讲解 overflow: auto/scroll也行*/
}
.box2 {
width: 600px;
height: 240px;
background-color: purple;
}
.son1 {
width: 150px;
height: 100px;
background-color: skyblue;
float: left;
}
.son2 {
width: 300px;
height: 100px;
background-color: hotpink;
float: left;
}
/*如果son1和son2都浮动了,浮动元素不占有位置，父亲有没有高度 此时底下盒子就会跑上来*/ </style>
</head>
<body>
<div class="box1">
<div class="son1"></div>
<div class="son2"></div>
</div>
<div class="box2"></div>
</body>
</html>
父标签添加overflow
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.box1 {
/*height: 200px; 很多情况下,我们父级盒子,不方便给高度,考虑孩子会变*/
width: 600px;
background-color: pink;
}
.box2 {
width: 600px;
height: 240px;
background-color: purple;
}
.son1 {
width: 150px;
height: 100px;
background-color: skyblue;
float: left;
}
.son2 {
width: 300px;
height: 100px;
background-color: hotpink;
float: left;
}
/*如果son1和son2都浮动了,浮动元素不占有位置，父亲有没有高度 此时底下盒子就会跑上来*/
.clearfix:after { /*伪元素选择器*/
content: "."; /*内容为小点,尽量不要空, 否则旧版浏览器有空隙.*/
display: block; /*转换为块级元素*/
height: 0; /*高度为0*/
visibility: hidden; /*隐藏盒子*/
clear: both; /*清除浮动*/
}
.clearfix { /*ie6/7浏览器的处理方式*/
*zoom: 1; /*ie6/7能识别的特殊符号 带有这个*的属性 只有ie6/7才能执行 zoom就是ie6/7清除浮动的方法*/
}
</style>
</head>
<body>
<div class="box1 clearfix">
<div class="son1"></div>
<div class="son2"></div>
</div>
<div class="box2"></div>
</body>
</html>
after伪元素清除浮动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.box1 {
/*height: 200px; 很多情况下,我们父级盒子,不方便给高度,考虑孩子会变*/
width: 600px;
background-color: pink;
}
.box2 {
width: 600px;
height: 240px;
background-color: purple;
}
.son1 {
width: 150px;
height: 100px;
background-color: skyblue;
float: left;
}
.son2 {
width: 300px;
height: 100px;
background-color: hotpink;
float: left;
}
/*如果son1和son2都浮动了,浮动元素不占有位置，父亲有没有高度 此时底下盒子就会跑上来*/
.clearfix:before,.clearfix:after {
content: "";
display: table; /*这句话可以触发BFC BFC可以清除浮动*/
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1; /*兼容IE6/IE7浏览器*/
}
</style>
</head>
<body>
<div class="box1 clearfix">
<div class="son1"></div>
<div class="son2"></div>
</div>
<div class="box2"></div>
</body>
</html>
双伪元素清除浮动
7.思维导图总结
CSS3笔记4的更多相关文章
- css3笔记系列-3.css中的各种选择器详解，不看后悔系列
点击上方蓝色字体,关注我 最详细的css3选择器解析 选择器是什么? 比较官方的解释:在 CSS 中,选择器是一种模式,用于选择需要添加样式的元素. 最常见的 CSS 选择器是元素选择器.换句话说 ...
- 【css3笔记】---- 渐变的秘密
<CSS揭秘>这本书非常不错,充满了干货和惊喜.以下主要是关于使用渐变做出来的一些效果的笔记.请用最新的现代浏览器观看. 首先要回顾下一个css语句: linear-gradient([ ...
- CSS3 笔记四（Transforms/Transition/Animations）
CSS3 2D Transforms Methods translate() rotate() scale() skewX() skewY() matrix() 1> translate() T ...
- CSS3 笔记三（Shadow/Text/Web Fonts）
CSS3 Shadow Effects text-shadow box-shadow 1> text-shadow The text-shadow property adds shadow to ...
- CSS3 笔记二（Gradients）
CSS3 Gradients Two types of gradients: Linear Gradients (goes down/up/left/right/diagonally) Radial ...
- CSS3 笔记一（Rounded Corners/Border Images/Backgrounds）
CSS3 Rounded Corners The border-radius property is a shorthand property for setting the four border- ...
- CSS3笔记
CSS/CSS3在线手册:http://www.css119.com/book/css/ CSS3实现水平垂直居中:http://bbs.html5cn.org/thread-87300-1-1. ...
- CSS3笔记（一）
最开始的时候 CSS3产生的一个新属性是一个浏览器的私有的,然后W3C 可能会拿来采用做个标准,再没公布标准之前就只能用私有属性(加前缀)来表达各自厂商的实现,主要是CSS3刚出现那会儿,它暗示该CS ...
- CSS3笔记之第四天
CSS3 2D 转换 了解2D变换方法: translate() rotate() scale() skew() matrix() translate()方法,根据左(X轴)和顶部(Y轴)位置给定的参 ...
- CSS3笔记之第三天
CSS浮动 float:right 伪类: a:link {color:#FF0000;} /* 未访问链接*/ a:visited {color:#00FF00;} /* 已访问链接 * ...
随机推荐
- Suffix
$ 题目描述 给定一个序列\(A\),请你输出\(\sum_{1< i< j < k < h}A_iA_jA_kA_h(mod ~~1e9+7)\) \(Solution\) ...
- 【XSY2720】区间第k小 整体二分 可持久化线段树
题目描述 给你你个序列,每次求区间第\(k\)小的数. 本题中,如果一个数在询问区间中出现了超过\(w\)次,那么就把这个数视为\(n\). 强制在线. \(n\leq 100000,a_i<n ...
- 【XSY1295】calc n个点n条边无向连通图计数 prufer序列
题目大意 求\(n\)个点\(n\)条边的无向连通图的个数 \(n\leq 5000\) 题解 显然是一个环上有很多外向树. 首先有一个东西:\(n\)个点选\(k\)个点作为树的根的生成森林个数为: ...
- emwin之2D图形流位图显示的方法
@2018-10-31 [需求] 界面上绘制状态指示图标 [方法] --① 方法一 外部存储介质上的图标读写与显示 i . 将要显示的图标使用官方软件<BmpCvt.exe>转换成 &q ...
- 覆盖的面积 HDU - 1255 （扫描线， 面积交）
求n个矩阵面积相交的部分,和求面积并一样,不过这里需要开两个数组保存覆盖一次和覆盖两次以上的次数的部分,还是模板,主要注意点就是pushup部分,如果我已经被两次覆盖,那我的两个数组在这个root点的 ...
- BJWC2018上学路线
题目描述 小B 所在的城市的道路构成了一个方形网格,它的西南角为(0,0),东北角为(N,M). 小B 家住在西南角,学校在东北角.现在有T 个路口进行施工,小B 不能通过这些路口.小B 喜欢走最短的 ...
- react案例->新闻移动客户端--（react+redux+es6+webpack+es6的spa应用）
今天分享一个react应用,应在第一篇作品中说要做一个react+redux+xxx的应用.已经做完一部分,拿出来分享.github地址为:点我就可以咯~ 这里实现了一个新闻移动站的spa.本来想写p ...
- js原生事件系统与坐标系统
今天来实现一个可兼容的js原生拖拽,在这里面我将会讲到: 1.封装兼容性的事件系统. 2.封装得到鼠标当前位置的系统. 3.完成拖拽的实现. 首先,我们要讲到鼠标位置的获取,讲到这个,就离不开js的w ...
- Home School Books美国家庭学校教育小学初中高中全套美语教材
加州的资料总共买过三次: ①优妈妈儿童教育,买过美国加州小学一.二年级的语文及相应的练习册,并买了纸版资料. (这是自己学习用的) ②美国加州原版小学教材Reading Wonders 2014新版语 ...
- Django（二）框架第一篇基础
https://www.cnblogs.com/haiyan123/p/7701412.html 一个小问题: 什么是根目录:就是没有路径,只有域名..url(r'^$') 补充一张关于wsgiref ...