2020.4.8盒模型

发布于 2020-04-08  8 次阅读


1.复习内容

2.灵感代办

3.学习内容

一、标签分类及嵌套

  • 1.标签分类:

    标签如果没有内容,设置的元素不会生效

    • 块元素 block 可以手动设置宽高 div p table ol ul
    • 行内元素 inline 大小由内容决定 a b em ,但是可以决定border等
    • 行内块元素 inline-block 两者特点共存 input img
    • vertical-align:bottom 调整的是左右元素与当前元素的垂直对齐
    • css的块元素,行内元素,行内块元素都是由display(inline,block,inline-block)来控制
  • 2.标签嵌套

    • 块元素可以嵌套任何元素 p只能嵌套行内元素
    • 行内元素尽量只嵌套行内或者行内块

二. 尺寸及颜色

  • 1.尺寸单位

    • px:默认单位,指定像素
    • %:百分比单位,大部分是参照父元素计算属性
    • em:相对单位,表示字体大小,参照父元素的字体大小。默认1em=16px
    • rem:root 参照根元素的字体大小计算
  • 2.颜色表示

    • 英文单词
    • rgb函数表示 三原色设置(红绿蓝)
    • rgba是可以透明(0-1)
    • 颜值进制值

三、盒模型

  • 元素是由各种框组成的(内容框content,边框border,边距padding/margin)设置每一项内容,都影响元素布局
  • 1.盒子模型:

    • 外边距margin,边框border,内边距padding,内容element
  • 2.内容框设置

    • 大部分元素设宽高就是设置内容文件(按钮是带有边距值)
    • 内容溢出:元素的内容超出元素设置尺寸,使用属性overflow处理溢出,overflow的可选值:
      • visible(默认),
      • hidden(隐藏),
      • scroll(强制水平垂直添加滚动条)
      • auto(自动在发生溢出的方向添加滚动条)
  • 3.border设置

    • border: width style color (必须要先设置style 然后在设置width才有效果)
    • 边框样式 style (sloid实线 datted点线,dashed虚线,double双线)
    • 边框颜色有交集,就是平分,网页三角标就靠border来拼接(一个正方形,设置一块有颜色,其余为透明)
    • 轮廓线:轮廓线在文档中不占位,边框是实际占用的
      • 常用的只有一条outline:none
      • outline : width style color;
      • outline:none; //取消文本框焦点状态下的轮廓线
    • 边框圆角:border-radius 设置圆角半径
      • 取值:像素值、百分比
      • 用百分比是用宽和高分别计算
    • 盒阴影(阴影效果)
      • 属性:box-shadow
      • 取值:offsetX offsetY blur(spread) color
      • offsetX ,offsetY是偏移的距离,正负像素
      • blur是阴影的模糊程度,单位像素
      • spread:选填,设置阴影的延伸距离,根据x和y放大尺寸
      • color:默认颜色
      • inset:第一个元素可以设置 inset和outset
    • 网页坐标系:左上角0.0,右是X轴,下是Y轴
    • margin 特殊值 auto、负值
      • 取元素在父元素范围内的值
      • 可以计算水平平均值,自动居中
      • 取负值就是元素值的微调(元素之间换行在浏览器解析中会有一个空格,所以要么不换行,要么用负值来微调,但是不推荐微调)
    • 外边距合并问题 body
      • 垂直方向
        • 第一个子元素设置的margin-top作用域父元素上(设置顶部边框,或者添加padding-top:0,1px)
        • 同时设置margin外边距,取最大的
      • 水平方向
        • 行内元素对盒模型属性是部分支撑(比如宽高、上下边距不能设置)
        • 水平方向上,外边距会叠加显示
      • 具有默认外边距的元素:
      • body,h1,h2,h3,h4,h5,h6,p,ul,ol
    • 元素在文档中实际尺寸的计算
      • 属性:box-sizing
      • 取值:
        • content-box
          • 为元素设置的宽高(width/height)指定的是内容框的大小
          • width/height+border+padding+margin
        • border-box
          • 为元素设置的宽高指定的是包含边框在区域内的大小
          • 计算尺寸:width/height+margin

4.扩展延伸知识

  • CSS选择器参考手册
  • border

    • 由width style color组成
  • 文字对齐属性 text-align

    • center,left,right
  • css注释

    • /** **/
  • 单行文本所占高度:Line-height
    • 默认文字高度是16px
  • 首行缩进 text-indent
    • 单位一般为em
  • 设置文本 text-decoration

    • underline
    • overline
    • none
  • cursor:鼠标变化样式

    • help
    • resize
    • pointer
    • copy
  • * 通配符的权重

    • 通配符的权重是0,很适合全局样式
  • padding,margin,border的顺序

    • 因为左右等距的情况更多,所以要先左右
    • 四个值:上右下左 100 100 100 100
    • 三个值:上左下,左边距和右边距一致 100 100 200=> 100 100 200 100
    • 两个值:上下左右 100px 100px
  • 盒模型和盒子
    • 盒模型是带margin的
    • 盒子是不带margin的
  • 如何计算盒子的实际尺寸
  • HTML和body
    • body默认带8像素的margin
  • 层模型 定位 position
    • opacity设置div透明度
    • body的margin自带个像素
    • 定位很少选bottom
    • position属性:
      • 用relative当参照物,absolute当做定位技术
      • absolute属性:脱离原来位置进行定位,相对于最近的有定位属性的元素(position:absolute)进行定位,如果都没有,相对于body定位
      • relative属性:保留原来位置进行定位,相对于自己原来的位置进行定位
      • fixed属性:广告必备,跟absolute使用方法差不多,但是不随着滚动而移动
      • z-index 是设置层,默认是0
    • left,top,bottom,right

5.知识内容个人梳理

  • 带有inline属性中,都有一个文字特性,就是文字空格分隔
  • 网页在压缩中,会去掉空格,回车,样式会改变
  • 编程网页时候也讲究耦合度,先写css样式,在添加给html,模块化编程
  • 标签用来初始化样式,比如li的原点可以初始化为none
  • 边框和轮廓线
    • 边框是实际占位的,轮廓线并不占位

6.今天都复习了之前的什么内容


Ares个人进阶之路