CSS基础样式
2018-12-13 本文已影响0人
我不信这样也重名
CSS继承
一、什么是CSS继承
CSS继承是指我们设置父级CSS样式时，父级及以下的子级都具有此属性。
二、不可继承的属性
-
display：规定元素应该生成的框的类型 - 文本属性：
vertical-align、text-decoration、text-shadow、white-space、unicode-bidi等 - 盒子模型属性：
width、height、margin等 - 背景属性：
background等 - 定位属性：
float、clear、position等 - 生成内容属性：
content等 - 轮廓样式属性：
outline等
8.页面样式属性：size等 - 声音样式属性：
pause等
三、有继承性的属性
- 字体属性：
font等 - 文本属性：
text-align、line-height等 - 元素可见性：
visibility - 布局属性：
border-spacing、list-style等 - 生成内容属性：
quotes - 光标属性：
cursor - 页面样式属性：
page、windows等 - 声音样式属性：
speak、volume、pitch等
四、所有元素可继承的属性
- 元素可见性：
visibility - 光标属性：
cursor
五、内联元素可继承的属性
- 字体属性：
font - 除
text-indent、text-align之外的文本属性
六、块级元素可继承的属性
-
text-indent、text-align
块级元素与行内元素
一、块级元素
一般占据整行，不能与其他元素并列。
能够设置宽高，默认为父级的100%。
只能出现在<body>内。
块级元素主要有：
-
<div>文档分区 -
<h1>~<h6>一级标题到六级标题 -
<p>段落 -
<hr>水平线 -
<pre>预格式化文本 -
<ul>无序列表 -
<ol>有序列表 -
<table>表格 -
<form>表单 -
<fieldset>表单元素分组 -
<output>表单输出 -
<header>页头 -
<footer>页尾 -
<section>分区或节 -
<atrical>文章内容 -
<aside>侧边栏 -
<address>联系方式信息 -
<audio>音频 -
<video>视频 -
<blockquote>块引用 -
<canvas>绘制图形 -
<dd>定义列表中定义条目描述 -
<dl>定义列表 -
<figure>图文信息组 -
<figcaption>图文信息组标题
二、行内元素
与其他行内元素并排。
不能设置宽高，默认为文字的宽度。
行内元素主要有：
-
<span>行内容器 -
<a>定义锚 -
<b>定义粗体 -
<i>定义斜体 -
<abbr>定义缩写 -
<acronym>定义取得首字母缩写 -
<cite>定义引用 -
<big>定义大号文本 -
<small>定义小号文本 -
<br>定义折行 -
<dfn>定义项目 -
<em>着重阅读 -
<strong>定义加强 -
<img>定义图片 -
<map>定义图像映射 -
<script>定义脚本 -
<sub>定义下标文本 -
<sup>定义上标文本 -
<button>定义按钮 -
<input>定义输入框 -
<label>定义界面中项目的标题
元素居中显示
- 块级元素
\\水平居中
div{
width: 600px;
margin: 0 auto
}
\\垂直居中
div{
margin:0 auto;
height:30px;
line-height:30px
}
- 行内元素
\\水平居中
div{
text-align: center;
}
\\垂直居中
div{
height:30px;
line-height:30px;
}
- inline-block元素对其父级元素采用行内元素方法居中
文本溢出“...”实现
- 单行文本
p{
overflow: hidden;
white-overflow: ellipsis;
white-space: nowarp;
}
- 多行文本
p{
display: -webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp: 3;
overflow: hidden;
}
CSS单位解析
- px：px就是pixel的缩写，意为像素。
- em：相对于父元素的font-size，具有继承的特点。如果自身定义了font-size按自身来计算（浏览器默认字体是16px），整个页面内1em不是一个固定的值。
- rem：相对于根元素html的 font-size。
- vw：viewpoint width的缩写，视窗宽度，1vw等于视窗宽度的1%。
- vh：viewpoint height的缩写，视窗高度，1vh等于视窗高度的1%。
- vm：相对于视窗的宽度或高度中较小的那个。其中最小的那个被均分为100单位的vm。
