搜文章
推荐 原创 视频 Java开发 iOS开发 前端开发 JavaScript开发 Android开发 PHP开发 数据库 开发工具 Python开发 Kotlin开发 Ruby开发 .NET开发 服务器运维 开放平台 架构师 大数据 云计算 人工智能 开发语言 其它开发

css盒子模型3

前端小白学习 2019-11-08

上节只是看了下margin和padding的效果,没有真正的讲,所以联系小作业不会写是很正常的

忽然觉得前两节讲的有点费

梳理一下

盒子模型我们需要了解的

margin的效果是透明的,它可以使盒子与盒子之间有间隙达到美观的效果,padding的效果也是透明的,他可以使盒子的边框与盒子内容有一定的间隙童颜三个hi为了美观;

marign和padding都有四个方向的值,margin-top,margin-right,margin-bottom,margin-left;padding-top,padding-right,padding-bottom,padding-left;


padding

/* css样式*/<style> .box{ width: 100px;/* 盒子宽100px*/      height100px;/* 盒子高100px*/ background-color: grey; color: orange;      padding-left10px;/* 盒子左内边距为10px*/      padding-right20px;/* 盒子右内边距为20px*/      padding-top50px;/* 盒子上内边距为50px*/      padding-bottom100px;/* 盒子下内边距为100px*/ }</style>/* html*/<div class="box">内容内容内容内容内内容内容内容内容内内容内容内容内容内内</div>

页面效果

css盒子模型3

div盒子我们是有设置宽高的,但是现在显示的大小跟我们设置的好像不太对,原因是因为我们设置了padding的四个值,所以我们要知道padding值会影响我们盒子的大小,那么显示出来的高度他是如何计算的呢?

两种情况(宽度也是一样的道理)

如果设置了高度,盒子模型(这里的div)的高度等于

       设置的高度+上下的padding    

如果没设置了高度,盒子模型(这里的div)的高度等于

       内容的高度+上下的padding


padding的组合写法

一个值:

    padding:50px;表示盒子的上下左右的内边距都是50px

    使用场景:盒子的四个方向内边距相同

两个值:

    padding:50px 10px; 上下50px  左右10px

    使用场景:盒子的上下内边距,左右相同

三个值:

    padding:50px 10px 100px;上50  左右10  下100

    使用场景:盒子的左右内边距相同,上下不同

四个值:

    padding:50px 10px 100px 200px; 上 右  下 左(顺时针方向)

    使用场景:盒子的四个方向内边距都不相同

使用padding居中块

代码

/* css*/.box{ width: 200px; height: 300px; background-color: grey; padding-left: 100px; padding-top: 200px;     /*padding-right: 100px;*//* 这里设置右内边距效果相同*/}.box .inner{ width: 100px; height: 100px;    background-color: orange;}/* html*/<div class="box"> <div class="inner"></div></div><!--  实现innerbox中的上下左右居中,并且box的宽度依旧是300-->

页面效果

css盒子模型3


margin

margin与padding一样有四个方向的值,组合的写法与padding一样。

margin有一个需要注意的地方

问题1:内部元素是块,给该元素设margin-top的时候,会穿透父元素(相当于将margin-top作用在了父元素身上)

代码看一下

{ margin: 0; padding:0;/* 清除默认的margin和padding */}.box{ width: 250px;/* 宽度 */ height: 250px;/* 高度 */ background-color: grey;/* 背景颜色 */  font-size: 0;/* 字体大小为0,清除子元素inline-block时换行,tab,空格的那个4px的空隙 */}/* 一般默认的样式我们都是需要清除的,防止影响到后面我们的布局 */.box .inner{ width: 100px;/* 宽度 */ height: 100px;/* 高度 */ background-color: orange;/* 背景颜色 */ display: inline-block;/* 转为行内块元素 */ margin: 10px;/* 组合写法,四个方向都有10px的外边距 */}/*inner是行内块:margin:10px; 对四个方向都生效 */.box2{ width: 250px;/* 宽度 */ height: 250px;/* 高度 */  background-color: grey;/* 背景颜色 */  font-size: 0;/* 清除4px的间距,要知道后代要设置字体大小的 */}.box2 .inner{  width: 100px;/* 宽度 */  height: 100px;/* 高度 */  background-color: orange;/* 背景颜色 */ margin: 10px;/* 四个方向都有10px外边距 */}.box2 .inner2{  margin-top: 20px;/* 设置盒子顶部20px的外边距 */}
/* html代码*/<div class="box"> <div class="inner"></div> <div class="inner"></div> <div class="inner"></div> <div class="inner"></div></div><div class="box2"> <div class="inner"></div> <div class="inner inner2"></div></div>

效果图

css盒子模型3

说明:主要看一下box2盒子的效果,上文css我们没有给box2设置margin-top的值,却出现了margin-top的效果,其实我们可以打开f12,选中box盒子看一下,右下加的盒子模型,是没有上外边距的值的,然后选中box2的第一个盒子,看到他的margin-top的效果穿透了父元素,相当于给父元素设置了margin-top,但这并不是我们要的效果;另外我们还发现,两个块元素上面的块元素设置了margin-bottom为10px,下面的块元素设置了margin-top:20px;我们想象的他们之间的距离应该是30px,但是途中的效果只有20px,目测

问题2:margin-bottom和margin-top的重合问题

上面的元素设置了margin-bottom,下面的元素设置了margin-top,会取最大值,称之为margin-bottom和margin-top的重合


解决穿透问题

    (1)将子元素的margin-top由父元素的padding-top替换

