CSS样式------布局、定位、盒⼦模型等功能的解析及总结
⽂章⽬录
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）字体设置：
1. font-style：设置字体是否倾斜 normal italic
2. font-weight：设置字体是否加粗（font-weight:bold使⽤⽐较多的）
3. font-size: 设置字体⼤⼩（⾕歌默认16px；没有最⼤，只有最⼩字体12px）
4. font-family: 设置字体类型（根据⾃⼰电脑的字体库设计）
5. font：上⾯的⼏个属性的复合属性（可表⽰为：font:font-style font-weight font-size/line-height font-family前两个属性顺序可以变，也可以不
写；）
3.1.5盒⼦模型之背景 background
1. background-color：设置盒⼦的背景颜⾊（背景颜⾊可以填充padding或者border）
2. background-image：设置盒⼦的背景图⽚（img就是⼀个盒⼦）
（1）⼀个盒⼦⼤⼩正好和背景图⼤⼩⼀样：正好装进去
（2）⼀个盒⼦如果⼤于背景图：默认会在x和y轴都进⾏平铺；
（3）⼀个盒⼦如果⼩于背景图：只会显⽰背景图的⼀部分，背景图的左上⾓和盒⼦的左上⾓对齐；
3. background-repeat：控制背景图平铺问题；（repeat-x 只平铺x轴；repeat-y 只平铺y轴；repeat x和y轴都平铺；no-repeat x和y
轴都不平铺）
4. background-position；对背景图进⾏定位；（格式：background-position：x y图⽚默认左上⾓为原点）
（2）⽂本设置：
1. text-decoration: ⽤来设置⽂本的装饰线（underline 下划线；line-through 删除线（偶尔会使⽤⼀下））
2. text-indent: （2em⾸⾏缩进两个汉字；）
3. text-align:（能够让⽂本居中center或者左对齐left右对齐right；）
4. line-height：设置⾏⾼（当⼦标签为⼥标签时候，不能撑起⽗元素⾼度；当⼦标签是男标签时候，⽗标签⾼度会被撑起）
3.2 块级元素并排显⽰
（1）浮动
（2）flex
（3）定位css固定定位
（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*/
也就是说如果使⽤固定定位，那么元素就将固定在页⾯的某个位置不会再改变，也不会受到其他页⾯的影响。
---------暂时总结这么多，后续继续完善---------

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。