html+css+js 零基础入门系列课笔记(第三天)div+css布局课堂笔记-螺钉课堂

学的是什么?学会如何摆放盒子(div)的位置就可以了。

2019年1月14日

1 div+css布局?

关键词:盒子(套设计稿里的页面盒子) 位置
margin  : 外边距
padding : 内边距
float   : 浮动
border  : 边框
position: 位置
学的是什么?学会如何摆放盒子(div)的位置就可以了。

2 盒子模型

width:宽度
height:高度
border:边框
margin:外边距
padding:内边距
作用:摆放内容的位置
规律:border margin padding:都有四边(上下左右)
    border-left
    border-right
    border-top
    border-bottom

2.1 margin 外边距

    margin:0 auto;用来设置该盒子相对于外部大盒子的居中位置。
    margin:10px; (一个值为:上右下左都为10px)
    margin:10px 20px;(两个值为:上下10px,左右20px)
    margin:10px 20px 30px;(三个值为:上10px,左右20px,下30px)
    margin:10px 20px 30px 40px;(四个值为:上10px,右20px,下30px,左40px)

2.1.1 margin注意问题
    a.body有默认的margin,各浏览器或许不同。所以一般项目先把margin设置为0    
        <style>
            body{
                <!-- 将浏览器默认margin设置为0 -->
                margin:0;
            }
            .box{
                width:100px;
                ...
                ...
            }
        </style>
    b.如果设置了上下两个盒子的margin,会大的距离覆盖小的距离。(margin的塌陷问题)
    (即如果上方盒子设置margin-bottim:10px;下方盒子设置margin-top:20px; 则两盒子之间的距离最大只为20px)
    c.盒子居中( margin:10px auto;)

2.2 padding 内边距

    设置内部内容的摆放
    需求:让内部盒子相对于外部盒子向右移动50px 
    解决:1 内部盒子设置margin(外边距) 
         2 外部盒子设置padding(内边距:内部左边的填充物的宽度) 

    注意问题:设置了padding以后会把外部盒子撑大,影响整体的布局   
    外部盒子的总宽度:300(width)+padding-left/right(10+10)border-left/right(5+5)=330

    总结:就是如果盒子的总宽度受到了padding和border的影响,那么就将width减去两项的总和。
         即,撑大多少,就在width上减去多少。

2.3 块级元素和行内元素
    块级元素:div h1 p li 等等独占一行的,可以设置宽高的
    行内元素:span i a img 在一行内显示,一般不可以设置宽高
    行内元素转换成块级元素:转换之后就可以设置宽高
        dispaly:block  转换后会独占一行
        dispaly:inline-block 转换后不会独占一行 用途:设置span标签为块级元素设置宽高

–需时研究所Gpa–

打赏 帮助到大家 0

共有 0 条评论

You must be logged in to post a comment.