[note] CSS 盒模型|居中

教程大全  / 只看大图  / 倒序浏览   ©

#楼主# 2020-2-12

跳转到指定楼层

马上注册,分享更多源码,享用更多功能,让你轻松玩转云大陆。

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

内容概述

一. 盒子模型

理解盒子模型:4个根本属性

  • content

  • padding

  • border

  • margin

224506zzh2ek18p01pbkxz.png

content 内容相干属性

  • width
    • min-width
    • max-width
  • height
    • min-height
    • max-height

padding 内边距相干属性

  • padding: 上右下左
  • padding:是padding-top、padding-right、padding-bottom、padding-left的简写属性
    • 按照顺时针方向设值:top、right、bottom、left
    • 如果缺少left, 那么left就使用right的值
    • 如果缺少bottom, 那么bottom就使用top的

margin 外边距相干属性

  • margin: 上右下左
  • margin:是margin-top、margin-right、margin-bottom、margin-left的简写属性
  • 上下margin的传递
    • margin-top传递(常见)
      如果块级元素的顶部线和父元素的顶部线重叠,那么这个块级元素的margin-top值会传递给父元素
    • margin-bottom传递(少见,一样平常都是设置top)
      如果块级元素的底部线和父元素的底部线重叠,而且父元素的高度是auto,那么这个块级元素的margin-bottom值会传递给父元素
    • 如何防止出现传递问题?
      • 给父元素设置padding-top\padding-bottom
      • 给父元素设置border
      • 触发BFC:
        • 1 设置overflow(设置为auto、hidden等都可,只要不是visible就可)
        • 2 浮动也可以触发
    • 建议
      margin一样平常是用来设置兄弟元素之间的间距
      padding一样平常是用来设置父子元素之间的间距
  • 上下margin的折叠
    • 垂直方向上相邻的2个margin(margin-top、margin-bottom)有大概会归并为1个margin,这种现象叫做collapse(折叠)
    • 水平方向上的margin(margin-left、margin-right)永远不会collapse
    • 折叠后终极值的计算规则:两个值进行比较,取较大的值
    • 如何防止margin collapse?
      • 只设置其中一个元素的margin
    • 块级元素折叠问题看似有点莫名其妙,实际上还是有实用之处的
      • 比如连续段落之间的margin,恰恰需要这种折叠效果

border

  • border: border-width border-style border-color

    • 边框颜色、宽度、样式的编写顺序任意
    • border-top、border-right、border-bottom、border-left
    • border:统一设置4个方向的边框
  • 边框的形状大概是

    • 矩形、梯形、三角形等形状
224507xhvb5khvek7rrt73.png
  • 224507f3ba1p7o8a8bd3uz.png
  • border实现其他效果

    • 比如三角效果

      224508pnvkdb5cfb8pk9pv.png
  • 第三种写法是我自己想的,不需要像第二种那样旋转,方便理解

CSS属性 -
  1. border-*-*-radius
复制代码

    1. border-*-*-radius
    复制代码
    • border---radius定义的是四分之一椭圆的半径
      • 第1个值是水平半径
      • 第2个值是垂直半径(如果不设置,就跟随水平半径的值)
    • 还可以设置百分比
      • 参考的是border-box的宽度
  • border-radius
  • border-radius大于或等于50%时,就会变成一个圆

行内级非替换元素的留意点

  • 以下属性对行内级非替换元素不起作用
    • width、height、margin-top、margin-bottom
  • 以下属性对行内级非替换元素的效果比较特别
    • padding-top、padding-bottom、上下方向的border

二、盒模型的其他属性

CSS属性 - outline

  • outline表现元素的外表面
    • 不占用空间
    • 默认显示在border的外面
  • outline相干属性有
    • outline-width
    • outline-style:取值跟border的样式一样,比如solid、dotted等
    • outline-color
    • outline:outline-width、outline-style、outline-color的简写属性,跟border用法类似
  • 应用实例
    • 调试技巧:查看网站的布局
        1. outline: 1px solid red !important
        复制代码
        ,outline不占空间,不会影响原布局,border会占据空间,导致格式变化
    • 去除 a/input/textarea 元素的focus表面效果
        1. outline: none
        复制代码

