CSS总结

css重难点

来到啦华杉科技进行前端的培训，虽然前期有线上的一些学习，但是效果肯定没有线下的高，已经学习了四天，每天早八晚十一的高强度学习，使我收获颇多，这几天把html和css大概的学了一遍，接下来总结一下这几天的收获

css主要介绍

css定义

CSS： Cascading Style Sheet：层叠样式表，简称样式表。
版本：有CSS2和CSS3，CSS3.0比CSS2.0多了一些选择器和属性。
CSS主要作用：1）布局 2）美化

css布局优点

CSS的特性：
表现层和结构层完全分离，符合web标准
便于团队开发（视觉设计师和内容编辑分离）
便于网站的更新升级，维护性好
用户体验好，网站性能高
能够适应不同的显示设备

css的基本语法

css引入方法

(1).行内样式：就是直接在标签的开始标签中，使用style属性：

style="属性 ：属性值;"

(2).内部样式

<style>
选折器：{属性：属性值;}
</style>

(3).外部样式
使用link标签引入
link标签其实还有一个属性，告诉浏览器我们的引入的文件类型是css文件。

<link rel="stylesheet" href="aboutus.css(这个是你写的css的名字) “type=”text/css"/>
（css独自写一个文档链接到HTML上）

css基本语法

CSS样式(或规则)都必须由两部分组成：
选择器(selector)
声明块(declaration)，包括属性(property)和属性值(value)

css选择器

(1).基本选择器

a.类型选择器 也叫标签选择器，或叫元素选择器。
格式：标签{属性名：”属性值“；}
b.id选择器
要使用id选择器，需要分成两个步骤：
第一步，需要在对应的标签中增加一个id属性
第二步，需要在css中，使用#+id属性值
格式：<标签 id=“自己设置名字”>
#起的名字{属性名：”属性值“；}
c.class选择器
class是班级的意思，在计算机领域中还可以理解为类、类别。
叫类选择器，使用也是分为两步：
 第一步，需要在对应的标签中设置class属性，并设置对应值
 第二步，在css的规则中，使用 .+class属性值
格式：<标签 class=“自己设置名字”>
.起的名字{属性名：”属性值“；}
注意：对于class的使用
 所有的标签都可以添加class属性
 对于不同的标签，他们需要有相同的样式，此时使用class比较合适
 对于相同的标签，但是在页面中，特别的多，我只需要某一部分标签有额外的样式，也应该使用class。
 Class属性的值，可以有多个，如果有多个，使用空格隔开
d.伪类选择器
目前我们就掌握一个，最常用的，就是a标签的hover伪类。
hover，表示将鼠标放到a上面的这个状态。
选择器:hover {属性名：“属性值”；}
通配选择器，使用*，表示所有的标签
分组选择器，使用 , 隔开，可以重要代码
后代选择器，使用空格隔开，能够缩写查找的范围

css属性及属性值

属性如图

属性值
颜色值：英文名称、rgb函数、十六进制
长度单位：px和em
url：绝对和相对
百分比：使用%，长度和位置的时候会用到
元素(标签)分类

css行块元素的详解

常见的块级：div，h1~h6，p，ul，ol，li，dl，dt，dd，form，table
**常见的行内：**a，span，em，strong
**常见的行内块：**img，input
在盒模型中，
对于块级元素，所有的这6大特性都能生效。
对于行级元素，width和height不起作用，设置了也是白设，border有效、background有效、margin和padding在水平方向上有效，在垂直方向上无效。
块级元素特点
水平方向：
margin-left、border-left、padding-left、width、padding-right、border-right、margin-right。
width、margin-left和margin-right可以设置为auto，其余必须为特定值，或默认为0
如果margin-left/right都设置为auto，它们会设置为相同的长度，因此将元素在其父元素中居中
如果3个属性都设置为auto，则两个外边距都会设置为0，而width尽可能宽，这是默认情况
如果width、margin都是auto的话（这个前提不能少），我们再来设置padding或border，相应的width就会减小，保证整个块级元素的大小不要超过父元素。
水平方向：
margin-left、border-left、padding-left、width、padding-right、border-right、margin-right。
width、margin-left和margin-right可以设置为auto，其余必须为特定值，或默认为0
如果margin-left/right都设置为auto，它们会设置为相同的长度，因此将元素在其父元素中居中
如果3个属性都设置为auto，则两个外边距都会设置为0，而width尽可能宽，这是默认情况
如果width、margin都是auto的话（这个前提不能少），我们再来设置padding或border，相应的width就会减小，保证整个块级元素的大小不要超过父元素。
行级元素特点
水平方向
margin-left、border-left、padding-left、padding-right、border-right、margin-right
width无效，由内容本身决定
行级元素特点垂直方向
height无效，有font-size和line-height决定
内边距、边框和外边距对行内元素或其生成的框没有垂直效果，不会影响元素行内框的高度，也不会影响包含该元素的行框的高度
注意写代码时往往会通过属性display：来使块级元素变成行级元素或者行内块元素，亦或者使行级元素变为块元素或者行内块元素
块级变行级或者行变块用：display: block;行，块级元素变成行内块元素display: inline-block;

