CSS学习笔记从零开始

代码风格
- 样式书写格式
CSS基础选择器
- css选择器的作用：（选择标签用的）
- 选择器分类：基础选择器和复合选择器
- - 基础选择器
  - - 标签选择器
    - 类选择器 - 开发最常用
    - - 多类名
    - id选择器（一次性）
    - 通配符选择器
  - css复合选择器
  - - 后代选择器（重要）
    - 子元素选择器（重要）
    - 并集选择器（特殊效果）
    - 链接伪类选择器（LVHA）
    - :focus 伪类选择器（表单元素）
- CSS字体属性
- - font-family设置字体系列
  - font-size设置字体大小
  - font-weight字体粗细
  - font-style字体样式
  - font复合属性写法
- CSS文本属性
- - 文本颜色color
  - 对齐文本text-align
  - 文本装饰text-decoration
  - 文本缩进text-indent
  - 行间距line-height
- CSS的引入方式
- - 内部样式表
  - 行内样式表
  - 外部样式表
- CSS元素显示模式
- - 块元素
  - 行内元素
  - 行内块元素
  - 显示模式的转换
- 背景
- - 背景颜色
  - 背景图片
  - 背景平铺
  - 背景方位
  - 背景像素固定（背景附着）
  - 背景复合属性写法
- 盒子模型
- - border边框
  - padding内边距
  - margin外边距
  - 清楚内外边距
- 元素的显示与隐藏
- - display 属性
  - visibility 可见性
  - overflow 溢出

代码风格

语法格式

一般放在 head 标签里的 style标签里
一般写法: 选择器{样式}
内容写在< body >里面实现样式与内容的分离。

样式书写格式

提倡用小写字母书写代码；
空格规范：在冒号后面留一个空格；在选择器和大括号中间留空格；

/*展开式风格：(看起来直观) (!重点)*/
h3  {color:  red;
font-size:  20px;
}
/*紧凑风格: (不常用)*/
h3 {color:  red;font-size:  20px;}

CSS基础选择器

css选择器的作用：（选择标签用的）

根据不同需求选择不同标签，这就是选择器的作用，比如：选对人，做对事。

选择器分类：基础选择器和复合选择器

基础选择器

（标签选择器、类选择器、id选择器和通配符选择器）

基础选择器	作用	特点	使用情况	用法
标签选择器	可以选出所有相同的标签，比如span	不能差异化选择	较多	p { color: red; }
类选择器	可以选出一个或者多个标签	可根据需求选择	最多	.nav { color: red; }
id选择器	一次自能选择一个标签	id属性只能出现一次	用于与js搭配	#nav { color: red; }
通配符选择器	选出所有标签	选择太多	特殊情况下使用	* { color: red; }

类选择器是使用最多的，需要特别掌握！

标签选择器

标签选择器(元素选择器)是指用HTML标签名称作为选择器,按标签名称分类,为页面中某一类标签指定统一的CSS样式。

作用
标签选择器可以把某一类标签全部选择出来,比如所有的<dⅳ>标签和所有的标签。
优点
能快速为页面中同类型的标签统一设置样式。
缺点
不能设计差异化样式，只是选择全部的当前标签。

<!-- 标签选择器：写上标签名字 --><style>label {color: pink;font-size: 18px;}</style>

类选择器 - 开发最常用

如果想要差异化选择不同的标签,单独选个或者某几个标签,可以使用类选择器。
类选择器在HTML中以dass属性表示,在CSS中,类选择器以-个点“"号显示。

注意
①类选择器使用“"(英文点号)进行标识,后面紧跟类名(自定义,我们自己命名的)。
②可以理解为给这个标签起了一个名字,来表示
③长名称或词组可以使用中横线来为选择器命名
④不要使用纯数字、中文等命名,尽量使用英文字母来表示
⑤命名要有意义,尽量使别人一眼就知道这个类名的目的
⑥命名规范:见附件(web前端开发规范手册,doc)

记忆口诀:样式点定义,结构类调用。一个或多个,开发最常用。

<style>/*类选择器：样式点定义 结构类（class）调用 一个或多个*/.man {color: green;font-size: 18px;}
</style><body><p class="man">我是个男生</p><span class="man">这是另外一个</span>
</body>

多类名

我们可以给一个标签指定多个类名，从而达到更多的选择目的。这些类名都可以选出这个标签。
简而言之：一个标签有多个名字。

