盒模型+float浮动元素+position定位

盒子模型

盒子模型:组成网页的每一个元素,主页面上的表现形式都是一个矩形(所占的位置是一个矩形),这一个个的矩形都叫做盒子(因为每一个矩形都会装有内容)
盒子模型是用来描述每一个元素之间的位置关系,和盒子本身的大小属性

元素和css属性分为两种:

  • 内置属性:元素天生自带的css属性
  • 自定义属性:人为添加给元素的css属性,自定属性的属性
    组成
    盒子模型由外边距,边框, 内边距和内容组成,
    其中外边距,边框,内边距都是四个方向,内容只有宽高。
    每一个元素都有自己的内置样式,在编辑页面样式之前需要将这些内置样式统一重置,保证页面样式的正常显示
  • 组成:content+padding+border+margin

    • content:width和height —-内容的宽度和高度
    • padding: 内边距,有四个方向
    • border:边框,边框只有宽度没有长度(高度)
    • margin:外边距,盒子与盒子之间的距离,有四个方向margin的数值可以设置为负数
    • 上下排布的两个盒子,上面的盒子有margin-bottom值,下面的盒子有margin-top值,那么这个两个值同时出现的时候,会发生margin值叠加(两个值取最大值)
    • 父子元素嵌套关系的时候,如果父级元素没有padding或border,子级元素设置margin-top值的时候,那么子级元素的这个值会传递给父级元素
      • 给父级元素添加 overflow:hidden;属性
      • 给父级元素添加border-top值或者padding-top值
        1、 外边距
        外边距:盒子与盒子之间的距离,用css属性margin表示,margin有四个方向,分别是
    • margin-top:上外边距
    • margin-right:右外边距
    • margin-bottom:下外边距
    • margin-left:左外边距

    margin值可以是数字、百分比、em、rem、并且
    margin值支持负值


margin的缩写:
  • margin:10px 20px 30px 40px;上右下左
  • margin:10px 20px 30px;上 左右 下
  • margin:10px 20px;上下 左右
  • margin:10px;四个方向数值一致
    外边距的兼容内容
  • 当上面的盒子有下外边距,下面的盒子有上边距时候,两个值只有最大值起作用
  • 子级盒子的上边距会传递给父级盒子(指的是有包含关系的所有盒子),当父级盒子没有内边距或外边距的时候,就会出现这个问题
  • 解决方式:
    • 给父级元素添加overflow:hidden;(溢出隐藏)属性
    • 给父级元素添加内边距或边框属性
    • 将子元素的margin top值变为父集元素的padding-top值【最优选项】

2、边框
边框:在内边距和外边距之间,包裹盒子的四个防线的线条

  • 边框有四个方向 上 右 下 左
  • 边框可以设置颜色
  • 边框可以设置不同的样式
属性描述
border-top-width上边框的宽度
border-top-color上边框的高度
border-top-style上边框的样式
border-top:1px solid red上边框宽度样式颜色【右,下,左边框同上】
border-width:10px 20px 30px 40px上右下左四个方向的边框宽度
border-color:red yellow green pink上右下左四个方向的边框颜色
border-width:10px 20px 30px上 左右 下的边框宽度
border-width:10px 20px上下 左右的边框宽度
border-width:10px四个方向的边框宽度
border:10px solid red;四个方向的宽度 颜色 样式都一致

利用border的transparent透明(边框颜色透明),利用边框制作三角形

div{boder-width:30px;
    boder-color: red transparent transparent;
    boder-stylesolidwidth:0;
    height:0;
    }

3、内边距
内部距:边款距离内容之间的距离
padding有四个方向,分别是

  • padding-top:上内边距
  • padding-right:右内边距
  • padding-bottom:下内边距
  • padding-left:左内边距

    padding值可以是数字、百分比、em、rem、并且
    margin的缩写:

    • padding:10px 20px 30px 40px;上右下左
    • padding:10px 20px 30px;上 左右 下
    • padding:10px 20px;上下 左右
    • padding:10px;四个方向数值一致

