最近在学习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中水平垂直居中方式及应用情形速记
网友评论