• 第三章 盒模型与布局相关属性


    1、CSS盒模型

    释义:网页中所有元素都可以看作是一个盒子。
    作用:盒内样式修饰、盒子位置布局
    组成:外边距margin、内边距 padding、边框border
    方向:上top、右right、下bottom、左left

    2、盒模型三维立体层次结构【从上到下】
    (第一层)边框border
    (第二层)元素内容content和内边距padding
    (第三层)背景图片层background-image
    (第四层)背景颜色层background-color
    (第五层)外边距margin

    3、外边距:margin
    margin-top 上边界
    margin-right 右边界
    margin-bottom 下边界
    margin-left 左边界
    (1)可以分别设置,也可以一起设置。
    (2)只有一个值表示四边外边距一样;两个值表示【上下】、【左右】;四个值表示:上、右、下、左。
    (3)margin:0px auto; 块级元素水平居中 | 行级元素效果为上左边界为0px.

    外边距的问题(尽量少用):

    (1)上下外边距会叠压

    (2)父级包含子级时,子级的margin-top会传递给父级(建议使用父级的内边距替代外边距)

    4、边框:border:border-color颜色、border-width宽度、border-style线型、border-radius边框弧度
    border-top 上边框
    border-right 右边框
    border-bottom 下边框
    border-left 左边框 【transparent隐藏边框】

    可以分别设置,也可以一起设置。都有color、width、style属性。【border-style是边框线型,常用属性值为:solid实线、dashed虚线】

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

    可以分别设置,也可以一起设置。只有一个值表示四边内边距一样;两个值表示【上下】、【左右】;四个值表示:上、右、下、左。

    6、元素的实际宽高[元素的实际占位]
    盒子高度 = height属性 + 上下填充高度 + 上下边框高度
    盒子宽度 = width属性 + 左右填充宽度 + 左右边框宽度
    【填充指的是内外边距】

    7、display

    none:不显示不占位置            ——与visibility的hidden比较    隐藏效果

    block:块级元素效果  inline:行及元素显示  ——与visibility的visible比较    显示效果

    inline-block:行块级元素效果。块级元素在一行显示,支持行内元素设置宽高,换行解析。不设置宽度由盒子内容撑开,IE6-7↓不支持。                    ——与float比较内容不设置宽度由内容撑开。提升半层   vertical-align: middle;垂直居中

    8、浮动属性——float
    ?默认的常规文档流:页面内容从上到下,从左到右排列。
    ?要使得DIV块换行显示,向右浮动,脱离常规文档流,使用浮动属性。
    ?属性值为:left(设置元素左浮动)、right(设置元素右浮动)、none(默认值不浮动)。
    ?浮动的三大显著特征
    ?DIV块元素失去“块状”换行显示特征,变为行内元素。
    ?紧贴上一个浮动元素(同方向)或父级元素的边框,如宽度不够将换行显示。
    ?占据行内元素的空间,导致行内元素围绕显示。

    注:父块不设置高度,子块浮动,父块相当于无内容。解决办法:

    (1)父级设置固定宽高

    (2)同级元素设置margin-top

    (3)子元素后添加清除浮动的空标签【IE6及以下,不设置高度的空白div(高度低于19px的div没有)空div在页面显示空块。设置font-size:0;可以消除,还剩两个像素的边框需要消除。】

    (4)设置伪类清除浮动,父级其后清除浮动→.parent:after{ display:block;clear:both;content:"" }  bat公司常用来清除的方法,兼容 ie8以上的版本浏览器

     (5)子元素后利用<br clear="all"/>清除浮动。

    9、清除属性——clear【清除浮动】
    ?clear作用
    如果前一个元素存在左浮动或右浮动,则换行以区隔(使浮动换行);只对块级元素有效。
    ?clear属性的取值
    ?right 在左边不允许有浮动元素
    ?left 在右边不予许有浮动元素
    ?both 在左右两侧都不允许有浮动元素
    ?none 默认值,允许两侧有浮动元素

    10、定位属性——position用于设置目标对象的定位方式
    ★absolute(绝对定位)——允许漂浮于页面上,相对于浏览器页面,不保留位置;【移动物】
    ★relative(相对定位)——相对定位,相对于原位置,保留原位置;        【 参考物】
    ★static(静态定位)——仅以页面作为参考(默认普通文档流方式)。
    ★fixed(绝对相对定位)——可以让元素漂浮于网页上层。

    ◇z-index设置漂浮层的层序,值越大漂浮层越浮于上面。前提是设置了absolute!
    例:div { position:absolute; z-index:3; 6px; }

  • 相关阅读:
    8.【原创】使用Java8中的Stream特性筛选数据
    27.【转载】如何避免回表查询,什么是索引覆盖
    17.【转载】广东省2020学位英语考试报考须知
    Java 正则?:?=?!的理解
    集合的优化操作
    ArrayList中remove方法和set(null)的区别
    POI 导入、导出Excel
    JS 跳转到新页面并用post传参
    win 10 如何关闭自动更新
    JSON定义及应用
  • 原文地址:https://www.cnblogs.com/suola/p/8275807.html
Copyright © 2020-2023  润新知