4、内容
内容(content)分别有两个属性来代表

  • 宽度 width 数字 百分比 rem em
  • 高度 height数字 百分比 rem em

5、如何计算盒子的大小

  • 盒子的宽度=内容的宽度+左右内边距+左右边框宽度
  • boxWidth=width+(padiding-left)+(padding-right)+(borde-left-width)+(border-right-width)
  • 盒子的高度=内容的高度+上下内边距边距+上下边框宽度
  • boxHeight=height+(padding -top)+(padding-bottom)+(padding-top-width)+(border-bottom-width)
<style>
.box{width:100px;padding:10px 20px 30px;boder-width:20px 50px;boder-style:solid;magin-bottom:10px;}
</style>
计算:
boxWidth=100+20+20+50+50
boxHeight=0+10+30+20+20

* BFC IFC*
1、BFC块级盒子的渲染模式
块级元素的特点:

  • 从父级元素的左上角开始排列,每个元素都独占一行
  • 可以直接设置盒子模型的所有属性
  • 不设置宽度和高度的时候,宽度是父级元素内容的宽度,高度是本身内容的高度
  • 可以嵌套所有元素
    • ul和ol里面嵌套的第一层级需是li
    • dl里面嵌套的第一层级需是dt和dd
    • p标签里面不能嵌套任何的块级元素

      块级盒子如何在页面中排布

      • 盒子从父级盒子的左上开始
      • 垂直排布
      • 如果遇到上下margin值的时候,会发生margin值的折叠
      • 所有BFC渲染的盒子都是基本流(文档流)内的盒子
        block formatting context

块级元素有

12345678
divulollidtddh1-h4p
2、IFC行内盒子的渲染模式 行内元素的特点:
  • 从父级元素的左上角开始排列,每个元素都是从左到右在一行显示,达到父级元素最大宽度的时候,自动折行
  • 不能设置宽度,高度,设置margin和padding上下值的时候,浏览器可以识别但是不起作用
  • 宽度高度默认是本身内容的宽高
  • 行内元素不嵌套块级元素
  • 行内元素因为元素之间的空格或者回车影响,在显示的时候,盒子和盒子之间会有间距
  • 行内元素的垂直对齐方式是基线对

    行内盒子如何在页面中排布
    inline formating context

  • 盒子从父级盒子的左上开始
  • 横向排布,达到父级宽度的最大值,自动折行
  • 不能设置宽度,高度,设置padding-top,padding-bottom,margin-top,margin-bottom的时候可以识别但是不

行内元素有
12345678
abspanimginputselectstrongi
3、inline-block行内块级元素的特点:
  • 从父级元素的左上角开始排列,每个元素都是从左到右在一行显示,达到父级元素最大宽度的时候,自动折行
  • 可以直接设置盒子模型的所有属性
  • 在不设置宽高的时候,宽度高度是由内容决定的
  • 会因为元素之间的空格或者回车的影响,显示的时候,盒子和盒子之间会有间距
  • 垂直对齐方式是基线对齐
    基线对齐:是指小写x的底部,只作用在行内元素和行内块级元素上

display以什么样的方式显示元素

属性值描述
block块级
inline行内
inline-block行内块级元素
none没有
list-item列表项目[列表队列]
table表格
table-cell表格项
ul{display:table}
li{display:table-cell}

行内元素和快级元素的区别,让行内元素改为快级元素
1、行内元素与块级元素直观上的区别

行内元素会在一条直线上排列,都是同一行的,水平方向排列

块级元素各占据一行,垂直方向排列。块级元素从新行开始结束接着一个断行。

2、块级元素可以包含行内元素和块级元素。行内元素不能包含块级元素。

3、行内元素与块级元素属性的不同,主要是盒模型属性上
行内元素设置width无效,height无效(可以设置line-height),margin上下无效,padding上下无效