css的初步排版

布局思路
思考网页的信息语义和结构。根据这些信息把一个网页分成不同的内容块，以及每块内容的目的，然后再根据这些内容的目的用不同的语义元素建立相应的HTML结构。

css字体设置

字体设置
font-family：一次性可以设置多个字体，中间使用，隔开，每个字体尽量使用引号包含font-size：，font-style：italic和normal，font-weight：bold和normal，color：三种设置方式font-style:设置字体是否倾斜 normal italic
em: font-style:normal 用的不多
font-weight:设置字体是否加粗 normal bold bolder 100 200 300
h1: font-weight:normal
span: font-weight:bold 用的比较多的
font-size: 设置字体大小 谷歌浏览器默认是16px 用的最多是的12px 和 14px
可以非常大 不能非常小 最小是12px
font-family: 设置字体类型 和用户电脑上设置的字体也有关系
font-family:A,B,C,D
font:上面的几个属性的复合属性
font:font-style font-weight font-size/line-height font-family
font-style font-weight 可以不写 也可以交换位置
font-size/line-height font-family 必须写 能交换位置
有继承性：给父元素设置了，子元素也可以继承到
经典应用：给body设置字体相关的属性。
color:设置字体颜色
对于a标签来说，需要选中a标签 。
font：font-style font-weight font-size font-family
前面两种可以省略，它们的默认值都是normal，顺序也可以交换后面两种不能省略，也不能交换顺序。

css文本设置

text-decoration：修饰线，underline、overline、line-through、none
text-indent：文本缩进，通常使用em来实现段落缩进
text-align：文本水平对齐方式，left、center、right、justify（只对英文有效）
line-height：行高，设置段落或列表之间的行距，还可以实现垂直居中
文本设置：
text-decoration: 用来设置文本的装饰线 下划线 删除线
underline 下划线
应用：把a标签的默认的下划线去掉 hover时，加上下划线
line-through 删除线 偶尔用一下
text-indent: 首行空两格
2em 空两个汉字的宽度
-1000em 把隐藏一个盒子中的文本

百度

text-align: 1）让盒子中的文本居中 2）让行内元素或行内块元素在一个盒子中居中（可以把行内元素或行内块元素当成文本）

 <div style="border:1px solid red; height: 100px; line-height: 100px; text-align: center;">
            <a href="" style="border: 1px solid red;">a标签中的嘻嘻</a> 

让女标签或人妖标签直接居中了

           <img src="./baidu-s.gif" alt=""> 
            <input type="text"> 
            <span>span</span> 
            <strong>strong</strong> 

让a盒子中的内容水平居中的

<a href="" style="border: 1px solid red; text-align: center;">a标签中的嘻嘻</a>

让a标签直接居中的

<a href="" style="border: 1px solid red; ">a标签中的嘻嘻</a>

让男标签中的文本在盒子中的居中了

<div>div</div> </div>

** line-height:设置行高 **
1）如果是子标签是男标签，行高可以撑起子标签的高度
2）如果是子标签是女标签，行高不能撑起子标签的高度

<div style="height: 100px; line-height: 100px;"><a href="">嘻嘻</a></div>

css的继承性

在css中，以下属性有继承性
在css中，有些属性在父元素中设置，然后会传递到它的后代元素。
font相关的几个属性：font-family,font-size,font-style,font-weight,font,color
text相关的几个属性：line-height,text-align,text-indent

css的层叠性

首先有一条，css规则有一个就近原则，是针对引入css方式的一种规则。
id选择器 > class选择器 > 标签选择器
选择器的特殊性
id选择器： 0 1 0 0 100块
class选择器： 0 0 1 0 10块
类型选择器： 0 0 0 1 1块
如果在选择器中出现了多个选择器的时候，我们只需要将它们的这些特殊性求和，然后看结果。

css的布局

css盒子模型

