学习CSS的盒子模型。
一些背景知识
CSS长度单位
px:像素;em:相对元素font-size的倍数;rem:相对根(即html)字体大小;%:相对父元素来进行计算。
注:CSS中设置长度必须加单位,否则样式无效 。
元素的显示模式
1.块元素
特点
1.在页面中独占一行
2.默认宽度:撑满父元素。默认高度:由内容撑开
3.可以通过CSS设置宽高
常见块元素:
2.行内元素
1.在页面中不占满一行
2.默认宽度:由内容撑开。默认高度:由内容撑开
3.无法通过CSS设置宽高
常见行内元素:
3.行内块元素
1.在页面中不占满一行
2.默认宽度:由内容撑开。默认高度:由内容撑开
3.可以通过CSS设置宽高
常见行内元素:
4.修改元素的显示模式
/* 元素作为块级元素出现 */
display:block;
/* 元素作为行内元素出现 */
display: inline;
/* 元素作为行内块元素出现 */
display: inline-block;
/* 元素会被隐藏 */
display: none;
盒子模型
盒子模型的组成部分
CSS会把所有的HTML元素看成一个盒子。
margin外边框:盒子与外界的距离。(若盒子给了具体宽度不会影响盒子大小但会影响盒子位置)
border边框:盒子的边框。
padding内边距:紧贴内容的补白区域。
content内容:元素中的文本或后代元素都是他的内容。
盒子大小=content+两边padding+两边border
关于默认宽度:
所谓默认宽度,就是不设置width属性时元素所呈现的宽度。
总宽度=父的content-自身的左右margin
内容区的宽度=父的content-自身的左右margin-自身左右border-自身左右padding
写完后可以在开发者工具中检查效果。
例如编写了下面的代码:
<body>
<div>hh</div>
</body>
<style>
div{
background-color: gray;
width: 300px;
height: 300px;
padding: 100px;
}
</style>
鼠标右键——检查,既可看到盒子的数据
注意:要查看div盒子的数据,一定要点击div后,显示才是div盒子的数据。
由图可以看出,div盒子的content区是300*300,padding是100。
盒子的内容区content
设置内容区的高度和宽度。
/* 设置内容区域的宽度 */
/* 可以设置一个精准值 */
width: 300px;
/* 也可以设置一个范围值 */
min-width: 100px;
max-width: 500px;
/* 设置内容区域的高度 */
height: 300px;
min-height: 100px;
max-height: 500px;
盒子的内边距padding
/* padding单独设置 则四个方向上都是这个100px */
padding: 100px;
/* padding复合去设置 每个方向上可以设置不同的值 */
padding-top: 50px;
padding-right: 20px;
padding-bottom: 100px;
padding-left: 70px;
注意:
padding值不能为负数。
行内元素设置padding时,左右padding有效果,但上下padding可能会有问题。
块级元素、行内块元素,四个方向的padding都可以有效果。
盒子的边框border
/* 设置样式 可以合起来一起写也可以分开写 */
/* border-style: solid; */
border-left-style: solid;
border-right-style: solid;
border-top-style: solid;
border-bottom-style: solid;
/* 设置宽度 可以合起来一起写也可以分开写 */
/* border-width: 10px; */
border-left-width: 10px;
border-right-width: 10px;
border-top-width: 10px;
border-bottom-width: 10px;
/* 设置颜色 可以合起来一起写也可以分开写 */
/* border-color: aqua; */
border-left-color: aqua;
border-right-color: aqua;
border-top-color: aqua;
border-bottom-color: aqua;
/* 设置边框圆角 */
border-radius: 10px;
文章来源地址https://www.toymoban.com/news/detail-827355.html
盒子的外边距margin
概念
写法和之前的一样。可以单独写margin,也可以对其上下左右分别设置不同的margin。
注意:
1.子元素的margin是参考父元素的content计算的。
2.上margin、左margin会影响自身的位置;下margin、右margin会影响兄弟元素的位置。
3.对应行内元素,左右的margin是可以完美设置的,上下的margin设置后是无效的。
4.margin的值可以设置为auto,对一个块级元素左右margin设置auto可以实现该元素在其父元素内水平居中。
5.margin可以为负值。
margin塌陷问题
第一个子元素的上margin会作用在父元素上,最后一个子元素的下margin也会作用在父元素上。
解决问题:
方法1:给父元素设置不为0的padding
方法2:给父元素设置不为0的border
方法3:给父元素设置CSS样式overflow:hidden(推荐)
margin合并问题
上面元素的下外边距和下面元素的上外边距会合并,两个元素的边距取两个边距的最大值而不是相加。(左右元素的外边距不会合并)
解决问题:无需解决,布局时只要设置一个外边距就可以了。
处理内容溢出
使用overflow:hidden使得溢出的内容隐藏。
隐藏元素的方式
方式一:visibility:hidden(元素看不见了但是还会占有原来的位置)
方式二:display:none(元素看不见了且不占任何位置,没有大小宽高)
元素默认样式
元素一般都有些默认样式,例如<a>、<h1>~<h6>、<p>、<ul>、ol、<body>
(body有一个8px的margin。很重要)
元素的默认样式优先级>继承的样式。所以如果要重置默认样式,选择器一定要直接选择到该元素
布局小技巧
需要实现子元素在父元素居中效果。
1.若子元素是块元素。
/* 使得子div水平居中父div */
margin-left: auto;(父元素)
margin-right: auto;(父元素)
/* 使得子div垂直居中父div */
margin-top: 150px;(子元素设置,值为父content-子元素盒子总高)
/* 解决margin塌陷问题 */
overflow: hidden;(父元素中)
<style>
.outer{
width: 400px;
height: 400px;
background-color: gray;
/* 解决margin塌陷问题 */
overflow: hidden;
}
.inner{
width: 200px;
height: 100px;
background-color: orange;
/* 使得子div水平居中父div */
margin-left: auto;
margin-right: auto;
/* 使得子div垂直居中父div */
margin-top: 150px;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner">inner</div>
</div>
</body>
2.若子元素是行内元素或行内块元素,则将其看成文本去调整居中。
/* 行内元素可以看成文本来去调整其位置 */
/* 使得子span水平居中父div */
text-align: center;(父元素)
/* 使得子span竖直居中父div */
line-height: 400px;(父元素的line-height=height)
vertical-align: middle;(每个子元素)
<style>
.outer{
width: 400px;
height: 400px;
background-color: gray;
/* 行内元素可以看成文本来去调整其位置 */
text-align: center;
line-height: 400px;
}
.inner{
background-color: yellow;
vertical-align: middle;
}
</style>
</head>
<body>
<div class="outer">
<span class="inner">出来玩啊</span>
</div>
</body>
ps:若想要绝对居中,则设置父元素font-size:0;
原因:因为字体设置的原因,若在父元素中显示font-size,会偏向下不能居中,所以设置父元素font-size:0;要显示出其文字,再在文字的标签中设置新的font-size值。
元素空白问题
行内元素、行内块元素,彼此之间的换行会被浏览器解析为一个空白字符。
解决方法:给父元素设置font-size:0;再给需要显示文字的元素,单独设置字体大小。
行内块的幽灵空白问题
因为行内块元素与文本的基线对齐,而文本的基线与文本最低端之间有一定距离,所以会出现一条缝隙。
解决方法:
文章来源:https://www.toymoban.com/news/detail-827355.html
到了这里,关于前端DAY4的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!