跟着pink老师的教程做的笔记
css笔记
css简介
css是层叠样式表的简称，是一种标记语言，主要用于设置网页中文本内容，图片外形，版面布局和外观显示样式，用于美化html。
css语法规范
由两个部分组成：选择器以及一条或多条声明。
<html>
<head>
<style>
//选择器{样式}
p{
color: red; //文字颜色红色
font-size: "12px"; //文字大小12像素
}
</style>
<head>
<body>
<p>今天不做咸鱼</p>
</body>
</html>选择器
基础选择器
标签选择器
标签名作为选择器，按标签名称分类为其指定统一的css样式
<html>
<head>
<style>
//标签选择器
p{
color: red;
}
span{
color: blue;
}
</style>
<head>
<body>
<p>今天不做咸鱼</p>
<p>今天不做咸鱼</p>
<span>明天不做咸鱼</span>
<span>明天不做咸鱼</span>
</body>
</html>类选择器
想要差异化选择不同标签，单独选一个或几个标签，可以使用类选择器
口诀：样式点调用，结构类（class）调用，一个或多个，开发最常用。
<html>
<head>
<style>
//类选择器
.类名{属性一 属性二}
.red{
color: red;
}
</style>
<head>
<body>
<ul class="red">
<li>今天不做咸鱼<li>
<li>明天不做咸鱼</li>
</ul>
</body>
</html>多类名：
<html>
<head>
<style>
.box{
width: "200px";
heigth: "200px";
}
.red{
color: red;
}
.green{
color: green;
}
</style>
<head>
<body>
<div class="red box">红色</div>
<div class="green box">绿色</div> //多类名，有利于更改，增加可读性
</body>
</html>id选择器
id是唯一的，class可重复，常与js搭配使用
口诀：样式#定义，结构id调用，只能调用一次，别人切勿使用
<html>
<head>
<style>
#pink{
color: pink;
}
</style>
<head>
<body>
<div id="pink">今天不做咸鱼</div>
</body>
</html>通配符选择器
通配符选择器使用 星号 定义，他表示玄奇页面中的所有元素（标签）
<html>
<head>
<style>
*{
color: pink;
}
</style>
<head>
<body>
<div>今天不做咸鱼</div>
<div>明天不做咸鱼</div>
</body>
</html>一，CSS书写顺序
1.位置属性(position, top, right, z-index, display, float等)
2.大小(width, height, padding, margin)
3.文字系列(font, line-height, letter-spacing, color- text-align等)
4.背景(background, border等)
5.其他(animation, transition等)
css-written-order
二、CSS书写规范
1.使用CSS缩写属性
CSS有些属性是可以缩写的，比如padding,margin,font等等，这样精简代码同时又能提高用户的阅读体验。
2.去掉小数点前的“0”
del-zero
3.简写命名
很多用户都喜欢简写类名，但前提是要让人看懂你的命名才能简写哦！
name
4.16进制颜色代码缩写
有些颜色代码是可以缩写的，我们就尽量缩写吧，提高用户体验为主。
color-abb
5连字符CSS选择器命名规范
1）.长名称或词组可以使用中横线来为选择器命名。
2）.不建议使用“_”下划线来命名CSS选择器，为什么呢？
输入的时候少按一个shift键； 浏览器兼容问题 （比如使用_tips的选择器命名，在IE6是无效的） 能良好区分JavaScript变量命名（JS变量命名是用“_”）
underline
6.不要随意使用id
id在JS是唯一的，不能多次使用，而使用class类选择器却可以重复使用，另外id的优先级优先与class，所以id应该按需使用，而不能滥用。
css-id
7.为选择器添加状态前缀
有时候可以给选择器添加一个表示状态的前缀，让语义更明了，比如下图是添加了“.is-”前缀。
status-select
三、CSS命名规范（规则）
常用的CSS命名规则
头：header
内容：content/container
尾：footer
导航：nav
侧栏：sidebar
栏目：column
页面外围控制整体佈局宽度：wrapper
左右中：left right center
登录条：loginbar
标志：logo
广告：banner
页面主体：main
热点：hot
新闻：news
下载：download
子导航：subnav
菜单：menu
子菜单：submenu
搜索：search
友情链接：friendlink
页脚：footer
版权：copyright
滚动：scroll
内容：content
标签：tags
文章列表：list
提示信息：msg
小技巧：tips
栏目标题：title
加入：joinus
指南：guide
服务：service
注册：regsiter
状态：status
投票：vote
合作伙伴：partner
注释的写法:
/* Header /
**内容区 **
/ End Header */
id的命名:
1)页面结构
容器: container
页头：header
内容：content/container
页面主体：main
页尾：footer
导航：nav
侧栏：sidebar
栏目：column
页面外围控制整体佈局宽度：wrapper
左右中：left right center
(2)导航
导航：nav
主导航：mainnav
子导航：subnav
顶导航：topnav
边导航：sidebar
左导航：leftsidebar
右导航：rightsidebar
菜单：menu
子菜单：submenu
标题: title
摘要: summary
(3)功能
标志：logo
广告：banner
登陆：login
登录条：loginbar
注册：register
搜索：search
功能区：shop
标题：title
加入：joinus
状态：status
按钮：btn
滚动：scroll
标籤页：tab
文章列表：list
提示信息：msg
当前的: current
小技巧：tips
图标: icon
注释：note
指南：guild
服务：service
热点：hot
新闻：news
下载：download
投票：vote
合作伙伴：partner
友情链接：link
版权：copyright
四、注意事项:
1.一律小写;
2.尽量用英文;
3.不加中槓和下划线;
4.尽量不缩写，除非一看就明白的单词。
五、CSS样式表文件命名
主要的 master.css
模块 module.css
基本共用 base.css
布局、版面 layout.css
主题 themes.css
专栏 columns.css
文字 font.css
表单 forms.css
补丁 mend.css
打印 print.css
————————————————
版权声明：本文为CSDN博主「陈 俊 刚」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/csdn9_14/article/details/52890056
css字体属性
font（字体）属性用于定义字体系列，大小，粗细和文字样式（斜体）。
<html>
<head>
<style>
font{
font-family: 'Microsoft Yahei',Arial； //字体(多个单词/中间有字符最好加单引号，逗号后为备用字体，提高兼容性)
font-size: "20px"; //字体大小，单位px（像素），谷歌默认16px
font-weigh:：700(数字不加单位); //字体粗细，（100-900，400 ~ normal，700 ~ bold）normal(默认),bold（粗体），bolder（更粗），light（细体），lighter（更细）。
font-style: normal; //文字样式，italic(斜体)
----------------------------------------------------
font:font-style font-weight font-size/line-height font-family; //字体复合型写法,顺序不能变，不需要可省必须保留font-size和font-family属性
font：italic 700px 16px 'Microsoft Yahei'
}
</style>
<head>
<body>
<div class="font">今天不做咸鱼</div>
<div>明天不做咸鱼</div>
</body>
</html>css文本属性
CSStext（文本）属性可以定义文本的外观，如文本的颜色，对其文本，装饰文本，文本缩进，行间距等。
<html>
<head>
<style>
text{
color: pink; //文本颜色
color: rgba(red,green,blue,0.9); //rgba,rgb为颜色，a为alpha通道，数值为0-1，越靠近 0 越透明
text-align: center; //用于设置文本内容的水平对齐方式，left，right。本质是让盒子里的文字按照相应的方式对齐。
text-decoration: none（常用于删除下划线）; //装饰文本，underline（下划线），overline（上划线），overthrough（删除线）。
text-indent: "20px"; //文本首行缩进(可为负数)
text-indent："2em"; //em是一个相对单位，就是当前元素（font-size）1个文字的大小，没有指定大小就按照默认大小（16px）。
line-height：; //行间距，控制文字行与行之间的距离（行间距包括上间距，文本高度，下间距，因为文字高度不可更改，所以行间距改变的是上下间距）line-hight要高于font-size（行间距要大于文本大小）
}
</style>
<head>
<body>
<div class="text">今天不做咸鱼</div>
<div>明天不做咸鱼</div>
</body>
</html>css引入方式
内部样式表
内部样式表（内嵌样式表）是写到html页面内部，是将所有的css代码抽取出来，单独放到一个 style 标签当中。
就是在html页面内部写样式，但是单独写到 style 标签内部。
<head>
<style>
div{
color: red;
}
</style>
<head>行内样式表
行内样式表(内联样式表)实在元素标签内部写上style属性的css样式。适合修改简单样式。
<body>
<div style="color: red;fontsize: 12px;">今天不做咸鱼</div>
</body>外部样式表
外部样式表适用情况较多，核心是样式单独写到css文件中，之后把css文件引入html页面中使用
引入外部样式表分为两步
1.新机哪一个后缀为.css的样式文件，把所有的css代码都想放入此文件中。
//style.css
div{
color: pink;
}2.在html页面中，使用标签引入这个文件
<html>
<head>
<style>
<link rel="stylesheet" href="css文件路径"> //<link>标签引入css样式 real：定义当前文档与被链接文档之间的关系，在这里被指定为stylesheet，表示被链接的文档是样式表文件。href：定义所连接外部样式表文件的url，可以是相对路径，也可以是绝对路径。
<link rel="stylesheet" href="style.css">
</style>
<head>
<body>
<div class="font">今天不做咸鱼</div>
<div>明天不做咸鱼</div>
</body>
</html>Chrome调试工具
打开调试工具：fn+f12/右键：检查，elements
emmet语法
Emmett语法前身是Zen coding,它使用缩写，来提高html/css的编写速度
1.快速生成HTML结构语法
2.快速生成css样式
emmet快速生成HTML结构语法
1.生成标签：标签名+tab建
2.生成多个并列标签：标签名n（想生成的个数）
3.生成父子集关系标签：标签1>标签2
4.三年恒诚兄弟集（并列）标签：标签1+标签2
5.为标签添加类名/id名，直接写 标签.类名 / 标签#id名（不写标签默认div标签）+tab
6.想要为生成的类名/id名编序号 标签.$类名n ($)自增符号
7.如果想要在生成的标签内部鞋内用可以用{}表示 e.g.:div(今天不做咸鱼)*5 / div{$}*5
emmet快速生成css样式语法
简写形式即可
e.g.w200+tab:width: “200px”;
lh26:line-hight: “26px”;
快速格式化语法
右键：格式化文档
shift+alt+f
设置当我们保存页面是自动格式化代码：设置菜单：搜索Emmett.include,在settings.json下的用户中加入两行代码：
"editor.formatOnType":true,
"editor.formatOnSave":true
css复合选择器
在css中，可以根据选择器的类型把选择器分为简单选择器和复合选择器，复合选择器是建立在基础选择器的基础上的，由基础选择器进行组合形成的。
复合选择器可以更准确，更高效的选择目标元素（标签）
常用的复合选择器包括：后代选择器，子选择器，并集选择器，伪类选择器等。
后代选择器
又称包含选择器，可以选择父元素中的子元素.写法：把外层标签写在，内层标签写在后面，中间用空格分隔。
语法：
元素1 元素2{样式声明}（元素二可以是儿子，也可以是孙子）
<html>
<head>
<style>
ol il {
color: red;
} //选择前三个咸鱼
</style>
</head>
<body>
<ol>
<li>今天不做咸鱼</li>
<li>今天不做咸鱼</li>
<li>今天不做咸鱼</li>
</ol>
<ul>
<li>今天不做咸鱼</li>
<li>今天不做咸鱼</li>
<li>今天不做咸鱼</li>
</ul>
<body>
</html>子选择器
子元素选择器只能选择作为某元素最近一级的子元素。
语法：元素1>元素2{样式声明}
<html>
<head>
<style>
ol>il {
color: red;
} //只选择第一个咸鱼
</style>
</head>
<body>
<ol>
<li>今天不做咸鱼</li>
<div>
<li>今天不做咸鱼</li>
<li>今天不做咸鱼</li>
</div>
</ol>
<ul>
<li>今天不做咸鱼</li>
<li>今天不做咸鱼</li>
<li>今天不做咸鱼</li>
</ul>
<body>
</html>并集选择器
并集选择器可以选择多组标签,同时为他们定义相同的样式。通常用于集体生命
并集选择器是个选择器通过英文 ， 连接而成，任何形式的选择器都可以作为并集选择器的一部分
语法：元素1，
元素2{样式声明} //逗号可以理解为 和 的意思，并集一般竖着写
<html>
<head>
<style>
div,
span,
ul li{
color: pink;
}
</style>
</head>
<body>
<div>今天不做咸鱼</div>
<span>明天不做咸鱼</div>
<ul>
<li>后天不做咸鱼</li>
<li>以后都不做咸鱼</li>
<li>那是不可能的</li>
</ul>
<body>
</html>伪类选择器
伪类选择器想某些元素添加特殊的效果，比如给链添加特殊的效果，或选择第1个，第n个元素
应冒号（：）书写
链接伪类选择器
按照LVHA顺序写
记法：love&hate
a:link //选择未被访问的链接
a:visited //选择访问过的链接
a:hover //选择鼠标经过的链接
a:active //选择鼠标正在按下还没有弹起的链接
<html>
<head>
<style>
a:{
color
} //开发常用
a:link{
color: black;
} //选择未被访问的链接
a:visited{
color: blue;
} //选择访问过的链接
a:hovor{
color: red;
} //选择鼠标经过的链接 常用
a:active{
color:gray;
} //选择鼠标正在按下还没有弹起的链接
</style>
</head>
<body>
<a href="#">今天不做咸鱼</a>
<body>
</html>focus伪类选择器
：focus伪类选择器用于选取获得焦点的表单元素
焦点就是光标，一般情况 input 表单元素才能获取，因此这个选择器主要针对表单元素
<html>
<head>
<style>
input:focus{
background-color:yellow
}
</style>
</head>
<body>
<input tyoe="text">
<input tyoe="text">
<input tyoe="text">
<body>
</html>css元素显示模式
网页的标签非常多，在不同的地方会用奥不同类型的标签，了解他们可以更好地布局我们的页面
元素的显示模式就是元素（标签）以什么方式进行显示，比如
一般分为块元素和行内元素
块元素
常见的块元素有 h1 ~ h6 , div , ul , ol .
特点：
1.每个块元素自己独占一行
2.可以控制宽度，高度,外边距和内边距
3.住过没有设置宽度，他的宽度会和父级元素相同
4.是一个容器盒子，里面可以放块元素或行内元素
注意：文字类元素（e.g. p , h1 - h6 ）内不能放块元素
<html>
<head>
<style>
div{
hight: "200px";
weight: "200px";
}
</style>
</head>
<body>
<div>今天不做咸鱼</div>
<p>今天不做咸鱼</p>
<body>
</html>行内元素
行内元素（内联元素）如：, a , strong , em , i , del , ins , s , u , span 等
特点：
1.相邻行内元素在一行上，一行可以显示多个
2.宽，高直接设置是无效的
3.默认宽度是文字宽度
4.行内元素内只能放行内元素或文本元素
注意：
a (链接)里面不能放其他 a (链接)，但是可以放块级元素
<html>
<head>
<style>
span{
hight: "200px";
weight: "200px";
background-color: black;
} //宽高无效,color有效
<style>
</head>
<body>
<span>今天不做咸鱼</span>
<p>今天不做咸鱼</p>
<body>
</html>行内块元素
在行内元素中有几个特殊的标签—— img/ , input/ , td 等，他们同时具有块元素和行内元素的特点，有些资料称他们为行内块元素
特点：
1.和相邻元素（行内块）在一行上，但是他们之间会有空白缝隙，一行可以显示多个（行内元素特点）
2.默认宽度就是它本身的宽度（行内元素特点）
3.宽度，高度，内边距都可以控制（块级元素特点）
<html>
<head>
<style>
input {
hight: "200px";
weight: "200px";
background-color: black;
} //宽高无效,color有效
</style>
</head>
<body>
<input type="text">
<input type="text">
<body>
</html>元素显示模式的转换
特殊情况下，我们需要元素模式的转换，简单理解：一个模式的元素转换为另一种模式的元素
方法：
转换块元素：display:block;
转换行内元素: display: inline;
转换行内块元素：display: inline-block;
如想要增加 a 链接的触发范围：
<html>
<head>
<style>
a{
hight: "200px";
weight: "200px";
display: block; //把行内元素<a>转换为块级元素
}
</style>
</head>
<body>
<a href="#">今天不做咸鱼</a>
<body>
</html>把 div 改为行内元素
<html>
<head>
<style>
div{
hight: "200px";
weight: "200px"; //宽度和高度失效，因为<div>已经被转换为了行内元素，无法更改宽高。
display: inline; //把<div>转换为行内元素
}
</style>
</head>
<body>
<div>今天不做咸鱼</div>
<body>
</html>把 span改为行内块元素
<html>
<head>
<style>
span{
hight: "200px";
weight: "200px";
display: inline-block; //把<span>转换为行内块元素
}
</style>
</head>
<body>
<span>今天不做咸鱼</span>
<body>
</html>截图工具 snipaste
snipaste是一款简单却强大的截图工具，也可以让你的截图贴在屏幕上
常用快捷方式：
1.f1截图，同时测量大小，设置箭头，书写文字等
2.f3在桌面置顶显示
3.点击图签，alt可以取色（shift切换取色模式）
4.esc取消图片显示
小技巧：单行文字垂直居中的代码
css中没有提供单行文字垂直居中的方法
令height=line-height
原理：行高的上空隙和下空隙把文字挤到中间了。如果是行高小于盒子高度，文字会偏上；行高大于盒子高度，文字会偏下。
<html>
<head>
<style>
div{
hight: "200px";
weight: "200px";
line-height: "200px"; //让盒子内的文字垂直居中，（令height=line-height）
}
</style>
</head>
<body>
<div>今天不做咸鱼</div>
<body>
</html>css的背景
背景属性可以设置背景颜色，背景图片，背景平铺，背景图片位置等
<html>
<head>
<style>
span{
hight: "200px";
weight: "200px";
background-color: transparent(透明的); //设置背景颜色
background-image: none;//背景图片，常用于logo，精灵图，装饰性图片和超大图片
background-image: url(images/logo.png); //插入图片url，默认平铺样式。
background-repeat: repeat; //背景平铺 no-repeat：不平铺|repeat-x:沿着x轴平铺（横向）|repeat-y:沿y轴平铺（纵向）
background-position: x y; //背景图片的位置(length)精确单位：x，y顺序不能改变，如果只指定一个值，那么只能是x，y默认居中
background-position: center top(靠上水平居中); //背景图片的位置(position)方位名词 ：若两个之都是方位名词，则两个值的前后顺序无关，如left top和top left效果相同，如果只制定了一个方位名词，另一个值省略，则第二个值默认居中对齐
background-position: 20px center;
//混合方位：精确单位和方位名词可以混合使用，但是第一个一定是x，第二个一定是y。
background-attachment: scroll;//背景图片滚动 fixed（背景图片附着）后期可以制作视差滚动效果
background: 背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置; //背景复合写法（color image repeat attachment position）
background: img/logo.img 'no repeat' fixed 'center center';
background: rgba(0,0,0,0.3); //设置半透明效果，最后一个是alpha（透明度）取值范围 0-1 .指的是背景色半透明，对盒子内的内容没有影响
}
</style>
</head>
<body>
<div>今天不做咸鱼</div>
<body>
</html>css的三大特性
层叠性
相同的选择器设置相同的样式，此时一个样式会覆盖另一个样式，冲突时采取就近原则。不冲突的样式不层叠。
<html>
<head>
<style>
div{
color: red; //两个样式冲突，就近原则，为red
}
div{
color: blue;
font-size: "12px"; //不冲突，样式可以实现。
}
</style>
</head>
<body>
<div>今天不做咸鱼</div>
<body>
</html>继承性
子标签会继承父标签的某些样式,如文本的颜色和字号。（text-,font-,line-,color）
<html>
<head>
<style>
div{
color: red;
font: "12px/1.5 'Microsoft YaHei'; //动议父元素文字大小12px，行高1.5（行高为文字大小的1.5倍）（行高可以跟单位也可以不跟单位）
}
p{
font-size:"16px"; //如果子元素没有设置行高，则会继承父元素的行高1.5，此时子元素的行高是：当前子元素文字大小的1.5倍。（行高的继承性）
}
</style>
</head>
<body>
<div>
<p>今天不做咸鱼</p> //p可以继承div的css属性
</div>
<body>
</html>优先级
党同一个元素指定多个选择器，就会存在优先级的问题
选择器相同，则执行层叠行；
选择器不同，则根据权责其权重执行
继承或 * ：0，0，0，0
元素选择器：0，0，0，1
类选择器，伪类选择器：0，0，1，0
id选择器：0，1，0，0
行内样式style=””: 1,0,0,0
important: 无穷大
注意：
1.权重原则其由4组数字组成，但是不会有进位
2.可以理解为类选择器永远大于元素选择器，以此类推
3.等级判断从左向右，如果某一位大小相同，则判断下一位
4.继承的权重是0，如果该元素没有直接选中，不管父元素权重多高，子元素得到的权重永远是0
<html>
<head>
<style>
body{
color: yellow;
} //第六优先 继承或 *
div{
color: red;
} //第五优先 元素选择器
.test{
color: gray;
} //第四优先 类选择器，伪类选择器
#demo{
color: black;
} //第三优先 id选择器
body{
color: yellow;
!important
} //第一优先 无穷大
</style>
</head>
<body>
<div class="test" id="demo" style="color: red">今天不做咸鱼<div> //第二优先 行内样式style=""
<body>
</html><html>
<head>
<style>
li{
color: red;
}
ul li{
color: blue;
} //会执行red 因为ul和li由权重叠加（0，0，0，1）+（0，0，0，1）=（0，0，0，2）<(0,0,0,1),*（不进位）*权重较小，会执行li选择器。
</style>
</head>
<body>
<ul>
<li>今天不做咸鱼</li>
<li>明天不做咸鱼</li>
<li>后天不做咸鱼</li>
</ul>
<body>
</html>盒子模型
把html页面中的布局元素看作是一个矩形的盒子，封装周围的元素：边框，外边距，内边距，和实际内容
margin：外边距
border：边框
padding：内边距
content：内容
border:边框
<html>
<head>
<style>
.box{
width: 300px;
height: 200px;
}
.box,
th,td {
border-width: 2px; //边框粗细（px）
border-style: solid(实线，默认黑色); //边框样式：dushed（虚线） dotted（点线）hidden（隐藏边框）none（无边框）double（双线）
border-color: pink; //边框颜色
border: 2px solid red; //边框简写：没有顺序
border-top: 2px solid pink; //只设置一个边（left right bottom）
bodder-collapse: collapse; //相邻边框合在一起
</style>
}
</head>
<body>
<div class="box">
<table>
<tr>
<th>姓名</th>
<th>年龄</th>
</tr>
<tr>
<td>白昀</td>
<td>18</td>
</tr>
</table>
<div>
</body>
</html>padding:内边距&content:内容
padding会撑开盒子，解决方法：令外边框宽度和高度减去padding值
如果盒子没有指定宽度/高度属性，则padding不会该改变宽度/高度属性。
<html>
<head>
<style>
div{
width: 300px;
height: 200px;
background-color: black;
padding-left: 20px; //左内边距（padding-right:右内边距）
padding-top:30px; //上内边距（padding-bottom：下内边距）
padding： 20px; //一个值：上下左右都是20px
padding：10px 20px; //两个值：上下10px，左右20px；
padding: 5px 10px 20px; //三个值：上内边距5px，左右内边距10px，下内边距20px。
padding: 5px 10px 20px 30px; //四个值：（顺时针）上5px，右10px，下20px，左30px。
}
</style>
<head>
<body>
<div></div>
<body>
</html>margin：外边距
<html>
<head>
<style>
div{
width: 200px;
height: 200px;
color: pink;
margin: 20px; //一个数值：两个盒子的上下左右外边距都为20px。
margin: 20px 30px; //两个数值: 上下——左右
margin: 10px 20px 30px; //三个数值：上10px，左右20px，下30px
margin：5px 10px 20px 30px; //四个数值:上右下左
}
.box1 {
margin-bottom: 20px; //控制第一个盒子的下外边距为20px。用于控制盒子的间距。
}
.box2 {
margin-top: 20px; //控制第二个盒子的上外边距为20px。
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>利用margin（外边距）实现盒子的居中对齐
外边距可以使盒子水平居中，但是必须满足以下两个条件：
1.盒子必须制定了宽度（width）
2.盒子左右的外边距都设置为auto
语法：
<style>
.header{
width:960px;
margin:0 auto;
}
常见的三种写法：
margin-left: auto;margin-right: auto;
margin: auto;
margin: 0 auto;
</style>行内元素和行内块元素的水平居中
给其父元素添加 test-align: center;
外边距合并——嵌套块元素塌陷
对于两个嵌套关系（父子关系）的块元素，父元素右上外边距同时子元素也有上外边距，此时父元素会塌陷较大的外边距值
解决方案：
1.为父元素指定上边框
2.可以为父元素添加内边框
3.可以为父元素添加overflow: hidden;
4.其他方法：浮动，固定，绝对定位等
<html>
<head>
<style>
.father{
width: 200px;
height: 400px;
background-color: balck;
margin-top: 50px;
border: 1px solid transparent(透明); //为父元素指定上边框解决塌陷
padding: 1px; //可以为父元素添加内边框解决塌陷
overflow: hidden; //为父元素添加overflow: hidden解决塌陷
}
.som{
width: 200px;
height: 200px;
background: pink;
margin-top: 100px;
}
<style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
</html>清除内外边距
不同的元素有着不同的内外边距，而且不同的浏览器也不一样，因此，在布局前要先清楚内外边距
语法
注意：行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距，但是转换为块级元素或者行内块元素就可以设置了
<html>
<head>
<style>
*{
margin: 0;
paging: 0;
} //清除内外边距
div{
width: 200px;
height: 200px;
background-color: black;
}
<body>
<div>content</div>
</body>
</html>圆角边框
语法：
<style>
border-radius: 10px; //圆角边框（数值或百分比（可以用来画圆形——半径为正方形边框的50%））
border-radius: 50%; //圆角矩形：数值设置为边框高度的一半。
boreder-radius; 10px 20px; //两个数值:左上 右下，右上 左下。
broder-radius: 10px 20px 30px 40px; //四个数值：左上 右上 右下 左下
border-top-left: 10px; //左上 （top和left不能颠倒）
</style>radius（半径）原理:（椭）圆与边框的交集形成圆角效果。
数值越大，弧线角度越大。
盒子阴影
语法：
<style>
.shadow{
box-shadow: h-shadow v-shadow blur spread color inset;
//h-shadow:（必需）水平阴影 允许负值
//v-shadow:（必需）垂直阴影 允许负值
//blur: 可选 模糊距离
//spread: 可选 阴影尺寸
//color: 可选 阴影颜色
//inset: 可选 将外部阴影（outside 默认）改为内部阴影
box-shadow: 10px(水平) 10p（垂直）40px（模糊距离 虚实） 20px（阴影尺寸） rgba(0,0,0,0.3)（颜色） inset（内阴影 默认外阴影(outside)，但是不可以改为outside）;
}
div:hover{
box-shadow: 10px 10p40px 20px rgba(0,0,0,0.3) inset;
//鼠标放在盒子上后盒子有阴影效果
}
</style>注意：
默认是外阴影（outside），但是不能写outside
盒子阴影不占用空间
文字阴影
<style>
div{
test-shadow: 10px 5px 6px rgba(0,0,0,0.3); //文字阴影：水平阴影（h-shadow）垂直阴影（v-shadow） 模糊距离（blur） 阴影颜色（color 参考css）
}
</style>传统网页布局的三种方式
网页布局的本质——用css来拜访盒子，把盒子放到相应的位置。
三种布局方式：
标准流（普通流）：按照标签规定好的默认方式排列（多个块级元素纵向排列应用）
1.块级元素独占一行（div）
2.行内元素按照顺序，从左到右排列，碰到父级元素换行（span）
浮动：浮动可以改变标签的排列方式（多个块级元素横向排列应用）
定位
CSS浮动（float）
float属性用于创建浮动框，将其移动到一边，知道左边缘或右边缘触及包含块或另一个浮动框的边缘。
浮动特性
1.浮动元素有会脱离标准流（脱标），脱标（浮动）的盒子不再保留原来的位置。
2.如果多个盒子都设置了浮动，则他们会按照属性值一行内显示并且顶端对齐排列
注意：浮动的元素是互相贴靠在一起的（不会有缝隙），如果父级元素宽度装不下这些浮动的盒子，多出的盒子会另起一行对齐。
3.浮动元素具有行内块特性
（任何元素都可以浮动，不管原先是什么属性，添加浮动后既有行内块元素相似的特性。如果行内元素有了浮动，则不需要转换块级。行内块元素就可以直接给宽度和高度。
如果块级元素盒子没有设置宽度，默认宽度和父级一样宽，但是添加浮动后，它的大小由他的内容来决定
浮动盒子中间是没有缝隙的，是紧挨在一起的。
行内元素同理
浮动元素经常和标准流父级搭配使用
为了约束浮动位置，我们网页布局一般采取的策略是：
先用标准流的父元素排列上下位置，之后内部资源使用采取浮动排列左右位置，符合网页布局第一准则。
浮动只会影响后面的元素，不会影响前面的元素。
清除浮动
清除浮动的本质是清除浮动造成的影响
语法：{clear:属性值1;}(left ridht both)
额外标签法（隔墙法），是w3c推荐的做法
在最后一个浮动标签的末尾添加一个空标签，如 div style=”clear:both” /div ，或者其他的表标签（如 br/ 等）新增元素必须是块级元素
优点：通俗易懂，书写方便
缺点：添加许多无意义的标签，结构化较差。
<html>
<head>
<style>
.box{
float: left;
width: "400px";
background: black;
}
.tod .tom .for{
width: "100px";
heighth: "100px";
}
.clear{
clear: both;
}
.footer{
width: "400px";
highth: "200px";
color: pink;
}
</style>
</head>
<body>
<div class="box">
<div class="tod">今天不做咸鱼</div>
<div class="tom">明天不做咸鱼</div>
<div class="for">以后都不做咸鱼</div>
<br class="clear"/> //额外标签法清除浮动
</div>
<div class="footer">footer</div>
<body>
</html>父级元素添加overflow
可以给父级元素添加overflow，将其属性设置为hidden，auto，或scroll
优点：代码简洁
缺点：无法显示溢出的部分
<html>
<head>
<style>
.box{
overflow: hidden; //父级元素添加overflow清除浮动
float: left;
width: "400px";
background: black;
}
.tod .tom .for{
width: "100px";
heighth: "100px";
}
.footer{
width: "400px";
highth: "200px";
color: pink;
}
</style>
</head>
<body>
<div class="box">
<div class="tod">今天不做咸鱼</div>
<div class="tom">明天不做咸鱼</div>
<div class="for">以后都不做咸鱼</div>
<br class="clear"/> //额外标签法清除浮动
</div>
<div class="footer">footer</div>
<body>
</html>:after伪元素法
:after方式是1额外标签法的升级版，也是给父元素添加
语法
.clearfix:after{
content: "";
display: block;
height: 0;
clear: both;
visiblity: hidden;
}
.clearfix{ //IE6,7专有
*zoom: 1;
}优点：没有增加标签，结构更简单
缺点：照顾低版本浏览器
<html>
<head>
<style>
.cleafix:after{
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix{ //IE6,7专有
*zoom: 1;
}
.box{
overflow: hidden; //父级元素添加overflow清除浮动
float: left;
width: "400px";
background: black;
}
.tod .tom .for{
width: "100px";
heighth: "100px";
}
.footer{
width: "400px";
highth: "200px";
color: pink;
}
</style>
</head>
<body>
<div class="box clearfix">
<div class="tod">今天不做咸鱼</div>
<div class="tom">明天不做咸鱼</div>
<div class="for">以后都不做咸鱼</div>
<br class="clear"/> //额外标签法清除浮动
</div>
<div class="footer">footer</div>
<body>
</html>双伪元素清除浮动
也是给父元素添加的,盒子前后都插入标签。
语法：
.clearfix:before,.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*room: 1;
}优点：代码更简洁
缺点：照顾低版本浏览器
<html>
<head>
<style>
.clearfix:before,.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*room: 1;
} //双伪元素清除浮动
.box{
overflow: hidden; //父级元素添加overflow清除浮动
float: left;
width: "400px";
background: black;
}
.tod .tom .for{
width: "100px";
heighth: "100px";
}
.footer{
width: "400px";
highth: "200px";
color: pink;
}
</style>
</head>
<body>
<div class="box clearfix">
<div class="tod">今天不做咸鱼</div>
<div class="tom">明天不做咸鱼</div>
<div class="for">以后都不做咸鱼</div>
<br class="clear"/> //额外标签法清除浮动
</div>
<div class="footer">footer</div>
<body>
</html>css属性书写顺序
1.布局定位属性：display/position/float/clear/visiability/overflow(建议display第一个写)
2.自身属性：width/height/margin/padding/border/background
3.文本属性：color/font/text-decoration/text-aligent/white-space/back-word
4.其他属性（css3）：content/cursor/border-radius/box-shadow/text-shadow/back-gradient
<style>
.jdc{
display:block;
position:relative;
float:left;
//布局定位
width: 100px;
height: 100px;
margin: 0 10px;
padding: 20px 0;
//自身属性
font-family:Arial,'Helvetica Neue';
color:#333;
//文本属性
background: rgba(0,0,0,.5);
border-radius: 10px;
//其他属性（css3）
}
<style>页面布局
1.确定版心（可视区）测量可知
2.分析页面中的行模块，以及每个行模块中的列模块，页面布局第一准则
3.一行中的列模块经常采用浮动布局，吸纳确定每个列的大小，之后确定列的位置，页面布局第二准则
4.制作HTML结构，再写代码由为重要
css定位
1.浮动可以让多个会计盒子一行没有缝隙排列显示，经常用于横向排列盒子
2.定位则是可以让盒子自由的在摸个盒子内移动位置或者固定屏幕中某个位置，并且可以压住其他位置。
定位组成
定位：是将盒子定在某一位置，所以定位也是在拜访盒子，按照定位的方式移动盒子
定位=定位模式+边偏移
定位模式用于指定一个元素在文档中的定位方式。边偏移界定了该元素的最终位置
1.定位模式
定位模式决定元素的定位方式，他通过CSS的position属性来设置，其值可以分为四个：
static 静态定位（默认定位）
relative 相对定位
absolute 绝对定位
fixed 固定定位
2.边偏移
边偏移就是定位的盒子移动到的最终位置。由top,bottom,left,和right4个属性（和上下左右s四个边线的距离）
static 静态定位
static 静态定位（默认定位） 按照标准流特性摆放，没有边偏移
语法：
选择器{position:static;}
relative 相对定位
relative 相对定位 相对定位是在移动位置的时候，是相对于他原来的位置来说的（自恋型）
语法：
选择器{
position:relative;
top: 100px;
left: 100px;
}
特点：
a.他是相对于自己原来的位置来移动的（移动位置的参照点是自己原来的位置）。
b.原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待他（不脱标）
<html>
<head>
<style>
.box1{
position: relative; //相对定位
top: 100px;
right: 100px;
width: 100px;
height: 100px;
background-color: black;
}
.box2{
width: 100px;
height: 100px;
background-color: pink;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>absolute 绝对定位
absolute 绝对定位
绝对定位是在元素移动位置的时候，是相对于他的祖先元素来移动的。
语法
选择器{
position: absolute;
top: 100px;
right: 100px;
}
特点：
1.说如果没有祖先元素，或者祖先元素没有定位，则以浏览器为准定位（document文档）
2.如果祖先元素有定位（相对，决定，固定定位），则以最近一级的有定位的祖先元素为参考点移动位置。
3.绝对定位不在占有原先的位置（脱标）
<html>
<head>
<style>
.grandfather{
position: relative;
width: 800px;
height: 800px;
background-color: blue;
}
.father{
position: relative; //父元素有定位，则子元素绝对定位以最近一级带有定位的父元素为参考点。
width: 500px;
height: 500px;
background-color: black;
}
.son1{
position: absolute;
left: 30px;
bottom: 10px;
width: 100px;
height: 100px;
background-color: pink;
}
.son2{ //son1脱标
width: 100px;
height: 100px;
background-color: gray;
}
</style>
</head>
<body>
<div class="grandfather">
<div class="father">
<div class="son1"></div>
<div class="son2"></div>
</div>
</div>
</body>
</html>子绝父相
子级是绝对元素的话，父级要用相对元素
1.自己绝对定位，不会占有位置，可以放在父盒子里面的任何一个地方，不会影响其他兄弟盒子。
2.父盒子需要加定位限制子盒子在父盒子内显示。
3.父盒子布局是，需要占有位置，因此父亲只能是相对元素。
fixed 固定定位
固定定位是固定与浏览器可视区的位置。主要使用场景是：可以在浏览器页面滚动时元素的位置不会改变。
语法：
选择器{position: fixed;}
特带你：
1.以浏览器的可视窗口为参照点进行移动
跟父元素没有任何关系
不随滚动条滚动而滚动
2.固定定位不占有原先的位置
固定定位也是脱标的，其实固定定位也可以看作是一种特殊的绝对定位
<html>
<head>
<style>
.box{
position: fixed;
top: 100px;
right: 0px;
width: 100px;
height: 100px;
background-color: pink;
}
<style>
<head>
<body>
<div class="box"><div>
</body>
</html>sticky粘性定位
粘性定位为可以被认为是相对定位和绝对定位的混合。
语法：
选择器{position: sticky; top: 10px;}
特点：
1.一浏览器的可视窗口为参照点移动元素（固定定位特点）。
2.粘性定位占有原先的位置（相对定位特点）。
3.必须添加top,left,right,bottom其中的一个才有效
4.跟页面滚动搭配使用。兼容性较差，IE不支持。
<html>
<head>
<style>
body{
height: 3000px;
}
.box{
position: sticky; //粘性定位
top: 0px;
width: 100px;
height: 100px;
background-color: pink;
margin: 100px auto;
}
</style>
<head>
<body>
<div class="box"><div>
</body>
</html>定位的拓展
定位的叠放次序
在使用定位布局时，可能会出现盒子重叠的情况，此时，可以使用z-inside来控制盒子的i案后次序（z轴）（优先层级）
用法：
选择器{z-inside:1;}
特点：
1.其中数值可以取正整数，负数或者是0，默认是outo
2.如果数值相同，按照书写顺序，后来居上。
3.数字后面不能加单位
4.只有定位的盒子才有z-index属性
<html>
<head>
<style>
body{
height: 3000px;
}
div{
position: sticky;
top: 0px;
left: 0;
width: 100px;
height: 100px;
background-color: pink;
}
.box1{
background-color: black;
z-index: 1;
}
.box2{
background-color: pink;
left: 50px;
top: 50px;
z-index: 2;
}
.box3{
background-color: blue;
left: 100px;
top: 100px;
z-index: 3; //box3在最上面，向下依次是box2，box1，因为他的z-index值最大。
}
</style>
<head>
<body>
<div class="box1"><div>
<div class="box2"><div>
<div class="box3"><div>
</body>
</html>绝对定位盒子居中
加了绝对定位的盒子不能用（margin: 0 auto;）来实现居中,可以用以下方法来实现定位盒子的水平居中和垂直居中
1.left:50%;:让盒子的左侧移动到父级元素的水平中心位置。
2.margin-lef: -100px;:让盒子向左移动自身宽度的一半。
<html>
<head>
<style>
.box{
position: absolute;
left: 50%;
margin-left: -100px; //水平居中盒子的左侧移动到父级元素的中心位置，再让盒子相左移自身宽度的一半。
top: 50%;
margin-top: -100px; //垂直居中
width: 200px;
height: 200px;
background-color: pink;
}
</style>
</head>
<body>
<div class="box"><div>
</body>
</html>定位特殊特性
绝对定位和固定定位也和浮动类似
1.行内元素添加绝对或者固定元素，可以直接设置宽度和高度
2.块级元素添加绝对或者固定元素，如果不给宽度和高度，默认大小是内容的大小
3.脱标的盒子不会触发外边距塌陷：浮动元素，绝对定位（固定定位）元素的都不会触发外边距合并的问题
<html>
<head>
<style>
span{
position: absolute;
top: 300px;
width: 100px;
height: 100px; //行内元素添加绝对或者固定元素，可以直接设置宽度和高度
background-color: pink;
}
div{
position: absolute;
background-color: blue;
}
</style>
</head>
<body>
<span>abc</span>
<div>def</div>
</body>
<hrml>绝对定位（固定定位）会完全压住盒子
浮动元素不同，他只会压住下面的盒子，不会压住下面标准流盒子里面的文字（图片）。
但是绝对定位（固定定位）会压住下面标准流所有的内容。
原因：浮动产生的最初目的是实现图片的文字环绕效果。
<html>
<head>
<style>
div{
float: left; //浮动的元素不会压住下面标准流的文字
position: absolute; //绝对定位（固定定位）的盒子会下注下面标准流里面的文字。
width: 200px;
height: 200px;
background-color: black;
}
p{
}
</style>
</head>
<body>
<div></div>
<p>今天不做咸鱼</p>
</body>
</html>元素的显示与隐藏
类似网站广告，当我们点击关闭就不见了，但是我们重新刷新页面，会重新出现。
本质：让一个元素再页面中隐藏或显示出来
1.display显示隐藏
2.visibility显示隐藏
3.overflow溢出显示隐藏
display性
display属性用于设置元素应如何显示
display: none; 隐藏对象
display: block; 除了将元素转换为块级元素，同时还有显示元素的意思。
display隐藏元素后，不再占有标准流位置
后面应用及其广泛，搭配js可以做很多网页特效。
<html>
<head>
<style>
box1{
display: none; //隐藏盒子 位置不再保留
display: block; //显示盒子
width: 200px;
height: 200px;
background-color: blue;
}
box1{
position: absolute;
width: 200px;
height: 200px;
background-color: pink;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>visibility可见性
visibility: visible; 元素可视
visibility: hidden; 元素隐藏
visibility隐藏元素后，继续占有原来的位置。
<html>
<head>
<style>
box1{
display: hidden; //隐藏盒子 保留位置
display: visible; //显示盒子
width: 200px;
height: 200px;
background-color: blue;
}
box1{
position: absolute;
width: 200px;
height: 200px;
background-color: pink;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>overflow溢出
overflow属性制定了如果内容溢出一个元素的框（超过其指定高度级宽度）时，会发生什么。
用法：
overflow: visible; 溢出显示（默认）
overflow: hidden; 溢出隐藏
overflow: scoll; 溢出部分显示滚动条(不溢出也显示滚动条)
overflow: auto; 在需要的时候添加滚动条（溢出显示滚动条，不溢出不显示滚动条）
注意：
一般情况下，我们都不想让溢出的内容显示出来，因为溢出的部分会影响布局。
但是如果右定位的盒子，请慎用overflow: hidden;因为它会隐藏多余的部分。
<html>
<head>
<style>
div{
overflow: hidden; //溢出隐藏
overflow: visible; //溢出显示(默认)
overflow: scoll; //溢出部分显示滚动条(不溢出也显示滚动条)
overflow: auto; //在需要的时候添加滚动条
width: 200px;
height: 200px;
border: 3px solid black;
background-color: blue;
}
</style>
</head>
<body>
<div>今天不做咸鱼今天不做咸鱼今天不做咸鱼今天不做咸鱼今天不做咸鱼今天不做咸鱼今天不做咸鱼今天不做咸鱼今天不做咸鱼今天不做咸鱼今天不做咸鱼今天不做咸鱼今天不做咸鱼今天不做咸鱼今天不做咸鱼今天不做咸鱼今天不做咸鱼今天不做咸鱼今天不做咸鱼今天不做咸鱼今天不做咸鱼今天不做咸鱼今天不做咸鱼今天不做咸鱼今天不做咸鱼今天不做咸鱼今天不做咸鱼今天不做咸鱼今天不做咸鱼今天不做咸鱼今天不做咸鱼今天不做咸鱼
</div>
</body>
</html>
