# 文档类型<!DOCTYPE>

<!DOCTYPE html> 

# 字符集

<meta charset="UTF-8" />

# 换行标签

<br />

# div span标签

后代选择器  子代选择器 >

交集选择器 

div.one{

}

并集选择器

行内元素和块级元素的区别

块级元素:独占一行 能设置大小

行内元素:不能设置大小   display:inline-block可将行内元素转为块级元素

行高 line-height 文字居中

<style>
div {
height: 50px;
width: 200px;
background-color: pink;
line-height: 50px;
}
</style>
<div>我是行高</div>

 权重

  权重值

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#ya { /*权重 0,1,0,0*/
color: blue;
} .yase { /* 类选择器权重 高于 标签选择器 权重 0, 0, 1, 0*/
color: green;
} div {
/* 权重 0, 0, 0, 1*/
/* 权重 0, 0, 0, 1*/
color: red;
} div {
/* 权重 0, 0, 0, 1*/
/* 权重 0, 0, 0, 1*/
color: hotpink!important;
} * { 0 0 0 0 } /** 0000
div 0001
.one 0010
#two 0100
行内 1000
important ∞*/
</style>
</head>
<body>
<div class="yase" id="ya" style="color: orange">亚瑟</div>
</body>
</html>

  权重相同  则就近原则

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/*div { 0001
color: red;
}
div { 000
color: green;
}*/
div p {/* 0001 + 0001 = 0002*/
color: green;
} p { /*0001*/
color: red;
}
.feng { /* 0010*/
color: blue;
} /*1. 权重相同 则就近原则*/
/*2. 权重会叠加0001 + 0001 = 0002*/
</style>
</head>
<body>
<div>
<p class="feng"> 凤姐 </p>
</div>
</body>
</html>

透明

div {
width: 200px;
height: 200px;
/*background-color: #000;*/
color: #fff;
background: rgba(0, 0, 0, .3); /* red green blue alpha 0~1 */
}

 表格细线边框

<style>
table {
width: 500px;
height: 300px;
border: 1px solid red;
}
td {
border: 1px solid red;
text-align: center;
}
table, td {
border-collapse: collapse; /*合并相邻边框*/
}
</style>

 a链接

