美文网首页
day4后半部分

day4后半部分

作者: 爱吃猫肉的老鼠 | 来源:发表于2017-10-24 16:46 被阅读0次

    遇到的新词和模糊不清的词

    Paddiig 内边距
    Line-height让一行文字在其所在的盒子里面居中:这只其行高为盒子高
    Margin:0 auto是让一个盒子再其父盒子里面上下居中。使用margin:0 auto
    Border-bottom:dashed 底虚线后边空格加px

    盒子的两种不同的特性

    div也叫块盒子,一个盒子占据一行(不管有多少内容)。大盒子
    span也叫行内盒子(通常放最终数据,文本,图片,),一个盒子中的内容会跟同类盒子并排放在一行出现,只有把一行填充满才完。小盒子
    特点:宽高不能设定,而是由其内容“撑出”,margin和padding没有上下方面的表现。

    浮动布局float right left
    浮动元素不占据正常普通的div位置,不影响内容
    布局初步 原理 盒子中放盒子 一个套一个 学会分析
    布局就是将网页内容放到合适的位置上
    布局的基本步骤
    将‘当前版面’视觉上的界限进行划分
    两种划分方式:
    1.上下结构,只要是若干盒子就是上下结构,无需设置
    2.左右结构:只要是若干盒子,进行相应的浮动,通常的模式
    1.两个盒子一左一右
    2.三个盒子两左一右或者两右一左,或者同一边
    3.更多盒子,通常一边倒

    浮动元素:

    浮动盒子跟普通的互不干涉,只是会互相相交,而且将自己的父盒子失去了合理的高度,父盒子已经包不住浮动盒子,所以要解决这个问题

    1.给父盒子设定一个合适的高度
    2.给父盒子的内部最末尾加一个清除浮动的空盒子,如下:<div style=”clear:both”></div>
    3.给父盒子设置一个css属性:overflow:hidden;

    最好总结:布局需要左右排列,左右排列需要浮动,浮动需要修正其破坏效果——让父盒子合理包住其子盒子。

    相关文章

      网友评论

          本文标题:day4后半部分

          本文链接:https://www.haomeiwen.com/subject/trlxpxtx.html