HTML系列----三大核心(盒子模型、浮动、定位)

CSS网页布局方法:
网页布局第一准则
多个块级元素纵向排列使用标准流,多个块级元素横向排列使用浮动流,先用标准流的父元素排列上下位置,之后内部子元素使用浮动排列左右位置。
1.标准流:标签按照规定好的默认方式排列
2.浮动流:可以改变元素标签默认的排列方式,即可以让多个块级元素排列在一行内显示

实际开发中,一般不直接使用a标签,而是用li标签包含a标签的做法,即


  • 盒子模型
    网页布局的过程:
    1.先准备好相关的网页元素,网页元素基本上都是由盒子构成。
    2.利用CSS设置好盒子样式,然后摆放到相应的位置
    3.往盒子里装内容

    盒子模型组成:

    border  边框
    1.border-width 边框的粗细
    定义
    div {
    border-width: 10px;
    }
    2.border-style 边框的样式(solid 实线、dashed 虚线、dotted 点线)
    定义
    div {
    border-style: solid;
    }
    3.border-color 边框的颜色
    定义
    div {
    border-color: red;
    }
    4.border-collapse 表格细线边框(合并相邻的两个边框)
    定义
    div {
    border-collapse: collapse;
    }
    5.边框属性代码简写:
    定义
    div {
    border: 10px solid red;
    }
    6.圆角边框
    div{
    # 简写
    border-radius: 10px;
    # 整体:border-radius:左上角 右上角 右下角 左下角;
    border-radius: 10px;
    }
    7.盒子阴影:
    box-shadow: 水平阴影位置(h-shadow、必需)+垂直阴影位置(v-shadow、必需)+模糊距离(blur、可选)+阴影尺寸(spread、可选)+阴影颜色(color、可选);
    div{
    box-shadow: 10px 10px 10px 10px rgba(0,0,0,.3);
    }
    8.文字阴影:
    box-shadow: 水平阴影位置(h-shadow、必需)+垂直阴影位置(v-shadow、必需)+模糊距离(blur、可选)+阴影颜色(color、可选);
    div{
    box-shadow: 10px 10px 10px rgba(0,0,0,.3);
    }
    9.边框四个边可以分开设定属性
    定义
    上边框
    div {
    border-top: 10px solid red;
    }
    下边框
    div {
    border-buttom: 10px solid red;
    }
    左边框
    div {
    border-left: 10px solid red;
    }
    右边框
    div {
    border-right: 10px solid red;
    }
    
    content  内容(文字、图片等)
    padding  内边距,控制内容与盒子之间的距离
    内边距简写:
    定义
    div {
    #上下左右都是10px
    padding: 10px;
    #上下5px,左右10px
    padding: 5px 10px;
    #上5px,左右10px,下20px
    padding: 5px 10px 20px;
    #上5px,右10px,下20px,左30px,顺时针
    padding: 5px 10px 20px 30px;
    }
    margin  外边距,控制两个盒子之间的距离,左右边距设置为auto即是水平居中
    外边距简写:
    定义
    div {
    #上下左右都是10px
    margin: 10px;
    #上下5px,左右10px
    margin: 5px 10px;
    #上5px,左右10px,下20px
    margin: 5px 10px 20px;
    #上5px,右10px,下20px,左30px,顺时针
    margin: 5px 10px 20px 30px;
    #水平居中(只限块级元素)
    margin: 0 auto;
    #水平居中(行内元素或行内块元素只要在父元素加上text-align:center)
    text-align: center;
    }
    

    解决相邻块元素垂直外边距的合并问题:
    尽量只给一个盒子给外边距就可以了。
    注:浮动的盒子不会有外边距合并的问题产生
    解决嵌套块元素垂直外边距的塌陷问题:
    在父元素上添加‘overflow: hidde’,或者给大盒子添加内边距/边框都可以解决此问题

    清除默认内外边距

    * {
    padding: 0;
    margin: 0;
    }
    

    行内元素为了照顾兼容性,尽量只设置左右内外边距,不要设置上下内外边距。但转换为块级或行内块级则可以。

    浮动
    浮动特性:
    1.浮动元素会脱离标准流(脱标),浮动元素不再保留原先的位置
    2.浮动元素会在一行内显示,并且元素会在顶部对齐
    3.浮动元素具有行内块元素的特性(即只要添加了浮动就会使标签转换成行内块元素)

    语法:
    选择器{float:属性值;}
    属性值有:noen(不浮动,默认)left(元素向左浮动)right(元素向右浮动)
    

    为什么需要清除浮动:
    由于父盒子在很多情况下,不方便给高度,但子盒子浮动后又不占位置,最后父盒子的高度就会变成0,会影响下面的标准流盒子。

    语法:
    选择器{clear:属性值;}
    属性值有:both(同时清除左右两侧浮动的影响)left(清除左浮动影响)right(清除右浮动影响),实际工作中使用both
    

    清除浮动的方法有:
    1.额外标签法,也称隔墙法,W3C推荐用法;即在浮动盒子最后面添加一个空的块元素
    2.父级添加overflow属性;overflow属性可以设置为hidden、auto、scroll。
    3.父级添加after伪元素;把以下css代码复制到相应网页中,然后在父标签中添加clearfix即可。百度、淘宝都在用。

    语法:
    clearfix:after {
    	centent: "";
    	display: block;
    	height: 0;
    	clear: both;
    	visibility: hidden;
    }
    clearfix { /*IE6、7专用*/
    	*zoom: 1;
    }
    

    4.父级添加双伪元素;把以下css代码复制到相应网页中,然后在父标签中添加clearfix即可。小米、腾讯

    语法:
    clearfix:before,
    clearfix:after {
    	centent: "";
    	display: table;
    	}
    clearfix:after {
    	clear: both;
    	}
    clearfix { /*IE6、7专用*/
    	*zoom: 1;
    	}
    

    定位
    可以让某一个盒子自由的在另一个盒子中移动或者固定一个盒子在屏幕中使其不随滚动条的移动改变其位置,并且可以压住其他的盒子。

    定位的组成:定位模式+边偏移
    定位模式:通过CSS的position属性来设置
    静态定位(static):默认的定位模式
    相对定位(relative):相对于自己原来的位置来移动的,不脱标,继续保留移动前的位置,主要用于限制绝对定位。
    绝对定位(absolute):如果元素有绝对定位,但是其父元素没有定位属性或没有更上一级的父元素,则会以浏览器为准定位;如果父级元素都有定位(相对、绝对、固定),则以最近一级父元素为准移动位置;绝对定位脱标,不占用原先位置,且会压住所有盒子。
    固定定位(fixed):元素的位置相对于浏览器窗口是固定位置。
    边偏移:
    top:定义元素相对于父元素的上边线的距离,top:80px
    bottom:定义元素相对于父元素的下边线的距离,bottom:80px
    left:定义元素相对于父元素的左边线的距离,left:80px
    right:定义元素相对于父元素的右边线的距离,right:80px
    定位布局-子绝父相:
    因为父级元素需要占有位置,因此使用相对定位,子元素不需要占有位置,所以使用绝对定位

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值