行内元素转换为块级元素:display:block
(字面意思表现形式设为块级)

基线对齐是指同级元素之间的垂直对齐方式
vertical-align:baseline

属性值描述
baseline基线对齐
top顶部对齐[兄弟元素之间最高的那个元素的顶部对齐]
bottom底部对齐[兄弟元素之间最高的那个元素的底部对齐]
middle中部对齐[兄弟之间最高的那个元素的中部对齐]

如果想要改变基线对齐方式,那么需要给每一个改变的元素都添加上这个属性
想要改变对齐方式需要给每个元素身上重新设置这个属性

overflow溢出
在html中盒子里面的内容是允许大于盒子的,那么多出的部分默认会出现在盒子的右侧和下方,溢出的部分可以通过这个属性选择不同的展现形式

属性值描述
hidden隐藏[超出盒子的部分不显示]
auto自动识别[哪个方向内容溢出,那么哪个方向就会出现滚动条]
scroll出现滚动条[无论是否溢出,都会出现滚动条]
visible默认状态
inherit从父元素属性上继承属性值

水平对齐方式
text-align:left/center/right

  • 这个属性需要放在一个宽度大于内容的盒子身上
  • 可以直接控制文字、行内元素、行内块级元素
  • 文字的水平对齐

    • 左对齐 text-align:left;
    • 居中对齐 text-align:center;
    • 右对齐 text-align:right;

    这个属性需要给有宽度的元素上

  • 盒子的水平对齐

    • 行内或行内块级元素的对齐方式
      • 左对齐 text-align:left;
      • 居中对齐text-align:center;
      • 右对齐 text-align:right;

    这个属性需要给宽度的元素上

  • 块级元素的对齐方式
    • 给这个块级元素宽度,并且margin:0 auto;左右值为auto即可,那么这个块级元素就会在其父级元素内水平居中
  • 用css实现水平垂直居中
    水平垂直居中的实现分为两大内容:高度随内容自适应变化固定高度

    固定高度实现水平垂直居中
    1、 方法一:

    是使用height+line-height的方式,设置同样的值,配合text-align的使用,即可实现文本的水平垂直居中对齐

    <div class="container">chenhui</div>
    .container{
       width: 300px;
       height: 300px;
       line-height: 300px;
       text-align: center;
       border: 1px solid red;
    }

    缺点:固定高度,无法实现两行文本的垂直居中对齐

    2、 方法二:

    使用绝对定位的方法,配合margin负值使用。可以实现元素的水平垂直居中效果。

    <div class=".container">chenhui</div>
    .container{
       position: absolute;
       left: 50%;
       top: 50%;
       margin-left: -150px;
       margin-top: -150px;
       width: 300px;
       height: 300px;
       border: 1px solid red;
    }
    
    .container{
        position: absolute;
        margin:auto;
        left:0;
        top:0;
        right:0;
        bottom:0;
    }
    /*可自适应*/

    还可以使用CSS3的calc函数简化上面的CSS代码

    .container{
       position: absolute;
       left: calc(50% - 150px);
       top: calc(50% - 150px);
       width: 300px;
       height: 300px;
       border: 1px solid red;
    }

    缺点:固定高度,高度无法自适应内容。元素脱离文档流。

    * 高度自适应实现水平垂直居中*
    1、 方法一
    CSS3中有transform属性,此属性下有一个translate移动函数,此函数接受两个函数。如果两个参数都为百分比值,此时会基于自身宽度和高度进行移动。此函数移动的机制同position:relative相似。

    <div class="container">chenhui</div>
    .container{
       position: absolute;
       top: 50%;
       left: 50%;
       transform: translate(-50%,-50%);//自身宽度和高度的一半
       border: 1px solid red;
    }

    优点:无需定高度。高度随内容自适应。

    2、方法二
    可以使用 margin来实现水平居中对齐,而无法使用margin实现垂直居中的原因在于margin的百分比值是基于宽度计算的

    <div class="container">chenhui</div>
    .container{
        width: 300px;
        margin: 50% auto 0;
        transform: translateyY(-50%);
    }

    上面代码中,由于百分比是基于父元素(此时的元素为body元素)的宽度计算的,所以此时的50%加上translate负值不一定实现垂直居中。

    但是,CSS中存在一个vh(视口高度),也就相当于DOM中document.body.clientHeight或者document.documentElemnet.clientHeight的高度,1vh=1%,即1vh等于视口高度的1%。vh单位的浏览器兼容问题。下面代码即可实现水平垂直居中效果。

    <div class="container">chenhui</div>
    .container{
       width: 300px;
       magin: 50vh auto 0;
       transform: translateY(-50%);
       border: 1px solid red;
    }

    3、方法三
    CSS3中存在flex布局(伸缩布局模型,也叫弹性布局模型)。

    <div class="container">
       <div class="inner">
           <p>chen hui</p>
       </div>
    </div>
    .container{
       display: flex;
       height: 100vh;
    }
    .inner{
       margin: auto;
    }

    当我们使父元素display:flex时,margin: auto不仅可以水平居中,也能够实现垂直居中。这是因为auto外边距会平分或垂直方向上的额外空间

    还可以使用justify-content: center来定义弹性项目主轴的对齐方式,align-items:center来定义弹性项目侧轴的对齐方式

    <div class="container">
      <div class="inner">
         <p>chenhui</p>
      </div>
    </div>
    .container{
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
    }

    4、方法四
    使用display:table来模拟表格,并给子集元素设置display:table-cell,让其成为表格的某个单元格,同时设置vertical-align:middle,即可实现垂直居中布局

    <div class="container">
      <div class="inner">chenhui</div>
    </div>
    .container{
       display: table;/*让div以表格的形式渲染*/
       width: 100%;
       border: 1px solid red;
    }
    .inner{
      display: table-cell;/*让子元素以表格的单元格形式渲染*/
      text-align: center;
      vertical-align: middle;
    }

    margin:0 auto;让块级元素在父级元素内居中显示

    • 控制有宽度块级元素
    • margin的第一值不会起到居中的左右
    • auto左右自适应

    文字的垂直对齐方式
    文字在一定高度内垂直居中line-height

    单行文字超出部分省略号代替

    <style>
    p{
       overflow:hideen;/*盒子溢出隐藏*/
       text-overflow:ellipsis;/*多余根本的展现形式 ellipsis省略的意思*/
       white-space:nowrap;/*文本不换行 nowrap不换行的意思*/
     }
    </style>

    多行文字超出部分省略号代替

    <style>
    <p class="text"></p>
    移动端可以使用该方法 或者是webkit内核浏览器可以使用
       .text{ display: -webkit-box;
       -webkit-box-orient: vertical;
       -webkit-line-clamp: 3;
       overflow: hidden;}
     </style>

    float【浮动】

    属性值描述
    left从左到右依次在一行显示
    right从右到左依次
    none不浮动
    inherit从父级元素的该属性中继承

    浮动最初的作用是为了实现文字该围绕盒子的排版
    文档流:就是块级元素和行内元素默认的排布方式
    脱离文档流:文档流内的正常元素识别不到这个元素了(脱离文档流的元素相当于平行漂浮在文档流之上)

    浮动元素的特点:

    • 脱离文档流
    • 设置属性值为left时,浮动元素会依次从父级盒子的左侧向右排布,设置属性值为right时,设置属性值为right时,浮动元素会依次从父级盒子的右侧向左侧排布
    • 可以直接设置盒子模型的所有属性
    • 不设置宽度高度的时候,宽高是本身内容的宽高
    • 浮动元素内的子元素,不会继承浮动属性,还是按照BfC和IFL模式进行排版
    • 在遇到父级盒子宽度最大值的时候,会自动折行

    解决文档流元素不识别浮动元素的方法

    • 给浮动的元素的父级元素添加固定的高度
    • 给浮动的元素的父级元素添加溢出隐藏的属性
    • 在后面一个浮动后面添加一个快级元素,这个块级元素带有clear:both;属性
      • clear清除浮动元素对文档流内的元素的影响(可以让文档流内的元素识别到浮动元素的高度)
        • left清除float为left的影响
        • right清除float为right的影响
        • both清除float所有的影响
        • inherit从父级元素上继承该属性值

          带有clear属性的元素需要有一下几点:
          元素不能带有浮动属性
          元素需要是快级元素
          元素必须放在最后一个浮动元素的后面
          用户是看不到这个元素


    让盒子在视野中消失
    • visibility:hidden —-盒子看不到,但是盒子所占的大小依然还在
    • display:none —-盒子完全从页面中消失
    • opacity:0 —-透明度度为0(完全透明)

    visibility: visible 设置对象可视
    hidden: 设置对象隐藏
    collapse: 主要用来隐藏表格的行或列。隐藏的行或列能够被其他内容使用。对于表格外的其他对象,其作用等同于hidden。IE6及以下不支持此参数值

    zoom

    是专门兼容ie浏览器的,有上升的作用

    *zoom:1;/*只有ie7可识别*/
    /*
    *属性名 的方式是 css属性名hack
    “*” 是用来兼容ie7版本浏览器
        normal:使用对象的实际尺寸。
        <number>:用浮点数来定义缩放比例。不允许负值
        <percentage>:用百分比来定义缩放比例。不允许负值
    */

    清除浮动

    浮动元素的父级选择器{*zoom1;}
    浮动元素的父级选择器:after{
    display:block;
    content:'';
    clear:both;
    }
    多个一样时
    .clearfix{*zoom:1}
    .clearfix:after{
    display:block;
    content:"";
    clear:both;
    height:0;/*如果是在ie低版本浏览器下展示,有时候浏览器会默认空元素有1px的高度*/
    visibility:hidden;/*为了防止元素内有内容显示出来*/
    }
    /*ie低版本是指ie6 7 8*/

    定位

    相对定位:position:relative;
    元素通过上下左右四个方向的数值来改变,该元素在页面上的位置
    参照物是这个元素本身的位置;
    特点:

    • 参照物是元素本身的位置;
    • 没有脱离文本流;
    • 当top和bottom同时有值的情况下,top值生效;
    • 当left和right同时有值的情况下,left值生效;
    • 任何元素都可以设置相对定位属性;
    • 属性值支持负值
    • 相对定位元素位移发生改变,但是元素原来的位置还会被占用,其他元素还是正常识别这个元素原来的位置

    绝对定位absolute
    特点:

    • 脱离文档流
    • 可以设置参照物,参照物必须是其父级元素(直系父级)
    • 如果是同一参照物,所有定位元素都会找同一个起点
    • 可以设置层级关系
      参照物:

    • 默认参照物是盒子在画布出现的第一位置

    • 自定参照物:
      • 参照物需是直系父级元素
      • 参照物需是带有定位元素
        绝对定位元素
    • 有宽度和高度的情况下,top和bottom同时有值,top生效;left和right同时有值,left生效;
    • 没有宽度的情况下:top和bottom同时设置的情况下,会将在这个盒子拉大,上下值都起作用,左右同理

    固定定位
    特点:

    • 脱离文档流
    • 参照物是浏览器的可视窗口
    • 任何元素都可以设置固定定位

    定位元素的层级关系

    • 默认是书写顺序在后的定位元素覆盖在顺序前的定位元素
    • 可以使用在z-index属性修改定位元素的层级关系
    • 所有定位元素的z-index默认值都是一样的
    • z-index值是数字没有单位,支持负数
    • 一般都是同级进行层级的比较
    • 当参照物是相对定位或绝对定位的时候,父级元素之间没有z-index值,子级元素的z-index值会出来比较

      脱离文档的元素都有共同的特点

    • 不分行内和块级元素,只要脱离文档流就可以直接设置盒子模型的所有属性
    • 宽高不设置的时候,默认是本身内容的宽高
    • 浮动元素,绝对定位,固定定位元素脱离文档流

    【定位】有一个高度自适应的div,里面有两个div,一个高度100px,希望另一个填满剩下的高度。

        <div class="outer">
              <div class="A"></div>
              <div class="B"></div>
        </div>
    
    
    html,body {
       height: 100%;
       padding: 0;
       margin: 0;
     }
    .outer {
       height: 100%;
       padding: 100px 0 0;
       box-sizing: border-box ;
       position: relative;
     }
    .A {
       height: 100px;
       background: #BBE8F2;
       position: absolute;
       top: 0 ;
       left: 0 ;
       width: 100%;
    }
    .B {
       height: 100%;
       background: #D9C666;
    }

    用css 实现元li素两对其
    1、给ul,li设置宽度,li的css display:inline-block,通过margin来实现

    2、方案一:

    ul{text-align:justify;}
    li{display:inline-block;}

    3、方案二:通过flex来实现

    ul{
                list-style: none;
                width: 300px;
                display: flex;
                display: -webkit-flex;
                justify-content:space-between;/*决定子元素两端对齐,均匀间隔*/
                align-item:center;/*决定子元素垂直居中*/
                flex-wrap: wrap;/*子元素超出换行,默认是不换行的,当子元素的宽由flex决定时会失效*/
            }
    li{
                flex:1;
                height: 50px;
    }

    4、方案三:

    ul{overflow: hidden;}
    li{
        float: left;
        width:320px;
        height: 200px;
        background: #ccc;
        list-style: none;
        margin-right: 20px;
        margin-bottom: 20px;
    }
    li:nth-child(3n){
        margin-right: 0;
    }

    px,em,rem的区别
    1、 px
    px 像素(Pixel)。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。
    px的特点:

    • (1)、IE无法调整那些使用px作为单位的字体大小;
    • (2)、国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位;
    • (3)、Firefox能够调整px和em,rem,但是96%以上的中国网民使用IE浏览器(或内核)。

    2、em
    em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人未设置,则相对于浏览器的默认字体尺寸。
    em特点

    • (1)、em的值并不是固定的;
    • (2)、em会继承父级元素的字体大小

    注意:

    任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合:1rem=16px。那么12px = 0.75em, 10px = 0.625em。 为了简化font-size的换算,需要在css中的body选择器中声明Font-size=62.5%,这就是rem值变为16px*62.5% = 10px,这样12px=1.2em,10px=1em,也就是说只需要将你的原来的px数值除以10,然后换上em作为单位就行了。
    所以我们在写CSS的时候,需要注意两点:

    • (1)、body选择器中声明Font-size = 62.5%;
    • (2)、将你的原来的px数值除以10,然后换上em作为单位;
    • (3)、重新计算那些被放大的字体的em数值。避免字体大小的重复声明。
      也就是避免1.2*1.2 = 1.44的现象。比如你在#content中声明了字体大小为1.2em,那么在在声明p的字体大小时就只能1rem,而不是1.2em,应为此em非比em它因继承#content的字体高而变为1em=12px。

    3、rem
    rem是CSS3新增的一个相对单位(root em, 根em),这个单位引起了广泛关注。这个单位与em有什么区别呢?区别在于使用rem元素设定大小时,任然是相对大小,但相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身,通过它既可以做到只修改根元素就成比例地调整所有字体大小,由可以避免字体大小逐层复合的连锁反应。目前,除了ie8及更早版本外,所有浏览器均可以支持rem。对于不支持的

    p{font-size:14px;font-size:.875rem;}

    注意:选择使用什么字体单位主要由你的项目来决定,如果你的用户群都是最新版的浏览器,那推荐使用rem,如果要考虑兼容性,那就使用px,或者同时使用。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值