a:link {color: #FF0000} /* 未访问时的状态 */
a:visited {color: #00FF00} /* 已访问过的状态 */
a:hover {color: #FF00FF} /* 鼠标移动到链接上时的状态 */
a:active {color: #0000FF} /* 鼠标按下去时的状态 */

 内边距问题

  padding:0px,5px,10px,15px;就是上为0,右为5,下为10,左为15,

  padding的顺序是顺时针方向的

  padding会撑开 带有widht 和height盒子,要记得减去padding值

<style>
div {
width: 160px;
height: 160px;
border: 1px solid red;
padding-left: 20px;
/*非常严重的问题, padding 会撑开 带有 widht 和height盒子*/
/* 1. 我们要求这个 div 就是标准的 200 * 200
2. 但是我们给了padding就撑开盒子了 240
3. 问我们怎样能保证盒子 不超过 200 * 200 */
}
</style>

 外边距

  控制盒子与盒子之间的间距

 盒子居中三种方式

 /* margin: 0 auto; 通俗写法 0 auto  上下是 0  左右是auto  自动  水平居中对齐 */

/* margin-left: auto;
margin-right: auto; 自动充满*/ /* margin: auto; 上下左右都是auto*/

 外边距塌陷

  外边距合并 尽量避免

 圆角边框(border-radius: 150px)

<style>
div {
width: 312px;
height: 312px;
/*background-color: pink;*/
margin: 100px auto;
/*border-radius: 50%; 让一个正方形 变成圆圈*/
border: 1px solid red;
border-radius: 150px 0;
}
</style>

 圆角练习

<style>
body {
background-color: #ccc;
}
.radius a {
width: 172px;
height: 172px;
background-color: #fff;
display: inline-block;
margin: 30px;
border-radius: 50%;
text-align: center;
line-height: 172px;
color: red;
text-decoration: none;
font-weight:;
}
.radius a:hover {
background-color: red;
color: #fff;
}
</style>
<div class="radius">
<a href="#">文字内容</a>
<a href="#">文字内容</a>
<a href="#">文字内容</a>
<a href="#">文字内容</a>
</div>

效果

 盒子阴影

<style>
div {
width: 200px;
height: 200px;
/*box-shadow: 2px 2px 2px 2px rgba(0,0,0,0.4);*/
/*transition: all 1s;*/ }
div:hover { /*鼠标经过div时候的样子。。。*/
box-shadow: 0 15px 30px rgba(0,0,0,0.1);
}
</style>

浮动

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
.one {
width: 300px;
height: 200px;
background-color: red;
float: left;
}
.two {
width: 320px;
height: 200px;
float: left;
background-color: greenyellow;
}
.three {
width: 320px;
height: 200px;
float: left;
background-color: blue;
}
.four {
width: 320px;
height: 200px;
float: right;
background-color: cyan;
}
</style>
</head>
<body>
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
<div class="four"></div>
</body>
</html>

CSS魔法(二)的更多相关文章

  1. 邓布利多拍了拍你,并递来一份CSS魔法

    校长:阿不思·邓布bai利多 亲爱的少年:我们愉快地通知您,您已获准在CSS魔法学校就读.特此带给你一份CSS魔法秘籍,代码简单,支持个性化定制.学期定于今日开始,我们将在此静候您的猫头鹰带来您的回信 ...

  2. CSS 魔法系列:纯 CSS 绘制各种图形《系列六》

    我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来. ...

  3. CSS 魔法系列:纯 CSS 绘制各种图形《系列五》

    我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来. ...

  4. CSS 魔法系列:纯 CSS 绘制图形(各种形状的钻石)

    我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来. ...

  5. CSS 魔法系列:纯 CSS 绘制图形(心形、六边形等)

    <CSS 魔法系列>继续给大家带来 CSS 在网页中以及图形绘制中的使用.这篇文章给大家带来的是纯 CSS 绘制五角星.六角形.五边形.六边形.心形等等. 我们的网页因为 CSS 而呈现千 ...

  6. CSS 魔法系列:纯 CSS 绘制基本图形(圆、椭圆等)

    我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来. ...

  7. 前端总结·基础篇·CSS(二)视觉

    前端总结系列 前端总结·基础篇·CSS(一)布局 前端总结·基础篇·CSS(二)视觉 前端总结·基础篇·CSS(三)补充 前端总结·基础篇·CSS(四)兼容 目录 一.动画(animation)(IE ...

  8. css入门二-常用样式

    css入门二-常用样式总结 基本标签样式 背景色background-color 高度height; 宽度width; 边框对齐以及详细设定举例 width/*宽度*/: 80%; height/*高 ...

  9. 基本CSS布局二

    基本CSS布局二------基本页面布局二 /*主面板样式*/ #container { width:100%; margin:0px auto;/*主面板DIV居中*/ } /*顶部面板样式*/ # ...

随机推荐

  1. VirtualBox 导入虚拟机时的注意事项 VDI 与VMDK

    1. 建议不要勾选  as vdi   vmdk 最好不过了.. 长个经验教训 以后尽量不勾选 vmdk 有很多工具能进行转换 vdi的 要麻烦一些.

  2. laravel5 报错419,form 添加crrf_field 后让然失败,本地环境配置问题

    这个是因为laravel自带CSRF验证的问题 解决方法 方法一:去关掉laravel的csrf验证,但这个人不建议,方法也不写出来了. 方法二:把该接口写到api.php上就好了 方法三: 首先在页 ...

  3. Web Scraper爬取就是这么简单

    这应该是最全的一个文档了 https://www.jianshu.com/p/e4c1561a3ea7 所以我就不介绍了,大家直接看就可以了,有问题可以提出来,我会针对问题对文章进行补充~

  4. JS中Number(),parseInt(),parseFloat()和自动类型转换

    [参考来源] https://www.cnblogs.com/yi0921/p/6196841.html https://blog.csdn.net/u010200222/article/detail ...

  5. Java“禁止”泛型数组

    Java“禁止”泛型数组 原文:https://blog.csdn.net/yi_Afly/article/details/52058708 1. 泛型定义泛型编程是一种通过参数化的方式将数据处理与数 ...

  6. Surrounded Regions - LeetCode

    目录 题目链接 注意点 解法 小结 题目链接 https://leetcode.com/problems/surrounded-regions/ 注意点 边缘不算包围'O' 解法 解法一:dfs.找处 ...

  7. UVA 1394 And Then There Was One / Gym 101415A And Then There Was One / UVAlive 3882 And Then There Was One / POJ 3517 And Then There Was One / Aizu 1275 And Then There Was One (动态规划,思维题)

    UVA 1394 And Then There Was One / Gym 101415A And Then There Was One / UVAlive 3882 And Then There W ...

  8. 用矩阵和待定系数法求数列的分析(复杂度log(n))

    下载地址:http://pan.baidu.com/s/1nuVew6d

  9. 外显子分析弹错解决方案:Exception in thread "main" picard.PicardException: New reference sequence does not contain a matching contig for NC_007605

    最近从公共数据库下载了一堆bam文件和reference 基因组文件,重新分析外显子流程时,跑出了“Exception in thread "main" picard.Picard ...

  10. 走进HTTP协议之二 基本HTTP机制

    本系列第一节,我们回顾了与HTTP协议有关的基本术语和概念,本文将分析HTTP协议的基本原理与机制 HTTP协议的用途 HTTP协议用于客户端与服务器之间的通信,在通信线路两端,必定一端是客户端,另一 ...