CSS属性 - box-shadow

  • box-shadow属性可以设置一个或者多个阴影
    每个阴影用

    1. <shadow>
    复制代码
    表现
    多个阴影之间用逗号
    1. ,
    复制代码
    隔开,从前到后叠加

    1. <shadow>
    复制代码
    的常见格式如下

      1. <shadow> = inset? && <length>{2,4} && <color>?
      复制代码
      ,&&表现可以不按顺序
    • 第1个
      1. <length>
      复制代码
      :水平方向的偏移,正数往右偏移
    • 第2个
      1. <length>
      复制代码
      :垂直方向的偏移,正数往下偏移
    • 第3个
      1. <length>
      复制代码
      :模糊半径(blur radius)
    • 第4个
      1. <length>
      复制代码
      :延伸距离
      1. <color>
      复制代码
      :阴影的颜色,如果没有设置,就跟随color属性的颜色
    • inset:外框阴影变成内框阴影(很少用到)
  • 练习:

    • 实现以下效果:左右都要有阴影
    224508u47nr99vzssplp4s.png
  • 方法一:(注释起来的)设置两个阴影

  • 方法二:

    1. box-shadow: 0 10px 10px 5px rgba(0, 0, 0, .2);
    复制代码

  • CSS属性 - text-shadow

    • 用法类似于box-shadow,用于给文字添加阴影效果
    • text-shadow同样实用于::first-line、::first-letter

CSS属性 - box-sizing

  • box-sizing用来设置盒子模型中宽高的行为

    • content-box:padding、border都布置在width、height外边(W3C标准盒子模型)
      • 元素的实际占用宽度 = border + padding + width
      • 元素的实际占用高度 = border + padding + height
    • border-box:padding、border都布置在width、height里边(IE8以下浏览器)
      • 元素的实际占用宽度 = width
      • 元素的实际占用高度 = height
    224508lj515np5rr5r5sro.png

元素的水平居中显示

  • 在一些需求中,需要元素在父元素中水平居中显示(父元素一样平常都是块级元素、inline-block)
    • 行内级元素、inline-block元素
      水平居中:在父元素中设置
      1. text-align: center
      复制代码
    • 块级元素
      水平居中:
      1. margin: 0 auto
      复制代码

实现元素靠左靠右

  • margin-left和margin-right的初始值为0,此时靠左
  • 将margin-left改为auto即为靠右

垂直居中

实现垂直居中父元素height必须是auto

作业

  • 讲堂代码
  • 作业一 - 商品列表 - 页码列表
  • 作业二: 考拉的导航右侧
224509huhkwx4x9997sxb7.png
  • 条记增补完善

提问

表单:

  • input中的name和value的作用
    • name会在浏览器 - 提交给服务器作为key
    • value平凡的input, button/radio/checkbox/option
  • form元素中的常见属性
    • action: 服务器地址(URL)
    • method: 哀求方式(get/post)
    • target: 打开方式
    • enctype
    • accept-charset

元素的分类:

  • 是否可以在同一行显示
    • 块级元素(block level)
    • 行内级元素(inline-level)
  • 是否会被浏览器替换掉
    • 替换元素(replaced elements)
    • 非替换元素(non-replaced elements)
  • display属性常见的值:
    • block
    • inline
    • none
    • inline-block特点
      • 可以和其他内容在同一行显示
      • 设置宽度和高度

img/input/iframe -> 替换元素 ->没有说过是inline-block

  • 可以在同一行显示
  • 可以设置宽度和高度

inline-block

  • 可以在同一行显示
  • 可以设置宽度和高度
  • 没有设置宽度和高度, 宽度和高度由内容决定

min: 最小

max: 最大

block -> block - block

inline -> inline - inline

inline-block -> inline - block

触发BFC

  • BFC: block format context
  • 结界

如何触发BFC:

  • 浮动可以触发
  • 设置一个元素的overflow为非visible
    • hidden
    • auto
    • scroll

content

  • 宽度和高度

padding

margin

border

分享淘帖
回复

使用道具

您的回复是对作者最大的奖励

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关于作者

13860587578

新手猿

  • 主题

    7

  • 帖子

    7

  • 关注者

    0

Archiver|手机版|小黑屋|云大陆 | 赣ICP备18008958号-4|网站地图
Powered by vrarz.com!  © 2019-2020版权所有云大陆