最近在学习html和css的一些基本应用，遇到过很多问题，刚开始会发现css像是不可控一样，这次达到了预期效果，可能下一次就偏了十万八千里，或者是“牵一发而动全身”。其实对于计算机而言，没有什么是不确定的，如果有，那一定是学艺不精。以下是自己在学习过程中对css的一些总结。
css,（Cascading Style Sheet层叠样式表 ） ，学习CSS就是学习一堆选择器和属性的选择和使用。我们常用css来进行布局的构造和整体美化。
字体设置：
文本设置：
我要评论text-indent="2em"空两个汉字的宽度text-indent=" -1000em" 把隐藏一个盒子中的文本<div style="height: 100px; line-height: 100px;"><a href="">行高等于盒子高度</a></div>在需要对盒子内元素进行居中时，我们常会用到两个属性
text:align="center";
<!-- 让行内元素直接居中 -->
<!-- <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> -->
margin:0 auto;
在介绍margin:0 auto之前，先要讲一下什么是盒子模型，盒子模型是说HTML中的每个元素都是被包裹在一个盒子里面的，盒子主要分为四个部分，一个是content（盒子内的区域），一个是border（盒子边框），在content和border之间的是padding（内填充区域），以及与父元素之间的距离即在border之外的margin（外填充区域）。因此居中对齐是使整体盒子在其父元素中居中margin:0 auto，意思是距父容器顶部距离为0px，而左右下三部分自动调整。而padding是对内的，padding的调整对盒子在整个页面中的位置根本不能起任何作用。当使用margin:0 auto无法达到居中效果是可能是没有设置盒子的width。
父子元素之间的重叠问题:
<style>
.box9{
background-color: pink;
margin-top: 50px;
}
.box9 .box10{
background-color: gold;
margin-top: 30px;
}
</style>
<div class="box9">
<p class="box10">我是一个段落</p>
</div>
按理说p标签上面的应该有80px的margin ，实现是：只有50px margin 这种现象叫父子元素之间的margin重叠
解决：
1）给父元素加border
2）给父元素加padding 只加一个0px不行
<style>
.box9{
background-color: pink;
margin-top: 50px;
padding:1px;
}
.box9 .box10{
background-color: gold;
margin-top: 30px;
}
</style>
<div class="box9">
<p class="box10">我是一个段落</p>
</div>
浮动元素的特点：
元素浮动会造成影响：
我们需要清除浮动所造成的的影响，也叫清除浮动：
元素浮动也会对它后面的元素造成影响：
后面的元素会钻上去，但是文字不会，文字会形成字围效果。 对兄弟元素造成影响，我们需要清除这种影响，也叫清除浮动。clear: left/right/both clear:both
注意：clear:both只能写在第1个受影响的元素上，写在父元素上没有什么用。
后续有问题再进行补充
本文地址：https://blog.csdn.net/QIu_zero/article/details/107279510
如对本文有疑问， 点击进行留言回复！！
荐 css的3中水平居中方式和4中水平垂直居中方式及应用情形速记
网友评论