2019-07-15文本样式与盒子模型

作者: 啊_6424 | 来源:发表于2019-07-16 18:02 被阅读0次

开头的话：自我反思，发现当初学前端时觉得它超级简单，所以粗心大意，基础薄弱，现马上就要秋招了，重新巩固前端内容，祝自己秋招顺利。
在css里，存在样式继承，但不是所有的样式后代都能继承。

前面说到，学习css就是学习选择器和样式。选择器前面已经学过了，虽然很多，但常用的也就那么几个。下面，我们学习css的样式

不能被继承的样式：

所有与背景(background)相关的样式
边框相关的样式
定位相关的样式

文本标签及样式

em和strong：
可以一起使用也可以分开使用。
默认样式：em斜体，strong加粗。
语义：强调
em标签用于表示一段内容中的着重点（偏向于语气上面的强调）
strong标签表示一个1内容的重要性（偏向于内容的重要性）,比em强烈。
i标签和b标签：
默认样式：i斜体，b加粗。
无语义
h5规范中，规定，对于不需要着重的内容，只是单纯想加粗或者斜体的，可以使用这两个标签。
i标签现在多用来放矢量图icon
small标签：
标签中的内容会比父元素中的内容要小一些。
语义：细则一类的内容，比如合同中的小字，网站的版权声明。
cite标签
语义：对某内容的引用或参考。例如，戏剧、文章或图书的标题，歌曲、电影、照片或雕塑的名称等。
网页中所有使用书名号的内容都可以使用cite标签。
默认样式：斜体

    <p><cite>《七龙珠》</cite>讲的是召唤神龙的故事</p>

    <div>赵薇<sup><a href="#">[1]</a></sup></div>

    <p>今天，我们的老师真<ins>漂亮</ins></p>

我们一般结合code和pre标签，来表示一段代码

    <pre>
      <code>
        window.onload = function(){
          console.log("哈哈哈");
        }
      </code>
    </pre>

在css可以直接使用颜色的单词表示不同的颜色
也可以使用RGB值来表示不同的颜色
十六进制

font-family
中文 SimSun(宋体) SimHei(黑体) Microsoft YaHei(微软雅黑) STKaiti(华文楷体)
英文 Arial Georgia Helvetica sans-Serif（系统默认的）
字体颜色 color
英文单词/十六进制/rgb/ rgba
行高 line-height 可用于设置文字的垂直居中。上高 + 字体大小 + 下高
测量上面文字的顶端到下行文字的顶端
文本对齐方式 text-align 默认为左边对齐
首行缩进:text-indent
em代表一个字符 / 具体数值
文字着重
font-weight
即加粗
normol / bold / bolder100~900
文字倾斜
font-style
normol / italic /oblique
文本修饰
text-decoration
none / underline / overline / line-through
字母间距
letter-spacing
具体的数值
单词间距
word-spacing
单词间距（以空格为解析单位）
文本居中
text-align:center
元素居中
margin:0px auto;
margin:上下的值左右的值
auto 代表自动
文本垂直居中
1.div{
height:100px;
font:20xp/100px "字体格式";
}
字体格式必须设置，否则不起作用。
2.height:80px;
line-height:80px;
文字缩进
text-indent