.box2{ width: 250px; height: 250px; background-color: grey; font-size: 0; padding-top: 10px;}

    (2)给父元素添加边框

.box2{ width: 250px; height: 250px; background-color: grey; font-size: 0;  border:1px solid #000;}

(3)给父元素添加over-flow:hidden

.box2{ width: 250px; height: 250px; background-color: grey; font-size: 0;  over-flow:hidden;/* 这里先知道这个属性,后面再讲*/}

利用margin实现居中

代码展示

.box{ width: 300px; height: 300px; background-color: grey; /*border:1px solid red;*/ overflow: hidden;}.box .inner{ width: 100px; height: 100px; background-color: orange; margin-left: 100px; margin-top: 100px;}/* html代码*/<div class="box"> <div class="inner"></div></div>

页面效果

css盒子模型3

盒子模型的宽和高

    宽=width+左右padding+左右的border

    高=height+上下padding+上下的border

    要想盒子不变形,在设置padding的时候,注意要宽高减去相应的内边距

    如果去掉<!DOCTYPE html>(代码第一行,可自己尝试)

        在IE低版本浏览器中

        盒子模型的宽=width

        盒子模型的高=height


margin是不影响盒子模型的宽和高的


注意:行内元素不支持上下的margin和padding


上节小作业讲解

代码展示

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <link rel="stylesheet" href="./作业.css"></head><body> <div class="box"> <h3>爱宠知识</h3> <!-- ul>li*10>a[###]{日本正宗柴犬} --> <ul> <li><a href="###">日本正宗柴犬日本正宗柴犬</a></li> <li><a href="###">日本正宗柴犬日本正宗柴犬</a></li> <li><a href="###">日本正宗柴犬日本正宗柴犬</a></li> <li><a href="###">日本正宗柴犬日本正宗柴犬</a></li> <li><a href="###">日本正宗柴犬日本正宗柴犬</a></li> <li><a href="###">日本正宗柴犬日本正宗柴犬</a></li> <li><a href="###">日本正宗柴犬日本正宗柴犬</a></li> <li><a href="###">日本正宗柴犬日本正宗柴犬</a></li> <li><a href="###">日本正宗柴犬日本正宗柴犬</a></li> <li><a href="###">日本正宗柴犬日本正宗柴犬</a></li> </ul> </div></body></html>

css文件


/* 去除默认样式的margin和padding值 */*{ margin: 0; padding: 0;}/* 去除ul中每个li前面的小黑点 */ul,li{ list-style: none;}.box{    border:1px solid #006600;/* 设置盒子的边框*/ background-color: #98c74c;/* 背景颜色*/ width: 260px;/* 宽度*/    padding: 10px;/* 盒子的上下左右的内边距,盒子内容到盒子边框的距离也就是内边距 */}.box h3{ font-size: 18px;/* 设置h3的字体大小 */    font-family: "微软雅黑";/* 设置字体样式 */    color: #ffffff;/* 设置字体颜色 */    height: 24px;/* 设置高度 */    line-height: 24px;/* 设置行高 */    border-left: 4px solid #c9e143;/* 设置h3的左边边框 */    padding-left: 6px;/* 设置h3的内边距,h3内容距离比那狂的距离 */    margin-bottom: 4px;/* 设置h3盒子底部外边距,相当于他占了这里的位置,其他元素要从这个距离后面开始显示 */}.box ul{    background-color: white;/* 背景色*/    padding-left: 10px;/* ul的左内边距*/    padding-right: 10px;/* ul的内边距*/}.box ul li{ height: 30px;/* 设置高度*/ line-height: 30px;/* 设置行高*/ border-bottom:1px dashed grey;/* 底部边框样式*/}.box a{ text-decoration: none;/* 去除a变迁下划线*/ font-size: 12px;/* 字体大小*/ color: #0099cc;/* 字体颜色*/}

效果图


list-style属性

默认情况下属性值是disc,也就是会有序列点和序列数,会继承给子代后代

属性值为none,去除序列点,list-style的更多用法可到菜鸟驿站等搜索

对比去除和不去除

<style> div .list{ display: inline-block; } .list1{ list-style: none; }</style>
<div> <ul class="list list1"> <li>内容1</li> <li>内容2</li> <li>内容3</li> </ul> <ul class="list list2"> <li>内容1</li> <li>内容2</li> <li>内容3</li> </ul> </div> <div> <ol class="list list1"> <li>内容1</li> <li>内容2</li> <li>内容3</li> </ol> <ol class="list list2"> <li>内容1</li> <li>内容2</li> <li>内容3</li> </ol> </div>

对比图


来自关注者的问题

<a href="../12-盒子模型的宽和高.html"></a>掘金开发者的社区

问题:为什么设置的伪类都没有效果

提示大家,写代码的时候,要知道,你的内容是放在标签里面的,虽然这个问题很简单,但是不得不提醒


感谢你的关注和阅读,还会提高质量的为大家更新,谢谢!


版权声明:本站内容全部来自于腾讯微信公众号,属第三方自助推荐收录。《css盒子模型3》的版权归原作者「前端小白学习」所有,文章言论观点不代表Lambda在线的观点, Lambda在线不承担任何法律责任。如需删除可联系QQ:516101458

文章来源: 阅读原文

相关阅读

关注前端小白学习微信公众号

前端小白学习微信公众号:gh_1546b3875e38

前端小白学习

手机扫描上方二维码即可关注前端小白学习微信公众号

前端小白学习最新文章

精品公众号随机推荐