定义:
CSS定义所有的元素都可以拥有像盒子一样的外形和平面空间，即都包含边界、边框、补白、内容区域、背景（包括背景颜色和背景图片），这就是盒模型。
主要属性
width: 宽度
height：高度
border：边框
padding：内边距 补白
margin：外边距 边界
background：背景
a.width和height
它们表示元素的宽度和高度。不是指整个盒子所占据的空间。
在设置的时候，通常使用px来进行，如果要实现响应式，则可以使用百分比。

b.border设置
border有三部分构成：边框的粗细边框的样式边框的颜色
border的上下左右border-top，border-right，border-bottom，border-left
****注意width属性默认值为auto，块元素的贪婪性和行内元素的懒惰性。实际上，对于行内元素而言，其宽度有内容本身决定，而其高度则有font-size决定。width和height可以设置百分比，相对于父元素的width和height而言。
在border中的三个属性中，其实它们都有默认值，
border-width，默认是medium，一般是3px
boder-color，默认是字体的颜色，
border-style，默认是none

c.padding表示的内边距，或者补白。所处的区域是指 border和内容之间的那个空间。
四个方向上的padding值padding-top:，padding-right:，padding-bottom:，padding-left:
*注意点：
1）有些标签是有默认的padding 如ul ol… 等 一刀切 { padding:0; }
2）对于行内元素来说，padding在垂直方向上不影响行高，效果上看似是有padding，但是padding不是真正的padding，或者说对于一个女盒子来说，padding在垂直方向上无效。
3）对于块级元素来说，上下padding可以撑起男盒子的高度。
d.margin用来设置外边距的。看似对当前的盒子没什么大的影响，实际上不是的。我们在计算当前盒子在整个页面中所占空间的时候，是必须要考虑margin 的。
设置四个方向上的margin值 margin-top ,margin-right ,margin-bottom,margin-left
*注意点：
1）有此标签有默认的margin 一刀切 { margin:0; padding:0; }
2）对于行内元素来说，margin在垂直方向上是无效的
3）margin可以设置auto。 表示尽可以大 div{ margin:0 auto; }
4）margin可以设置负值
5）对于块级元素来说，margin有重叠问题（塌陷问题）
对于块级元素来说，margin有重叠问题（塌陷问题）：
1）兄弟元素之间的重叠问题
2）父子元素之间的重叠问题 加粗样式
**兄弟元素之间的重叠问题：

<div class="box7">box7</div>
    <div class="box8">box8</div>
    .box7{ width: 200px;height: 200px;background-color: gold; margin-bottom: 150px;}
    .box8{ width: 200px;height: 200px;background-color: skyblue; margin-top: 100px;}

按理说：两个盒子之间的margin应该是250px
实现是：就150px 
这种现象叫：margin的塌陷  
margin塌陷的前提：1）男标签  2）垂直方向    
margin到底是多少：取大原则
首先需要知道 margin塌陷是不好的 也是不css的bug 如何避免？
答：说白了，只设置一个盒子的margin。

父子元素之间的重叠问题:

   <div class="box9">
        <p class="box10">我是一个段落</p>
    </div>    
    .box9{ 
        background-color: pink;
        margin-top: 50px;
    }
    .box9 .box10{
        background-color: gold;
        margin-top: 30px;
    }

按理说：p标签上面的应该有80px的margin 
实现是：只有50px margin 
这种现象叫：父子元素之间的margin重叠
解决：
    1）给父元素加border 
    2）给父元素加padding  只加一个0px不行  

e.background设置盒子的背景。包括如下两种： 背景颜色 背景图片
注意padding，magin后面也可以跟一个值，二个值，三个值，四个值：
一个值：margin或padding:10px 四个方向的padding都是10px
二个值：margin或padding:10px 20px; 上下是10px 左右是20px
三个值：margin或padding:10px 20px 30px; 上是10px 左右是20px 下是30px
四个值：margin或padding:10px 20px 30px 40px; 上 右 下 左

css background深入（重难点）

在css中，和背景有关的属性，有如下5个：