可以将相同部分写在同一个类里面，减少代码量和代码重复率。

<style>.mancolor {color: green;}.mansize{font-size: 25px;}
</style><body><!-- 多个类名一定要空格分开 --><p class="mancolor mansize">我是个男生</p>
</body>

id选择器（一次性）

id选择器为特定id的html元素指定特定样式。
html元素用id属性来设置id选择器，CSS中id选择器用 “#” 号来定义。

设置某一个特定的元素的独特样式。

<style>/* 样式#定义，结构id调用，只能调用一次。 */#boy{color: green;font-size: 20px;}
</style><body><p id="boy">我是个男生</p>
</body>

通配符选择器

在CSS中，通配符使用 "*"号定义，表示选取页面中所有的元素（标签）
通配符不需要调用，自动给所有元素使用样式.

一般用于界面清除所有内外边距。

<style>* {color: green;font-size: 20px;}
</style>
<body><p id="boy">我是个男生</p><ul><li>123</li></ul>
</body>

css复合选择器

复合选择器	作用	特点	使用情况	用法
后代选择器	用来选择元素后代	可以是子孙后代	较多	符号是空格 .nav a
子代选择器	选择最近的一级元素	只选亲儿子	较少	符号是 > .nav>p
并集选择器	选择某些相同样式的选择器	可以用于集体声明	较多	符号是逗号, .nav, .header
链接伪类选择器	选择不同状态的链接	跟链接相关	较多	重点记住a 和 a:hover实际开发的写法
:focus选择器	选出获得光标的表单	跟表单相关	较少	input:focus 记住这个写法

后代选择器（重要）

后代选择器又称为包含选择器，可以选择父元素里面的子元素。
写法：将外层的标签写在前面，内层标签写在后面，中间用空格分隔。
当标签发生嵌套时，内层标签就成为外层标签的后代。
格式：父级子级{属性:属性值;属性:属性值;}

后代选择器可以在多层嵌套一直寻找后代下去

<html>
<head><style>ol li{  /* 取出ol里面的子元素li */font-size: 20px;}ol li p{  /* 取出ol里面的子元素li里的子元素p */font-size: 50px;}.nav li{  /* 也可以通过类来当作父元素 */font-size: 20px;}</style>
</head>
<body><ol><li>1</li><li><p>2</p></li></ol><ul class="nav"><li>1</li><li><p>2</p></li></ul>
</body>
</html>

子元素选择器（重要）

子元素选择器只能选择作为某元素子元素的元素，就是选亲儿子元素。
写法：把父级标签写在前面，子级标签写在后面，中间跟一个 > 进行连接。
语法：.class>h3{color:red;font-size:14px;}

元素一是父亲，元素二是亲儿子。只能管亲儿子，也可以叫亲儿子选择器

<html>
<head><style>.nav>a{ /* 只能找到儿子 */font-size: 20px;}</style>
</head>
<body><div><a href="#">儿子</a><p><a href="#">孙子</a></p></div>
</body>
</html>

并集选择器（特殊效果）

**并集选择器可以选择多组标签，同时为他们定义相同的样式。**通常用于集体声明。
格式：元素1,元素二{ 样式声明 }

并集选择器通过 , 连接而成，任何形式的选择器都可以作为并集选择器的一部分。

<html>
<head><style> /* 并也可以理解为和的意思，最后一个选择器不需要加 , 号 */div, p,.pin li {color: pink;}</style>
</head>
<body><div>233</div><p>233</p><ul class="pin"><li>233</li><li>233</li></ul>
</body>
</html>

链接伪类选择器（LVHA）

伪类选择器：用于向某些选择器添加特殊的效果。比如给链接添加特殊效果，比如可以选择第1个，第n个元素。
特点是用（:）冒号来表示。

a:link / 未访问的链接 /
a:visited / 已访问的链接 /
a:hover / 鼠标位于其链接上 /
a:active / 选定的链接（鼠标按下未弹起） /

