CSS基础
1.CSS与HTML结合方式
2 CSS的使用
<head>
<style> .nav>a { color: red; }
</style> </head> <body> <div class="nav">
<a href="#">我是儿子</a> <p> <a href="#">我是孙子</a>
</p> </div> </body>
2.1.5后代选择器
概述：选择父元素里面子元素。
格式
写法就是外层标签写在前面，内标签写在后面，中间用空格分隔
元素1 元素2 { 样式声明 }
注意
- 元素1和元素2中间用空格隔开
- 元素1是父级，元素2是子级，最终选择的是元素2。
- 元素2可以是，也可以是孙子等，只要元素1的后代
- 元素1和元素2可以是任意基础选择器
2.1.6伪类选择器
可以对css选择器添加一些特殊的效果
属性列表：
- :active 向被激活的元素添加样式
- :hover 鼠标悬停，向元素添加样式
- :link 向未被访问的连接添加样式
- :visited 向已被访问的连接添加样式
- :first-child 向元素的第一个子元素添加样式
/* a是标签选择器 所有的链接*/ a { color: gray; } /* :hove 是链接伪类选择器 鼠标经过*/ a :hover { color:red; /*鼠标经过的时候，由原来的 灰色变成红色 */ }
注意事项：
- 为了确保生效，请按照LVHA的顺序声明：
:link， :visited ，: hover，:active。
- 记忆法：爱恨 love hate 或 lv包包 hao
- 因为 a 链接在浏览器的中具有默认样式，所以我们在实际工作中都要给链接单独指定样式。
2.1.7focus伪类选择器
用于选取获得焦点(光标)的表单元素
通常用于 类表单元素
3.css定位
1.块级元素block
- 定位情况：自上而下，垂直排列。可以改变宽高
特点：
- 总是从新行上开始（独自占一行）
- 可以对它设置宽高和内外边距，宽度默认是它容器（父级元素）的100%
- 可以容纳其他块级元素和行内元素（内联元素）
常见的块级元素
div，p，列表标签，form，h标签，table表格标签
2.行内元素 inline
定位详情：从左至右，水平排列，不能改变宽高
特点：
- 无法自动换行
- 设置宽高无效，默认宽高是其自身内容的宽高
- paddding可以设置,margin只能够设置水平方向的边距
- 只能容纳其他行内元素和文本
常见的行内级元素
a锚点标签，img图像标签，input输入框，span标签，b
3.行内块元素
- 通常是div来改造过来的
- 和相邻内块级元素在同一行
- 可以设置宽，高，行高，内外编剧
- 默认宽、高位其内容的宽高
3.3相对定位relative
是定位属性 postition中的属性值，
相对定位：相对于原位置的移动
例如
相对原位置向左移动30px，向下移动20px
#box_relative { position: relative; left: 30px; top: 20px; }
3.4 绝对定位absolute
也是定位属性 postition中的属性值，
本元素与已定位的祖先元素的距离（相对定位或绝对定位）
- 如果父级元素定位了，就以父级为参照物
- 如果父级没定位，找爷爷级，爷爷定位了，以爷爷为参照物
- 如果爷爷没定位，继续向上找，都没定位的话，body是最终选择。
3.5 固定定位sticky
也是定位属性 postition中的属性值，
特点
- 以浏览器的可视窗口为参照点移动元素
- 跟父元素没有任何关系也不随滚动条滚动
- 固定定位不在占有原先的位置。完全脱标状态
3.6 z-index
如果有重叠元素，使用z轴属性，定义上下层次
- z轴属性，要配合相对或绝对定位来使用
- z值没有额定数值
img { position:absolute; left:0px; top:0px; z-index:-1; }
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