1background-color作用，设置当前元素的背景颜色背景颜色可以填充padding 也可以填充border
2background-imge设置盒子的背景图片 img标签也是盒子 也可以给img这个盒子设置背景图片
一个盒子大小正好和背景图大小一样：正好装进去
一个盒子如果大于背景图：默认会在x和y轴都进行平铺
一个盒子如果小于背景图：只会显示背景图的一部分，背景图的左上角和盒子的左上角对齐 左上角是指从pddding开始 但是border中也会填充图片图片
3background-repeat作用：用来控制背景图片在元素中水平和垂直方向上是否重复取值有如下四个：
repeat，也是默认的值
no-repeat，完全不重复，有且仅有一个不平铺
repeat-x，水平方向上重复（平铺）
repeat-y，垂直方向上重复（平铺）（向下为正）
注意在重复背景图片的时候，有多少空间，就重复多少内容，并不需要说要完整的图片大小空间才行。
4background-position作用：用来设置背景图片的位置。
格式：background-position :position-x position-y
具体在设置的时候，有如下三种设置方式：使用关键字，top、left、right、bottom使用百分比，0%、50%、100%使用像素值，25px、100px
5background-attachment
作用：定义背景图片是随元素滚动还是固定
有两个值：scroll，表示背景图片会随着滚动条的滚动而滚动fixed，固定不变，
注意细节：
background中的背景颜色，默认值是transparent，透明的。
background所覆盖的区域，包括padding和内容区域。（border先放一下，应用比较少）
在设置背景的时候，很容易覆盖前面的设置。
background的顺序有要求，按照顺序来写。

css流动布局

**流动布局是默认的，也是最简单的。
默认状态下，HTML中所有的元素都是根据流动布局模型来分布网页内容的。流动布局模型有两个特征：block
在所处的包含元素内自上而下按顺序垂直延伸分布，以行的形式占据位置。
inline
在所处的包含元素内从左到右水平分布显示。超出一行后，会自动换行。
**

css浮动布局

浮动是css中的难点，也是重点。
浮动有如下三大特征：包裹性，破坏性，块级框
a.包裹性
如果一个块级元素，在没有设置width的情况下（前提条件），一旦使用了float，那么他的width就会发生变化，尽量最小，能够完全包裹其中内容即可。如果我对一个块级元素已经设置了width，则不会具备包裹性
b.破坏性
在一个块级容器中（如div），如果它的子元素，都有浮动（比如float），并且没有清除这个浮动，那么块级容器将会塌陷。这就是浮动的破坏性。
c.块级框
如果一个行内元素，设置了浮动（left或right）之后，它就会变成块级框，就可以设置其盒模型的所有属性，如width和height。
最经典的就是给a标签加浮动。
作用：用来实现布局的，使得块级元素能够在同一行上和平共处。
属性：float属性值：left、right
浮动是完全不同于流动的另一种布局模型，有如下特征：
任何定义为float的元素都会自动被设置为一个块状元素显示，可以定义宽高
浮动模型不会与流动模型发生冲突，在垂直方向上应该还处于文档流中
与普通元素意义，浮动元素始终位于包含元素内，不会游离于外，或破坏元素包含关系浮动需要清除，如果不清除，会对后面的内容造成影响。记住了：clear:both只能写在第1个受影响的元素上，写在父元素上没有什么用。
清除浮动
.显式的给块级元素指定一个height值
清除父类与子类的浮动时：1设置父类的高度防止父类塌陷，2或者在父类上加上 overflow: hidden;属性清楚浮动
**清除兄弟类之间的浮动时：可以使用clear属性来完成。clear是用在被受影响的元素上clear属性有三个值，left、right和both，通常就使用both。
**
3浮动的具体表现

关于规则1的说明
第一小条：浮动元素的左（右）外边界不能超出其包含块的左（右）边界
第二小条：一个浮动元素的顶端不能比父元素的内顶端更高。

4浮动的本质（难点）
在css中，所有的内容都是一个元素。纯文本也是。
在块级元素中，包含的一定是行内元素，行内元素才是描述内容的标签。**

行内元素的特点首先自左至右进行排列，如果内容超出一行，会重起一行
浮动为什么是半脱离？
浮动的初衷：为了实现字围效果，字肯定是钻不上去的，由于它是钻不上去的，所以我们说浮动是半脱离标准文档流。

问：一个DIV中浮动元素，能不能脱离DIV。
答：浮动肯定脱离不了父元素了，可以影响父元素的高度，肯定跑到别的盒子中。

问：两个浮动的元素的能不能重叠到一起？
答：不能

问：什么时候，可以让两个盒子重叠到一起：
答：1）一个盒子浮动，另一个不浮动 2）定位，定位完全脱离标准文档流

问：浮动元素都是先向上浮动吗？
答：对的

问：浮动元素是先上向浮动，浮到什么地方？
答：浮动了父盒子的边界 如果是body，body没有设置高度，也会对body造成影响，body的高度也会塌陷，使用overflow:hidden; 不能清除浮动，所以说不要直接在body中裸奔。