内容概述

一. 盒子模型

理解盒子模型：4个基本属性

content
padding
border
margin

屏幕快照 2020-02-12 下午4.25.13.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个方向的边框

边框的形状可能是

矩形、梯形、三角形等形状

div {
  display: inline-block;
}

.box1 {
  width: 100px;
  height: 100px;
  background-color: #ffeaa7;
  border-top: 10px solid #fab1a0;
}

.box2 {
  width: 100px;
  height: 100px;
  background-color: #ffeaa7;
  border-top: 10px solid #fab1a0;
  border-left: 10px solid #6a89cc;
}

.box3 {
  border-top: 110px solid #fab1a0;
  border-left: 110px solid #6a89cc;
  width: 0;
  height: 0;
}

屏幕快照 2020-02-12 下午3.40.28.png

屏幕快照 2020-02-12 下午3.43.26.png

border实现其他效果

比如三角效果

.box1 {
  border-top: 100px solid #fab1a0;
  border-right: 100px solid #7bc4df;
  border-bottom: 100px solid #ffeaa7;
  border-left: 100px solid #8da5d8;
}

.box2 {
  border-top: 100px solid #fab1a0;
  border-left: 100px solid transparent;
  background-color: transparent;
  transform: rotate(45deg); 
}

.box3 {
  border-top: 100px solid #fab1a0;
  border-right: 100px solid transparent;
  border-bottom: 100px solid transparent;
  border-left: 100px solid transparent;
}

屏幕快照 2020-02-12 下午4.07.34.png

第三种写法是我自己想的，不需要像第二种那样旋转，方便理解

CSS属性 - `border---radius`

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用法类似
应用实例
- 调试技巧：查看网站的布局
  - outline: 1px solid red !important，outline不占空间，不会影响原布局，border会占据空间，导致格式变化
- 去除 a/input/textarea 元素的focus轮廓效果
  - outline: none

CSS属性 - box-shadow

box-shadow属性可以设置一个或者多个阴影
每个阴影用<shadow>表示
多个阴影之间用逗号,隔开，从前到后叠加
<shadow>的常见格式如下
- <shadow> = inset? && <length>{2,4} && <color>?，&&表示可以不按顺序
- 第1个<length>：水平方向的偏移，正数往右偏移
- 第2个<length>：垂直方向的偏移，正数往下偏移
- 第3个<length>：模糊半径（blur radius）
- 第4个<length>：延伸距离
- <color>：阴影的颜色，如果没有设置，就跟随color属性的颜色
- inset：外框阴影变成内框阴影（很少用到）
练习：
- 实现以下效果：左右都要有阴影
屏幕快照 2020-02-12 下午9.30.24.png

.shadow {
  margin: 50px auto;
  width: 300px;
  height: 400px;
  /* box-shadow: -10px 10px 5px, 10px 10px 10px; */
  box-shadow: 0 10px 10px 5px rgba(0, 0, 0, .2);
}

方法一：（注释起来的）设置两个阴影
方法二：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
屏幕快照 2020-02-12 下午8.38.03.png

元素的水平居中显示

在一些需求中，需要元素在父元素中水平居中显示（父元素一般都是块级元素、inline-block）
- 行内级元素、inline-block元素
  水平居中：在父元素中设置 text-align: center
- 块级元素
  水平居中：margin: 0 auto

实现元素靠左靠右

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

垂直居中

实现垂直居中父元素height必须是auto
https://www.w3.org/Style/Examples/007/center.zh_CN.html
可以用绝对定位实现

作业

课堂代码
作业一 - 商品列表 - 页码列表
作业二: 考拉的导航右侧

1577180164959.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

[note] CSS 盒模型|居中

[note] CSS 盒模型|居中

内容概述

一. 盒子模型

理解盒子模型：4个基本属性

content 内容相关属性

padding 内边距相关属性

margin 外边距相关属性

border

CSS属性 - `border---radius`

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

二、盒模型的其他属性

CSS属性 - outline

CSS属性 - box-shadow

CSS属性 - box-sizing

元素的水平居中显示

实现元素靠左靠右

垂直居中

作业

提问

[note] CSS 盒模型|居中

内容概述

一. 盒子模型

理解盒子模型：4个基本属性

content 内容相关属性

padding 内边距相关属性

margin 外边距相关属性

border

CSS属性 - border-*-*-radius

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

二、盒模型的其他属性

CSS属性 - outline

CSS属性 - box-shadow

CSS属性 - box-sizing

元素的水平居中显示

实现元素靠左靠右

垂直居中

作业

提问

CSS属性 - `border---radius`