关于css的问题？

Posted 2023-05-09

这部分代码是啥意思啊

参考技术A 可以理解为初始化的意思 参考技术B utf-8字符集
通配符选择器*可以让所有的html元素的内边距都默认为0，居中 参考技术C

盒子模型

a）border边框

a.1

border-top-style:  solid   实线

                dotted  点线

               dashed  虚线

border-top-color   边框颜色

border-top-width   边框粗细

a.2

边框属性的连写，没有顺序要求，线型必写。

border-top：red solid 5px;

border： solid 5px;

a.3

边框合并（用于设置表格边框合并）

table
width: 300px;
height: 500px;
border:1px solid pink;
border-collapse: collapse;

a.4

border:0 none;
/*去除边框*/
outline-style: none;
/*去除轮廓线*/

b）padding内边距

b.1

padding-left   |   right    |  top  |  bottom

padding: 20px;   上右下左内边距都是20px

padding: 20px 30px;   上下20px   左右30px

padding: 20px  30px  40px;   上内边距为20px  左右内边距为30px   下内边距为40

padding:  20px  30px   40px  50px;   上20px 右30px  下40px  左  50px

b.2内边距撑大盒子

盒子的宽度=定义的宽度+边框宽度+左右内边距

继承的盒子，设置padding不影响盒子的宽度。

例子：一个大盒子宽度500px,高度300px.一个小盒子宽度300px,高度150px.请画出让小盒子在大盒子内部居中。

c）margin（外边框）

用法同padding，对盒子的宽度没有影响。

c.1外边框合并

外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
当一个元素出现在另一个元素上面时，第一个元素的下外边距与第二个元素的上外边距会发生合并。

边距合并问题只发生在块级元素之间

c.2嵌套的盒子外边距塌陷

解决方法:  1  给父盒子设置边框

           2给父盒子overflow:hidden;

d)

行内元素不要给上下的margin 和padding
上下margin和padding会被忽略。
左右margin和padding会起作用。

关于CSS居中问题的一些总结

前端页面开发中关于内容居中的需求应用概率很大，自己搜集一些资料和总结关于css里的几种居中效果实现

第一
常用text-align:center
先将子元素将块级元素改为行内元素，即display:inline-block
父级元素设置text-align:center
兼容性：IE6?,?IE7

第二
使用table+margin
将子元素设置成块级表格显示类似（<table>）,在设置子框居中以达到水平居中
兼容性：不支持??IE6、IE7

<div class="fa">
        父
    <div class="ch">子</div>
</div>

 display: table;
 margin: 0 auto;  
 

第三
使用absolute+transform
将子元素设置为绝对定位，移动子框，使子元素左侧距离相对左侧边框的距离为相对子框宽度的一半，再通过向左移动子框一半宽度以达到水平居中。
兼容性：css3属性兼容存在一定问题，高版本需要添加前缀

position: relative; /*父*/
position: absolute; /*子*/
left: 50%;
transform:translateX(-50%);

第四
使用flex+margin
通过父级元素flex布局将子框转换为flex item再设置子元素水平居中
兼容性：不支持IE6、IE7、IE8

display: flex; /*父*/
margin: 0 auto; /*子*/

第五（水平垂直）
将水平居中absoulte+transform和垂直居中的absoulte+transform相结合
兼容性：css3属性兼容性问题

position: relative; /*父*/
position: absolute; /*子*/
left: 50%;
top: 50%;
transform: translate(-50%,-50%);

第六
父相对子绝对，上下左右+margin居中
兼容性：IE8及以上

position: relative; /*父*/
----------------------------
position: absolute; /*子*/
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;