这周学习了CSS 下面是我总结的知识点
语法
id 选择器
id 属性不要数字开头
class 选择器
组合选择符
后代选择器
后代选择器(以空格 分隔) 用于选取某元素的后代元素
子元素选择器(以大于 > 号分隔） 只能选择作为某元素后一级的元素
相邻兄弟选择器（以加号 + 分隔） 选择紧接在另一元素后一级的元素，且二者有相同父元素
普通兄弟选择器（以波浪号 ～ 分隔 选定所有指定元素之后的相邻兄弟元素
外部样式表，当样式需要应用到很多页面挺好。
内部样式表，当单个文档需要特殊的样式时挺好
背景
链接
链接的四个状态
a:link 正常，未访问过的链接
a:visited 用户已访问过的链接
a:hover 当用户鼠标放在链接上时
a:active 链接被点击的那一刻
text—decoration属性主要用于删除链接中的下划线
盒子
盒子封装周围的HTML元素，包括，边距，边框，填充，和实际内容
Margin外边距 清除边框外的区域 外边距是透明的。
Border边距 围绕在内边距和内容外的边框。
Padding内边距 清除内容周围的区域，内边距是透明的。
Content内容 盒子的内容，显示文本和图像
边框
border-style值
颜色
border-color值
name 指定颜色的名称
RGB 指定RGB值rgb（0，0，0）
单独设置各边
border-bottom 下
border-top 上
轮廓 outline 是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用
margin（外边距）
margin：25px 50px 75px 100px
上 右 下 左
margin：25px 50px 75px
上 左右 下
margin：25px 50px
上下 左右
padding 填充
分组选择器
尽量减少代码
嵌套选择器
尺寸
height 设置元素高度
line-height 设置行高
max-
min-
显示display 可见性 visibility
隐藏元素 display：none 可以隐藏某个元素，且隐藏的元素不会占用任何空间，该元素占用的空间也会从界面中消失
visibility：hidden 该元素虽然被隐藏，但是仍然会影响布局
内联inline和块block的转换
内联转块 display:block
块转内联 display:inline
position（定位）
static 没有默认值· 静态定位的元素不会受到top bottom left right影响
relative 相对定位元素是相对其正常位置
fixed 元素位置相对浏览器窗口是固定位置 即使窗口是滚动的它也不会移动 会和其他元素重叠
absolute 绝对定位的元素相对于最近的已定位父元素，如果没有，它的位置相当于<html> 会和其他元素重叠
sticky 粘性定位
指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。
重叠的元素
z-index指定了一个元素的堆叠顺序 可正可负
css布局Overflow 用于控制内容溢出元素框时显示的方式
浮动 元素的水平方向移动 Float
浮动元素之前的元素不会受到影响，浮动元素之后的元素将围绕它
清除浮动 clear：both
Css布局 水平&垂直对齐
居中对齐
margin：auto 若没有设置 width属性 居中对齐不起作用
文本居中
text-align：center
图片居中对齐
使用margin:auto 并将它放到块元素中
左右对齐
1.定位方式
position
2.float方式
float:right
如果子元素的高度大于父元素，且子元素设置了浮动，那么子元素将溢出，可以在父元素上添加 overflow: auto;
垂直对齐
垂直居中对齐
头部顶部用padding
垂直水平居中
padding和text-align:center
垂直居中
1.line-height
2.position tranform
多行文本垂直居中 vertical-align: middle
伪类
用来添加一些选择器的特殊效果
伪类语法
anchor伪类
first-child伪类来选择父元素的第一个子元素
lang伪类 可以为不同的语言定义特殊的规则。
：lang（开始值）
伪元素
:first-line为文本首行设置特殊样式 只能用于块级元素
:first-letter 为文本的首字母设置特殊样式 只能用于块级元素
:before 在元素的内容前面插入新内容
:after 在元素的内容后面插入新内容
导航栏
导航栏=链接列表
使用<ul>定义无序列表 使用
list-style-type-none 移除列表前的小标志
垂直导航栏
加上a元素的样式
激活当前导航条 可以添加active类来标准哪个选项被选中
水平导航栏
创建横向导航栏两种方法 inline内联 或float浮动
如果你想链接有相同的大小，你必须使用浮动的方法
CSS下拉菜单
HTML部分
我们可以使用任何HTML元素来打开下拉菜单，如<span> 或 a<button>元素
使用容器元素如<div>来创建下拉菜单的内容，并放在任何你想放的位置上
CSS部分
.dropdown 类使用 position:relative, 这将设置下拉菜单的内容放置在下拉按钮 (使用 position:absolute) 的右下角位置。
.dropdown-content 类中是实际的下拉菜单。默认是隐藏的，在鼠标移动到指定元素后会显示。 注意 min-width 的值设置为 160px。你可以随意修改它。 注意: 如果你想设置下拉内容与下拉按钮的宽度一致，可设置 width 为 100% ( overflow:auto 设置可以在小尺寸屏幕上滚动)。
我们使用 box-shadow 属性让下拉菜单看起来像一个"卡片"。
:hover 选择器用于在用户将鼠标移动到下拉按钮上时显示下拉菜单。
<>CSS提示工具Tooltip
HTML) 使用容器元素 (like <div>) 并添加 "tooltip" 类。在鼠标移动到 <div> 上时显示提示信息。
提示文本放在内联元素上(如 <span>) 并使用class="tooltiptext"。
CSS)tooltip 类使用 position:relative,
提示文本需要设置定位值 position:absolute。 注意: 接下来的实例会显示更多的定位效果。
tooltiptext 类用于实际的提示文本。模式是隐藏的，在鼠标移动到元素显示 。设置了一些宽度、背景色、字体色等样式。
CSS3 border-radius 属性用于为提示框添加圆角。
:hover 选择器用于在鼠标移动到到指定元素 <div> 上时显示的提示。
定位提示工具
top:数字px 同于定位在元素的中间，数字要跟提示文本的顶部和底部的内边距padding一致。
后加left
如果想显示在头部或底部 需要使用margin-left属性
添加箭头
:after和 content 属性为提示工具创建一个小箭头标志
详情看菜鸟教程https://www.runoob.com/css/css-tooltip.html。
淡入效果
使用tranfition 属性及opacity属性来实现
CSS图片廊
是否
网友评论