【前端体系课】-- 元素定位
元素定位默认情况下，元素都是按照 normal flow, 从左到右、从上到下按顺序摆放好, 互相之间不存在层叠现象 在标准流中，可以使用 margin、 padding 对元素进行定位 其中 margin 还可以设置负数 缺点: 设置一个元素的 margin 或者 padding，通常会影响到标准流中其他元素的定位效果 不便于实现元素层叠的效果 如果我们希望一个元素可以跳出标准流, 单独的对某个元素进行定位 可以通过 position 属性来进行设置 常用取值有 5 个: static：默认值, 静态定位 relative：相对定位 absolute：绝对定位 fixed：固定定位 sticky：粘性定位 static 默认值 元素按照 normal flow 布局 left 、 right、 top、 bottom 没有任何作用 relative 元素按照 normal flow 布局 可以通过 left、 right、 top、 bottom 进行定位 定位参照对象是元素自己原来的位置 应用场景: 一般在不影响其他元素位置的前提下，对当前元素位置 ...
【前端体系课】-- 特殊图片
边框的形状border 主要是用来给盒子增加边框的, 但是在开发中我们也可以利用边框的特性来实现一些形状 假如我们将 border 宽度设置成 50px 如果进一步, 将另外三边的颜色去除 <style>.box { width: 100px; height: 100px; /* background-color: transparent; */ border: 50px solid transparent; /* border-right-color: blue; border-bottom-color: aqua; border-left-color: blueviolet; */ /* border-right-color: transparent; border-bottom-color: transparent; border-left-color: transparent; */ border-top-color: orange; box-sizing: border-box;}</style ...
【前端体系课】-- CSS结构伪类
:nth-child :nth-child (1): 是父元素中的第 1 个子元素 :nth-child (n): 所有子元素, n 可以取值 0, 1, 2, 3 … :nth-child (2n): 父元素中的第偶数个子元素 跟: nth-child (even) 同义 :nth-child (2n + 1): 父元素中的第奇数个子元素 跟: nth-child (odd) 同义 :nth-child (-n + 2): 代表前 2 个子元素 <style> ul li:nth-child(3) { /*color: red;*/ font-size: 10px; } /* 0, 1, 2, 3, 4, 5...... */ ul li:nth-child(2n) { color: green; } ul li:nth-child(2n + 1) { color: blue; } /*四个一组:橘色/紫色/红色/ ...
【前端体系课】-- HTML高级元素
列表HTML 提供了 3 组常用的用来展示列表的元素 有序列表： ol、 li 无序列表： ul、 li 定义列表： dl、 dt、 dd 有序列表 – ol – liol（ordered list） 有序列表，直接子元素只能是 li li（list item） 列表中的每一项 浏览器会自动添加 CSS 属性: 无序列表 – ul - liul（unordered list） 无序列表，直接子元素只能是 li 定义列表 – dl – dt - dddl（definition list） 定义列表，直接子元素只能是 dt、 dd dt（definition term） term 是项的意思, 列表中每一项的项目名 dd（definition description） 列表中每一项的具体描述，是对 dt 的描述、解释、补充 一个 dt 后面一般紧跟着 1 个或者多个 dd 一般开发时会首先重置默认属性 ol, li { padding: 0; margin: 0; list-style: none;}---------- ...
【前端体系课】-- CSS属性-背景
在开发中, 为了让网页更加美观, 我们经常会设置各种各样的背景 background-image设置元素的背景图片 会盖在 (不是覆盖) background-color 的上面 注意: 如果设置了多张图片设置的第一张图片将显示在最上面，其他图片按顺序层叠在下面 注意： 如果设置了背景图片后，元素没有具体的宽高，背景图片是不会显示出来的 background-repeat设置背景图片是否要平铺 常见的值有: repeat：平铺 no-repeat：不平铺 repeat-x：只在水平方向平铺 repeat-y：只在垂直平方向平铺 background-size设置背景图片的大小 常见的值有: auto：默认值, 以背景图本身大小显示 cover：缩放背景图，以完全覆盖铺满元素, 可能背景图片部分看不见 contain：缩放背景图，宽度或者高度铺满元素，但是图片保持宽高比 <percentage>：百分比，相对于背景区（background positioning area） length：具体的大小，比如 100px background-positi ...
【前端体系课】-- CSS盒子模型
我们可以把 HTML 每一个元素看出一个个的盒子, 可以具备这 4 个属性 内容（content）: 元素的内容 width/height 内边距（padding）: 元素和内容之间的间距 边框（border）: 元素自己的边框 外边距（margin）: 元素和其他元素之间的间距 盒子有四边, 所以 margin/padding/border 都包括 top/right/bottom/left 四个边: 在浏览器的开发工具中: content设置内容可以通过宽度和高度设置 宽度设置: width 高度设置: height 对于行内级非替换元素来说, 设置宽高是无效的! 还可以设置最大最小属性: min-width： 最小宽度，无论内容多少，宽度都大于或等于 min-width max-width： 最大宽度，无论内容多少，宽度都小于或等于 max-width 移动端适配时, 可以设置最大宽度和最小宽度; padding用于设置盒子的内边距, 通常用于设置边框和内容之间的间距 padding 包括 ...
【前端体系课】-- CSS属性的特性
继承CSS 的某些属性具有继承性 (Inherited): 如果一个属性具备继承性, 那么在该元素上设置后, 它的后代元素都可以继承这个属性; 如果后代元素自己有设置该属性, 那么优先使用后代元素自己的属性 (不管继承过来的属性权重多高); 如何知道一个属性是否具有继承性呢? 常见的 font-size/font-family/font-weight/line-height/color/text-align 都具有继承性; 查阅文档, 文档中每个属性都有标明其继承性 注意:继承过来的是计算值, 而不是设置值 常见的继承属性: 层叠CSS 的翻译是层叠样式表 对于一个元素来说, 相同一个属性我们可以通过不同的选择器给它进行多次设置; 那么属性会被一层层覆盖上去, 但是最终只有一个会生效 哪一个会生效呢? 判断一: 选择器的权重, 权重大的生效, 根据权重可以判断出优先级; 判断二: 先后顺序, 权重相同时, 后面设置的生效; 权重: ! important： 10000 内联样式： 1000 id 选择器 ...
【前端体系课】-- CSS选择器
开发中经常需要找到特定的网页元素进行设置样式 CSS 选择器就是按照一定的规则选出符合条件的元素，为之添加 CSS 样式 分类: 通用选择器（universal selector） 元素选择器（type selectors） 类选择器（class selectors） id 选择器（id selectors） 属性选择器（attribute selectors） 组合（combinators） 伪类（pseudo-classes） 伪元素（pseudo-elements） 通用选择器所有的元素都会被选中; 星号 * 一般用来给所有元素作一些通用性的设置 比如内边距、外边距; 比如重置一些内容; 浏览区会遍历所有的元素 (包含没用到的) 并设置值效率比较低，尽量不要使用; 简单选择器开发中用的最多的选择器 元素选择器（type selectors） , 使用元素的名称; 类选择器（class selectors） , 使用 . 类名 ; id选择器（id selectors） , 使用 #id; id 注意事项: id 值如果由多个 ...
【前端体系课】-- CSS属性-字体
font-size设置文字的大小 常用的设置: 具体数值+单位 比如 100px 也可以使用 em 单位 (不推荐)： 1em 代表 100%， 2em 代表 200%， 0.5em 代表 50% 百分比 基于父元素的 font-size 计算，比如 50%表示等于父元素 font-size 的一半 font-family设置文字的字体名称(一般仅设置一次) 可以设置 1 个或者多个字体名称; 浏览器会选择列表中第一个该计算机上有安装的字体; 或者是通过 @font-face 指定的可以直接下载网络上的字体。 font-weight设置文字的粗细（重量） 常见的取值: 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 ： 每一个数字表示一个重量 normal：等于 400 bold：等于 700 strong、 b、 h1~h6 等标签的 font-weight 默认就是 bold font-style设置文字的常规、斜体显示 常见取值: normal：常规显示 italic (斜体)：用字体的 ...
【前端体系课】-- CSS属性-文本
text-decoration用于设置文字的装饰线 常见取值: none： 无任何装饰线, 可以去除 a 元素默认的下划线 underline： 下划线 overline： 上划线 line-through： 中划线（删除线） a 元素默认有下划线的本质是被添加了 text-decoration 属性 text-transform用于设置文字的大小写转换 常见的值: capitalize： (使…首字母大写, 资本化的意思) 将每个单词的首字符变为大写 uppercase： (大写字母) 将每个单词的所有字符变为大写 lowercase： (小写字母) 将每个单词的所有字符变为小写 none：没有任何影响 实际开发中用JavaScript代码转化的更多 text-indent用于设置第一行内容的缩进 text-indent: 32px; 是缩进 32 个像素 text-indent: 2em; 刚好是缩进 2 倍文字 (继承自上面字体大小的设置) text-align设置文本 (包含图片, 输入框等) 的对齐方式 MDN: 定义行内内容（例如文字）如何相对它的块父 ...