Table of Contents
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.今天都复习了之前的什么内容
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.今天都复习了之前的什么内容
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）
- 颜值进制值
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
- content-box
- 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.今天都复习了之前的什么内容
- 边框是实际占位的，轮廓线并不占位