CSS选择器
伪类选择器
- E:focus 设置元素获取焦点时的样式（一般用于表单元素）
<style>
input:focus::placeholder{
color: red;
}
</style>
<body>
<input type="text" placeholder="输入密码">
</body>
- E:checked 设置选中状态的E元素。（用于input type为radio与checkbox）
<style>
label{
background: oldlace;
}
input:checked+label{
background: deepskyblue;
}
</style>
<body>
<input id="l1" type="checkbox">
<label for="l1">开关</label>
</body>
- E:enabled 可用状态的E元素。（一般用于表单元素）
<style>
input:enabled{
background: firebrick;
}
</style>
<body>
<input type="button" value="按钮"/>
</body>
- E:disabled 选择每一个处于禁用状态的E元素 （一般用于表单元素）
<style>
input:disabled{
background: palegoldenrod;
}
</style>
<body>
<input type="button" value="按钮"/>
</body>
伪元素选择器
通过css代码向指定的元素内添加假的(html)中不存在的元素
- E:before/E:after 在目标元素E的前面/后面插入内容
- 需要与content一起使用，属性值可以为空”“，引号不可省略。例如content:”“;
清除浮动带来的影响常用，移动端解决一像素问题会用到
<style>
.div1{
width: 100px;
height: 100px;
background: springgreen;
}
.div1:before{
content: "before";
}
.div1:after{
content: "after";
}
</style>
<body>
<div class="div1"></div>
</body>
路径
- 绝对路径
- 是指带域名的文件的完整路径和磁盘中指定的文件的全部路径
- D:\2017\第16期\4.第四天\zhufeng\img\icon.png
- 相对路径
- 是指在同一个文件夹下，通过一个参考点找到其他文件 返回上一级 ../ 平级或者同级之间直接写文件名 下一级 /
HTML元素
块元素
block 特性
- 独占一行（多个块元素 上下排列）
- 可以设置width/height/padding（内间距）/margin（外间距）/border（边框）属性
- 在不设置宽高时，宽度继承父级，高度由本身内容决定
- 块级元素可以嵌套其他元素
- p标签不能嵌套p标签
- dt也不能嵌套其他标签
|标签名|描述|
|--|--|
|p|段落|
|h1-h6|标题|
|div|容器（大模块）|
|ul|无序列表|
|ol|有序列表|
|li|列表项|
|dl>dt dd|自定义列表|
|table|表格|
|form|表单|
行内元素
- 在一行显示，是从左向右排布
- 行内元素不能设置width（宽），height（高)
- 宽高由内容决定
- 编辑代码时行内元素出现回车或者空格时会出现文本分隔符（行内元素间出现间隙）
- 解决办法：
- 1.让元素间一行显示，没有空格。
- 2.为html设置font-size：0；（在开始的通配符选择器中）
- 行内元素不能嵌套块级元素
- a标签可以嵌套块级元素
- 基线对齐问题：
行内元素有哪些
标准inline特性
| 标签名 |
描述 |
| span |
容器（小） |
| a |
链接 |
| strong |
加粗，有强调作用 |
| b |
加粗，无强调作用 |
| em |
斜体，有强调作用 |
| i |
斜体，无强调 |
| label |
用于绑定input标签 |
inline-block特性（行内块）
- 一行显示（从左向右排布）
- 可以设置width/height/padding/margin/border
- 在编辑代码时，行内元素和行内块级元素出现换行或者回车时，会默认有间隙
- 基线对齐问题：vertical-align top
| 标签名 |
描述 |
| img |
图片 |
| input |
输入框 |
| textarea |
文本框 |
CSS 的display属性
- 作用：可以将元素转换成块（block）元素，行内元素（inline），行内块元素（inline-block）；
- display属性值
- block 块
- inline 行内块
- block-inline 行内块
- none 消失/隐藏
