文章目录
1，什么是css样式？
CSS：层叠样式表 Cascading Style Sheet
2，css样式作用
（1）为HTML页面布局
（2）美化HTML页面
3，css布局
3.1 盒子模型（五大模块）
主要包括以下五个模块的属性：
（1）内容区域：width 和 height ；//设置内容区域的宽高
（2）内填充区域： padding；//设置盒子内部的边距；
主要代码：padding-top: padding-right:padding-bottom:padding-left:分别代表上有下左加内填充；也可以写：padding：10px 20px 30px 40px；表示上右下左分别加 10、20、30、40px的内填充；（3）边框： border；//设置盒子的边框——主要代码：border：1px solid red；
1px指边框宽度；solid指边框设为实现，或者dashed虚线，dotted点化线； red为颜色；
（4）外填充区域：margin；//设置盒子的外填充区域；
主要代码：margin-top: margin-right:margin-bottom:margin-left:分别代表上有下左加外填充；也可以写：margin：10px 20px 30px 40px；表示上右下左分别加 10、20、30、40px的外填充；
（5）背景：background；
3.1.1盒子模型值内容区域
（1）字体设置：
- font-style:设置字体是否倾斜 normal italic
- font-weight:设置字体是否加粗（font-weight:bold使用比较多的）
- font-size: 设置字体大小（谷歌默认16px；没有最大，只有最小字体12px）
- font-family: 设置字体类型（根据自己电脑的字体库设计）
- font:上面的几个属性的复合属性（可表示为：
font:font-style font-weight font-size/line-height font-family前两个属性顺序可以变，也可以不写；）
3.1.5盒子模型之背景 background
- background-color:设置盒子的背景颜色（背景颜色可以填充padding或者border）
- background-image:设置盒子的背景图片（img就是一个盒子）
（1）一个盒子大小正好和背景图大小一样：正好装进去
（2）一个盒子如果大于背景图：默认会在x和y轴都进行平铺；
（3）一个盒子如果小于背景图：只会显示背景图的一部分，背景图的左上角和盒子的左上角对齐；
- background-repeat:控制背景图平铺问题；（repeat-x 只平铺x轴；repeat-y 只平铺y轴；repeat x和y轴都平铺；no-repeat x和y轴都不平铺）
- background-position；对背景图进行定位；（格式：
background-position：x y图片默认左上角为原点）
（2）文本设置：
- text-decoration: 用来设置文本的装饰线（underline 下划线；line-through 删除线（偶尔会使用一下））
- text-indent: （2em首行缩进两个汉字；）
- text-align:（能够让文本居中center或者左对齐left右对齐right；）
- line-height:设置行高（当子标签为女标签时候，不能撑起父元素高度；当子标签是男标签时候，父标签高度会被撑起）
3.2 块级元素并排显示
（1）浮动
（2）flex
（3）定位
（4）行内块
3.2.1关于浮动布局的相关知识：
- 最初浮动的原因是为了实现新闻字围的效果；
当对盒子设置浮动的时候，将类似于盒子实现了悬浮的状态，此时已经脱离了父盒子的约束，但是再怎么浮动都脱离不了父元素，只不过会影响父元素的高度，此时文字会实现对盒子字围的效果。 - 现在设置浮动主要是为了让块级元素能够实现并排显示；
浮动相关的代码：`float：left（左浮动）； float：right（右浮动）；
- 当所有的子元素使用浮动时候父元素出现的高度等于0（塌陷问题）的解决方案：
（1）清除对父元素造成的影响：A. 给父盒子加
overflow:hidden; B. 给父元素加高度hight；
（2）清除对兄弟元素造成的影响：clear: left/right/both或者clear:both；记住：clear:both只能写在第1个受影响的元素上，写在父元素上没有什么用。
- 浮动元素的特点：
（1）贴靠性 如果都向同一个方向浮动，这两个浮动的元素会紧紧的贴在一起，如果后面的空间不够贴靠的话，它会自动换行；
（2）包裹性 如果是一个男盒子，在没有设置宽度的情况下，只要它浮动了，那么它的宽度会尽可能小；
（3）如果子元素都浮动了，那么父元素将会出现高度塌陷问题；
（4）如果一个女盒子浮动了，那么就可以给它设置宽高，也就是说这个女盒子变为男盒子了，（女盒子变男盒子加如下代码：display：block;）
4，元素之间存在的重叠问题
4.1 兄弟元素之间的重叠问题：
- 如果存在上下两个和盒子；上盒子设置margin-bottom：100px；下盒子设置margin-top：150px；
则：上下两个盒子之间的间隔为150px；这种现象就叫做兄弟元素之间的重叠现象 - 解决办法： 只设置一个盒子的外边距即可；
4.2 父子元素之间的重叠问题：
- 存在一个父盒子，在父盒子中有一个子盒子；当给父盒子加 margin-top: 50px；给子盒子加 margin-top: 30px; 此时子盒子中的margin-top为50px，而不是80px；这种现象叫父子元素之间的margin重叠现象
- 解决办法： 给父元素加border；或者给父元素加padding；
5，元素的定位问题
在css中，是通过position属性来进行定位的，可选的定位类型有
static | relative | absolute | fixed这四种；默认的是static；表示没有定位，还保持原来的位置；
其他三个属性分别是相对定位，绝对定位，固定定位；
5.1，相对定位（position：relative）
-
在一个父标签中的时候，要对标签中子元素进行相对定位；首先加入代码
position：relative然后，left：-20px；表示相对于子元素原来位置水平左移20px；top：20px；表示相对于子元素原来位置向下移20px； -
相对定位对父元素和兄弟元素的布局都没有任何影响，还会保留原来的位置，但可能会覆盖其他元素。
5.1，绝对定位（position：absolute）
-
如果对元素进行绝对定位，首先加入代码
position：absolute加入该标签之后可以设置left | right | top | bottom属性对元素进行绝对定位。此时的定位是相对于最近的已经设置定位的祖先元素（即设置了绝对定位或者相对定位的祖先元素） 进行定位的；如果没有已经定位的祖先元素，那就是相对于最初的包含块（body）进行定位的。 -
一般absolute会结合relative来使用：就是先自己选择一个祖先元素（参考点）设置为
position：relative此时已经存在祖先元素，然后对想要定位的元素设置position：absolute再设置相对于参考点想要移动的距离。 -
绝对定位之后，定位的元素会脱离标准文档流，原来的位置也将不存在；
5.3，固定定位（position：fixed）
- 固定定位很好理解：就是对元素进行相对于页面（浏览器、手机、平板…）的定位。代码如下：
position:fixed;/*设置元素为固定定位*/ top:30px;/*距离浏览器顶部30px*/ left:160px;/*举例浏览器左部160px*/ - 也就是说如果使用固定定位，那么元素就将固定在页面的某个位置不会再改变，也不会受到其他页面的影响。
---------暂时总结这么多，后续继续完善---------