<html>
<head><style>  a:link {/* 未访问的链接,把没有点击过的链接选出来 */text-decoration: none;color: #333;}a:visited{/* 选出访问过的链接 */color: orange;}a:hover{/* 选中鼠标当前放在的链接上 */color: #333;}a:active{/* 鼠标按下没松开 */color: skyblue;}</style>
</head>
<body><a href="#">这是一个链接</a><a href="http://www.xxxxxxxx.com">没有访问过的</a>
</body>
</html>

注意
1.写的时候，他们的顺序尽量不要颠倒按照 lvha(四类的首字母) 的顺序。否则可能引起错误。
2.因为叫链接伪类，所以都是利用交集选择器 a:link a:hover。
3.因为a链接浏览器具有默认样式，所以我们实际工作中都需要给链接单独指定样式。
实际开发中，我们很少写全四个状态，一般只会用到个别（hover鼠标经过）
一般我们写法如下：

<html>
<head><style>a {   /* a是标签选择器  所有的链接 */color: gray;}a:hover {   /* :hover 是链接伪类选择器 鼠标经过 */color: red; /*  鼠标经过的时候，由原来的 灰色 变成了红色 */}</style>
</head>
<body><a href="#">这是一个链接</a>
</body>
</html>

:focus 伪类选择器（表单元素）

:focus 伪类选择器用于获取获得焦点的表单元素。

焦点就是光标，一般情况< input >类表单元素才能获取，所有这个选择器主要针对表单元素。

<html>
<head><style>input:focus{ /* 获得光标到表单元素提取出来 */background-color: pink;color: red;}</style>
</head>
<body><input type="text"><input type="text"><input type="text">
</body>
</html>

CSS字体属性

CSS fonts(字体)属性用来定义字体系列、大小、粗细、和文字样式（斜体，下划线等）
可以写多个字体，每个字体之间用逗号隔开。前面字体没有往后找，这是防止没有你要的字体。

属性	表示	注意点
font-family	字体	按照团队中使用的字体来写
font-size	字号	一定要加上单位px
font-weight	字体粗细	记住加粗是 700 或者 bold 不加粗是 400 或 normal。不要加上单位
font-style	字体样式	倾斜是 italic，不倾斜是 normal
font	字体连写	字体连写要按照顺序，字号与字体是必须要有的

font-family设置字体系列

<style>p {font-family: '微软雅黑';}li{font-family: 'Microsoft YaHei', Arial, Helvetica, sans-serif;}span{font-family: '宋体';}
</style>
<body><p>我是个男生</p><ul><li>123</li></ul><span>266</span>
</body>

font-size设置字体大小

可以给整个body设置整个页面的文字大小。

<style>.textS {font-size: 20px;/* 字体20px显示 */}
</style>

font-weight字体粗细

实际开发中更喜欢用数字加粗变细。

<style>.textS {font-weight: bold;/* 加粗 */}
</style>

font-style字体样式

<style>.textS {font-style: italic;/* 斜体 */}
</style>

font复合属性写法

可以把上面的文字样式综合来写，这样可以更节约代码。
必须保留font-size、font-family属性！

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>复合属性</title><style>p {/*font-style: italic; font-weight: 800;font-size: 20px;font-family: '微软雅黑';*//* 复合属性写法 一定按照这个顺序，不能更换顺序,空格隔开 *//* font: font-style font-weight font-size/line-height font-family; */font: italic 800 20px '微软雅黑';font: 20px '微软雅黑'; /* 必须保留font-size、font-family属性！ */}</style>
</head><body><p>我是个男生</p>
</body></html>

CSS文本属性

CSS Text(文本）属性可定义文本的外观，比如文本的颜色、对齐文本、装饰文本、文本缩进、行间距等。

属性	表示	注意点
color	文本颜色	通常使用十六进制表示，如#fff
text-align	文本对齐	设置文字水平的对齐方式
text-decoration	字体修饰	记住添加下户线是 underline取消下划线none。
text-indent	字体缩进	通常缩进两个文字：text-inden：2em
line-height	行高	设置行与行之间的距离

文本颜色color

最常用是的是十六进制代码。

<style>p {color: red; /* 预定义颜色，用英文即可 */color: rgb(255,0,0); /* RGB代码 其它写法 rgb(100%,0%,0%) */color: #ff0000; /* 十六进制 */}
</style>

对齐文本text-align

设置内容对齐方式，只能设置对平对齐。

<style>p {text-align:left;/* 左对齐(默认方式) */text-align: right;/* 右对齐 */text-align: center;/* 居中对齐 */}
</style>

文本装饰text-decoration

添加下划线、删除线、上划线等。

<style>p {text-decoration: none; /*默认，没有线*/text-decoration: overline;/*上划线，很少用*/text-decoration: underline;/*下划线，a标签自带下划线*/text-decoration: line-through;/*删除线，很少用*/}a{text-decoration: none; /* 去点链接标签的下划线 */}
</style><body><p>我是个男生</p><a href="#">这是个链接</a>
</body>

文本缩进text-indent

em是一个相对单位,当前元素(font-size)1个文字的大小，如果没有设置大小，按照当前父级元素的1文字大小。

text-indent属性用来指定第一行的缩进,通常是将段落的首行缩进。

<style>p {text-indent: 50px; /* 首行缩进的距离 */text-indent: 2em; /* 首行缩进两个单词 */}
</style>

行间距line-height

行间距由：上间距、下间距和文本高度构成。

line-height属性用于设置文字每行之间的距离。就是文字每行之间的距离。

<style>p {line-height: 26px; /* 行间距 */}
</style>

使用小技巧：将line-height设置成height高度可以实现垂直居中。
原理：

CSS的引入方式

CSS可以按照书写的位置不同分为三种。

样式表	优点	缺点	使用情况	控制范围
内部样式表	部分结构与样式相分离	没有完全分离	较多	控制当前页面
行内样式表	权重高，书写方便	结构与样式混写	较少	控制当前标签
外部样式表	完全结构与样式相分离	必须引入	最多！（推荐使用）	控制多个页面

内部样式表

内部样式表（内嵌入式表）是书写到html内部，将所有的CSS代码抽取出来，单独放到一个< style >标签中。
理论上可以放置在html里面的任何地方，但是一般都会放到< head >标签中。

<html>
<head><style>/* 写在这里面 */div {width: 50px;height: 50px;}</style>
<head>
<body><div></div>
</body>
</html>

行内样式表

行内样式表（内联样式表）是在元素标签内部的style属性中写入CSS样式。
一般用于修改简单的样式。由于书写繁琐，没有体现结构样式相分离的思想，不推荐大量使用。
通常也叫做行内式引入

style其实就是标签的一个属性
在双引号里面写，要符合CSS规范。

 <html>
<head><head>
<body><div style="color: pink;font-size: 20px;">行内样式表</div>/* 写在当前元素里，用style */
</body>
</html>

外部样式表

实际开发使用的都是外部样式表。核心：样式单独写到CSS文件中，然后把CSS文件引入到html页面中使用。

rel: 定义当前文档与被链接文档之间的关系。这里需要stylesheet，表示被链接文本是样式表文件。
href: 定义被链接文档的位置。
开发中最常用！

 <html>
<head><link rel="stylesheet" href="css/index.css">/* 的用<link>标签引用css文件，通过路径 */
<head>
<body>
</body>
</html>

CSS元素显示模式

作用:在不同地方会用到不同类型的标签,了解他们的特点可以更好的布局我们的网页。
元素显示模式就是元素(标签)以什么方式进行显示,比如< div >自己占一行,比如行可以放多个< span >。

HTML元素一般分为块元素和行内元素两种类型

元素模式	元素排列	设置样式	默认宽度	包含
块级元素	一行只能放一个块级元素	可以设置宽高	100%	容器级可以包含任何标签
行内元素	一行可以放多个行内元素	不可以直接设置宽高	它本身内容的宽度	容纳文本或者其它行内元素
行内块级元素	一行可以放多个行内块元素	可以设置宽高	它本身内容的宽度

块元素

常见的块元素有< h1 >~< h6 >、< p >、< div >、< ul >、< ol >、< li >等,其中< dⅳ >标签是最典型的块元素。

块级元素的特点:
①比较霸道,自己独占一行。
②高度,宽度、外边距以及内边距都可以控制。
③宽度默认是容器(父级宽度)的100%
④是一个容器及盒子,里面可以放行内或者块级元素。
注意
①文字类的元素内不能使用块级元素
②< p >标签主要存放文字，因此< p >里面不能放块级元素，特别是不能放< dⅳ >
③同理，< h1 >~< h6 >都是文字类块级标签，里面也不能放其它标签

行内元素

常见的行内元素有< a >、< strong >、< b >、< em >、< i >、< del >、< s >、< ins >、< u >、< span >等,其中**< span >标签是最典型的行内元素**。有的地方也将行内元素称为内联元素。

行内元素的特点
①相邻行内元素在一行上,一行可以显示多个
②高、宽直接设置是无效的
③默认完度就是它本身内容的完度
④行内元素只能容纳文本或其他行内元素
注意
①链接里面不能放链接
②特殊情况链接< a >里面可以放块级元素，但是给< a >转换一下块级模式最安全

行内块元素

在行内元素中有几个特殊的标签——< img />、< input />、< td >,它们同时具有块元素和行内元素的特点。有些资料称它们为行内块元素。

行内块元素的特点
①和相邻行内元素(行内块)在一行上,但是他们之间会有空白缝隙。一行可以显示多个(行内元素特点)。
②默认宽度就是它本身内容的宽度(行内元素特点)。
③高度,行高、外边距以及内边距都可以控制(块级元素特点)

显示模式的转换

特殊情况下，我们需要元素模式的转换。
一个模式的元素需要另外一种模式的特性，比如想要增加链接< a >的处罚范围。

转换为块元素：display: block;
转换为行内元素：display: inline;
转换为行内块： display: inline-block;

背景

背景属性可以设置背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定等。

 <html>
<head>
<style>
body{background-color: black; /*背景颜色*/background-image: url(https://ossweb-img.qq.com/upload/webplat/info/yxzj/20200529/832781061912190.jpg);background-repeat: no-repeat;/* 不重复 *//* background-position: center top; */background-position: center 40px; /* 混合写法，居中向下40px */background-attachment: fixed; /* 固定图片不跟着滚动 *//*复合写法*//* background: black url(https://ossweb-img.qq.com/upload/webplat/info/yxzj/20200529/832781061912190.jpg) no-repeat fixed center top; */font-size: 20px;color: #ccc;
}
div{ height: 50px;background-color: rgba(0, 0, 0, .5);/* 半透明效果 */
}
</style>
<head>
<body>
<div></div>
<p>23333333</p><p>23333333</p><p>23333333</p><p>23333333</p><p>23333333</p><p>23333333</p><p>23333333</p><p>23333333</p><p>23333333</p><p>23333333</p><p>23333333</p><p>23333333</p><p>23333333</p><p>23333333</p><p>23333333</p><p>23333333</p><p>23333333</p><p>23333333</p><p>23333333</p><p>23333333</p><p>23333333</p><p>23333333</p><p>23333333</p><p>23333333</p><p>23333333</p><p>23333333</p><p>23333333</p><p>23333333</p><p>23333333</p><p>23333333</p><p>23333333</p><p>23333333</p><p>23333333</p><p>23333333</p><p>23333333</p><p>23333333</p><p>23333333</p><p>23333333</p><p>23333333</p><p>23333333</p><p>23333333</p><p>23333333</p>
</body>
</html>

总结

属性	作用	值
background-color	背景颜色	预定义颜色/十六进制/RGB代码
背景色半透明	背景颜色半透明	background-color: rgba(0, 0, 0, .5);必须是四个值
background-image	背景图片	url(图片路径)
background-repeat	是否平铺	repeat / no-repeat / reoeat-x / repeat-y
background-position	背景位置	length/position 分别是x和y坐标
background-attachment	背景附着	scroll(背景滚动) / fixed(背景固定)
背景简写	书写更简单	背景颜色背景图片地址背景平铺背景滚动背景位置

背景颜色

background-color 属性设置元素的背景颜色。
一般情况下元素背景颜色是transparent(透明)

background-color 属性为元素设置一种纯色。这种颜色会填充元素的内容、内边距和边框区域，扩展到元素边框的外边界（但不包括外边距）。如果边框有透明部分（如虚线边框），会透过这些透明部分显示出背景色。
背景颜色半透明
CSS3 提供了背景颜色半透明的效果。background: rgba(0,0,0,0.3); 一个参数对应一个颜色。
可以吧最后一个的零省略掉：background: rgba(0,0,0,.3);
最后一个参数是alpha透明度，取值在0~1之间

背景图片

background-image 属性为元素设置背景图像。
元素的背景占据了元素的全部尺寸，包括内边距和边框，但不包括外边距。
默认地，背景图像位于元素的左上角，并在水平和垂直方向上重复。

提示：请设置一种可用的背景颜色，这样的话，假如背景图像不可用，页面也可获得良好的视觉效果。

background-image 属性描述了元素的背景图像。实际开发常见于logo或者一些装饰的小图片或者是超大的背景图片，优点是便于控制位置。

 <html>
<head><style>div {  /* 不要落下url。默认值是none */background-image: url(/* 这里是图片地址 */);}</style>
<head>
<body><div></div>
</body>
</html>

背景平铺

background-repeat 属性设置是否及如何重复背景图像。
默认地，背景图像在水平和垂直方向上重复。

提示：背景图像的位置是根据 background-position 属性设置的。如果未规定 background-position 属性，图像会被放置在元素的左上角。

背景方位

background-position 属性设置背景图像的起始位置。
这个属性设置背景原图像（由 background-image 定义）的位置，背景图像如果要重复，将从这一点开始。

提示：您需要把 background-attachment 属性设置为 “fixed”，才能保证该属性在 Firefox 和 Opera 中正常工作。

写法：background-position：x y;
x坐标 y坐标；可以使用方位名词和精确单位。
精确单位：一定按照严格顺序 x y; 单独写一个精确值，另一个是垂直居中。
方位名词：前后顺序不影响。单独写一个参数，另一个默认是center。
混合写法：第一个一定是x坐标,第二个是y坐标

背景像素固定（背景附着）

ackground-attachment 属性设置背景图像是否固定或者随着页面的其余部分滚动。可以制作视差滚动效果。

背景复合属性写法

background 简写属性在一个声明中设置所有的背景属性。

可以按顺序设置如下属性：(没有硬性要求)

background-color
background-image
background-repeat
background-attachment
background-position

如果不设置其中的某个值，也不会出问题，比如 background:#ff0000 url(‘smiley.gif’); 也是允许的。
通常建议使用这个属性，而不是分别使用单个属性，因为这个属性在较老的浏览器中能够得到更好的支持，而且需要键入的字母也更少。

盒子模型

页面布局要学习三大核心，盒子模型、浮动和定位，通过盒子模型能很好的布局页面。
页面布局的核心本质：利用CSS摆盒子。

所谓盒子模型:就是把HTML页面中的布局元素看作是一个矩形的盒子,也就是一个盛装内容的容器。
CSS盒子模型本质上是一个盒子,封装周围的HTML元素,它包括:边框、内外边距、内边距和实际内容

阴影效果：CSS3新增属性

border:  ;           /* 边框 */
content:  ;         /* 内容 */
padding:  ;         /* 内边距 */
margin:  ;          /* 外边距 */

border边框

边框有三部分组成：边框宽度（粗细）边框样式边框颜色
可分开写，也可以复合写（**border：粗细、样式、颜色 **）。
可以单独设置某条边：border - 方位

边框会影响盒子的实际大小。
如果盒子大小需要包含边框：需要减去 width/height(注意双倍)

属性	作用
border-width	定义边框粗细，单位：px
border-color	边框颜色
border-style	边框的样式

border-style ：（solid、dotted和dashed比较常用）
border-collapse: collapse；合并相邻边框

padding内边距

padding属性用于设置内边距，即边框与内容之间的距离。（上下左右）

复合简写：
1个值：上下左右
2个值：上下 / 左右
3个值：上 / 左右 / 下
3个值：上 / 右 / 下 / 左（顺时针）

padding会影响盒子的实际大小。
如果盒子大小需要保持一致：让 width/height 减去多出来的内边距大小(注意双倍)

padding盒子好处：当有多个不同的盒子，盒子字数不同。不用给每个盒子宽度，直接给 pidding 值
盒子没有指定 width/height 属性，则padding不会撑开盒子大小。

margin外边距

margin属性用于设置外边距，即盒子与盒子之间的距离。（上下左右）

复合简写：(同padding)
1个值：上下左右
2个值：上下 / 左右
3个值：上 / 左右 / 下
3个值：上 / 右 / 下 / 左（顺时针）
水平居中 (margin: 0 auto)

盒子必须指定高度
盒子左右的外边距都设置位auto
注意：以上方法是让块级元素水平居中，行内元素或者行内块元素水平居中
给其父元素添加 text-align: center 即可。

嵌套块元素垂直外边距塌陷

对于两个嵌套关系（父子关系）的块元素，父元素有上边距同时子元素也有上外边距，此时父元素会塌陷较大的外边距值。

解决方案

可以位父元素定义上边框
可以位父元素定义上内边距
可以位父元素添加 overflow: hidden
还有其它方法，比如浮动、固定、绝对定位的盒子。

清楚内外边距

网页元素很多都带有默认的内外边距,而且不同浏览器默认的也不一致。因此我们在布局前,首先要清除下网页元素的内外边距。

行内元素尽量值设置左右的内外边距
注意:
行内元素为了照顾兼容性,尽量只设置左右内外边距,不要设置上下内外边距。
但是转换为块级和行内块元素就可以了。

* {padding: 0; /*清楚内边距*/margin: 0; /*清楚外边距*/
}

元素的显示与隐藏

本质：让一个元素在页面中隐藏或者显示出来。

display 显示隐藏元素但是不保留位置
visibility 显示隐藏元素但是保留原来的位置
overflow 溢出显示隐藏但是只是对于溢出的部分处理

display 属性

可以搭配JS来实现很多特效，应用广泛。

display 隐藏元素后，不再占有原来的位置。

display: none ；隐藏对象
display：block ；除了转换为块级元素之外，同时还有显示元素的意思

visibility 可见性

display 隐藏元素后，继续占有原来的位置。

visibility：visible ; 元素可视
visibility：hidden; 元素隐藏

overflow 溢出

让一个元素在页面中隐藏或者显示出来。

overflow 属性指定了如果内容溢出一个元素的框（超过其指定高度及宽度）时，会发生什么。

有定位的盒子，请慎用overflow:hidden

CSS学习笔记（详细）- 基础相关推荐

Metro UI CSS 学习笔记之基础组件
查阅Metro UI CSS 对基础组件描述,本人觉得已经描述的很详细,所以在这里不打算做详细的讲解,大家可以直接阅读以下源代码(是进过本人已经优化后的代码). 温馨提示:相关注释,也已经在代码中添加 ...
python入门学习笔记——详细基础知识篇（第10章正则表达式（重点）与JSON）
第10章正则表达式(重点)与JSON 初识正则表达式元字符与普通字符字符集概括字符集数量词贪婪与非贪婪匹配0次1次或者无限多次边界匹配符(^ .$) 组匹配模式参数 re.sub正则 ...
CTFHUB http协议题目学习笔记详细步骤请求方式 302跳转 cookie 基础认证响应源代码
CTFHUB http协议题目学习笔记详细步骤请求方式 302跳转 cookie 基础认证响应源代码 WEB-HTTP协议 1-请求方式 2-302跳转 3.cookie 4.基础认证 5.响 ...
Mysql学习笔记（基础）基础sql语句详细记录
数据库学习(基础) // 个人网课学习记录,如果有违规等问题,请联系我删除~ mysql下载安装( 解压版安装配置下载版安装配置 ) 需求分析:使用cmd命令来创建一个数据库,并对数据库中得一张分类 ...
CSS学习笔记（详细，不定期更新）
CSS 学习笔记 CSS书写规范顺序布局位置属性(position, top, right, z-index, display, float等) 自身大小盒子模型(width, height, p ...
HTML/CSS学习笔记03【CSS概述、CSS选择器、CSS属性、CSS案例-注册页面】
w3cschool菜鸟教程.CHM(腾讯微云):https://share.weiyun.com/c1FaX6ZD HTML/CSS学习笔记01[概念介绍.基本标签.表单标签][day01] HTML ...
HTML/CSS学习笔记01【概念介绍、基本标签】
w3cschool菜鸟教程.CHM(腾讯微云):https://share.weiyun.com/c1FaX6ZD HTML/CSS学习笔记01[概念介绍.基本标签.表单标签][day01] HTML ...
java基本语法心得_Java学习笔记(一)——基础语法(上)
Java学习笔记(一)--基础语法(上) 软件构造写在前面编写Java程序时,应注意以下几点:大小写敏感:Java是大小写敏感的,这就意味着标识符Hello与hello是不同的. 类名:对于所有的 ...
HTML+CSS学习笔记（3）- 认识标签（2）
HTML+CSS学习笔记(3)- 认识标签(2) 1.使用ul,添加新闻信息列表在浏览网页时,你会发现网页上有很多信息的列表,如新闻列表.图片列表, 这些列表就可以使用ul-li标签来完成.ul-l ...

CSS学习笔记（详细）- 基础