- 行内与块元素
块元素:p h1 div header ul li
一般情况下,会在块元素中放行内元素,而不会在行内元素中放块元素
p元素中不能放任何块元素 特殊的存在
- 列表
定义列表:
<dl> | |
<!-- 下定义 --> | |
<dt>结构</dt> | |
<!-- 具体内容 --> | |
<dd>表示网页的结构</dd> | |
<dt>表现</dt> | |
<dd>对页面进行修饰</dd> | |
</dl> |
- 超链接
2: target属性:可以用来指定打开链接的位置 | |
可选值: | |
_self,表示在当前窗口中打开(默认值) | |
_blank,在新的一个新的页面中打开链接 | |
可以设置一个内联框架(iframe)的name属性值,链接将会在指定的内联框架中打开 |
<a href="./demo03.html" target="_self">链接03列表2</a> -->
1)若将超链接的href属性设置为#,点击超链接后,页面会发生跳转,跳转到页面顶部 |
<!-- 在开发中可以将#作为超链接的路径的占位符使用 -->
img这种元素属于替换元素(基于块和行内元素之间,具有两种元素的特点
关系选择器:
/* 4:选择下面所有的兄弟(前面的不选) | ||||||||
语法:兄~弟{} | ||||||||
例子:(不包括p)p~span */ | ||||||||
p ~ span { | ||||||||
background-color: tomato; | ||||||||
} | ||||||||
选择器的权重 | ||||||||
内联样式 1000 | ||||||||
id选择器 100 | ||||||||
类和伪类选择器 10 | ||||||||
元素选择器 1 | ||||||||
通配符、子选择器、相邻选择器等。如*、>、+ 0000 | ||||||||
继承的样式 没有优先级 | ||||||||
!important 最高优先级 | ||||||||
2:百分比 % | ||||||||
- 也可以将单位设置为一个百分比的形式, | ||||||||
这样浏览器将会根据其父元素的样式来计算该值 | ||||||||
- 使用百分比的好处是,当父元素的属性值发生变化时, | ||||||||
子元素也会按照比例发生改变 | ||||||||
- 在我们创建一个自适应的页面时,经常使用百分比作为单位 | ||||||||
em | ||||||||
- em和百分比类似,它是相对于当前元素的字体大小来计算的 | ||||||||
- 1em = 1font-size | ||||||||
浏览器默认字体大小是16px | ||||||||
- 使用em时,当字体大小发生改变时,em也会随之改变 | ||||||||
- 当设置字体相关的样式时,经常会使用em | ||||||||
rem | ||||||||
-rem是相对于根元素(html)的字体大小来计算的 | ||||||||
* 对于单行文本来说,可以将行高设置为和父元素的高度一致, | ||||||||
* 这样可以是单行文本在父元素中垂直居中 | ||||||||
letter-spacing可以指定字符间距
text-indent 设置首行缩进
text-overflow 文本溢出包含元素时发生的事情。 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
可选值: | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
clip 修剪文本。 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
ellipsis [i'lipsis] 显示省略符号来代表被修剪的文本。 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
*/ | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
width: 300px; | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
white-space: nowrap; | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
/* 裁剪多余 */ | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
overflow: hidden; | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
/* 多余部分设置省略号 */ | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
text-overflow: ellipsis; | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
}
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
:1:图文垂直对齐方式 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
2:图片三像素的问题 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
父元素如果不设置高,由图片撑开,此时图片的底部就会有三像素的空白 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
解决方式一:vertical-align属性值不为默认值 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
解决方式二:给图片转成块元素 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
解决方式三:给父元素设置font-size为0
垂直外边距的重叠:
<select name="列表名称" size="行数"> <option value="选项的值" selected="selected">…</option > <option value="选项的值">…</option > </select> | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
<input type="checkbox" name="interest" value="sports"/>运动
<input type="checkbox" name="interest" value="talk" checked />聊天
<input type="checkbox" name="interest" value="play"/>玩游戏
<input name="gen" type="radio" value="男" checked />男
<input name="gen" type="radio" value="女" />女
<textarea name="showText" cols="x"(行) rows="y"(列)>文本内容 </textarea >
<p>请输入数字:<input type="number" name="num" min="0" max="100" step="10"/></p>
<p><input type="file" name="files" />
<input type="submit" name="upload" value="上传" /></p>
<label for="id">标注的文本</label>
<input type="radio" name="gender" id="male"/>
<input name="name" type="text" value="张三" readonly>
<input type="submit " disabled value="保存" >
<p>请输入数字:<input type="range" name="range1" min="0" max="10" step="2"/></p>
::first-letter 表示第一个字母 | |
::first-line 表示第一行 | |
::selection 选中的内容 | |
::before 元素的开始位置 | |
::after 元素的结束位置 | |
before和after必须要结合content使用 * |